How to use Chrome Extension React Query Devtools

[nickstaroba]

To use TanStack Query DevTools, add this line to your application:

window.TANSTACK_QUERY_CLIENT = queryClient

Where? If this is added where QueryClientProvider is located, TypeScript has issues. How is this added to TypeScript React application?

[TkDodo]

after you’ve created the queryClient?

const queryClient = new QueryClient()

window.TANSTACK_QUERY_CLIENT = queryClient

[TkDodo]

How is this added to TypeScript React

this is also documented here:

https://github.com/DeeCode-inc/tanstack-query-chrome-devtools?tab=readme-ov-file#quick-start

@dborysov maybe we should link to the github page from our docs instead?

[dborysov]

That's actually a good point. I will add a link from chrome store to the github. This process might take a couple of days, but I expect it to be published somewhere on Tuesday. I will also update the setup instructions in the extension itself.

But for now, there are 2 ways how you can fix it with Typescript:
either

(window as any).__TANSTACK_QUERY_CLIENT__ = queryClient

or create global.d.ts with the following content:

interface Window {
  __TANSTACK_QUERY_CLIENT__: import("@tanstack/query-core").QueryClient;
}

I personally try to avoid any by all means, but maybe in this case it's not too terrible

[TkDodo]

@dborysov FYI