Skip to content
Draft
Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
27 commits
Select commit Hold shift + click to select a range
585cd5d
move angular-query-experimental
arnoud-dv Mar 9, 2025
f00280a
move angular-query-devtools-experimental
arnoud-dv Mar 9, 2025
7eaeaf9
update documentation
arnoud-dv Mar 9, 2025
589b9d1
rename packages
arnoud-dv Mar 9, 2025
ef9c853
Merge remote-tracking branch 'upstream/main' into feature/angular-stable
arnoud-dv Mar 9, 2025
6bd73f2
docs: remove reference to experimental status
arnoud-dv Mar 9, 2025
35e1600
update pnpm-lock.yaml
arnoud-dv Mar 9, 2025
ecf8d87
remove deprecated apis
arnoud-dv Mar 9, 2025
0fa7944
remove deprecated apis
arnoud-dv Mar 9, 2025
d1be49e
Merge remote-tracking branch 'upstream/main' into feature/angular-stable
arnoud-dv Mar 9, 2025
a7e6aca
Merge remote-tracking branch 'upstream/main' into feature/angular-stable
arnoud-dv Mar 29, 2025
5ef3c8b
Merge remote-tracking branch 'upstream/main' into feature/angular-stable
arnoud-dv Apr 11, 2025
73e1b7c
Merge remote-tracking branch 'upstream/main' into feature/angular-stable
arnoud-dv Apr 13, 2025
5c41dbc
make angular-query-persist-client package publishable
arnoud-dv Apr 13, 2025
049cd20
fix references to angular experimental packages
arnoud-dv Apr 13, 2025
eee8304
update pnpm-lock
arnoud-dv Apr 13, 2025
3b42f17
ci: apply automated fixes
autofix-ci[bot] Apr 13, 2025
c1b8b99
fix references to angular experimental packages
arnoud-dv Apr 13, 2025
7050576
docs(angular-query): angular version compatibility
arnoud-dv Apr 14, 2025
d083837
Merge remote-tracking branch 'upstream/main' into feature/angular-stable
arnoud-dv Apr 15, 2025
01c92c5
Merge remote-tracking branch 'upstream/main' into feature/angular-stable
arnoud-dv Sep 4, 2025
2f9a760
ci: apply automated fixes
autofix-ci[bot] Sep 4, 2025
79c0957
Merge remote-tracking branch 'upstream/main' into feature/angular-stable
arnoud-dv Sep 4, 2025
95f5bb3
Update docs
arnoud-dv Sep 4, 2025
3b7900a
Merge branch 'feature/angular-stable' of github.com:arnoud-dv/query i…
arnoud-dv Sep 4, 2025
1e8cdc6
Merge branch 'feature/angular-stable' of github.com:arnoud-dv/query i…
arnoud-dv Sep 4, 2025
ac75360
Merge branch 'feature/angular-stable' of github.com:arnoud-dv/query i…
arnoud-dv Sep 4, 2025
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 4 additions & 0 deletions .gitignore
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,10 @@ node_modules
package-lock.json
yarn.lock

*.d.ts
*.map
*.tsbuildinfo

# builds
build
coverage
Expand Down
12 changes: 6 additions & 6 deletions codecov.yml
Original file line number Diff line number Diff line change
Expand Up @@ -19,14 +19,14 @@ comment:

