Search code examples
reactjsnext.jsdevtoolstanstackreact-query

Tanstack/react-query doesn't work in my vercel app

the packages and the problem..

"@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",

QueryProvider.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.

Any help is appreciated.

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

  1. I tried modifying the code to the one above by just passing ReactQueryDevTools.
  2. tried downgrading my dependencies but internally the app crashed.
  3. modified the structure to
....
export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body className={inter.className}>
        <QueryClientProviderComponent>
          {children}
          <ReactQueryDevtools initialIsOpen />
        </QueryClientProviderComponent>
      </body>
    </html>
  )
}
  1. tried safari instead of chrome
  2. followed the structure outlined here
  3. also, when i try window.toggleDevTools in console in gives undefined
Solution

  • There are 2 ways to do it.

    Method 1 (following the official doc): Link

    Step 1: Add the necessary changes described as the per official doc in your QueryProvider file

    QueryProvider.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
import { Suspense, lazy, useEffect, useState } from 'react';

const ReactQueryDevtoolsProduction = lazy(() =>
  import('@tanstack/react-query-devtools/build/modern/production.js').then(
    (d) => ({
      default: d.ReactQueryDevtools,
    }),
  ),
);

export default function QueryClientProviderComponent({ children }) {
  const [showDevtools, setShowDevtools] = useState(false);

  useEffect(() => {
    // @ts-ignore
    window.toggleDevtools = () => setShowDevtools((old) => !old);
  }, []);

  const queryClient = new QueryClient({
    defaultOptions: {
      queries: {
        staleTime: 1000 * 60 * 5, // added the staleTime for queries globally
      },
    },
  });

  return (
    <QueryClientProvider client={queryClient}>
      {children}
      <ReactQueryDevtools initialIsOpen />
      {showDevtools && (
        <Suspense fallback={null}>
          <ReactQueryDevtoolsProduction />
        </Suspense>
      )}
    </QueryClientProvider>
  );
}

    In layout file, wrap it inside body layout.js

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

    This adds a function called toggleDevtools in your window.

    Step 2: Downloading devtools

    Open the Console of the tab in which you opened the website. Paste window.toggleDevtools() and hit Enter.

    This will start the devtools.

    Method 2: Download by default

    If you noticed in Method 1, the initial value of showDevtools is false due to which you have to manually hit the toggleDevtools method. In case you want to avoid it then change

    const [showDevtools, setShowDevtools] = useState(false);

    To

    const [showDevtools, setShowDevtools] = useState(true);

    This will make sure that you don't have to manually call window.toggleDevTools()