Issue with useSuspenseQuery in Next.js Client Component: Duplicate Queries on Server and Client

[ziyaDev]

Issue Description:

I'm currently utilizing useSuspenseQuery in a Next.js client component to fetch data from my GraphQL server. However, I noticed that the query is being executed both on the server-side during SSR (Server-Side Rendering) and again on the client-side, resulting in duplicate queries. This behavior is not ideal as it can lead to unnecessary network requests and potential performance degradation.

Ideally, I would like to ensure that useSuspenseQuery only executes the query after hydration on the client, thus avoiding duplicate queries and optimizing the data fetching process.

I believe it would be beneficial to have a mechanism or best practice documentation on how to ensure that useSuspenseQuery only triggers data fetching after hydration on the client-side in a Next.js application. This could help users like myself avoid duplicate queries and improve overall application performance.

"use client"
...

const AvrOrders= ()=>{
  const { data, error} = useSuspenseQuery(
     AVERAGE_ORDERS,{
    variables: {
      time: {
        type: TimeStampType.Month,
      },
    },
  });

.....

}

[phryneas]

Hi @ziyaDev,

a model of "don't fetch on the server, fetch on the client" is impossible - useSuspenseQuery has an api that is designed in a way that it has to return data, so if we would not fetch on the server, that component could just never finish rendering.

But what is possible is "fetch on the server, don't fetch on the client" - this way round you also get a lot nicer SSR result.

Currently, this is something that we cannot natively support with @apollo/client, as React itself is lacking the primitives to support this in a "framework-agnostic" way - we have to rely on Next.js-specific APIs to make this work.
As a result, you have to use the @apollo/experimental-nextjs-app-support with Next.js, which will set up everything you need for that kind of SSR to work.
The App router is not supported by @apollo/client alone, you have to use that additional package.

[ziyaDev]

I apologize for the delay in getting back to you. Thank you for your detailed explanation regarding the use of useSuspenseQuery and SSR with @apollo/client and Next.js. It's much appreciated. I have a query regarding an issue I've encountered. When using useSuspenseQuery on client component and passing the data as props to children components, I'm experiencing an issue where the prop passed to the children doesn't update when I make changes to query variables. For example:

const { data } = useSuspenseQuery(query, {
  variables: {
    id: // variables from the query url
  }
});

//... Code 

<GridLayout
  isEmpty={data.list.length < 1}
/>

Even when the variables change and the data updates, the isEmpty still remains false. Could you please advise on how to resolve this issue?Thank you again for your assistance.

[phryneas]

Hi @ziyaDev, on first look, that looks like a fine usage and should work.

Could you please open a new issue for that, and include a reproduction? We'd have to see this happening to give you any more feedback on this.

As I think the initial question is answered (and your other one will end up in a separate issue), I'm already going to close this issue :)

[github-actions[bot]]

Do you have any feedback for the maintainers? Please tell us by taking a one-minute survey. Your responses will help us understand Apollo Client usage and allow us to serve you better.

[github-actions[bot]]

Do you have any feedback for the maintainers? Please tell us by taking a one-minute survey. Your responses will help us understand Apollo Client usage and allow us to serve you better.

[github-actions[bot]]

This issue has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs. For general questions, we recommend using StackOverflow or our discord server.