react-query-devtools is not working in nextjs v13

[SeungYn]

Describe the bug

react-query-devtools is not working in nextjs v13
i'm useing nextjs v13
"@tanstack/react-query": "^5.0.0-alpha.71",
"@tanstack/react-query-devtools": "^4.29.19",

but error occurs as follows "Unhandled Runtime Error
TypeError: queryClient.getQueryCache is not a function"

and It works fine without devtools

code

'use client';
import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import { ReactNode } from 'react';

export default function ReactQueryContext({
  children,
}: {
  children: ReactNode;
}) {
  const queryClient = new QueryClient();
  return (
    <QueryClientProvider client={queryClient}>
      {children}
      <ReactQueryDevtools initialIsOpen={false} />
    </QueryClientProvider>
  );
}

library

"dependencies": {
    "@sanity/client": "^6.1.3",
    "@sanity/image-url": "^1.0.2",
    "@tanstack/react-query": "^5.0.0-alpha.71",
    "@tanstack/react-query-devtools": "^4.29.19",
    "@types/node": "20.3.0",
    "@types/react": "18.2.11",
    "@types/react-dom": "18.2.4",
    "axios": "^1.4.0",
    "eslint": "8.42.0",
    "eslint-config-next": "13.4.5",
    "next": "13.4.5",
    "next-auth": "^4.22.1",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "react-icons": "^4.10.1",
    "react-multi-carousel": "^2.8.4",
    "react-spinners": "^0.13.8",
    "timeago.js": "^4.0.2",
    "typescript": "5.1.3"
  },
  "devDependencies": {
    "@tanstack/eslint-plugin-query": "^4.29.9",
    "autoprefixer": "^10.4.14",
    "postcss": "^8.4.24",
    "tailwindcss": "^3.3.2"
  }

result

Your minimal, reproducible example

.

Steps to reproduce

react-query-devtools is not working in nextjs v13
i'm useing nextjs v13
"@tanstack/react-query": "^5.0.0-alpha.71",
"@tanstack/react-query-devtools": "^4.29.19",

but error occurs as follows "Unhandled Runtime Error
TypeError: queryClient.getQueryCache is not a function"

Expected behavior

react-query-devtools is not working in nextjs v13
i'm useing nextjs v13
"@tanstack/react-query": "^5.0.0-alpha.71",
"@tanstack/react-query-devtools": "^4.29.19",

but error occurs as follows "Unhandled Runtime Error
TypeError: queryClient.getQueryCache is not a function"

How often does this bug happen?

Every time

Screenshots or Videos

No response

Platform

Chrome
macOs

Tanstack Query adapter

None

TanStack Query version

v5.0.0-alpha.71

TypeScript version

v5.1.3

Additional context

No response

[lachlancollins]

Hi @SeungYn , you need to install the v5 alpha version of devtools as well!. Do your package manager equivalent of npm install @tanstack/react-query-devtools@alpha. Let us know if you have any issues!

[SeungYn]

Hi @lachlancollins , As you said, I installed "@tanstack/react-query-devtools": "^5.0.0-alpha.72", and this time I get another error

library

result

[lachlancollins]

Continued in #5671

[ElGranTorino]

I managed to solve this simply by declaring new QueryClient outside of component:

'use client'

import { ReactNode } from "react"
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import { ReactQueryDevtools } from '@tanstack/react-query-devtools'

function TanstackProvider({ children }: { children: ReactNode }) {
    const queryClient = new QueryClient();
    return (
        <QueryClientProvider client={queryClient}>
            {children}
            <ReactQueryDevtools initialIsOpen={false}/>
        </QueryClientProvider>
    )
}

export {
    TanstackProvider,
}

replaced with

'use client'

import { ReactNode } from "react"
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import { ReactQueryDevtools } from '@tanstack/react-query-devtools'

const queryClient = new QueryClient();
function TanstackProvider({ children }: { children: ReactNode }) {
    return (
        <QueryClientProvider client={queryClient}>
            {children}
            <ReactQueryDevtools initialIsOpen={false}/>
        </QueryClientProvider>
    )
}

export {
    TanstackProvider,
}