ReactでのApollo Clientセットアップ

@apollo/clientとgraphqlをインストールします。graphqlパッケージは、gqlテンプレートタグでクエリドキュメントを解析するためにApollo Clientが必要とするpeer依存関係です。

TypeScriptプロジェクトでは、どちらのパッケージにも独自の型定義が含まれているため、@typesパッケージは必要ありません。

キャッシュとリンクを指定してApolloClientをインスタンス化します。最もシンプルな設定は、new ApolloClient({ cache: new InMemoryCache(), uri: '/graphql' }) です。uriの省略記法を使うと、内部でHttpLinkが作成されます。

より細かく制御する場合は、リンクチェーンを手動で構築し、uriではなくlinkオプションに渡します。

clientプロパティを指定したApolloProviderでReactアプリケーションをラップします: ApolloProvider client={client}。これにより、Reactコンテキストを介して、すべての子孫コンポーネントからApollo Clientインスタンスを利用できるようになります。

コンポーネントツリー内のすべてのuseQueryとuseMutationの呼び出しは、プロパティのバケツリレーなしで自動的にこのクライアントを使用します。

InMemoryCacheはApollo Clientのデフォルトキャッシュです。取得したデータを型とIDで正規化し、各エンティティを一意のキャッシュキー（例: User:1）で保存します。いずれかのクエリがUser:1を取得すると、そのエンティティを後から読み取るすべての処理で更新されたデータを受け取れます。

この正規化により、1つのMutationでユーザーを更新すると、そのユーザーを含むすべてのクエリ結果が、追加のコードなしで自動的に更新されます。

HttpLinkは、Apollo ClientからGraphQLサーバーへのHTTPトランスポートを処理します。uriを指定し、必要に応じてfetch、headers、credentialsも設定します。

高度な用途では、リンクを分割して異なる操作を別々のエンドポイントにルーティングできます。SubscriptionはWebSocket（WebSocketLink）で、クエリとMutationはHTTP（HttpLink）で送信します。

@apollo/client/link/contextからsetContextをインポートします。認証リンクを作成します: const authLink = setContext((_, { headers }) => ({ headers: { ...headers, authorization: 'Bearer ' + getToken() } }))。HttpLinkの前にチェーンします: authLink.concat(httpLink)。

setContextリンクは各リクエストの前に実行され、すべての操作に認証ヘッダーを動的に追加します。

ApolloLink.from([authLink, errorLink, httpLink])またはauthLink.concat(httpLink)を使ってリンクを構成します。リンクはミドルウェアであり、それぞれのリンクが操作を処理してnext()に渡します。チェーンの最後のリンクが実際のHTTPリクエストを送信します。

一般的なチェーンは、auth link（ヘッダーを追加）+ error link（エラーを処理）+ HTTP link（リクエストを送信）です。

@apollo/client/link/errorからonErrorをインポートします。エラーリンクはGraphQLエラーとネットワークエラーをグローバルにインターセプトします。UNAUTHENTICATEDエラーが発生したときにログインページへリダイレクトしたり、ネットワーク障害時にグローバルなエラートーストを表示したりするために使用します。

エラーリンクはチェーン内でHTTPリンクより前に配置する必要がありますが、forward(operation)を呼び出してリクエストを再試行できます。

cache-first（デフォルト）: キャッシュされたデータをすぐに返し、古い場合はバックグラウンドで再フェッチします。network-only: 常にサーバーから取得し、キャッシュを更新します。cache-and-network: キャッシュをすぐに返すと同時に取得も行い、レスポンスが到着したらUIを更新します。cache-only: キャッシュからのみ読み取り、キャッシュされていなければエラーにします。no-cache: 常に取得しますが、キャッシュには一切書き込みません。

データの鮮度要件に基づいて選択してください。ダッシュボードではcache-and-networkが、ユーザープロフィールのフォームではnetwork-onlyがよく使われます。

InMemoryCacheのdefaultOptionsでデフォルトのfetchPolicyを設定します: new ApolloClient({ defaultOptions: { watchQuery: { fetchPolicy: 'cache-and-network' } } })。個々のuseQuery呼び出しでは、クエリごとにこれを上書きできます。

適切なグローバルデフォルトを設定すると、すべてのフック呼び出しでfetchPolicyを指定する定型コードを減らせます。

Apollo Client DevToolsのブラウザー拡張機能は、Chrome DevToolsにApolloパネルを追加します。キャッシュされたすべてのクエリと現在のデータを表示し、正規化キャッシュを調査できるほか、DevToolsパネルからクエリを再実行できます。

Chrome Web Storeからインストールし、devtools: { enabled: true }でクライアントを初期化します（開発モードではデフォルトで有効です）。

チェックerrorLinkは、httpLinkとの相対的な位置関係でどこに配置すべきですか？

@apollo/clientとgraphqlをインストールし、InMemoryCacheとリンクチェーンを使ってApolloClientを作成し、ApolloProviderでアプリケーションをラップします。リンクチェーンは、authLink（トークンを追加）、errorLink（グローバルなエラー処理）、httpLink（HTTPトランスポート）で構成します。フェッチポリシーはキャッシュとネットワークのどちらを優先するかを制御し、InMemoryCacheは型とID（type+id）でエンティティを正規化します。

Apollo DevToolsのブラウザー拡張機能を使うと、キャッシュの調査とデバッグを簡単に行えます。