Skip to content
Draft
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
The table of contents is too big for display.
Diff view
Diff view
  •  
  •  
  •  
7 changes: 7 additions & 0 deletions .changeset/angular-stable-release.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
---
'@tanstack/angular-query': major

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

have you set the libs to 4.0 and the changeset to major so that we get a 5.x then? I’m not sure if that will work 🤷

Copy link
Copy Markdown
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes 😅

It doesn't seem to be a check for verifying 4.0 exists (or any existing published version). Audited that plan with Astra, it had an issue with the versioning group fixed in the new commit, it only seems to consider those groups versions to create the prerelease.

'@tanstack/angular-query-devtools': major
'@tanstack/angular-query-persist-client': major
---

Add the stable Angular Query adapter for Angular 20.1+. It includes SSR support, Resource API interoperability, persistence integration, improved internal subscription and pending tasks management, stable `injectQueries` and consistency improvements in the API.
9 changes: 6 additions & 3 deletions .changeset/config.json
Original file line number Diff line number Diff line change
Expand Up @@ -6,12 +6,15 @@
],
"commit": false,
"access": "public",
"baseBranch": "main",
"baseBranch": "angular-adapter-pre",
"updateInternalDependencies": "patch",
"fixed": [
[
"@tanstack/angular-query-experimental",
"@tanstack/angular-query-persist-client",
"@tanstack/angular-query",
"@tanstack/angular-query-devtools",
"@tanstack/angular-query-persist-client"
],
[
"@tanstack/eslint-plugin-query",
"@tanstack/preact-query",
"@tanstack/preact-query-devtools",
Expand Down
35 changes: 35 additions & 0 deletions .changeset/pre.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,35 @@
{
"mode": "pre",
"tag": "rc",
"initialVersions": {
"@tanstack/angular-query": "4.0.0",
"@tanstack/angular-query-devtools": "4.0.0",
"@tanstack/angular-query-experimental": "5.103.1",
"@tanstack/angular-query-persist-client": "4.0.0",
"@tanstack/eslint-plugin-query": "5.103.1",
"@tanstack/lit-query": "0.2.22",
"@tanstack/preact-query": "5.103.1",
"@tanstack/preact-query-devtools": "5.103.1",
"@tanstack/preact-query-persist-client": "5.103.1",
"@tanstack/query-async-storage-persister": "5.103.1",
"@tanstack/query-broadcast-client-experimental": "5.103.1",
"@tanstack/query-core": "5.103.1",
"@tanstack/query-devtools": "5.103.1",
"@tanstack/query-persist-client-core": "5.103.1",
"@tanstack/query-sync-storage-persister": "5.103.1",
"@tanstack/query-test-utils": "0.0.0",
"@tanstack/react-query": "5.103.1",
"@tanstack/react-query-devtools": "5.103.1",
"@tanstack/react-query-next-experimental": "5.103.1",
"@tanstack/react-query-persist-client": "5.103.1",
"@tanstack/solid-query": "5.103.1",
"@tanstack/solid-query-devtools": "5.103.1",
"@tanstack/solid-query-persist-client": "5.103.1",
"@tanstack/svelte-query": "6.2.1",
"@tanstack/svelte-query-devtools": "6.2.1",
"@tanstack/svelte-query-persist-client": "6.2.1",
"@tanstack/vue-query": "5.103.1",
"@tanstack/vue-query-devtools": "6.2.1"
},
"changesets": []
}
52 changes: 24 additions & 28 deletions docs/config.json
Original file line number Diff line number Diff line change
Expand Up @@ -176,20 +176,20 @@
"to": "framework/angular/quick-start"
},
{
"label": "Angular HttpClient and other data fetching clients",
"label": "Devtools",
"to": "framework/angular/devtools"
},
{
"label": "Angular HttpClient",
"to": "framework/angular/angular-httpclient-and-other-data-fetching-clients"
},
{
"label": "Devtools",
"to": "framework/angular/devtools"
"label": "Resource API",
"to": "framework/angular/resource-api"
},
{
"label": "TypeScript",
"to": "framework/angular/typescript"
},
{
"label": "Zoneless",
"to": "framework/angular/zoneless"
}
]
},
Expand Down Expand Up @@ -774,13 +774,29 @@
"label": "Default Query Fn",
"to": "framework/angular/guides/default-query-function"
},
{
"label": "SSR",
"to": "framework/angular/guides/ssr"
},
{
"label": "Testing",
"to": "framework/angular/guides/testing"
},
{
"label": "Does this replace state managers?",
"to": "framework/angular/guides/does-this-replace-client-state"
},
{
"label": "Migrating from Experimental",
"to": "framework/angular/guides/migrating-from-experimental"
},
{
"label": "Migrating from ngneat/query",
"to": "framework/angular/guides/migrating-from-ngneat-query"
},
{
"label": "Error Handling",
"to": "framework/angular/guides/error-handling"
}
]
},
Expand Down Expand Up @@ -5048,28 +5064,12 @@
"label": "Functions / partialMatchKey",
"to": "framework/angular/reference/functions/partialMatchKey"
},
{
"label": "Functions / provideAngularQuery",
"to": "framework/angular/reference/functions/provideAngularQuery"
},
{
"label": "Functions / provideIsRestoring",
"to": "framework/angular/reference/functions/provideIsRestoring"
},
{
"label": "Functions / provideQueryClient",
"to": "framework/angular/reference/functions/provideQueryClient"
},
{
"label": "Functions / provideTanStackQuery",
"to": "framework/angular/reference/functions/provideTanStackQuery"
},
{
"label": "Functions / queryFeature",
"to": "framework/angular/reference/functions/queryFeature"
},
{
"label": "Functions / queryOptions",
"label": "queryOptions",
"to": "framework/angular/reference/functions/queryOptions"
},
{
Expand Down Expand Up @@ -5132,10 +5132,6 @@
"label": "Interfaces / CancelOptions",
"to": "framework/angular/reference/interfaces/CancelOptions"
},
{
"label": "Interfaces / CreateBaseQueryOptions",
"to": "framework/angular/reference/interfaces/CreateBaseQueryOptions"
},
{
"label": "Interfaces / CreateInfiniteQueryOptions",
"to": "framework/angular/reference/interfaces/CreateInfiniteQueryOptions"
Expand Down
Original file line number Diff line number Diff line change
@@ -1,22 +1,16 @@
---
id: Angular-HttpClient-and-other-data-fetching-clients
title: Angular HttpClient and other data fetching clients
title: Angular HttpClient
---

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.
TanStack Query works with any data fetching client that returns a Promise, including the browser's
`fetch` API and clients such as `graphql-request`.

## 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/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`.
Angular's `HttpClient` returns Observables, which query and mutation functions do not consume
directly. Convert the Observable with RxJS's `firstValueFrom` or `lastValueFrom`. Query functions
can also return a synchronous value.

```ts
@Component({
Expand All @@ -28,21 +22,28 @@ class ExampleComponent {
readonly repoDataQuery = injectQuery(() => ({
queryKey: ['repoData'],
queryFn: () =>
lastValueFrom(
firstValueFrom(
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.
For regular `HttpClient` requests, `firstValueFrom` resolves the single response and unsubscribes.
Use `lastValueFrom` when the Observable emits multiple values and the query should resolve with the
last one.

Angular [HTTP interceptors](https://angular.dev/guide/http/interceptors) continue to apply to
requests made inside query and mutation functions.

## SSR

When using `HttpClient` with SSR, prefer Angular Query's built-in query hydration and disable
Angular's HTTP transfer cache. Otherwise, both systems serialize the same request data.

## Comparison table
Add
[`withNoHttpTransferCache()`](https://angular.dev/api/platform-browser/withNoHttpTransferCache) to
[`provideClientHydration()`](https://angular.dev/api/platform-browser/provideClientHydration). See
the [SSR guide](./guides/ssr.md) for the complete setup.

| 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. |
For cancellation, see [Query Cancellation](./guides/query-cancellation.md).
Loading