![\"TanStack](\"./media/header_query.png\")
\n![](\"https://static.scarf.sh/a.png?x-pxid=be2d8a11-9712-4c1d-9963-580b2d4fb133\")
\n\n\n\n \n ![\"CodeRabbit\"](\"https://tanstack.com/assets/coderabbit-dark-D643Zkrv.svg\") \n | \n \n \n ![\"Cloudflare\"](\"https://tanstack.com/assets/cloudflare-white-Co-Tyjbl.svg\") \n | \n
![\"Query](\"./media/partner_logo.svg\"){kind=logo}
\n\nWe're looking for TanStack Query Partners to join our mission! Partner with us to push the boundaries of TanStack Query and build amazing things together.\n
\nLET'S CHAT\n![\"Chrome](\"https://www.google.com/chrome/static/images/chrome-logo.svg\"){kind=logo}
[Devtools for Chrome](https://chromewebstore.google.com/detail/tanstack-query-devtools/annajfchloimdhceglpgglpeepfghfai)\n> - ![\"Firefox](\"https://upload.wikimedia.org/wikipedia/commons/a/a0/Firefox_logo%2C_2019.svg\")
[Devtools for Firefox](https://addons.mozilla.org/en-US/firefox/addon/tanstack-query-devtools/)\n> - ![\"Edge](\"https://upload.wikimedia.org/wikipedia/commons/9/98/Microsoft_Edge_logo_%282019%29.svg\"){kind=logo}
[Devtools for Edge](https://microsoftedge.microsoft.com/addons/detail/tanstack-query-devtools/edmdpkgkacmjopodhfolmphdenmddobj)\n\n## Enable devtools\n\nThe devtools help you debug and inspect your queries and mutations. You can enable the devtools by adding `withDevtools` to `provideTanStackQuery`.\n\nBy default, Angular Query Devtools are only included in development mode bundles, so you don't need to worry about excluding them during a production build.\n\n```ts\nimport {\n QueryClient,\n provideTanStackQuery,\n} from '@tanstack/angular-query-experimental'\n\nimport { withDevtools } from '@tanstack/angular-query-experimental/devtools'\n\nexport const appConfig: ApplicationConfig = {\n providers: [provideTanStackQuery(new QueryClient(), withDevtools())],\n}\n```\n\n## Devtools in production\n\nDevtools are automatically excluded from production builds. However, it might be desirable to lazy load the devtools in production.\n\nTo use `withDevtools` in production builds, import using the `production` sub-path. The function exported from the production subpath is identical to the main one, but won't be excluded from production builds.\n\n```ts\nimport { withDevtools } from '@tanstack/angular-query-experimental/devtools/production'\n```\n\nTo control when devtools are loaded, you can use the `loadDevtools` option.\n\nWhen not setting the option or setting it to 'auto', the devtools will be loaded automatically only when Angular runs in development mode.\n\n```ts\nimport { withDevtools } from '@tanstack/angular-query-experimental/devtools'\n\nprovideTanStackQuery(new QueryClient(), withDevtools())\n\n// which is equivalent to\nprovideTanStackQuery(\n new QueryClient(),\n withDevtools(() => ({ loadDevtools: 'auto' })),\n)\n```\n\nWhen setting the option to true, the devtools will be loaded in both development and production mode.\n\nThis is useful if you want to load devtools based on [Angular environment configurations](https://angular.dev/tools/cli/environments). E.g. you could set this to true when the application is running on your production build staging environment.\n\n```ts\nimport { environment } from './environments/environment'\n// Make sure to use the production sub-path to load devtools in production builds\nimport { withDevtools } from '@tanstack/angular-query-experimental/devtools/production'\n\nprovideTanStackQuery(\n new QueryClient(),\n withDevtools(() => ({ loadDevtools: environment.loadDevtools })),\n)\n```\n\nWhen setting the option to false, the devtools will not be loaded.\n\n```ts\nprovideTanStackQuery(\n new QueryClient(),\n withDevtools(() => ({ loadDevtools: false })),\n)\n```\n\n## Derive options through reactivity\n\nOptions are passed to `withDevtools` from a callback function to support reactivity through signals. In the following example\na signal is created from a RxJS observable that emits on a keyboard shortcut. When the derived signal is set to true, the devtools are lazily loaded.\n\nThe example below always loads devtools in development mode and loads on-demand in production mode when a keyboard shortcut is pressed.\n\n```ts\nimport { Injectable, isDevMode } from '@angular/core'\nimport { fromEvent, map, scan } from 'rxjs'\nimport { toSignal } from '@angular/core/rxjs-interop'\n\n@Injectable({ providedIn: 'root' })\nexport class DevtoolsOptionsManager {\n loadDevtools = toSignal(\n fromEventLoading...
\n } @else if (query.isError()) {\n Error: {{ query?.error().message }}\n } @else {\n @for (page of query?.data().pages; track $index) {\n @for (project of page.data; track project.id) {\n{{ project.name }} {{ project.id }}
\n }\n }\n\n In this example, each page of data remains visible as the next page is\n fetched. The buttons and capability to proceed to the next page are also\n suppressed until the next page cursor is known. Each page is cached as a\n normal query too, so when going to previous pages, you'll see them\n instantaneously while they are also re-fetched invisibly in the\n background.\n
\n @if (query.status() === 'pending') {\n{{ project.name }}
\n }\n{{ data.description }}
\n 👀 {{ data.subscribers_count }}\n ✨ {{ data.stargazers_count }}\n 🍴 {{ data.forks_count }}\n }\n `,\n})\nexport class SimpleExampleComponent {\n http = inject(HttpClient)\n\n query = injectQuery(() => ({\n queryKey: ['repoData'],\n queryFn: () =>\n lastValueFrom(\n this.http.get [Devtools for Chrome](https://chromewebstore.google.com/detail/tanstack-query-devtools/annajfchloimdhceglpgglpeepfghfai)\n> - [Devtools for Firefox](https://addons.mozilla.org/en-US/firefox/addon/tanstack-query-devtools/)\n> - [Devtools for Edge](https://microsoftedge.microsoft.com/addons/detail/tanstack-query-devtools/edmdpkgkacmjopodhfolmphdenmddobj)\n\n## Install and Import the Devtools\n\nThe devtools are a separate package that you need to install:\n\n```bash\nnpm i @tanstack/preact-query-devtools\n```\n\nor\n\n```bash\npnpm add @tanstack/preact-query-devtools\n```\n\nor\n\n```bash\nyarn add @tanstack/preact-query-devtools\n```\n\nor\n\n```bash\nbun add @tanstack/preact-query-devtools\n```\n\nYou can import the devtools like this:\n\n```tsx\nimport { PreactQueryDevtools } from '@tanstack/preact-query-devtools'\n```\n\nBy default, Preact Query Devtools are only included in bundles when `process.env.NODE_ENV === 'development'`, so you don't need to worry about excluding them during a production build.\n\n## Floating Mode\n\nFloating Mode will mount the devtools as a fixed, floating element in your app and provide a toggle in the corner of the screen to show and hide the devtools. This toggle state will be stored and remembered in localStorage across reloads.\n\nPlace the following code as high in your Preact app as you can. The closer it is to the root of the page, the better it will work!\n\n```tsx\nimport { PreactQueryDevtools } from '@tanstack/preact-query-devtools'\n\nfunction App() {\n return (\n Loading...
\n ) : status === 'error' ? (\nError: {error.message}
\n ) : (\n <>\n {data.pages.map((group, i) => (\n{project.name}
\n ))}\n{project.name}
\n ))}\n![\"\"](\"https://img.shields.io/npm/dm/@tanstack/query-core.svg\")
\n![\"\"](\"https://img.shields.io/github/stars/TanStack/query.svg?style=social&label=Star\")
\n![\"semantic-release\"](\"https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg\"){kind=icon}
\n ![\"Best](\"https://img.shields.io/endpoint?url=https://bestofjs-serverless.now.sh/api/project-badge?fullName=TanStack%2Fquery%26since=daily\")
![\"Follow](\"https://img.shields.io/twitter/follow/tan_stack.svg?style=social\")