tanstack/react-query-devtools in production env. #6569

kab1012 · 2023-12-21T05:23:20Z

kab1012
Dec 21, 2023

Hello, i am trying to start the devtools in production env in a react-nextjs app..

following are the versions:

"@tanstack/react-query": "^5.14.2",
"@tanstack/react-query-devtools": "^5.14.2",

"next": "^13.5.6",
"react": "18.2.0",
"react-date-range": "^1.4.0",

The code structure

file1.js

"use client";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import { ReactQueryDevtools } from '@tanstack/react-query-devtools'; // downgrading react and next version raise peer dependency errors

export default function QueryClientProviderComponent ({ children }) {
  const queryClient = new QueryClient({
    defaultOptions: {
      queries: {
        staleTime: 1000 * 60 * 5  // added the staleTime for queries globally
      }
    }
  });

  return (
    <QueryClientProvider client={queryClient}>
      {children}
      <ReactQueryDevtools initialIsOpen/>
    </QueryClientProvider>
  )
}

layout.js

import './globals.css';
import { Inter } from 'next/font/google';

import QueryClientProviderComponent from "./components/QueryClientProvider";
import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
const inter = Inter({ subsets: ['latin'] })

export const metadata = {
  title: 'abc',
  description: 'Generated by create next app',
}

export default function RootLayout({ children }) {
  return (
    <QueryClientProviderComponent>
      <html lang="en">
        <body className={inter.className}>
          {children}
          <ReactQueryDevtools initialIsOpen />
        </body>
      </html>
    </QueryClientProviderComponent>
  )
}

The problem I am facing is the devtools appear correctly, only when npm run dev is run.

How can i display it in vercel-deployed app and staging env.

I tried following the official docs at https://tanstack.com/query/latest/docs/react/devtools - devtools appear correctly, only when npm run dev is run and not on vercel

I tried modifying the code to the one above by just passing ReactQueryDevTools.
tried downgrading my dependencies but internally the app crashed.
modified the structure to:

....
export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body className={inter.className}>
        <QueryClientProviderComponent>
          {children}
          <ReactQueryDevtools initialIsOpen />
        </QueryClientProviderComponent>
      </body>
    </html>
  )
}

tried safari instead of chrome
followed the structure outlined here

Any help is appreciated

Linked stack overflow blog

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Uh oh!

tanstack/react-query-devtools in production env. #6569

Uh oh!

{{title}}

Uh oh!

Replies: 0 comments

Select a reply

Uh oh!

Uh oh!

tanstack/react-query-devtools in production env. #6569

Uh oh!

kab1012 Dec 21, 2023

Replies: 0 comments

kab1012
Dec 21, 2023