Merge branch 'main' into feature/typed-predicate

TanStack · Mar 3, 2025 · e281fd9 · e281fd9
2 parents 6e2e3e3 + e85df7a
commit e281fd9
Show file tree

Hide file tree

Showing 89 changed files with 486 additions and 351 deletions.
diff --git a/docs/config.json b/docs/config.json
@@ -145,6 +145,10 @@
               "label": "Quick Start",
               "to": "framework/angular/quick-start"
             },
+            {
+              "label": "Angular HttpClient and other data fetching clients",
+              "to": "framework/angular/angular-httpclient-and-other-data-fetching-clients"
+            },
             {
               "label": "Devtools",
               "to": "framework/angular/devtools"

diff --git a/docs/framework/angular/angular-httpclient-and-other-data-fetching-clients.md b/docs/framework/angular/angular-httpclient-and-other-data-fetching-clients.md
@@ -0,0 +1,48 @@
+---
+id: Angular-HttpClient-and-other-data-fetching-clients
+title: Angular HttpClient and other data fetching clients
+---
+
+Because TanStack Query's fetching mechanisms are agnostically built on Promises, you can use literally any asynchronous data fetching client, including the browser native `fetch` API, `graphql-request`, and more.
+
+## Using Angular's `HttpClient` for data fetching
+
+`HttpClient` is a powerful and integrated part of Angular, which gives the following benefits:
+
+- Mock responses in unit tests using [provideHttpClientTesting](https://angular.dev/guide/http/testing).
+- [Interceptors](https://angular.dev/guide/http/interceptors) can be used for a wide range of functionality including adding authentication headers, performing logging, etc. While some data fetching libraries have their own interceptor system, `HttpClient` interceptors are integrated with Angular's dependency injection system.
+- `HttpClient` automatically informs [`PendingTasks`](https://angular.dev/api/core/PendingTasks#), which enables Angular to be aware of pending requests. Unit tests and SSR can use the resulting application _stableness_ information to wait for pending requests to finish. This makes unit testing much easier for [Zoneless](https://angular.dev/guide/experimental/zoneless) applications.
+- When using SSR, `HttpClient` will [cache requests](https://angular.dev/guide/ssr#caching-data-when-using-HttpClient) performed on the server. This will prevent unneeded requests on the client. `HttpClient` SSR caching works out of the box. TanStack Query has its own hydration functionality which may be more powerful but requires some setup. Which one fits your needs best depends on your use case.
+
+### Using observables in `queryFn`
+
+As TanStack Query is a promise based library, observables from `HttpClient` need to be converted to promises. This can be done with the `lastValueFrom` or `firstValueFrom` functions from `rxjs`.
+
+```ts
+@Component({
+  // ...
+})
+class ExampleComponent {
+  private readonly http = inject(HttpClient)
+
+  readonly query = injectQuery(() => ({
+    queryKey: ['repoData'],
+    queryFn: () =>
+      lastValueFrom(
+        this.http.get('https://api.github.com/repos/tanstack/query'),
+      ),
+  }))
+}
+```
+
+> Since Angular is moving towards RxJS as an optional dependency, it's expected that `HttpClient` will also support promises in the future.
+>
+> Support for observables in TanStack Query for Angular is planned.
+
+## Comparison table
+
+| Data fetching client                                | Pros                                                | Cons                                                                       |
+| --------------------------------------------------- | --------------------------------------------------- | -------------------------------------------------------------------------- |
+| **Angular HttpClient**                              | Featureful and very well integrated with Angular.   | Observables need to be converted to Promises.                              |
+| **Fetch**                                           | Browser native API, so adds nothing to bundle size. | Barebones API which lacks many features.                                   |
+| **Specialized libraries such as `graphql-request`** | Specialized features for specific use cases.        | If it's not an Angular library it won't integrate well with the framework. |
diff --git a/docs/framework/angular/guides/background-fetching-indicators.md b/docs/framework/angular/guides/background-fetching-indicators.md
@@ -8,27 +8,23 @@ ref: docs/framework/react/guides/background-fetching-indicators.md
 
 ```angular-ts
 @Component({
-  selector: 'posts',
+  selector: 'todos',
   template: `
-    @switch (query.status()) {
-      @case ('pending') {
-        Loading...
+    @if (todosQuery.isPending()) {
+      Loading...
+    } @else if (todosQuery.isError()) {
+      An error has occurred: {{ todosQuery.error().message }}
+    } @else if (todosQuery.isSuccess()) {
+      @if (todosQuery.isFetching()) {
+        Refreshing...
       }
-      @case ('error') {
-        An error has occurred: {{ query.error()?.message }}
-      }
-      @default {
-        @if (query.isFetching()) {
-          Refreshing...
-        }
-        @for (todo of query.data()) {
-          <todo [todo]="todo" />
-        }
+      @for (todos of todosQuery.data(); track todo.id) {
+        <todo [todo]="todo" />
       }
     }
   `,
 })
-export class TodosComponent {
+class TodosComponent {
   todosQuery = injectQuery(() => ({
     queryKey: ['todos'],
     queryFn: fetchTodos,

diff --git a/docs/framework/angular/guides/disabling-queries.md b/docs/framework/angular/guides/disabling-queries.md
@@ -70,6 +70,8 @@ export class TodosComponent {
 [//]: # 'Example3'
 
 ```angular-ts
+import { skipToken, injectQuery } from '@tanstack/query-angular'
+
 @Component({
   selector: 'todos',
   template: `

diff --git a/docs/framework/angular/guides/queries.md b/docs/framework/angular/guides/queries.md
@@ -10,6 +10,7 @@ replace:
     'custom hooks': 'services',
     'the `useQuery` hook': '`injectQuery`',
     '`useQuery`': '`injectQuery`',
+    "TypeScript will also narrow the type of data correctly if you've checked for pending and error before accessing it.": 'TypeScript will only narrow the type when checking boolean signals such as `isPending` and `isError`.',
   }
 ---
 

diff --git a/docs/framework/angular/guides/window-focus-refetching.md b/docs/framework/angular/guides/window-focus-refetching.md
@@ -8,7 +8,7 @@ replace: { '@tanstack/react-query': '@tanstack/angular-query-experimental' }
 [//]: # 'Example'
 
 ```ts
-bootstrapApplication(AppComponent, {
+export const appConfig: ApplicationConfig = {
   providers: [
     provideTanStackQuery(
       new QueryClient({
@@ -20,7 +20,7 @@ bootstrapApplication(AppComponent, {
       }),
     ),
   ],
-})
+}
 ```
 
 [//]: # 'Example'

diff --git a/examples/angular/auto-refetching/package.json b/examples/angular/auto-refetching/package.json
@@ -14,7 +14,7 @@
     "@angular/core": "^19.1.0-next.0",
     "@angular/platform-browser": "^19.1.0-next.0",
     "@angular/platform-browser-dynamic": "^19.1.0-next.0",
-    "@tanstack/angular-query-experimental": "^5.66.9",
+    "@tanstack/angular-query-experimental": "^5.66.11",
     "rxjs": "^7.8.1",
     "tslib": "^2.6.3",
     "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.1.0-next.0",
     "@angular/platform-browser": "^19.1.0-next.0",
     "@angular/platform-browser-dynamic": "^19.1.0-next.0",
-    "@tanstack/angular-query-experimental": "^5.66.9",
+    "@tanstack/angular-query-experimental": "^5.66.11",
     "rxjs": "^7.8.1",
     "tslib": "^2.6.3",
     "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.1.0-next.0",
     "@angular/platform-browser-dynamic": "^19.1.0-next.0",
     "@angular/router": "^19.1.0-next.0",
-    "@tanstack/angular-query-devtools-experimental": "^5.66.9",
-    "@tanstack/angular-query-experimental": "^5.66.9",
+    "@tanstack/angular-query-devtools-experimental": "^5.66.11",
+    "@tanstack/angular-query-experimental": "^5.66.11",
     "rxjs": "^7.8.1",
     "tslib": "^2.6.3",
     "zone.js": "^0.15.0"

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.1.0-next.0",
     "@angular/platform-browser": "^19.1.0-next.0",
     "@angular/platform-browser-dynamic": "^19.1.0-next.0",
-    "@tanstack/angular-query-experimental": "^5.66.9",
+    "@tanstack/angular-query-experimental": "^5.66.11",
     "rxjs": "^7.8.1",
     "tslib": "^2.6.3",
     "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.1.0-next.0",
     "@angular/platform-browser": "^19.1.0-next.0",
     "@angular/platform-browser-dynamic": "^19.1.0-next.0",
-    "@tanstack/angular-query-experimental": "^5.66.9",
+    "@tanstack/angular-query-experimental": "^5.66.11",
     "rxjs": "^7.8.1",
     "tslib": "^2.6.3",
     "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.1.0-next.0",
     "@angular/platform-browser": "^19.1.0-next.0",
     "@angular/platform-browser-dynamic": "^19.1.0-next.0",
-    "@tanstack/angular-query-experimental": "^5.66.9",
+    "@tanstack/angular-query-experimental": "^5.66.11",
     "rxjs": "^7.8.1",
     "tslib": "^2.6.3",
     "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.1.0-next.0",
     "@angular/platform-browser-dynamic": "^19.1.0-next.0",
     "@angular/router": "^19.1.0-next.0",
-    "@tanstack/angular-query-experimental": "^5.66.9",
+    "@tanstack/angular-query-experimental": "^5.66.11",
     "rxjs": "^7.8.1",
     "tslib": "^2.6.3",
     "zone.js": "^0.15.0"

diff --git a/examples/angular/query-options-from-a-service/src/assets/.gitkeep b/examples/angular/query-options-from-a-service/src/assets/.gitkeep
diff --git a/examples/angular/router/package.json b/examples/angular/router/package.json
@@ -15,7 +15,7 @@
     "@angular/platform-browser": "^19.1.0-next.0",
     "@angular/platform-browser-dynamic": "^19.1.0-next.0",
     "@angular/router": "^19.1.0-next.0",
-    "@tanstack/angular-query-experimental": "^5.66.9",
+    "@tanstack/angular-query-experimental": "^5.66.11",
     "rxjs": "^7.8.1",
     "tslib": "^2.6.3",
     "zone.js": "^0.15.0"

diff --git a/examples/angular/router/src/assets/.gitkeep b/examples/angular/router/src/assets/.gitkeep
diff --git a/examples/angular/rxjs/package.json b/examples/angular/rxjs/package.json
@@ -15,7 +15,7 @@
     "@angular/forms": "19.1.0-next.0",
     "@angular/platform-browser": "^19.1.0-next.0",
     "@angular/platform-browser-dynamic": "^19.1.0-next.0",
-    "@tanstack/angular-query-experimental": "^5.66.9",
+    "@tanstack/angular-query-experimental": "^5.66.11",
     "rxjs": "^7.8.1",
     "tslib": "^2.6.3",
     "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.1.0-next.0",
     "@angular/platform-browser": "^19.1.0-next.0",
     "@angular/platform-browser-dynamic": "^19.1.0-next.0",
-    "@tanstack/angular-query-experimental": "^5.66.9",
+    "@tanstack/angular-query-experimental": "^5.66.11",
     "rxjs": "^7.8.1",
     "tslib": "^2.6.3",
     "zone.js": "^0.15.0"

diff --git a/examples/angular/simple/src/assets/.gitkeep b/examples/angular/simple/src/assets/.gitkeep
diff --git a/examples/react/algolia/package.json b/examples/react/algolia/package.json
@@ -9,8 +9,8 @@
   },
   "dependencies": {
     "@algolia/client-search": "5.2.1",
-    "@tanstack/react-query": "^5.66.9",
-    "@tanstack/react-query-devtools": "^5.66.9",
+    "@tanstack/react-query": "^5.66.11",
+    "@tanstack/react-query-devtools": "^5.66.11",
     "react": "^19.0.0",
     "react-dom": "^19.0.0"
   },

diff --git a/examples/react/auto-refetching/package.json b/examples/react/auto-refetching/package.json
@@ -8,8 +8,8 @@
     "start": "next start"
   },
   "dependencies": {
-    "@tanstack/react-query": "^5.66.9",
-    "@tanstack/react-query-devtools": "^5.66.9",
+    "@tanstack/react-query": "^5.66.11",
+    "@tanstack/react-query-devtools": "^5.66.11",
     "next": "^14.2.20",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"

diff --git a/examples/react/basic-graphql-request/package.json b/examples/react/basic-graphql-request/package.json
@@ -8,8 +8,8 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "@tanstack/react-query": "^5.66.9",
-    "@tanstack/react-query-devtools": "^5.66.9",
+    "@tanstack/react-query": "^5.66.11",
+    "@tanstack/react-query-devtools": "^5.66.11",
     "graphql": "^16.9.0",
     "graphql-request": "^7.1.2",
     "react": "^19.0.0",

diff --git a/examples/react/basic/package.json b/examples/react/basic/package.json
@@ -8,10 +8,10 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "@tanstack/query-sync-storage-persister": "^5.66.4",
-    "@tanstack/react-query": "^5.66.9",
-    "@tanstack/react-query-devtools": "^5.66.9",
-    "@tanstack/react-query-persist-client": "^5.66.9",
+    "@tanstack/query-sync-storage-persister": "^5.66.11",
+    "@tanstack/react-query": "^5.66.11",
+    "@tanstack/react-query-devtools": "^5.66.11",
+    "@tanstack/react-query-persist-client": "^5.66.11",
     "react": "^19.0.0",
     "react-dom": "^19.0.0"
   },

diff --git a/examples/react/default-query-function/package.json b/examples/react/default-query-function/package.json
@@ -8,8 +8,8 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "@tanstack/react-query": "^5.66.9",
-    "@tanstack/react-query-devtools": "^5.66.9",
+    "@tanstack/react-query": "^5.66.11",
+    "@tanstack/react-query-devtools": "^5.66.11",
     "react": "^19.0.0",
     "react-dom": "^19.0.0"
   },

diff --git a/examples/react/devtools-panel/package.json b/examples/react/devtools-panel/package.json
@@ -8,8 +8,8 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "@tanstack/react-query": "^5.66.9",
-    "@tanstack/react-query-devtools": "^5.66.9",
+    "@tanstack/react-query": "^5.66.11",
+    "@tanstack/react-query-devtools": "^5.66.11",
     "react": "^19.0.0",
     "react-dom": "^19.0.0"
   },

diff --git a/examples/react/infinite-query-with-max-pages/package.json b/examples/react/infinite-query-with-max-pages/package.json
@@ -8,8 +8,8 @@
     "start": "next start"
   },
   "dependencies": {
-    "@tanstack/react-query": "^5.66.9",
-    "@tanstack/react-query-devtools": "^5.66.9",
+    "@tanstack/react-query": "^5.66.11",
+    "@tanstack/react-query-devtools": "^5.66.11",
     "next": "^14.2.20",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"

diff --git a/examples/react/load-more-infinite-scroll/package.json b/examples/react/load-more-infinite-scroll/package.json
@@ -8,8 +8,8 @@
     "start": "next start"
   },
   "dependencies": {
-    "@tanstack/react-query": "^5.66.9",
-    "@tanstack/react-query-devtools": "^5.66.9",
+    "@tanstack/react-query": "^5.66.11",
+    "@tanstack/react-query-devtools": "^5.66.11",
     "next": "^14.2.20",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",

diff --git a/examples/react/nextjs-app-prefetching/package.json b/examples/react/nextjs-app-prefetching/package.json
@@ -8,8 +8,8 @@
     "start": "next start"
   },
   "dependencies": {
-    "@tanstack/react-query": "^5.66.9",
-    "@tanstack/react-query-devtools": "^5.66.9",
+    "@tanstack/react-query": "^5.66.11",
+    "@tanstack/react-query-devtools": "^5.66.11",
     "next": "^15.1.0",
     "react": "^19.0.0",
     "react-dom": "^19.0.0"

diff --git a/examples/react/nextjs-suspense-streaming/package.json b/examples/react/nextjs-suspense-streaming/package.json
@@ -8,9 +8,9 @@
     "start": "next start"
   },
   "dependencies": {
-    "@tanstack/react-query": "^5.66.9",
-    "@tanstack/react-query-devtools": "^5.66.9",
-    "@tanstack/react-query-next-experimental": "^5.66.9",
+    "@tanstack/react-query": "^5.66.11",
+    "@tanstack/react-query-devtools": "^5.66.11",
+    "@tanstack/react-query-next-experimental": "^5.66.11",
     "next": "^14.2.20",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"

diff --git a/examples/react/nextjs/package.json b/examples/react/nextjs/package.json
@@ -8,8 +8,8 @@
     "start": "next start"
   },
   "dependencies": {
-    "@tanstack/react-query": "^5.66.9",
-    "@tanstack/react-query-devtools": "^5.66.9",
+    "@tanstack/react-query": "^5.66.11",
+    "@tanstack/react-query-devtools": "^5.66.11",
     "next": "^14.2.20",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"

diff --git a/examples/react/offline/package.json b/examples/react/offline/package.json
@@ -8,11 +8,11 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "@tanstack/query-sync-storage-persister": "^5.66.4",
+    "@tanstack/query-sync-storage-persister": "^5.66.11",
     "@tanstack/react-location": "^3.7.4",
-    "@tanstack/react-query": "^5.66.9",
-    "@tanstack/react-query-devtools": "^5.66.9",
-    "@tanstack/react-query-persist-client": "^5.66.9",
+    "@tanstack/react-query": "^5.66.11",
+    "@tanstack/react-query-devtools": "^5.66.11",
+    "@tanstack/react-query-persist-client": "^5.66.11",
     "msw": "^2.6.6",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",

diff --git a/examples/react/optimistic-updates-cache/package.json b/examples/react/optimistic-updates-cache/package.json
@@ -8,8 +8,8 @@
     "start": "next start"
   },
   "dependencies": {
-    "@tanstack/react-query": "^5.66.9",
-    "@tanstack/react-query-devtools": "^5.66.9",
+    "@tanstack/react-query": "^5.66.11",
+    "@tanstack/react-query-devtools": "^5.66.11",
     "next": "^14.2.20",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"

diff --git a/examples/react/optimistic-updates-ui/package.json b/examples/react/optimistic-updates-ui/package.json
@@ -8,8 +8,8 @@
     "start": "next start"
   },
   "dependencies": {
-    "@tanstack/react-query": "^5.66.9",
-    "@tanstack/react-query-devtools": "^5.66.9",
+    "@tanstack/react-query": "^5.66.11",
+    "@tanstack/react-query-devtools": "^5.66.11",
     "next": "^14.2.20",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"