T
TanStack•3y ago
fascinating-indigo

SSR in Next.js with `getInitialProps` behaving strangely...

Caveat I’m currently stuck with getInitialProps , it may be a red herring though. I’m doing the standard hydration method with Next.js, albeit with the previously mentioned getInitialProps. SSR works great locally when running in development and build. The one strange issue I have is when it gets to our infrastructure on AWS. So first off maybe this is not a React Query issue but I’m a bit lost here... So the issue is when a page loads, no data appears. Lets say with a query key of ['things', 1]. If I update the UI and we get ['things', 2], I see the loading state and then my data appears. Changing the UI again to ['things', 1], there is no loading state and the data appears instantly (like SSR has worked, but chosen "not to show the data"). I appreciate this is going to be pretty hard to answer but appreciate anyone’s thoughts as to why this could occur.
1 Reply
fascinating-indigo
fascinating-indigoOP•3y ago
Wondering if this makes a difference, I create the client instance inside a component... rather than the client instance inside of the custom app in _app. 
export function QueryClient({ children, dehydratedState }: QueryClientProps) {
  const [client] = useState(
    () =>
      new ReactQueryClient({
        defaultOptions: {
          queries: {
            staleTime: FIVE_MINTUES,
            refetchOnWindowFocus: false,
          },
        },
      })
  );

  return (
    <QueryClientProvider client={client}>
      <Hydrate state={dehydratedState}>
        {children}
        <ReactQueryDevtools />
      </Hydrate>
    </QueryClientProvider>
  );
}
export function QueryClient({ children, dehydratedState }: QueryClientProps) {
  const [client] = useState(
    () =>
      new ReactQueryClient({
        defaultOptions: {
          queries: {
            staleTime: FIVE_MINTUES,
            refetchOnWindowFocus: false,
          },
        },
      })
  );

  return (
    <QueryClientProvider client={client}>
      <Hydrate state={dehydratedState}>
        {children}
        <ReactQueryDevtools />
      </Hydrate>
    </QueryClientProvider>
  );
}
Then it wraps the application in _app. 
<QueryClient dehydratedState={pageProps.dehydratedState}>
  // rest of the Next.js app including the <Component {...pageProps} />
</QuerClient>
<QueryClient dehydratedState={pageProps.dehydratedState}>
  // rest of the Next.js app including the <Component {...pageProps} />
</QuerClient>

Did you find this page helpful?