Apollo Client の ApolloLink チェーンで HTTP リクエストをカスタマイズする

const apolloClient = new ApolloClient({
  uri: 'http://localhost:8080/graphql',
  headers: {Authorization: 'Bearer abc123'},
  cache: new InMemoryCache(),
})

import { ApolloClient, ApolloLink, from, HttpLink, InMemoryCache } from '@apollo/client'

// 1 つ目の Link オブジェクト（実装は空っぽ）
const link1 = new ApolloLink((operation, forward) => {
  return forward(operation)
})

// 2 つ目の Link オブジェクト（実装は空っぽ）
const link2 = new ApolloLink((operation, forward) => {
  return forward(operation)
})

// 3 つ目の Link オブジェクト（末端の teminating link）
const httpLink = new HttpLink({
  uri: 'http://localhost:4000/graphql',
})

// 上記 3 つの Link オブジェクトを連結して Link チェーンを作成
const linkChain = from([link1, link2, httpLink])
// 次のようにも記述できるけど、3 つ以上連結する場合は from を使った方が楽
// const linkChain = link1.concat(link2).concat(httpLink)

const apolloClient = new ApolloClient({
  link: linkChain,
  cache: new InMemoryCache(),
})

const dumpOperationNameLink = new ApolloLink((operation, forward) => {
  // ここで任意の処理を行う
  console.log(`operationName = ${operation.operationName}`)

  // 次の Link オブジェクトへ処理をつなぐ
  return forward(operation)
})

class DumpOperationNameLink extends ApolloLink {
  request(operation: Operation, forward: NextLink): Observable<FetchResult> {
    console.log(`operationName = ${operation.operationName}`)
    return forward(operation)
  }
}

// 使用例
const linkChain = new DumpOperationNameLink().concat(httpLink)

const dumpQueryLink = new ApolloLink((operation, forward) => {
  const jsonText = JSON.stringify(operation, undefined, 2)
  console.log(jsonText)
  return forward(operation)
})

/**
 * GraphQL の操作 (operation name) ごとに呼び出し回数を保持し、
 * コンソールに出力する ApolloLink 実装です。
 */
class OperationCounterLink extends ApolloLink {
  private counters: { [operationName: string]: number }

  constructor() {
    super()
    this.counters = {}
  }

  request(operation: Operation, forward: NextLink): Observable<FetchResult> {
    this.incCount(operation.operationName || 'ANONYMOUS_OPERATION')
    console.log(JSON.stringify(this.counters, undefined, 2))
    return forward(operation)
  }

  private incCount(operationName: string) {
    let prev = this.counters[operationName]
    if (prev == undefined) prev = 0
    this.counters[operationName] = prev + 1
  }
}

const roundTripLink = new ApolloLink((operation, forward) => {
  // リクエスト時に現在時刻をコンテキストに保存
  operation.setContext({ start: new Date().getMilliseconds() })

  // レスポンス時にラウンドトリップタイムを出力
  return forward(operation).map((data) => {
    const time = new Date().getMilliseconds() - operation.getContext().start
    console.log(
      `Operation ${operation.operationName} took ${time} ms to complete`
    )
    return data
  })
})

const authLink = new ApolloLink((operation, forward) => {
  // Get the access token from local storage if it exists
  const token = localStorage.getItem('ACCESS_TOKEN')

  // Return the headers to the context so httpLink can read them
  operation.setContext({
    headers: {
      ...operation.getContext().headers,
      authorization: token ? `Bearer ${token}` : '',
    },
  })

  return forward(operation)
})

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

const authLink = setContext((_, prevContext) => {
  const token = localStorage.getItem('ACCESS_TOKEN')
  const { headers } = prevContext

  return {
    headers: {
      ...headers,
      authorization: token ? `Bearer ${token}` : '',
    },
  }
})

// アクセストークンを非同期で取得する関数（1 秒待つフェイク実装）
async function getToken(): Promise<string> {
  return new Promise<string>((resolve) => {
    setTimeout(() => { resolve('FAKE_TOKEN') }, 1000)
  })
}

const authLink = setContext(async (_, prevContext) => {
  const token = await getToken()  // 非同期関数を呼ぶことが可能
  const { headers } = prevContext
  return {
    headers: { ...headers, authorization: `Bearer ${token}` },
  }
})

// エンドポイントの URI を動的に構築するための関数（のインタフェース）
export interface UriFunction {
  (operation: Operation): string;
}

export interface Operation {
  query: DocumentNode;
  variables: Record<string, any>;
  operationName: string;
  extensions: Record<string, any>;
  setContext: (context: Record<string, any>) => Record<string, any>;
  getContext: () => Record<string, any>;
}

// 動的に GraphQL API エンドポイントを決定する関数
const getEndpointUrl: UriFunction = () => {
  // 通常、エンドポイント情報は localStorage などで管理するが、ここではランダムに切り替え
  return Math.random() > 0.5 ? 'http://localhost:3000/graphql' : 'https://example.com/graphql'
}

// 上記の UriFunction 実装の参照を、ApolloClient か HttpLink の uri プロパティで指定すれば OK
const apolloClient = new ApolloClient({
  uri: getEndPointUri,  // 関数の参照を設定することに注意（関数を呼び出さないこと）
  cache: new InMemoryCache(),
})

import { useApolloClient } from '@apollo/client'

// コンポーネントの中で ApolloClient インスタンスを取得
const apolloClient = useApolloClient()

// エンドポイント切り替えのタイミングでキャッシュをクリア
apolloClient.cache.reset()