Merge branch 'main' into types/vue-query-shallow

DamianOsipiuk · web-flow · commit 1fc705c8d54e · 2025-04-10T14:03:56.000+02:00
diff --git a/docs/framework/react/plugins/createPersister.md b/docs/framework/react/plugins/createPersister.md
@@ -39,6 +39,7 @@ bun add @tanstack/query-persist-client-core
 - Pass that `persister` as an option to your Query. This can be done either by passing it to the `defaultOptions` of the `QueryClient` or to any `useQuery` hook instance.
   - If you pass this `persister` as `defaultOptions`, all queries will be persisted to the provided `storage`. You can additionally narrow this down by passing `filters`. In contrast to the `persistClient` plugin, this will not persist the whole query client as a single item, but each query separately. As a key, the query hash is used.
   - If you provide this `persister` to a single `useQuery` hook, only this Query will be persisted.
+- Note: `queryClient.setQueryData()` operations are not persisted, this means that if you perform an optimistic update and refresh the page before the query has been invalidated, your changes to the query data will be lost. See https://github.com/TanStack/query/issues/6310
 
 This way, you do not need to store whole `QueryClient`, but choose what is worth to be persisted in your application. Each query is lazily restored (when the Query is first used) and persisted (after each run of the `queryFn`), so it does not need to be throttled. `staleTime` is also respected after restoring the Query, so if data is considered `stale`, it will be refetched immediately after restoring. If data is `fresh`, the `queryFn` will not run.
 
