@ngneat/query-devtools
v2.0.0
Published
Developer tools to interact with and visualize the ngneat/query cache
Downloads
13,815
Readme
ngneat/query-devtools
Wave your hands in the air and shout hooray because Angular Query comes with dedicated devtools! 🥳
When you begin your Angular Query journey, you'll want these devtools by your side. They help visualize all of the inner workings of Angular Query and will likely save you hours of debugging if you find yourself in a pinch!
Install the @ngneat/query-devtools
package. Lazy load and use it only in development
environment:
import { provideQueryDevTools } from '@ngneat/query';
import { environment } from 'src/environments/environment';
bootstrapApplication(AppComponent, {
providers: [environment.production ? [] : provideQueryDevTools(options)],
});
See all the available options here.
Recipes
Devtools in Production
If you would like to lazy-load devtools in production, you can use something similar to the following:
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.