ApolloClient でカスタムフェッチを使う

いっつも書き方を調べてるのでここにメモを残しておく。

import { StrictMode } from 'react';
import { createRoot } from 'react-dom/client';
import App from './App.tsx';
import {
  ApolloClient,
  InMemoryCache,
  ApolloProvider,
  HttpLink,
  from,
} from '@apollo/client';

const uri = 'https://flyby-router-demo.herokuapp.com/';
const client = new ApolloClient({
  uri,
  cache: new InMemoryCache(),
  link: from([
    new HttpLink({
      // ↓ここでカスタムフェッチを実装する
      fetch: async (uri, options) => {
        await new Promise((r) => setTimeout(r, 1000));
        return fetch(uri, options);
      },
    }),
  ]),
});

createRoot(document.getElementById('root')!).render(
  <StrictMode>
    <ApolloProvider client={client}>
      <App />
    </ApolloProvider>
  </StrictMode>,
);

結論: link の部分を追加すればよい。

link のとこをコメントアウトすれば普通の状態に戻せる。

ちなみに urql の場合は fetch オプションがあるのでもっと簡単。

const client = new Client({
  url,
  exchanges: [cacheExchange, fetchExchange],
  fetch: async (...args) => {
    await new Promise((r) => setTimeout(r, 1000));
    return fetch(...args);
  },
});