diff --git a/devtools/README.md b/devtools/README.md index 24bd703..fe94edb 100644 --- a/devtools/README.md +++ b/devtools/README.md @@ -15,4 +15,52 @@ bootstrapApplication(AppComponent, { }); ``` -See all the avilable options [here](https://tanstack.com/query/v5/docs/react/devtools#options). +See all the available options [here](https://tanstack.com/query/v5/docs/react/devtools#options). + +# Recipes + +## Devtools in Production + +If you would like to lazy-load devtools in production, you can use something similar to the following: + +```ts +import { onlineManager } from '@tanstack/query-core'; +import { APP_INITIALIZER } from '@angular/core'; +import { injectQueryClient } from '@ngneat/query'; + +export const appConfig: ApplicationConfig = { + providers: [ + // ...other providers... + environment.production + ? { + provide: APP_INITIALIZER, + multi: true, + useFactory: provideLazyQueryDevTools, + }, + : provideQueryDevTools(options), + ], +}; + +function provideLazyQueryDevTools() { + const client = injectQueryClient(); + return () => { + // Define our global `toggleDevtools()` function to lazy-load query devtools + window.toggleDevtools = () => { + import('@tanstack/query-devtools').then((d) => { + new d.TanstackQueryDevtools({ + client, + queryFlavor: '@ngneat/query', + version: '5', + position: 'bottom', + initialIsOpen: true, + buttonPosition: 'bottom-right', + onlineManager, + }).mount(document.body); + }); + }; + }; +} +``` + +This will define a global window function `window.toggleDevtools()` - open the developer console and call this to lazy-load and mount the devtools. +See also [Devtools in production](https://tanstack.com/query/v4/docs/react/devtools#devtools-in-production).