Apollo Link

gpt-5.icon

HTTP 通信の前後でリクエストやレスポンスを自由に拡張・変換できるのが特徴です。

🔧 基本概念

Apollo Link は、「リクエストの流れを関数チェーンとして表現する」仕組みです。

たとえば次のような処理を組み合わせて、GraphQL のリクエスト処理を構築します。

code:_

GraphQL Request

↓

Apollo Link Chain

↓

HTTP Request

↓

GraphQL Response

↓

Apollo Link Chain（レスポンス処理）

↓

Result

この「チェーン」を構成する各パーツが Link です。

🧩 よく使われる Link の種類

最も基本的な Link。

GraphQL サーバーへの HTTP 通信を担当します。

code:ts

import { HttpLink } from '@apollo/client';

const httpLink = new HttpLink({ uri: '/graphql' });

複数の Link を配列で組み合わせて、リクエストチェーンを構築します。

code:ts

import { ApolloLink, from } from '@apollo/client';

import { onError } from '@apollo/client/link/error';

import { HttpLink } from '@apollo/client';

const errorLink = onError(({ graphQLErrors, networkError }) => {

if (graphQLErrors) console.error(graphQLErrors);

if (networkError) console.error(networkError);

});

const authLink = new ApolloLink((operation, forward) => {

operation.setContext(({ headers }) => ({

headers: {

...headers,

authorization: localStorage.getItem('token') || '',

},

}));

return forward(operation);

});

上の例では、

1. エラーハンドリング

2. 認証ヘッダ付与

3. HTTP リクエスト

の順にパイプラインを構成しています。

Apollo が提供する公式のエラーハンドリング Link。

HTTP・GraphQL 両方のエラーをキャッチして処理できます。

code:ts

import { onError } from '@apollo/client/link/error';

const errorLink = onError(({ graphQLErrors, networkError }) => {

if (networkError) console.error('Network error:', networkError);

});

ヘッダ設定やコンテキスト付与に便利です。

code:ts

import { setContext } from '@apollo/client/link/context';

const authLink = setContext((_, { headers }) => {

const token = localStorage.getItem('token');

return {

headers: {

...headers,

},

};

});

🔄 Link の流れをイメージで

code:ts

const link = from([

errorLink, // 1. エラーハンドリング

authLink, // 2. 認証ヘッダ付与

httpLink, // 3. HTTP通信

]);

GraphQL のリクエストがこの順に「前から後ろへ」流れ、

レスポンスは「後ろから前へ」戻ります（middleware → afterware のような構造）。

💡 使いどころ・応用例

認証トークンの付与や更新

リクエストロギング

リトライやバックオフ処理

SSR 環境での Cookie 付与

GraphQL Subscriptions (WebSocketLink) の併用

code:ts

import { split } from '@apollo/client';

import { WebSocketLink } from '@apollo/client/link/ws';

import { getMainDefinition } from '@apollo/client/utilities';

const wsLink = new WebSocketLink({ uri: 'ws://localhost:4000/graphql' });

const httpLink = new HttpLink({ uri: '/graphql' });

const splitLink = split(

({ query }) => {

const def = getMainDefinition(query);

return def.kind === 'OperationDefinition' && def.operation === 'subscription';

},

wsLink,

httpLink,

);