'react query and ssr of next.js is not working

emphasized texti have some problem applying ssr.

it's my code

 const [queryClient] = useState(
    () =>
      new QueryClient({
        defaultOptions: {
          queries: {
            cacheTime: 1000 * 60 * 5, // 5 minute defualt
          },
        },
      }),
  );

  return (
    <QueryClientProvider client={queryClient}>
      <Head>
        <link rel="icon" type="image/x-icon" href="/favicon.svg" />
      </Head>
      <Hydrate state={pageProps.dehydratedState}>
        <Component {...pageProps} />
      </Hydrate>

      <ReactQueryDevtools initialIsOpen={true} />
    </QueryClientProvider>

export const getServerSideProps: GetServerSideProps = async (): Promise<{
  props: { dehydratedState: DehydratedState };
}> => {
  const queryClient = new QueryClient();
  await queryClient.prefetchQuery(["ururlInfoQuery"], requestChallenge);

  return { props: { dehydratedState: dehydrate(queryClient) } };
};

  const Banner = function Banner(): JSX.Element {
    const { data, isFetching } = useUrUrlInfoQuery();
    const { challengeData } = ChallengeStore;
  }

  export const useUrUrlInfoQuery = () => {
    return useQuery<ChallengeResponseType, Error | void>(["ururlInfoQuery"], 
  requestChallenge, {
     staleTime: StaleTimeEnum.Default,
    });
  };

result:

defulat value: 3, 5 real value : 1, 10

this means serverSide render is not working.

data getted is init value i setted.

please, some comment help me

server-side-rendering react-query

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source

'react query and ssr of next.js is not working

Sources

Related Questions