SSR + NextJS does not seem to Hydrate data #1661
Description
I'm following the guide here to setup NextJS with Hydration. I can confirm that my dehydrated state is being passed correctly through page props, however on the first SSR render for my page component the hydrated state does not seem to be present. data is undefined and my component breaks as I depend on it to be loaded initially.
export default function App({ Component, pageProps }) {
// console.log here confirms dehydrated state exists and data has been populated
return (
<React.Fragment>
<QueryClientProvider client={queryClient}>
<Hydrate state={pageProps.dehydratedState}>
<Component {...pageProps} />
</Hydrate>
</QueryClientProvider>
</React.Fragment>
);
}export async function getServerSideProps(context) {
const { query: { id } } = context;
const queryClient = new QueryClient();
const api = getAPI(context);
await api.reAuthenticate();
await queryClient.prefetchQuery(
[ 'resources', id ],
() => api.getResource(id)
);
return {
props: { dehydratedState: dehydrate(queryClient) }
};
}export default function Component() {
const router = useRouter();
// user query client confirms here that dehydrated data is not present
const { data } = useQuery(
[ 'resources', router.query.id ],
() => getAPI().getResource(router.query.id)
);
// breaks because data is not loaded initially
return (
<div>{data.id}</div>
);
}