ApolloClientについて

 httpLink = new HttpLink({
	uri: process.env.ENDPOINT,
	credentials: 'include', // => ココ
	headers: {
		authorization: `Bearer ${authToken}`,
	},
});

credentials　について

credentials は、Apollo ClientのHttpLinkオブジェクトの設定の1つです。このオプションは、リクエストを送信する際にどのようにクッキーや認証情報を扱うかを指定するために使用されます。

credentialsには、以下の3つの値が指定できます：

1. "omit": デフォルト設定で、クッキーや認証情報をリクエストに含めません。サードパーティCookieなど、何も含めずにリクエストを送信します。これは、CORS（Cross-Origin Resource Sharing）で一般的に使用される設定です。

2. "same-origin": リクエストを送信するページと同じオリジン（同じドメイン、プロトコル、ポート）の場合に、クッキーや認証情報をリクエストに含めます。異なるオリジンへのリクエストでは、これらの情報は含まれません。これは、セッションを維持するために同じオリジンに対して認証情報を送信したい場合に使用されます。

3. "include": 常にクッキーや認証情報をリクエストに含めます。ページが異なるオリジンでも、クッキーを送信して認証されたリクエストを行いたい場合に使用されます。

上記のコードでは、credentialsを'include'として設定しています。これにより、常にクッキーや認証情報がリクエストに含まれるため、認証済みのリクエストが行われることになります。具体的には、authorizationヘッダーに${authToken}で指定されたBearerトークンを含めてリクエストを送信します。サーバーがこのトークンを使用してユーザーを認証し、適切なデータを返すことが期待されます。

ApolloLink

const link = ApolloLink.from([errorLink, httpLink]);

const apolloClient = new ApolloClient({
	ssrMode: typeof window === 'undefined',
	link,
	cache: new InMemoryCache(),
});

このコードは、Apollo Clientを設定してGraphQL APIと通信するためのセットアップを行っています。以下でコードの各部分を解説します：

1. ApolloLink.from([errorLink, httpLink]): ApolloLinkは、Apollo ClientがGraphQLエンドポイントとの通信を処理するための柔軟な方法を提供するための仕組みです。このコードでは、ApolloLink.fromを使用して、2つの異なるApolloLinkオブジェクトを組み合わせて新しいリンクを作成しています。

   • errorLink: これは、GraphQLエラーのハンドリングを行うためのカスタムリンクです。例えば、サーバーからエラーレスポンスが返ってきた場合に、エラーを適切に処理してアプリケーションに反映することができます。

   • httpLink: これは、実際にGraphQLクエリをGraphQLサーバーに送信するためのリンクです。HttpLinkは、リクエストをHTTP POSTリクエストとして送信するために使用されます。先ほどの回答で説明したように、このリンクにはcredentialsとして'include'が設定されており、認証情報（Bearerトークン）を含めたリクエストを送信します。

2. const apolloClient = new ApolloClient({ ... });: これは、Apollo Clientのインスタンスを作成しています。Apollo Clientは、GraphQLクエリを実行し、データを取得するためのクライアントライブラリです。

   • ssrMode: typeof window === 'undefined': このオプションは、サーバーサイドレンダリング（SSR）モードを指定します。typeof window === 'undefined'という条件を使用しています。これは、ブラウザ環境ではなく、サーバー環境で動作している場合にssrModeを有効にするためのものです。SSRモードでは、クライアントとサーバーの両方でGraphQLクエリが実行されるため、データの初期化が適切に行われます。

   • link: 一つ目のステップで作成したApolloLinkを指定しています。これにより、エラーハンドリングとGraphQLエンドポイントへの通信が連鎖的に実行されます。

   • cache: new InMemoryCache(): Apollo Clientが返ってきたデータをキャッシュするための設定です。InMemoryCacheはApollo Clientのデフォルトのキャッシュ実装であり、GraphQLの結果をメモリ内に格納して再利用することで、クエリのパフォーマンスを向上させます。

このようにして、apolloClientを作成することで、GraphQLクエリの実行、エラーハンドリング、キャッシングなどが統合的に行えるようになります。アプリケーションでは、このapolloClientを使用してGraphQLデータの取得や更新などを行うことができます。