Next.js caches GraphQL API requests using fetch

[akash3444]

Link to the code that reproduces this issue

https://github.com/akash3444/hashnode-clone

To Reproduce

1. Start the application in development/production or go to the Production App.
2. Go to the home page.
3. Scroll to the Top Commenters section in the sidebar.
4. You can see the list of top commenters with the following status.
5. If the current user is following it should display the check icon.
6. Login using access token 152583c5-71a6-4481-94b0-7d64e771d453.
7. The user is following the top commenter Matikiri NET. But, I'm seeing the cached result which displays that I'm not following that user.

Current vs. Expected behavior

Current Behavior: Next.js caches the GraphQL API results and displays the same result everytime. Using cache no-store and revalidate 0 also does not work. The only way to prevent that API from being cached is to pass a parameter with the random value each time to the API.

Expected Behavior: It should not cache the GraphQL API as I'm already passing { cache: 'no-store' } to the fetch API options.

Provide environment information

Operating System:
  Platform: darwin
  Arch: arm64
  Version: Darwin Kernel Version 23.4.0: Fri Mar 15 00:19:22 PDT 2024; root:xnu-10063.101.17~1/RELEASE_ARM64_T8112
Binaries:
  Node: 20.9.0
  npm: 10.5.0
  Yarn: 1.22.21
  pnpm: 8.14.1
Relevant Packages:
  next: 14.1.3
  eslint-config-next: 14.1.3
  react: 18.2.0
  react-dom: 18.2.0
  typescript: 5.4.2
Next.js Config:
  output: N/A

Which area(s) are affected? (Select all that apply)

Not sure

Which stage(s) are affected? (Select all that apply)

next dev (local), next build (local), next start (local), Vercel (Deployed)

Additional context

No response

[alexhawkins]

Seeing the same. Strange

[akash3444]

I'm going with a workaround until we find a proper solution to this issue. I have created a function that returns a GraphQL endpoint with the random id as the value of a query parameter. This solves the issue and always returns the latest result.

export const getGraphQlEndpoint = () => `${process.env.NEXT_PUBLIC_GRAPHQL_API_URL}?id=${new Date().valueOf()}`;

[bitttttten]

You can customise this with the revalidate option: https://nextjs.org/docs/app/api-reference/functions/fetch#optionsnextrevalidate. You could set it to 0 which means no cache, which is what you want.

[akash3444]

@bitttttten I tried that too. But, it does not seem to work.

[eliawk]

folllow