Option to persist React Query DevTool in Production

[noor-codes]

Option to persist React Query DevTool in Production

At first glance, this sounds like a bad idea but I have a point.

The problem

• Whenever I want to show someone how good React Query is, I have to build my website first.
• If I do, I lose the React Query Dev Tools when I build the website.
• If I don't build it, NextJS, or React, will serve huge bundles to the browser and it would make it hard for me to deliver the image I have in mind. The bigger bundles cloud my vision of showing somehow how React Query cache works in action.

The solution

• I need a way to have the fastest bundles which I can only get in the prod plus the React Query Dev Tools to how them things in action.

Drawback

• Developers can forget remove the React Query Dev Tool in prod but we can fix that problem by throwing an error on the console to remind them they shouldn't have the dev tool in prod.

Best of both worlds.

Does that make any sense?
https://react-query.tanstack.com/devtools

[noor-codes]

If still that isn't enough to log an error in the console, we can check the domain to show the dev tools conditionally in the prod.
If the domain is localhost show the dev tools in prod otherwise, don't as a safety net.

[TkDodo]

You can just do this:
https://twitter.com/tannerlinsley/status/1392857647037091849

[noor-codes]

Not covered in the docs anywhere

[noor-codes]

While this is a great solution to the problem but still, a flag can make things a lot easier.

[noor-codes]

I am documenting this for future use!

import { ReactQueryDevtools } from 'react-query/devtools'

const ReactQueryDevtoolsProduction = React.lazy(() =>
  import('react-query/devtools/development').then(d => ({
    default: d.ReactQueryDevtools,
  }))
)

const queryClient = new QueryClient()

export default function App() {
  const [showDevtools, setShowDevtools] = React.useState(false)

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

  return (
    <QueryClientProvider client={queryClient} contextSharing={true}>
      <App />
      <ReactQueryDevtools />
      {showDevtools ? (
        <React.Suspense fallback={null}>
          <ReactQueryDevtoolsProduction />
        </React.Suspense>
      ) : null}
    </QueryClientProvider>
  )
}

// Usage
// window.toggleDevtools(true)

[noor-codes]

Thanks @TkDodo

[cliffordfajardo]

Reminder

You need your import to reference the /development path! Otherwise it won't work in production

const ReactQueryDevtoolsProduction = React.lazy(() =>
  import('react-query/devtools/development').then(d => ({
    // ---------------------------^^^^^^^^^
    default: d.ReactQueryDevtools,
  }))
)

[bgoette]

Just wanted to mention that in v4 I had to use @tanstack/react-query-devtools/build/cjs/packages/react-query-devtools/src/devtools

[JonParton]

This won't seem to work anymore ... Anyone else had luck with V4 on the latest verion (4.6.0) and lazy loading on a non dev environment?

[TkDodo]

It's documented: https://tanstack.com/query/v4/docs/devtools#devtools-in-production

[JonParton]

Thank you and sorry 🤦‍♂️

[p0zi]

https://tanstack.com/query/v4/docs/framework/react/devtools#devtools-in-production