query: Doesn't work out of the box with next 13

Describe the bug

when adding react-query to next 13 i get following error when running

error - ./node_modules/@tanstack/react-query/build/lib/Hydrate.mjs
Attempted import error: 'useRef' is not exported from 'react' (imported as 'React').

Import trace for requested module:
./node_modules/@tanstack/react-query/build/lib/Hydrate.mjs
./node_modules/@tanstack/react-query/build/lib/index.mjs
./src/app/layout.tsx

code

import {QueryClient, QueryClientProvider} from "@tanstack/react-query";

const queryClient = new QueryClient()

/* ... */
      <QueryClientProvider client={queryClient}>
          {children}
      </QueryClientProvider>
/* ... */

Your minimal, reproducible example

https://github.com/JonasWijne/next-test-react-query

Steps to reproduce

git clone https://github.com/JonasWijne/next-test-react-query.git
cd next-test-react-query
yarn
yarn dev
open browser to http://localhost:3000

Expected behavior

as a user i expect it to compile/dev serve

How often does this bug happen?

Every time

Screenshots or Videos

Platform

OS: MacOS
browser: chrome

TanStack Query version

4.24.4

TypeScript version

4.9.5

Additional context

No response

About this issue

Original URL
State: closed
Created a year ago
Reactions: 9
Comments: 32

Most upvoted comments

With Next.js 13’s app directory feature, every component, by default, is a Server Component. Which means you are trying to use context in a Server Component, which is not supported. Instead, you should create a new Client Component (with 'use client'; directive), apply your context provider there (alongside any other context providers), and import that in your root layout.

'use client';

import { QueryClient, QueryClientProvider } from 'react-query'

const queryClient = new QueryClient()

export default function QueryProvider({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <QueryClientProvider client={queryClient}>
      {children}
    </QueryClientProvider>
  );
}


export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en">
      {/*
        <head /> will contain the components returned by the nearest parent
        head.tsx. Find out more at https://beta.nextjs.org/docs/api-reference/file-conventions/head
      */}
      <head />
      <body>
        <QueryProvider>
          {children}
        </QueryProvider>
      </body>
    </html>
  )
}

See Using context in Client Components for more details.

+36

d4nyll on Feb 5, 2023

I got it working by doing these step:

Wrapping the Hydrate wrapper in a separate “use client” component
Importing QueryClient from @tanstack/query-core in the server singleton
Importing the dehydrate function from @tanstack/query-core as well.

@barbarah Here is the working sandbox with the changes I just mentioned.

feledori on Feb 23, 2023

Hello Everyone! I made small POC with Next13 and React Query - Its working. Have a look Example code

Need a feedback or suggestion if any

2manoj1 on Apr 13, 2023

please try it with:

https://github.com/TanStack/query/releases/tag/v4.28.0

TkDodo on Mar 20, 2023

I got nerdsniped and built a Rollup plugin to preserve directives: https://github.com/Ephem/rollup-plugin-preserve-directives

I’ll do some more testing, but with this I think we should be able to make it all work as per the docs.

Ephem on Mar 12, 2023

I finally did some digging and thinking on this today and thought I’d document my findings:

"use client" wont ever work in a bundled build with shared code. Either you include it at the top of the bundle for everything, or you don’t. My suggestion:
- We require/strongly recommend you use an unbundled build if you are using RSCs (this is what Next will use out of the box, so should be straightforward)
- If we would want to have a workaround so bundled builds could work with RSCs, we could use the Rollup banner2 plugin to add “use client” at the top of the bundled builds, and document that in this case you need to do imports in RSCs from @tanstack/query-core instead of @tanstack/react-query. Not sure if it would work, but even if it did, I don’t think this is something we should really support unless some very clear need arises.
~~The~~ One reason our non-bundled builds are currently failing on this is indeed the Rollup issue @TkDodo linked earlier: https://github.com/rollup/rollup/issues/4699
- My hope is that preserving directives could be supported when the option preserveModules: true is set, that would let us fix this issue so everything works as in the current documentation, left a comment about this in the issue.
Another reason builds are failing is even if you fix the above, builds are now(? Has this always been the case? Feels like something has changed here…) failing on imports and not usage of React “client” features, builds will fail on any server import of @tanstack/react-query since the index file is re-exporting things like useQuery that has a bunch of client-only features in it, but no "use client" at the top.
- Note that not having "use client" at the top of those was intentional to have better error messages, these should never be imported from a server component, so only having "use client" at the top of component files gave better messages. I tested this myself, this is why it feels as if something has changed here…
- Either way, to fix this we should just add back "use client" to the top of every file that uses React client only features in the react-query package.

I think we should:

While we wait for the Rollup issue to unblock: Update the docs to the workaround @feledori documented above (basically what the docs @efilion contributed were before we added “use client” and rewrote them to remove HydrateOnClient).
Add "use client" to the top of all files in @tanstack/react-query that imports something from React (all of them besides index?) (This wont fix anything until the Rollup issue is unblocked though)

Ephem on Mar 11, 2023

The docs say you have to put the providers into a separate app/providers.tsx file that has 'use client' at the top. I did that and it works, here’s a fork of your reproduction:

https://codesandbox.io/p/sandbox/gracious-merkle-8lzrrk

TkDodo on Feb 12, 2023

try to import dehydrate from ‘@tanstack/query-core’ instead ‘@tanstack/react-query’ import { dehydrate } from ‘@tanstack/query-core’;

momenfc on May 16, 2023

Actually, what we could do now as a temporary fix is add "use client" to the top of the entire react-query package with the Rollup banner2-plugin as documented in that issue (maybe only for the .mjs build?) and just document that on the server you have to use @tanstack/query-core for now? As long as you always use that only in RSCs, and always import from @tanstack/react-query elsewhere we shouldn’t have a problem with duplicates right?

Ephem on Mar 11, 2023

The way suggested will add ‘use client’ to every single file isn’t it? Would it be harmful?

We have added use client to every file that needs it. When bundled together into one file, it should be removed, which is what rollup does. But for ESM builds, I think separate files are being kept, so we probably would need the use client directive there.

I’m gonna wait for some input from @Ephem if that’s correct or not.

TkDodo on Feb 15, 2023

I also cannot get it working with Hydrate, following the docs. It does work with the initialData.

I made a sandbox with a very simple Next 13 app. I made two examples, one with initial data, and one with hydrate, by following the TanStack docs for Next 13. The hydrate code throws the error.

https://codesandbox.io/p/sandbox/next13-react-query-h4qh77

barbarah on Feb 16, 2023

+1 have the same error after attempt to follow TanStack docs

arzzzen on Feb 8, 2023

I am seeing the same error. The TanStack docs suggest creating a singleton client on the server for import into server components, but that does not seem to work.

I do not get the error with the initialData approach outlined in the docs, presumably because it does not create a client on the server. I am using Next 13.1.6 and react-query 4.24.4.

OrmEmbaar on Feb 9, 2023