next.js 13 hydration in /app/page.tsx thrown error: React.createContext is not a function

[wh5938316]

next.js Version: 13.0.0

in /app/page.tsx

import { QueryClient } from "@tanstack/react-query";
...
// throw error
const queryClient = new QueryClient();

[TkDodo]

Everything in app is a server component per default that cannot use context. See: https://twitter.com/lukemorales/status/1585506850421854210

[wh5938316]

Thanks.
And I want to prefetch data in server component, and then dehydrate it to transfer to client component
like this: https://tanstack.com/query/v4/docs/guides/ssr
What is the best practices

[TkDodo]

Also in the thread.

[wh5938316]

I have no idea. 😭

[TkDodo]

have you seen the images where data is fetched on the server and passed as prop to the client?
https://twitter.com/lukemorales/status/1585508293673467905

and then the client puts it into the cache as initialData?

https://twitter.com/lukemorales/status/1585508451211436032

It's the best we can do at the moment - the replacement for gSSP

[wh5938316]

I got it.
Thank you very much!

[csalmeida]

Is the Twitter thread still the preferred way of fetching initial data? Just checking if we're missing something 🙏

[TkDodo]

We have docs now: https://tanstack.com/query/v4/docs/react/guides/ssr#using-experimental-app-directory-in-nextjs-13

[csalmeida]

Thanks a lot, @TkDodo! We have found those docs which were somehow helpful but it would be great to have an example with the /app directory as a _app.jsx is not really available in NextJS 13 it seems.

As a workaround, we created a client component that receives initialData from a server-side fetch request.
The data is then passed to useQuery to cache it which gets us a page with data loaded in TanStack Query with no loading or blank states.

Then, subsequent useQuery calls on client-side components will not have the initialData passed to them which fetch the data again.

Not sure if an ideal approach but that's what we came up with for now!