`react-query` hydration in /app/page.tsx thrown error: React.createContext is not a function

[wh5938316]

Verify canary release

• [X] I verified that the issue exists in the latest Next.js canary release

Provide environment information

Operating System: Platform: darwin Arch: arm64 Version: Darwin Kernel Version 21.1.0: Wed Oct 13 17:33:24 PDT 2021; root:xnu-8019.41.5~1/RELEASE_ARM64_T8101 Binaries: Node: 18.12.0 npm: 8.19.2 Yarn: 1.22.11 pnpm: 7.13.6 Relevant packages: next: 12.3.2-canary.43 eslint-config-next: N/A react: 18.2.0 react-dom: 18.2.0

What browser are you using? (if relevant)

chrome 106.0.5249.119

How are you deploying your application? (if relevant)

No response

Describe the Bug

in /app/page.tsx

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

thrown error: React.createContext is not a function

Expected Behavior

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

Link to reproduction

https://codesandbox.io/p/github/wh5938316/next13-react-query/main?file=%2Fapp%2Fpage.tsx

To Reproduce

const queryClient = new QueryClient();

in /app/page.tsx

[temrb]

similar to #41929

[wh5938316]

类似于#41929

new QueryClient is theoretically irrelevant to react. I don't know why this error is caused. And what are the best practices for rehydration with react-query.

[raajnadar]

You should report that to the library, they might need to add support from their end not in Next Js

[lukemorales]

new QueryClient is theoretically irrelevant to react.

Incorrect, React Query's QueryClient uses React Context, so if you try to create a new instance on the server, it will throw because React Context does not exist on the server

[balazsorban44]

Closing as per https://github.com/vercel/next.js/issues/41936#issuecomment-1293449127. Since react-query uses createContext, the component needs to be marked with "use client".

See: https://beta.nextjs.org/docs/rendering/server-and-client-components#third-party-packages

[efilion]

https://codesandbox.io/p/github/efilion/next13-react-query/main?file=%2Fapp%2FProvider.tsx

Above is a working solution for using react-query with NextJS 13's app directory. TanStack's documentation informed the implementation: https://tanstack.com/query/v4/docs/guides/ssr#using-other-frameworks-or-custom-ssr-frameworks.

This could be a good addition to TanStack's documentation. I can open a new issue with them and see if they're willing to add it even though appDir is still experimental and the above solution could break in the future.

Any feedback from Vercel and other NextJS experts on the above solution?

[magoz]

@efilion works great! Please open that issue and let's see if it can make it to the official docs. Great work!

[efilion]

Started a discussion with TanStack at https://github.com/TanStack/query/discussions/4558.

[github-actions[bot]]

This closed issue has been automatically locked because it had no new activity for a month. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.