component_management:
individual_components:
- component_id: angular-query-devtools-experimental
name: '@tanstack/angular-query-devtools-experimental'
- component_id: angular-query-devtools
name: '@tanstack/angular-query-devtools'
paths:
- packages/angular-query-devtools-experimental/**
- component_id: angular-query-experimental
name: '@tanstack/angular-query-experimental'
- packages/angular-query-devtools/**
- component_id: angular-query
name: '@tanstack/angular-query'
paths:
- packages/angular-query-experimental/**
- packages/angular-query/**
- component_id: eslint-plugin-query
name: '@tanstack/eslint-plugin-query'
paths:
Expand Down
4 changes: 4 additions & 0 deletions docs/config.json
Original file line number Diff line number Diff line change
Expand Up @@ -145,6 +145,10 @@
"label": "Installation",
"to": "framework/angular/installation"
},
{
"label": "Angular Version Compatibility",
"to": "framework/angular/angular-version-compatibility"
},
{
"label": "Quick Start",
"to": "framework/angular/quick-start"
Expand Down
23 changes: 23 additions & 0 deletions docs/framework/angular/angular-version-compatibility.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
---
id: angular-version-compatibility
title: Angular Version Compatibility
---

The TanStack Query Angular adapter's dependency range will specify at least the oldest Angular version under active or LTS support.

```json
{
"peerDependencies": {
"@angular/common": ">=16.0.0",
"@angular/core": ">=16.0.0"
}
}
```

As of the time of writing, Angular 18 is the oldest version under LTS support but there has not been a reason yet to remove support for Angular 16.

Support for older versions not under LTS support will be dropped from the adapter's dependency range when supporting both the older- and more recent versions becomes impractical. Bugs that only affect Angular versions not under LTS support will in principle not be fixed.

## Pre-Release Versions of Angular

As only the minimum version and not a maximum version of Angular is specified, pre-release versions of Angular are not excluded but are not guaranteed to work.
2 changes: 1 addition & 1 deletion docs/framework/angular/devtools.md
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ import {
QueryClient,
provideTanStackQuery,
withDevtools,
} from '@tanstack/angular-query-experimental'
} from '@tanstack/angular-query'

export const appConfig: ApplicationConfig = {
providers: [provideTanStackQuery(new QueryClient(), withDevtools())],
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,7 @@ class TodosComponent {
[//]: # 'Example2'

```angular-ts
import { injectIsFetching } from '@tanstack/angular-query-experimental'
import { injectIsFetching } from '@tanstack/angular-query'

@Component({
selector: 'global-loading-indicator',
Expand Down
2 changes: 1 addition & 1 deletion docs/framework/angular/guides/infinite-queries.md
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ replace:

```angular-ts
import { Component, computed, inject } from '@angular/core'
import { injectInfiniteQuery } from '@tanstack/angular-query-experimental'
import { injectInfiniteQuery } from '@tanstack/angular-query'
import { lastValueFrom } from 'rxjs'
import { ProjectsService } from './projects-service'

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -17,10 +17,7 @@ mutation = injectMutation(() => ({
[//]: # 'Example2'

```ts
import {
injectMutation,
QueryClient,
} from '@tanstack/angular-query-experimental'
import { injectMutation, QueryClient } from '@tanstack/angular-query'

export class TodosComponent {
queryClient = inject(QueryClient)
Expand Down
2 changes: 1 addition & 1 deletion docs/framework/angular/guides/queries.md
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ replace:
[//]: # 'Example'

```ts
import { injectQuery } from '@tanstack/angular-query-experimental'
import { injectQuery } from '@tanstack/angular-query'

export class TodosComponent {
info = injectQuery(() => ({ queryKey: ['todos'], queryFn: fetchTodoList }))
Expand Down
2 changes: 1 addition & 1 deletion docs/framework/angular/guides/query-cancellation.md
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ However, if you consume the `AbortSignal`, the Promise will be cancelled (e.g. a

```ts
import { HttpClient } from '@angular/common/http'
import { injectQuery } from '@tanstack/angular-query-experimental'
import { injectQuery } from '@tanstack/angular-query'

postQuery = injectQuery(() => ({
enabled: this.postId() > 0,
Expand Down
2 changes: 1 addition & 1 deletion docs/framework/angular/guides/query-invalidation.md
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ replace: { 'useQuery': 'injectQuery', 'hooks': 'functions' }
[//]: # 'Example2'

```ts
import { injectQuery, QueryClient } from '@tanstack/angular-query-experimental'
import { injectQuery, QueryClient } from '@tanstack/angular-query'

class QueryInvalidationExample {
queryClient = inject(QueryClient)
Expand Down
2 changes: 1 addition & 1 deletion docs/framework/angular/guides/query-options.md
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ ref: docs/framework/react/guides/query-options.md
[//]: # 'Example1'

```ts
import { queryOptions } from '@tanstack/angular-query-experimental'
import { queryOptions } from '@tanstack/angular-query'

@Injectable({
providedIn: 'root',
Expand Down
4 changes: 2 additions & 2 deletions docs/framework/angular/guides/query-retries.md
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ replace:
[//]: # 'Example'

```ts
import { injectQuery } from '@tanstack/angular-query-experimental'
import { injectQuery } from '@tanstack/angular-query'

// Make a specific query retry a certain number of times
const result = injectQuery(() => ({
Expand All @@ -34,7 +34,7 @@ import {
QueryCache,
QueryClient,
QueryClientProvider,
} from '@tanstack/angular-query-experimental'
} from '@tanstack/angular-query'

const queryClient = new QueryClient({
defaultOptions: {
Expand Down
2 changes: 1 addition & 1 deletion docs/framework/angular/guides/window-focus-refetching.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
id: window-focus-refetching
title: Window Focus Refetching
ref: docs/framework/react/guides/window-focus-refetching.md
replace: { '@tanstack/react-query': '@tanstack/angular-query-experimental' }
replace: { '@tanstack/react-query': '@tanstack/angular-query' }
---

[//]: # 'Example'
Expand Down
12 changes: 5 additions & 7 deletions docs/framework/angular/installation.md
Original file line number Diff line number Diff line change
Expand Up @@ -3,32 +3,30 @@ id: installation
title: Installation
---

> IMPORTANT: This library is currently in an experimental stage. This means that breaking changes will happen in minor AND patch releases. Upgrade carefully. If you use this in production while in experimental stage, please lock your version to a patch-level version to avoid unexpected breaking changes.

### NPM

_Angular Query is compatible with Angular v16 and higher_
TanStack Angular Query is compatible with Angular v16 and higher. See [Angular Version Compatibility](./angular-version-compatibility.md) for more details.

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

or

```bash
pnpm add @tanstack/angular-query-experimental
pnpm add @tanstack/angular-query
```

or

```bash
yarn add @tanstack/angular-query-experimental
yarn add @tanstack/angular-query
```

or

```bash
bun add @tanstack/angular-query-experimental
bun add @tanstack/angular-query
```

> Wanna give it a spin before you download? Try out the [simple](../examples/simple) or [basic](../examples/basic) examples!
14 changes: 2 additions & 12 deletions docs/framework/angular/overview.md
Original file line number Diff line number Diff line change
Expand Up @@ -3,17 +3,7 @@ id: overview
title: Overview
---

> IMPORTANT: This library is currently in an experimental stage. This means that breaking changes will happen in minor AND patch releases. Upgrade carefully. If you use this in production while in experimental stage, please lock your version to a patch-level version to avoid unexpected breaking changes.

The `@tanstack/angular-query-experimental` package offers a 1st-class API for using TanStack Query via Angular.

## Feedback welcome!

We are in the process of getting to a stable API for TanStack Query on Angular. If you have any feedback, please contact us at the [TanStack Discord](https://tlinz.com/discord) server or [visit this discussion](https://github.com/TanStack/query/discussions/6293) on Github.

## Supported Angular Versions

TanStack Query is compatible with Angular v16 and higher.
The `@tanstack/angular-query` package offers a 1st-class API for using TanStack Query via Angular.

TanStack Query (FKA React Query) is often described as the missing data-fetching library for web applications, but in more technical terms, it makes **fetching, caching, synchronizing and updating server state** in your web applications a breeze.

Expand Down Expand Up @@ -64,7 +54,7 @@ In the example below, you can see TanStack Query in its most basic and simple fo
import { ChangeDetectionStrategy, Component, inject } from '@angular/core'
import { HttpClient } from '@angular/common/http'
import { CommonModule } from '@angular/common'
import { injectQuery } from '@tanstack/angular-query-experimental'
import { injectQuery } from '@tanstack/angular-query'
import { lastValueFrom } from 'rxjs'

@Component({
Expand Down
14 changes: 3 additions & 11 deletions docs/framework/angular/quick-start.md
Original file line number Diff line number Diff line change
Expand Up @@ -3,8 +3,6 @@ id: quick-start
title: Quick Start
---

> IMPORTANT: This library is currently in an experimental stage. This means that breaking changes will happen in minor AND patch releases. Upgrade carefully. If you use this in production while in experimental stage, please lock your version to a patch-level version to avoid unexpected breaking changes.

[//]: # 'Example'

If you're looking for a fully functioning example, please have a look at our [basic codesandbox example](../examples/basic)
Expand All @@ -13,10 +11,7 @@ If you're looking for a fully functioning example, please have a look at our [ba

```ts
import { provideHttpClient } from '@angular/common/http'
import {
provideTanStackQuery,
QueryClient,
} from '@tanstack/angular-query-experimental'
import { provideTanStackQuery, QueryClient } from '@tanstack/angular-query'

bootstrapApplication(AppComponent, {
providers: [provideHttpClient(), provideTanStackQuery(new QueryClient())],
Expand All @@ -27,10 +22,7 @@ or in a NgModule-based app

```ts
import { provideHttpClient } from '@angular/common/http'
import {
provideTanStackQuery,
QueryClient,
} from '@tanstack/angular-query-experimental'
import { provideTanStackQuery, QueryClient } from '@tanstack/angular-query'

@NgModule({
declarations: [AppComponent],
Expand All @@ -52,7 +44,7 @@ import {
injectMutation,
injectQuery,
QueryClient
} from '@tanstack/angular-query-experimental'
} from '@tanstack/angular-query'

@Component({
standalone: true,
Expand Down
26 changes: 8 additions & 18 deletions docs/framework/angular/reference/functions/providetanstackquery.md
Original file line number Diff line number Diff line change
Expand Up @@ -16,10 +16,7 @@ Allows to configure a `QueryClient` and optional features such as developer tool
**Example - standalone**

```ts
import {
provideTanStackQuery,
QueryClient,
} from '@tanstack/angular-query-experimental'
import { provideTanStackQuery, QueryClient } from '@tanstack/angular-query'

bootstrapApplication(AppComponent, {
providers: [provideTanStackQuery(new QueryClient())],
Expand All @@ -29,10 +26,7 @@ bootstrapApplication(AppComponent, {
**Example - NgModule-based**

```ts
import {
provideTanStackQuery,
QueryClient,
} from '@tanstack/angular-query-experimental'
import { provideTanStackQuery, QueryClient } from '@tanstack/angular-query'

@NgModule({
declarations: [AppComponent],
Expand All @@ -49,17 +43,13 @@ default the tools will then be loaded when your app is in development mode.
```ts
import {
provideTanStackQuery,
withDevtools
withDevtools,
QueryClient,
} from '@tanstack/angular-query-experimental'

bootstrapApplication(AppComponent,
{
providers: [
provideTanStackQuery(new QueryClient(), withDevtools())
]
}
)
} from '@tanstack/angular-query'

bootstrapApplication(AppComponent, {
providers: [provideTanStackQuery(new QueryClient(), withDevtools())],
})
```

**Example: using an InjectionToken**
Expand Down
8 changes: 4 additions & 4 deletions docs/framework/angular/typescript.md
Original file line number Diff line number Diff line change
Expand Up @@ -6,8 +6,8 @@ replace:
{
'useQuery': 'injectQuery',
'useMutation': 'injectMutation',
'react-query': 'angular-query-experimental',
'public API of React Query': 'public API of TanStack Query and - after the experimental phase, the angular-query package',
'react-query': 'angular-query',
'public API of React Query': 'public API of TanStack Query and the angular-query package',
'still follows': 'still follow',
'React Query': 'TanStack Query',
'`success`': '`isSuccess()`',
Expand Down Expand Up @@ -149,9 +149,9 @@ computed(() => {
[//]: # 'RegisterErrorType'

```ts
import '@tanstack/angular-query-experimental'
import '@tanstack/angular-query'

declare module '@tanstack/angular-query-experimental' {
declare module '@tanstack/angular-query' {
interface Register {
// Use unknown so call sites must narrow explicitly.
defaultError: unknown
Expand Down
2 changes: 1 addition & 1 deletion examples/angular/auto-refetching/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@
"@angular/compiler": "^20.0.0",
"@angular/core": "^20.0.0",
"@angular/platform-browser": "^20.0.0",
"@tanstack/angular-query-experimental": "^5.86.0",
"@tanstack/angular-query": "^5.86.0",
"rxjs": "^7.8.2",
"tslib": "^2.8.1",
"zone.js": "0.15.0"
Expand Down
2 changes: 1 addition & 1 deletion examples/angular/auto-refetching/src/app/app.config.ts
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ import {
QueryClient,
provideTanStackQuery,
withDevtools,
} from '@tanstack/angular-query-experimental'
} from '@tanstack/angular-query'
import { mockInterceptor } from './interceptor/mock-api.interceptor'
import type { ApplicationConfig } from '@angular/core'

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -4,10 +4,7 @@ import {
inject,
signal,
} from '@angular/core'
import {
injectMutation,
injectQuery,
} from '@tanstack/angular-query-experimental'
import { injectMutation, injectQuery } from '@tanstack/angular-query'
import { NgStyle } from '@angular/common'
import { TasksService } from '../services/tasks.service'

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ import {
QueryClient,
mutationOptions,
queryOptions,
} from '@tanstack/angular-query-experimental'
} from '@tanstack/angular-query'

import { lastValueFrom } from 'rxjs'

Expand Down
2 changes: 1 addition & 1 deletion examples/angular/basic-persister/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@
"@angular/compiler": "^20.0.0",
"@angular/core": "^20.0.0",
"@angular/platform-browser": "^20.0.0",
"@tanstack/angular-query-experimental": "^5.86.0",
"@tanstack/angular-query": "^5.86.0",
"@tanstack/angular-query-persist-client": "^5.62.7",
"@tanstack/query-async-storage-persister": "^5.86.0",
"rxjs": "^7.8.2",
Expand Down
Loading
Loading