diff --git a/docs/framework/vue/guides/disabling-queries.md b/docs/framework/vue/guides/disabling-queries.md
@@ -18,15 +18,16 @@ const { isLoading, isError, data, error, refetch, isFetching } = useQuery({
 </script>
 
 <template>
-  <button @click="refetch">Fetch Todos</button>
-  <span v-if="isIdle">Not ready...</span>
-  <span v-else-if="isError">Error: {{ error.message }}</span>
+  <button @click="refetch()">Fetch Todos</button>
+  <span v-if="isLoading">Loading...</span>
+  <span v-else-if="isError">Error: {{ error?.message }}</span>
   <div v-else-if="data">
     <span v-if="isFetching">Fetching...</span>
     <ul>
       <li v-for="todo in data" :key="todo.id">{{ todo.title }}</li>
     </ul>
   </div>
+  <span v-else>Not ready...</span>
 </template>
 ```
 
diff --git a/examples/angular/auto-refetching/package.json b/examples/angular/auto-refetching/package.json
@@ -14,7 +14,7 @@
     "@angular/core": "^19.2.4",
     "@angular/platform-browser": "^19.2.4",
     "@angular/platform-browser-dynamic": "^19.2.4",
-    "@tanstack/angular-query-experimental": "^5.72.2",
+    "@tanstack/angular-query-experimental": "^5.72.3",
     "rxjs": "^7.8.2",
     "tslib": "^2.8.1",
     "zone.js": "0.15.0"
diff --git a/examples/angular/basic/package.json b/examples/angular/basic/package.json
@@ -14,7 +14,7 @@
     "@angular/core": "^19.2.4",
     "@angular/platform-browser": "^19.2.4",
     "@angular/platform-browser-dynamic": "^19.2.4",
-    "@tanstack/angular-query-experimental": "^5.72.2",
+    "@tanstack/angular-query-experimental": "^5.72.3",
     "rxjs": "^7.8.2",
     "tslib": "^2.8.1",
     "zone.js": "0.15.0"
diff --git a/examples/angular/devtools-panel/package.json b/examples/angular/devtools-panel/package.json
@@ -15,8 +15,8 @@
     "@angular/platform-browser": "^19.2.4",
     "@angular/platform-browser-dynamic": "^19.2.4",
     "@angular/router": "^19.2.4",
-    "@tanstack/angular-query-devtools-experimental": "^5.72.2",
-    "@tanstack/angular-query-experimental": "^5.72.2",
+    "@tanstack/angular-query-devtools-experimental": "^5.72.3",
+    "@tanstack/angular-query-experimental": "^5.72.3",
     "rxjs": "^7.8.2",
     "tslib": "^2.8.1",
     "zone.js": "0.15.0"
diff --git a/examples/angular/devtools-panel/src/app/components/lazy-load-devtools-panel-example.component.ts b/examples/angular/devtools-panel/src/app/components/lazy-load-devtools-panel-example.component.ts
@@ -51,7 +51,9 @@ export default class LazyLoadDevtoolsPanelExampleComponent {
       this.devtools.set(
         import('@tanstack/angular-query-devtools-experimental').then(
           ({ injectDevtoolsPanel }) =>
-            injectDevtoolsPanel(this.devToolsOptions, this.injector),
+            injectDevtoolsPanel(this.devToolsOptions, {
+              injector: this.injector,
+            }),
         ),
       )
     }
diff --git a/examples/angular/infinite-query-with-max-pages/package.json b/examples/angular/infinite-query-with-max-pages/package.json
@@ -14,7 +14,7 @@
     "@angular/core": "^19.2.4",
     "@angular/platform-browser": "^19.2.4",
     "@angular/platform-browser-dynamic": "^19.2.4",
-    "@tanstack/angular-query-experimental": "^5.72.2",
+    "@tanstack/angular-query-experimental": "^5.72.3",
     "rxjs": "^7.8.2",
     "tslib": "^2.8.1",
     "zone.js": "0.15.0"
diff --git a/examples/angular/optimistic-updates/package.json b/examples/angular/optimistic-updates/package.json
@@ -15,7 +15,7 @@
     "@angular/forms": "^19.2.4",
     "@angular/platform-browser": "^19.2.4",
     "@angular/platform-browser-dynamic": "^19.2.4",
-    "@tanstack/angular-query-experimental": "^5.72.2",
+    "@tanstack/angular-query-experimental": "^5.72.3",
     "rxjs": "^7.8.2",
     "tslib": "^2.8.1",
     "zone.js": "0.15.0"
diff --git a/examples/angular/pagination/package.json b/examples/angular/pagination/package.json
@@ -14,7 +14,7 @@
     "@angular/core": "^19.2.4",
     "@angular/platform-browser": "^19.2.4",
     "@angular/platform-browser-dynamic": "^19.2.4",
-    "@tanstack/angular-query-experimental": "^5.72.2",
+    "@tanstack/angular-query-experimental": "^5.72.3",
     "rxjs": "^7.8.2",
     "tslib": "^2.8.1",
     "zone.js": "0.15.0"
diff --git a/examples/angular/query-options-from-a-service/package.json b/examples/angular/query-options-from-a-service/package.json
@@ -15,7 +15,7 @@
     "@angular/platform-browser": "^19.2.4",
     "@angular/platform-browser-dynamic": "^19.2.4",
     "@angular/router": "^19.2.4",
-    "@tanstack/angular-query-experimental": "^5.72.2",
+    "@tanstack/angular-query-experimental": "^5.72.3",
     "rxjs": "^7.8.2",
     "tslib": "^2.8.1",
     "zone.js": "0.15.0"
diff --git a/examples/angular/router/package.json b/examples/angular/router/package.json
@@ -15,7 +15,7 @@
     "@angular/platform-browser": "^19.2.4",
     "@angular/platform-browser-dynamic": "^19.2.4",
     "@angular/router": "^19.2.4",
-    "@tanstack/angular-query-experimental": "^5.72.2",
+    "@tanstack/angular-query-experimental": "^5.72.3",
     "rxjs": "^7.8.2",
     "tslib": "^2.8.1",
     "zone.js": "0.15.0"
diff --git a/examples/angular/rxjs/package.json b/examples/angular/rxjs/package.json
@@ -15,7 +15,7 @@
     "@angular/forms": "^19.2.4",
     "@angular/platform-browser": "^19.2.4",
     "@angular/platform-browser-dynamic": "^19.2.4",
-    "@tanstack/angular-query-experimental": "^5.72.2",
+    "@tanstack/angular-query-experimental": "^5.72.3",
     "rxjs": "^7.8.2",
     "tslib": "^2.8.1",
     "zone.js": "0.15.0"
diff --git a/examples/angular/simple/package.json b/examples/angular/simple/package.json
@@ -14,7 +14,7 @@
     "@angular/core": "^19.2.4",
     "@angular/platform-browser": "^19.2.4",
     "@angular/platform-browser-dynamic": "^19.2.4",
-    "@tanstack/angular-query-experimental": "^5.72.2",
+    "@tanstack/angular-query-experimental": "^5.72.3",
     "rxjs": "^7.8.2",
     "tslib": "^2.8.1",
     "zone.js": "0.15.0"
diff --git a/examples/react/basic/package.json b/examples/react/basic/package.json
@@ -5,7 +5,8 @@
   "scripts": {
     "dev": "vite",
     "build": "vite build",
-    "preview": "vite preview"
+    "preview": "vite preview",
+    "test:eslint": "eslint ./src"
   },
   "dependencies": {
     "@tanstack/query-sync-storage-persister": "^5.72.2",
@@ -22,5 +23,14 @@
     "@vitejs/plugin-react": "^4.3.4",
     "typescript": "5.8.2",
     "vite": "^6.2.4"
+  },
+  "nx": {
+    "targets": {
+      "test:eslint": {
+        "dependsOn": [
+          "^build"
+        ]
+      }
+    }
   }
 }
diff --git a/packages/angular-query-devtools-experimental/package.json b/packages/angular-query-devtools-experimental/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@tanstack/angular-query-devtools-experimental",
-  "version": "5.72.2",
+  "version": "5.72.3",
   "description": "Developer tools to interact with and visualize the TanStack/angular-query cache",
   "author": "Arnoud de Vries",
   "license": "MIT",
diff --git a/packages/angular-query-devtools-experimental/src/inject-devtools-panel.ts b/packages/angular-query-devtools-experimental/src/inject-devtools-panel.ts
@@ -18,31 +18,40 @@ import { isPlatformBrowser } from '@angular/common'
 import type { ElementRef } from '@angular/core'
 import type { DevtoolsErrorType } from '@tanstack/query-devtools'
 
+export interface InjectDevtoolsPanelOptions {
+  /**
+   * The `Injector` in which to create the devtools panel.
+   *
+   * If this is not provided, the current injection context will be used instead (via `inject`).
+   */
+  injector?: Injector
+}
+
 /**
  * Inject a TanStack Query devtools panel and render it in the DOM.
  *
  * Devtools panel allows programmatic control over the devtools, for example if you want to render
  * the devtools as part of your own devtools.
  *
  * Consider `withDevtools` instead if you don't need this.
- * @param optionsFn - A function that returns devtools panel options.
- * @param injector - The Angular injector to use.
+ * @param injectDevtoolsPanelFn - A function that returns devtools panel options.
+ * @param options - Additional configuration
  * @returns DevtoolsPanelRef
  * @see https://tanstack.com/query/v5/docs/framework/angular/devtools
  */
 export function injectDevtoolsPanel(
-  optionsFn: () => DevtoolsPanelOptions,
-  injector?: Injector,
+  injectDevtoolsPanelFn: () => DevtoolsPanelOptions,
+  options?: InjectDevtoolsPanelOptions,
 ): DevtoolsPanelRef {
-  !injector && assertInInjectionContext(injectDevtoolsPanel)
-  const currentInjector = injector ?? inject(Injector)
+  !options?.injector && assertInInjectionContext(injectDevtoolsPanel)
+  const currentInjector = options?.injector ?? inject(Injector)
 
   return runInInjectionContext(currentInjector, () => {
     const destroyRef = inject(DestroyRef)
     const isBrowser = isPlatformBrowser(inject(PLATFORM_ID))
     const injectedClient = inject(QueryClient, { optional: true })
 
-    const options = computed(optionsFn)
+    const queryOptions = computed(injectDevtoolsPanelFn)
     let devtools: TanstackQueryDevtoolsPanel | null = null
 
     const destroy = () => {
@@ -63,7 +72,7 @@ export function injectDevtoolsPanel(
         shadowDOMTarget,
         onClose,
         hostElement,
-      } = options()
+      } = queryOptions()
 
       untracked(() => {
         if (!client) throw new Error('No QueryClient found')
diff --git a/packages/angular-query-experimental/package.json b/packages/angular-query-experimental/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@tanstack/angular-query-experimental",
-  "version": "5.72.2",
+  "version": "5.72.3",
   "description": "Signals for managing, caching and syncing asynchronous and remote data in Angular",
   "author": "Arnoud de Vries",
   "license": "MIT",
diff --git a/packages/angular-query-experimental/src/__tests__/inject-infinite-query.test.ts b/packages/angular-query-experimental/src/__tests__/inject-infinite-query.test.ts
@@ -87,7 +87,9 @@ describe('injectInfiniteQuery', () => {
           initialPageParam: 0,
           getNextPageParam: () => 12,
         }),
-        TestBed.inject(Injector),
+        {
+          injector: TestBed.inject(Injector),
+        },
       )
 
       expect(query.status()).toBe('pending')
diff --git a/packages/angular-query-experimental/src/__tests__/inject-is-fetching.test.ts b/packages/angular-query-experimental/src/__tests__/inject-is-fetching.test.ts
@@ -60,7 +60,9 @@ describe('injectIsFetching', () => {
 
     test('can be used outside injection context when passing an injector', () => {
       expect(
-        injectIsFetching(undefined, TestBed.inject(Injector)),
+        injectIsFetching(undefined, {
+          injector: TestBed.inject(Injector),
+        }),
       ).not.toThrow()
     })
   })
diff --git a/packages/angular-query-experimental/src/__tests__/inject-is-mutating.test.ts b/packages/angular-query-experimental/src/__tests__/inject-is-mutating.test.ts
@@ -60,7 +60,9 @@ describe('injectIsMutating', () => {
 
     test('can be used outside injection context when passing an injector', () => {
       expect(
-        injectIsMutating(undefined, TestBed.inject(Injector)),
+        injectIsMutating(undefined, {
+          injector: TestBed.inject(Injector),
+        }),
       ).not.toThrow()
     })
   })
diff --git a/packages/angular-query-experimental/src/__tests__/inject-mutation.test.ts b/packages/angular-query-experimental/src/__tests__/inject-mutation.test.ts
@@ -466,7 +466,9 @@ describe('injectMutation', () => {
             mutationKey: ['injectionContextError'],
             mutationFn: () => Promise.resolve(),
           }),
-          TestBed.inject(Injector),
+          {
+            injector: TestBed.inject(Injector),
+          },
         )
       }).not.toThrow()
     })
diff --git a/packages/angular-query-experimental/src/__tests__/inject-query.test.ts b/packages/angular-query-experimental/src/__tests__/inject-query.test.ts
@@ -551,7 +551,9 @@ describe('injectQuery', () => {
           queryKey: ['manualInjector'],
           queryFn: simpleFetcher,
         }),
-        TestBed.inject(Injector),
+        {
+          injector: TestBed.inject(Injector),
+        },
       )
 
       expect(query.status()).toBe('pending')
diff --git a/packages/angular-query-experimental/src/inject-infinite-query.ts b/packages/angular-query-experimental/src/inject-infinite-query.ts
diff --git a/packages/angular-query-experimental/src/inject-is-fetching.ts b/packages/angular-query-experimental/src/inject-is-fetching.ts
diff --git a/packages/angular-query-experimental/src/inject-is-mutating.ts b/packages/angular-query-experimental/src/inject-is-mutating.ts
diff --git a/packages/angular-query-experimental/src/inject-mutation-state.ts b/packages/angular-query-experimental/src/inject-mutation-state.ts
diff --git a/packages/angular-query-experimental/src/inject-mutation.ts b/packages/angular-query-experimental/src/inject-mutation.ts
diff --git a/packages/angular-query-experimental/src/inject-queries.ts b/packages/angular-query-experimental/src/inject-queries.ts
diff --git a/packages/angular-query-experimental/src/inject-query.ts b/packages/angular-query-experimental/src/inject-query.ts
diff --git a/packages/angular-query-experimental/src/providers.ts b/packages/angular-query-experimental/src/providers.ts
diff --git a/packages/angular-query-experimental/src/util/assert-injector/assert-injector.ts b/packages/angular-query-experimental/src/util/assert-injector/assert-injector.ts

Original file line number	Diff line number	Diff line change
`@@ -51,7 +51,9 @@ export default class LazyLoadDevtoolsPanelExampleComponent {`
`51`	`51`	`this.devtools.set(`
`52`	`52`	`import('@tanstack/angular-query-devtools-experimental').then(`
`53`	`53`	`({ injectDevtoolsPanel }) =>`
`54`		`- injectDevtoolsPanel(this.devToolsOptions, this.injector),`
	`54`	`+ injectDevtoolsPanel(this.devToolsOptions, {`
	`55`	`+ injector: this.injector,`
	`56`	`+ }),`
`55`	`57`	`),`
`56`	`58`	`)`
`57`	`59`	`}`