Skip to content
Permalink

Comparing changes

Choose two branches to see what’s changed or to start a new pull request. If you need to, you can also or learn more about diff comparisons.

Open a pull request

Create a new pull request by comparing changes across two branches. If you need to, you can also . Learn more about diff comparisons here.
base repository: TanStack/query
Failed to load repositories. Confirm that selected base ref is valid, then try again.
Loading
base: v5.59.4
Choose a base ref
...
head repository: TanStack/query
Failed to load repositories. Confirm that selected head ref is valid, then try again.
Loading
compare: main
Choose a head ref

Commits on Oct 9, 2024

  1. fix(react-query): Allow optional initialData in infiniteQueryOptions (#…

    …8154)
    
    * fix(react-query): Allow optional initialData in infiniteQueryoptions
    
    * fixup! fix(react-query): Allow optional initialData in infiniteQueryoptions
    
    ---------
    
    Co-authored-by: chosunghoon <shcho@team-everywhere.com>
    Co-authored-by: Dominik Dorfmeister <office@dorfmeister.cc>
    3 people authored Oct 9, 2024

    Verified

    This commit was created on GitHub.com and signed with GitHub’s verified signature.
    Copy the full SHA
    8d03029 View commit details
  2. release: v5.59.5

    tannerlinsley committed Oct 9, 2024
    Copy the full SHA
    44b70f1 View commit details
  3. fix(perf): improve long running task performance in query core (#8107)

    * fix: improve long running task performance in query core
    
    This addresses two hot spots we have noticed
    on a large scale enterprise app when profiling
    with chrome. These changes help to cut down
    on long running tasks when there are many query
    calls on the page
    
    * refactor: remove two more arrays to be more efficient
    
    * refactor: remove queryObserver improvement from PR
    
    * refactor: packages/query-core/src/queryObserver.ts remove
    
    ---------
    
    Co-authored-by: davidaghassi <davidaghassi@robinhood.com>
    Co-authored-by: Dominik Dorfmeister <office@dorfmeister.cc>
    3 people authored Oct 9, 2024

    Verified

    This commit was created on GitHub.com and signed with GitHub’s verified signature.
    Copy the full SHA
    5499577 View commit details
  4. release: v5.59.6

    tannerlinsley committed Oct 9, 2024
    Copy the full SHA
    dcffe89 View commit details
  5. fix(eslint-plugin-query): ignore all non-identifier properties in rul…

    …e `infinite-query-property-order` (#8158)
    
    fixes #8156
    schiller-manuel authored Oct 9, 2024

    Verified

    This commit was created on GitHub.com and signed with GitHub’s verified signature.
    Copy the full SHA
    81e443c View commit details
  6. release: v5.59.7

    tannerlinsley committed Oct 9, 2024
    Copy the full SHA
    eb341fc View commit details
  7. fix: allow optional initialData object (#8157)

    Co-authored-by: Dominik Dorfmeister <office@dorfmeister.cc>
    jimmycallin and TkDodo authored Oct 9, 2024

    Verified

    This commit was created on GitHub.com and signed with GitHub’s verified signature.
    Copy the full SHA
    329b5f8 View commit details
  8. release: v5.59.8

    tannerlinsley committed Oct 9, 2024
    Copy the full SHA
    0f7baef View commit details

Commits on Oct 10, 2024

  1. test(react-query): update describe in infiniteQueryOptions.test-d.tsx (

    gwansikk authored Oct 10, 2024

    Verified

    This commit was created on GitHub.com and signed with GitHub’s verified signature.
    Copy the full SHA
    e3aca98 View commit details
  2. fix(core): don't consider queries as enabled if they have no observer…

    …s and have never fetched (successfully or erroneously) (#8161)
    
    it's very likely that this used to be a disabled observer; one other case would be canceling a query while you were initially fetching it, but this is a weird corner case that brings all sorts of troubles
    
    additionally, we can check for the queryFn being a skipToken; even if we have data in the cache, when the queryFn is currently set to skipToken, this is means we never want to see this query fetch
    TkDodo authored Oct 10, 2024

    Verified

    This commit was created on GitHub.com and signed with GitHub’s verified signature.
    Copy the full SHA
    5228e51 View commit details
  3. release: v5.59.9

    tannerlinsley committed Oct 10, 2024
    Copy the full SHA
    6469385 View commit details

Commits on Oct 11, 2024

  1. fix(react-query): Allow optional initialData object in queryOptions (#…

    …8162)
    
    * fix(react-query): Allow optional initialData in infiniteQueryoptions
    
    * fix(react-query): Allow optional initialData object in queryOptions
    
    * refactor(react-query): removed unnecessary lines in infiniteQueryOptions test
    
    ---------
    
    Co-authored-by: chosunghoon <shcho@team-everywhere.com>
    sungpaks and chosunghoon authored Oct 11, 2024

    Verified

    This commit was created on GitHub.com and signed with GitHub’s verified signature.
    Copy the full SHA
    931d98d View commit details
  2. fix(core): correctly gc query when suspense is used when query unmoun…

    …ts while it's still fetching (#8168)
    
    * fix(core): correctly gc query when suspense is used when query unmounts while it's still fetching
    
    the `isFetchingOptimistic` workaround was added to make sure some "thing" I don't remember anymore works in suspense; we added tests for that;
    
    however, in the meantime, we added a minimum gcTime for suspense queries, which also solves that problem (tests still work); this makes the `isFetchingOptimistic` workaround unnecessary, and this workaround is actually what causes the unmount issue
    
    * chore: try to stabilize a flaky test
    TkDodo authored Oct 11, 2024

    Verified

    This commit was created on GitHub.com and signed with GitHub’s verified signature.
    Copy the full SHA
    5edd617 View commit details
  3. release: v5.59.10

    tannerlinsley committed Oct 11, 2024
    Copy the full SHA
    c635194 View commit details
  4. refactor(types): throw type error when skipToken is present in susp…

    …ense query (#8082)
    
    * refactor: handle type error when skipToken is present in suspense query
    
    * test(react-query): add skipToken test for query hooks
    
    * fix: merge form main
    
    * ci: apply automated fixes
    
    * feat(react-query): display “skipToken is not allowed” message in suspense hooks
    
    * feat(react-query): display “skipToken is not allowed” message in suspense hooks
    
    * feat(react-query): display “skipToken is not allowed” message in suspense hooks
    
    * fix(react-query): update error message in useSuspenseInfiniteQuery
    
    * test(react-query): add test case
    
    ---------
    
    Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>
    Co-authored-by: Dominik Dorfmeister <office@dorfmeister.cc>
    3 people authored Oct 11, 2024

    Verified

    This commit was created on GitHub.com and signed with GitHub’s verified signature.
    Copy the full SHA
    a991d92 View commit details
  5. release: v5.59.11

    tannerlinsley committed Oct 11, 2024
    Copy the full SHA
    babf66f View commit details

Commits on Oct 12, 2024

  1. types(react-query): export QueryErrorResetBoundaryFunction (#8089)

    * feat(react-query): export QueryErrorResetBoundaryFunction
    
    Export the QueryErrorResetBoundaryFunction render prop function
    signature so users don't have to write wierd types of there own
    
    * fix: add extra functions
    
    ---------
    
    Co-authored-by: Dominik Dorfmeister <office@dorfmeister.cc>
    DogPawHat and TkDodo authored Oct 12, 2024

    Verified

    This commit was created on GitHub.com and signed with GitHub’s verified signature.
    Copy the full SHA
    4dfb0fc View commit details
  2. fix(query-core): move thenable-recreation into createResult (#8169)

    * fix: move thenable-recreation into createResult
    
    `updateResult` will only be called after a fetch, but when we switch between caches without a fetch, we will only call `createResult`; this fix stops `data` from the queryResult and the `thenable` to go out-of-sync; it's backwards compatible because `updateResult` also invokes `createResult`
    
    * oops
    
    * test: I'm sick of this flaky test
    
    * chore: eslint reports an unused type assertion here
    TkDodo authored Oct 12, 2024

    Verified

    This commit was created on GitHub.com and signed with GitHub’s verified signature.
    Copy the full SHA
    4758303 View commit details
  3. release: v5.59.12

    tannerlinsley committed Oct 12, 2024
    Copy the full SHA
    8e805fb View commit details
  4. fix(query-core): don't finalizeThenable of different queries (#8171)

    * fix(query-core): don't finalizeThenable of different queries
    
    if we have multiple promises in-flight, once they resolve, we need to make sure to not finalize with data / error from a different key; otherwise, we might see intermediate data of non-matching keys
    
    * chore: extract promise tests to their own file
    
    * test: add a test case for not resolving with intermediate data
    
    * fix: only stop finalizing if we were previously in pending state
    
    this makes sure we can read stale data from entries when switching to them immediately
    
    * chore: add another test for background updates
    TkDodo authored Oct 12, 2024

    Verified

    This commit was created on GitHub.com and signed with GitHub’s verified signature.
    Copy the full SHA
    5d69ad7 View commit details
  5. release: v5.59.13

    tannerlinsley committed Oct 12, 2024
    Copy the full SHA
    2649e52 View commit details

Commits on Oct 13, 2024

  1. fix(react-query): do not overwrite staleTime with the suspense defaul…

    …t value if it's a function (#8174)
    
    * fix(react-query): do not overwrite staleTime with the suspense default value if it's a function
    
    * test: improve
    
    * chore: fix test
    TkDodo authored Oct 13, 2024

    Verified

    This commit was created on GitHub.com and signed with GitHub’s verified signature.
    Copy the full SHA
    d409854 View commit details

Commits on Oct 15, 2024

  1. fix(react-query): make queryFn optional again (#8176)

    * make queryFn optional again
    
    * more fix
    juliusmarminge authored Oct 15, 2024

    Verified

    This commit was created on GitHub.com and signed with GitHub’s verified signature.
    Copy the full SHA
    a085c92 View commit details
  2. release: v5.59.14

    tannerlinsley committed Oct 15, 2024
    Copy the full SHA
    1adaf3f View commit details
  3. fix(react-query): resolve overload matches error with exactOptionalPr…

    …opertyTypes in queryOptions (#8186)
    gwansikk authored Oct 15, 2024

    Verified

    This commit was created on GitHub.com and signed with GitHub’s verified signature.
    Copy the full SHA
    6c06781 View commit details
  4. release: v5.59.15

    tannerlinsley committed Oct 15, 2024
    Copy the full SHA
    0c720e1 View commit details

Commits on Oct 16, 2024

  1. docs: 'hydrate' to 'dehydrate' in documentation (#8190)

    Ariel-Moroshko authored Oct 16, 2024

    Verified

    This commit was created on GitHub.com and signed with GitHub’s verified signature.
    Copy the full SHA
    1980a11 View commit details

Commits on Oct 20, 2024

  1. docs(react-query): fix prefetch with suspense example (#8193)

    * docs: react prefetch with suspense example
    
    * remove notifyOnChangeProps from usePrefetchQuery
    qiushiyan authored Oct 20, 2024

    Verified

    This commit was created on GitHub.com and signed with GitHub’s verified signature.
    Copy the full SHA
    a2ea754 View commit details

Commits on Oct 21, 2024

  1. docs: Update disabling-queries.md (#8201)

    olliechick authored Oct 21, 2024

    Verified

    This commit was created on GitHub.com and signed with GitHub’s verified signature.
    Copy the full SHA
    9d99fcb View commit details

Commits on Oct 23, 2024

  1. chore(react-query): remove unnecessary test file (__test__/suspense.t…

    …sx, suspense.test-d.tsx) (#8208)
    
    * refactor(react-query): remove unnecessary test file
    
    * chore: update
    manudeli authored Oct 23, 2024

    Verified

    This commit was created on GitHub.com and signed with GitHub’s verified signature.
    Copy the full SHA
    d3e2a8a View commit details
  2. chore(query-core): define queryCache notify method's return type (#8191)

    Co-authored-by: Dominik Dorfmeister <office@dorfmeister.cc>
    haeunnam and TkDodo authored Oct 23, 2024

    Verified

    This commit was created on GitHub.com and signed with GitHub’s verified signature.
    Copy the full SHA
    4fceb26 View commit details
  3. fix(react-query): make sure promises are always finalized (#8211)

    otherwise, there can be cases with multiple observers where we have listeners already, but still need to finalize
    TkDodo authored Oct 23, 2024

    Verified

    This commit was created on GitHub.com and signed with GitHub’s verified signature.
    Copy the full SHA
    df49fbd View commit details
  4. release: v5.59.16

    tannerlinsley committed Oct 23, 2024
    Copy the full SHA
    820bb81 View commit details
  5. chore(docs): update useQueryFocusAware docs (#8205)

    * chore(docs): update react native useQueryFocusAware docs
    
    * ci: apply automated fixes
    
    ---------
    
    Co-authored-by: Dominik Dorfmeister <office@dorfmeister.cc>
    Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>
    3 people authored Oct 23, 2024

    Verified

    This commit was created on GitHub.com and signed with GitHub’s verified signature.
    Copy the full SHA
    caf6556 View commit details

Commits on Oct 24, 2024

  1. Verified

    This commit was created on GitHub.com and signed with GitHub’s verified signature.
    Copy the full SHA
    1865f0d View commit details

Commits on Oct 25, 2024

  1. Verified

    This commit was created on GitHub.com and signed with GitHub’s verified signature.
    Copy the full SHA
    c61ff1e View commit details

Commits on Nov 2, 2024

  1. Verified

    This commit was created on GitHub.com and signed with GitHub’s verified signature.
    Copy the full SHA
    39a35d8 View commit details
  2. Verified

    This commit was created on GitHub.com and signed with GitHub’s verified signature.
    Copy the full SHA
    c643635 View commit details
  3. release: v5.59.17

    tannerlinsley committed Nov 2, 2024
    Copy the full SHA
    fdc5c8e View commit details

Commits on Nov 3, 2024

  1. fix(useQuery): don't retryOnMount when prefetchInRender is used (#8247)

    otherwise, queries will not stay in error state, but immediately go into pending + fetching again; this is also shown by the fact that an additional test now failed, because it didn't reset the error boundary correctly
    TkDodo authored Nov 3, 2024

    Verified

    This commit was created on GitHub.com and signed with GitHub’s verified signature.
    Copy the full SHA
    74f0d6a View commit details
  2. release: v5.59.18

    tannerlinsley committed Nov 3, 2024
    Copy the full SHA
    1a8354f View commit details
  3. Verified

    This commit was created on GitHub.com and signed with GitHub’s verified signature.
    Copy the full SHA
    0f84062 View commit details
  4. docs(community-projects): Add Atomic CRM to the list of community pro…

    …jects (#8229)
    
    Co-authored-by: Dominik Dorfmeister <office@dorfmeister.cc>
    CarolineClr and TkDodo authored Nov 3, 2024

    Verified

    This commit was created on GitHub.com and signed with GitHub’s verified signature.
    Copy the full SHA
    92defc6 View commit details
  5. fix(query-devtools): handle null properties for __previousQueryOptions (

    #8240)
    
    Co-authored-by: Dominik Dorfmeister <office@dorfmeister.cc>
    kaehehehe and TkDodo authored Nov 3, 2024

    Verified

    This commit was created on GitHub.com and signed with GitHub’s verified signature.
    Copy the full SHA
    9c93dc0 View commit details
  6. release: v5.59.19

    tannerlinsley committed Nov 3, 2024
    Copy the full SHA
    b8bef6a View commit details

Commits on Nov 4, 2024

  1. Verified

    This commit was created on GitHub.com and signed with GitHub’s verified signature.
    Copy the full SHA
    aa92acc View commit details
  2. test(react-query): type test usePrefetchInfiniteQuery correctly (#8223)

    * test(react-query): type test usePrefetchInfiniteQuery correctly
    
    * chore: update
    manudeli authored Nov 4, 2024

    Verified

    This commit was created on GitHub.com and signed with GitHub’s verified signature.
    Copy the full SHA
    06e315c View commit details

Commits on Nov 6, 2024

  1. fix: don't ship test files

    TkDodo committed Nov 6, 2024
    Copy the full SHA
    848df62 View commit details
  2. release: v5.59.20

    tannerlinsley committed Nov 6, 2024
    Copy the full SHA
    5ce9959 View commit details

Commits on Nov 7, 2024

  1. Verified

    This commit was created on GitHub.com and signed with GitHub’s verified signature.
    Copy the full SHA
    2459701 View commit details
Showing 549 changed files with 28,080 additions and 23,842 deletions.
12 changes: 7 additions & 5 deletions .github/renovate.json
Original file line number Diff line number Diff line change
@@ -24,18 +24,20 @@
"node",
"react",
"react-dom",
"react-scripts",
"tsup",
"typescript",
"typescript47",
"typescript48",
"typescript49",
"typescript50",
"typescript51",
"typescript52",
"typescript53",
"typescript54",
"typescript55",
"typescript56",
"typescript57",
"vue",
"vue-tsc",
"vue2",
"vue2.7"
"vue2.7",
"webpack"
]
}
2 changes: 1 addition & 1 deletion .github/workflows/autofix.yml
Original file line number Diff line number Diff line change
@@ -18,7 +18,7 @@ jobs:
runs-on: ubuntu-latest
steps:
- name: Checkout
uses: actions/checkout@v4.1.7
uses: actions/checkout@v4.2.2
- name: Setup Tools
uses: tanstack/config/.github/setup@main
- name: Fix formatting
4 changes: 2 additions & 2 deletions .github/workflows/ci.yml
Original file line number Diff line number Diff line change
@@ -27,7 +27,7 @@ jobs:
runs-on: ubuntu-latest
steps:
- name: Checkout
uses: actions/checkout@v4.1.7
uses: actions/checkout@v4.2.2
with:
fetch-depth: 0
- name: Start Nx Agents
@@ -50,7 +50,7 @@ jobs:
NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
TAG: ${{ inputs.tag }}
- name: Upload coverage to Codecov
uses: codecov/codecov-action@v4.5.0
uses: codecov/codecov-action@v4.6.0
with:
directory: packages
env:
22 changes: 18 additions & 4 deletions .github/workflows/pr.yml
Original file line number Diff line number Diff line change
@@ -14,22 +14,23 @@ env:

permissions:
contents: read
pull-requests: write

jobs:
test:
name: Test
runs-on: ubuntu-latest
steps:
- name: Checkout
uses: actions/checkout@v4.1.7
uses: actions/checkout@v4.2.2
with:
fetch-depth: 0
- name: Start Nx Agents
run: npx nx-cloud start-ci-run --distribute-on=".nx/workflows/dynamic-changesets.yaml"
- name: Setup Tools
uses: tanstack/config/.github/setup@main
- name: Get base and head commits for `nx affected`
uses: nrwl/nx-set-shas@v4.0.6
uses: nrwl/nx-set-shas@v4.1.2
with:
main-branch-name: main
- name: Run Checks
@@ -38,7 +39,7 @@ jobs:
if: ${{ always() }}
run: npx nx-cloud stop-all-agents
- name: Upload coverage to Codecov
uses: codecov/codecov-action@v4.5.0
uses: codecov/codecov-action@v4.6.0
with:
directory: packages
env:
@@ -48,7 +49,7 @@ jobs:
runs-on: ubuntu-latest
steps:
- name: Checkout
uses: actions/checkout@v4.1.7
uses: actions/checkout@v4.2.2
with:
fetch-depth: 0
- name: Setup Tools
@@ -57,3 +58,16 @@ jobs:
run: pnpm run build:all
- name: Publish Previews
run: pnpx pkg-pr-new publish --pnpm --compact './packages/*' --template './examples/*/*'
- name: Determine commit SHA
id: determine-sha
run: |
echo "COMMIT_SHA=${{ github.event.pull_request.head.sha || github.sha }}" >> $GITHUB_ENV
- name: Preview Bundle Size
uses: marocchino/sticky-pull-request-comment@52423e01640425a022ef5fd42c6fb5f633a02728
with:
message: |
Sizes for commit ${{ env.COMMIT_SHA }}:
| Branch | Bundle Size |
|--------|--------|
| Main | [![](https://deno.bundlejs.com/badge?q=https://esm.sh/@tanstack/react-query/es2022/react-query.mjs&config={%22esbuild%22:{%22external%22:[%22react@^19.0.0/jsx-runtime?target=es2022%22,%22react@^19.0.0?target=es2022%22]}}&badge=detailed)](https://bundlejs.com/?q=https://esm.sh/@tanstack/react-query/es2022/react-query.mjs&config=%7B%22esbuild%22:%7B%22external%22:%5B%22react@%5E19.0.0/jsx-runtime?target=es2022%22,%22react@%5E19.0.0?target=es2022%22%5D%7D%7D) |
| This PR | [![](https://deno.bundlejs.com/badge?q=https://esm.sh/pr/@tanstack/react-query@${{ env.COMMIT_SHA }}/es2022/react-query.mjs&config={%22esbuild%22:{%22external%22:[%22react@^19.0.0/jsx-runtime?target=es2022%22,%22react@^19.0.0?target=es2022%22]}}&badge=detailed)](https://bundlejs.com/?q=https://esm.sh/pr/@tanstack/react-query@${{ env.COMMIT_SHA }}/es2022/react-query.mjs&config=%7B%22esbuild%22:%7B%22external%22:%5B%22react@%5E19.0.0/jsx-runtime?target=es2022%22,%22react@%5E19.0.0?target=es2022%22%5D%7D%7D) |
1 change: 1 addition & 0 deletions .gitignore
Original file line number Diff line number Diff line change
@@ -10,6 +10,7 @@ yarn.lock
build
coverage
dist
dist-ts

# misc
.DS_Store
2 changes: 1 addition & 1 deletion .nvmrc
Original file line number Diff line number Diff line change
@@ -1 +1 @@
22.4.0
22.12.0
42 changes: 0 additions & 42 deletions .pnpmfile.cjs

This file was deleted.

2 changes: 1 addition & 1 deletion CONTRIBUTING.md
Original file line number Diff line number Diff line change
@@ -23,7 +23,7 @@ If you have been assigned to fix an issue or develop a new feature, please follo
pnpm install
```

- We use [pnpm](https://pnpm.io/) v8 for package management (run in case of pnpm-related issues).
- We use [pnpm](https://pnpm.io/) v9 for package management (run in case of pnpm-related issues).

```bash
corepack enable && corepack prepare
3 changes: 3 additions & 0 deletions codecov.yml
Original file line number Diff line number Diff line change
@@ -1,3 +1,6 @@
codecov:
max_report_age: off

coverage:
status:
project:
22 changes: 21 additions & 1 deletion docs/config.json
Original file line number Diff line number Diff line change
@@ -145,6 +145,10 @@
"label": "Devtools",
"to": "framework/angular/devtools"
},
{
"label": "TypeScript",
"to": "framework/angular/typescript"
},
{
"label": "Zoneless",
"to": "framework/angular/zoneless"
@@ -518,6 +522,10 @@
"label": "Mutations",
"to": "framework/angular/guides/mutations"
},
{
"label": "Mutation Options",
"to": "framework/angular/guides/mutation-options"
},
{
"label": "Query Invalidation",
"to": "framework/angular/guides/query-invalidation"
@@ -1038,12 +1046,16 @@
"label": "Basic",
"to": "framework/angular/examples/basic"
},
{
"label": "Auto Refetching / Polling / Realtime",
"to": "framework/angular/examples/auto-refetching"
},
{
"label": "Pagination",
"to": "framework/angular/examples/pagination"
},
{
"label": "Infinite query with Max pages",
"label": "Infinite query with maxPages",
"to": "framework/angular/examples/infinite-query-with-max-pages"
},
{
@@ -1053,6 +1065,14 @@
{
"label": "RxJS autocomplete",
"to": "framework/angular/examples/rxjs"
},
{
"label": "Query options from a service",
"to": "framework/angular/examples/query-options-from-a-service"
},
{
"label": "Devtools embedded panel",
"to": "framework/angular/examples/devtools-panel"
}
]
}
1 change: 1 addition & 0 deletions docs/eslint/eslint-plugin-query.md
Original file line number Diff line number Diff line change
@@ -97,3 +97,4 @@ Alternatively, add `@tanstack/query` to the plugins section, and configure the r
- [@tanstack/query/no-rest-destructuring](../no-rest-destructuring)
- [@tanstack/query/stable-query-client](../stable-query-client)
- [@tanstack/query/no-unstable-deps](../no-unstable-deps)
- [@tanstack/query/infinite-query-property-order](../infinite-query-property-order)
114 changes: 77 additions & 37 deletions docs/framework/angular/devtools.md
Original file line number Diff line number Diff line change
@@ -3,62 +3,102 @@ id: devtools
title: Devtools
---

## Install and Import the Devtools
## Enable devtools

The devtools are a separate package that you need to install:
The devtools help you debug and inspect your queries and mutations. You can enable the devtools by adding `withDevtools` to `provideTanStackQuery`.

```bash
npm i @tanstack/angular-query-devtools-experimental
```

or
By default, the devtools are enabled when Angular [`isDevMode`](https://angular.dev/api/core/isDevMode) returns true. So you don't need to worry about excluding them during a production build. The core tools are lazily loaded and excluded from bundled code. In most cases, all you'll need to do is add `withDevtools()` to `provideTanStackQuery` without any additional configuration.

```bash
pnpm add @tanstack/angular-query-devtools-experimental
```ts
import {
QueryClient,
provideTanStackQuery,
withDevtools,
} from '@tanstack/angular-query-experimental'

export const appConfig: ApplicationConfig = {
providers: [provideTanStackQuery(new QueryClient(), withDevtools())],
}
```

or
## Configuring if devtools are loaded

```bash
yarn add @tanstack/angular-query-devtools-experimental
```
If you need more control over when devtools are loaded, you can use the `loadDevtools` option. This is particularly useful if you want to load devtools based on environment configurations. For instance, you might have a test environment running in production mode but still require devtools to be available.

When not setting the option or setting it to 'auto', the devtools will be loaded when Angular is in development mode.

or
```ts
provideTanStackQuery(new QueryClient(), withDevtools())

```bash
bun add @tanstack/angular-query-devtools-experimental
// which is equivalent to
provideTanStackQuery(
new QueryClient(),
withDevtools(() => ({ loadDevtools: 'auto' })),
)
```

You can import the devtools like this:
When setting the option to true, the devtools will be loaded in both development and production mode.

```ts
import { AngularQueryDevtools } from '@tanstack/angular-query-devtools-experimental'
provideTanStackQuery(
new QueryClient(),
withDevtools(() => ({ loadDevtools: true })),
)
```

## Floating Mode
When setting the option to false, the devtools will not be loaded.

Floating 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.

Place the following code as high in your Angular app as you can. The closer it is to the root of the page, the better it will work!
```ts
provideTanStackQuery(
new QueryClient(),
withDevtools(() => ({ loadDevtools: false })),
)
```

```angular-ts
import { AngularQueryDevtools } from '@tanstack/angular-query-devtools-experimental'
import { Component } from '@angular/core';
The `withDevtools` options are returned from a callback function to support reactivity through signals. In the following example
a signal is created from a RxJS observable that listens for a keyboard shortcut. When the event is triggered, the devtools are lazily loaded.
Using this technique allows you to support on-demand loading of the devtools even in production mode, without including the full tools in the bundled code.

@Component({
selector: 'app-root',
standalone: true,
imports: [AngularQueryDevtools],
template: `
<angular-query-devtools initialIsOpen />
`,
})
```ts
@Injectable({ providedIn: 'root' })
class DevtoolsOptionsManager {
loadDevtools = toSignal(
fromEvent<KeyboardEvent>(document, 'keydown').pipe(
map(
(event): boolean =>
event.metaKey && event.ctrlKey && event.shiftKey && event.key === 'D',
),
scan((acc, curr) => acc || curr, false),
),
{
initialValue: false,
},
)
}

export const appConfig: ApplicationConfig = {
providers: [
provideHttpClient(),
provideTanStackQuery(
new QueryClient(),
withDevtools(() => ({
initialIsOpen: true,
loadDevtools: inject(DevtoolsOptionsManager).loadDevtools(),
})),
),
],
}
```

### Options

- `initialIsOpen: Boolean`
- Set this `true` if you want the dev tools to default to being open
Of these options `client`, `position`, `errorTypes`, `buttonPosition`, and `initialIsOpen` support reactivity through signals.

- `loadDevtools?: 'auto' | boolean`
- Defaults to `auto`: lazily loads devtools when in development mode. Skips loading in production mode.
- Use this to control if the devtools are loaded.
- `initialIsOpen?: Boolean`
- Set this to `true` if you want the tools to default to being open
- `buttonPosition?: "top-left" | "top-right" | "bottom-left" | "bottom-right" | "relative"`
- Defaults to `bottom-right`
- The position of the TanStack logo to open and close the devtools panel
@@ -67,8 +107,8 @@ import { Component } from '@angular/core';
- Defaults to `bottom`
- The position of the Angular Query devtools panel
- `client?: QueryClient`,
- Use this to use a custom QueryClient. Otherwise, the QueryClient provided through provideAngularQuery() will be injected.
- `errorTypes?: { name: string; initializer: (query: Query) => TError}`
- Use this to use a custom QueryClient. Otherwise, the QueryClient provided through `provideTanStackQuery` will be injected.
- `errorTypes?: { name: string; initializer: (query: Query) => TError}[]`
- Use this to predefine some errors that can be triggered on your queries. Initializer will be called (with the specific query) when that error is toggled on from the UI. It must return an Error.
- `styleNonce?: string`
- Use this to pass a nonce to the style tag that is added to the document head. This is useful if you are using a Content Security Policy (CSP) nonce to allow inline styles.
Loading