Next.jsでGraphQLクライアントを使うときにApolloClientを使っているのですが、一生キャッシュが効いてしまう。

Next.js + ApolloClientでキャッシュ設定をしている記事がなかったので共有です。

長すぎて読めない人へ

• ApolloClientはHTTPLinkを介して、fetchを使っている

• Next.jsにはfetchを拡張しており、{ next: { revalidate: number } }を設定すると(number)秒間キャッシュできる
• HTTPLinkに秒間キャッシュ設定をするといい！

コード

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

const link = new HttpLink({
  uri: "http://localhost:4000/graphql",
  fetchOptions: { next: { revalidate: 10 } }, // 10秒で新しくfetchする
});

new ApolloClient({
    cache: new InMemoryCache(),
    link: link
})

長すぎて書けない。

以上です。

参考

https://www.apollographql.com/docs/react/api/link/apollo-link-http

https://nextjs.org/docs/app/api-reference/functions/fetch#optionsnextrevalidate