Prefetch Infinite Query + Next.js Page Navigation

[mikechabot]

Hey folks,

Quick question -- is there an idiomatic approach to addressing unwanted rehydration issues with prefetchQuery and prefetchInfiniteQuery during Next.js route transitions?

Take the example below:

1. We have an index page (SSR) that contains a scrollable container of arbitrary data, which can be infinitely fetched.
   • The initial data set is fetched via getServerSideProps.
   • Let's also say any new data will be managed via Websockets after the initial render.
   • Old data can be fetched infinitely, but new data will be appended via setQueryData on socket messages.
2. If the user navigates to either Page 1 or Page 2 and then back to the index page, Next.js executes getServerSideProps, which kicks off the rehydration flow for react-query, thereby blowing away the existing the client-side cache.
3. This occurs regardless of any special sauce with stale, cache, refetchOnMount, etc.

Minimal Example Repo: https://github.com/mikechabot/react-query-prefetch-test

Potential Solution (#1)

Intercept CSR requests to disallow the rehydration flow; queryClient on the client-side can use the existing cache.

export const getServerSideProps = withSession(async (ctx) => {
  const { user } = ctx;

  const isCSR = ctx.req.url?.startsWith('/_next');

  if (isCSR) {
    return {
      props: {},
    };
  }

  return {
    props: {
      dehydratedState: // prefetch and dehydrate
    },
  };
});

Potential Solution (#2)

I haven't used persistQueryClient -- but could that be used for this type of problem?

[TkDodo]

I do potential solution 1 :)

Also, I've ranted about exactly this on twitter 😆

https://twitter.com/TkDodo/status/1558752788393476096

I think it gets better with next13

[mikechabot]

Ah cool, thanks for confirming. This felt like it should haven been a solved problem in Next, and that I was just missing something obvious 🙃.

I'll have to re-read the migration docs for Next 13, but yeah, it seems data fetching flow got some love with the introduction of shared layouts. Let me play around and I'll post back here if I have any luck.