How to get referential equality for query result when switching pages with Next.js

[bennettdams]

• React version: v17
• React Query version: v4

When using the same query on two pages in Next.js, switching from one page to the other will "lose" the referential equality of the returned data.

Imagine fetching a user on one page. When going to another page that uses the exact same query, when using the returned data e.g. in a useEffect, the effect will trigger on the second page.

Here's a basic example:

export default function SomePage() {
  const { data } = useQuery(
    ["some-id"],
    async () => (await fetchData("some-id")).result ?? null,
    { refetchOnMount: false, cacheTime: Infinity }
  );

  useEffect(() => {
    console.log("query has changed data");
  }, [data]);

  return (
    <div>
      <p>data</p>
      <p>{data?.blabla}</p>
    </div>
  );
}

You can create two pages in Next.js to see that the effect is triggered, even though the data is structurally equal.

Is this expected?

If yes, maybe one should use the new persistQueryClient for that?

---

Btw, maybe it has something to do with the query client, I initialize it like this:

// _app.tsx
function App({ Component, pageProps }: AppProps): JSX.Element {
  const [queryClient] = useState(() => new QueryClient());

  return (
    <ErrorBoundary>
      <QueryClientProvider client={queryClient}>
 ...

[TkDodo]

The code you are showing looks fine. Is getServerSideProps involved by any chance? It's best to just show a codesandbox reproduction please.

[TkDodo]

okay it just came to me: when you go to page2, the effect will always fire at least once, because the component instance is new. useEffect dependencies compare to previous runs of itself, but on mount of the page, there is no previous run to compare to.

so the effect firing doesn't prove that data isn't referentially stable.

[bennettdams]

Yup, I was just wondering if there's a way to achieve that? Dependencies defined outside of React can also be used like this, so I thought that whatever query result is cached in the query client could maybe behave like that?
Edit: I guess the question doesn't make sense, because no matter where the result is defined, React always needs it as a dependency anyways.

[TkDodo]

Not sure what you mean with "dependencies defined outside of react" ?

[TkDodo]

You'd need to move the query and the effect into a location that doesn't change between page changes, e.g. something rendered in _app.tsx

[bennettdams]

Yes, thanks, it was a brain bug. The useEffect running on the first render is inevitable, no referential equality can change that.
I thought about having a reference outside of React (e.g. saving the query client in a const outside of any component/hook) and having the query results being fields of that object or something, but this wouldn't help here either.