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

sdkmanager --uninstall --package_file #4939

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.

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.

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

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

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

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

Yes, it works up to now but once you start using getQueryClient in server component you get the error error - ../../node_modules/@tanstack/react-query/build/lib/Hydrate.mjs Attempted import error: 'useRef' is not exported from 'react' (imported as 'React').

@TkDodo

@TkDodo
demo

@Ephem

@Ephem do you know why this is happening? It seems like

import { QueryClient } from "@tanstack/react-query"; brings in a lot more than just the QueryClient, as the error comes form Hydrate.tsx. Removing that import makes it work. However, Hydrate.tsx alone has the 'use client' directive at the top 🤔

@TkDodo

@TkDodo If you go to the Hydrate.esm.js output the 'use client' is not there for some reason, has it been removed during the build process? I am using v4.24.4.

Can't upload img...

module path: node_modules/@tanstack/react-query/build/lib/Hydrate.esm.js

line 1: import * as React from 'react';

source code path: react-query/src/Hydrate.tsx
line 1: 'use client'
line 2: import * as React from 'react'

I think it could be this:

'use client' directive for Client Components rollup/rollup#4699

probably we'd need to preserve the directive for esm builds?

I think it could be this:

'use client' directive for Client Components rollup/rollup#4699

probably we'd need to preserve the directive for esm builds?

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

Sorry, no. I've tried the different options mentioned above. But I did not get my sandbox working.

I did update the sandbox link because apparently, the link was not working: https://codesandbox.io/p/sandbox/next13-react-query-h4qh77

@barbarah

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.

@barbarah

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

Good job!
But in your demo "getPost" is run twice. Once on the server, once on the client.

@mk965

@mk965 Just updated the sandbox, you just have to disable revalidateOnMount for the hydrated useQuery hook.

@TkDodo

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: 'use client' directive for Client Components rollup/rollup#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)

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?

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.

please try it with:

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

I did every thing including Provider file that has 'use client' directive and everything i found,
But it didn't work

Does this occurs because of next 13.3.0? (provided examples in this thread are using version 13.1.x)

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

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

I did every thing including Provider file that has 'use client' directive and everything i found, But it didn't work

Does this occurs because of next 13.3.0? (provided examples in this thread are using version 13.1.x)

I have also been able to get it to work with next version >=13.3.0 and @tanstack/* version 4.29.12

I just found the fix, In my case I was using one valtio function in utils.ts file which was used somewhere in the server side api.

Rule is if you're using any client side library then make sure that you're not using it's client apis/functions of library directly or indirectly on server routes or server actions.

@barbarah

I got it working by doing these step:
1. Wrapping the Hydrate wrapper in a separate "use client" component

2. Importing QueryClient from @tanstack/query-core in the server singleton

3. Importing the dehydrate function from @tanstack/query-core as well.
@barbarah Here is the working sandbox with the changes I just mentioned.

This worked, and this is an outline of what I am using

"@tanstack/react-query": "^4.29.7",
    "next": "13.5.6",

Navigation Menu

Repository navigation

Doesn't work out of the box with next 13 #4933

Describe the bug

Your minimal, reproducible example

Steps to reproduce

Expected behavior

How often does this bug happen?

Screenshots or Videos

Platform

TanStack Query version

TypeScript version

Additional context

5 remaining items

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Doesn't work out of the box with next 13 #4933

Description

Describe the bug

Your minimal, reproducible example

Steps to reproduce

Expected behavior

How often does this bug happen?

Screenshots or Videos

Platform

TanStack Query version

TypeScript version

Additional context

Activity

Bknight010723 commented on Feb 4, 2023

d4nyll commented on Feb 5, 2023

carrithers commented on Feb 8, 2023

arzzzen commented on Feb 8, 2023

barbarah commented on Feb 9, 2023

TkDodo commented on Feb 12, 2023

CogitoBurrito commented on Feb 14, 2023

CogitoBurrito commented on Feb 14, 2023

TkDodo commented on Feb 14, 2023

CogitoBurrito commented on Feb 14, 2023

CogitoBurrito commented on Feb 14, 2023

TkDodo commented on Feb 14, 2023

CogitoBurrito commented on Feb 15, 2023

5 remaining items

barbarah commented on Feb 16, 2023

feledori commented on Feb 23, 2023

mk965 commented on Mar 10, 2023

feledori commented on Mar 10, 2023

Ephem commented on Mar 11, 2023

Ephem commented on Mar 11, 2023

Ephem commented on Mar 12, 2023

TkDodo commented on Mar 20, 2023

mahdi-farnia commented on Apr 10, 2023

2manoj1 commented on Apr 13, 2023

momenfc commented on May 16, 2023

Schmale97 commented on May 30, 2023

Nishchit14 commented on Jan 31, 2024

Franklivania commented on Apr 10, 2024

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions