Angular stable release - WIP

.github/labeler.yml

@@ -1,7 +1,7 @@
 'package: angular-query-devtools-experimental':
-  - 'packages/angular-query-devtools-experimental/**/*'
-'package: angular-query-experimental':
-  - 'packages/angular-query-experimental/**/*'
+  - 'packages/angular-query-devtools/**/*'
+'package: angular-query':
+  - 'packages/angular-query/**/*'
 'package: eslint-plugin-query':
   - 'packages/eslint-plugin-query/**/*'
 'package: query-async-storage-persister':

.gitignore

@@ -6,6 +6,10 @@ node_modules
 package-lock.json
 yarn.lock
 
+*.d.ts
+*.map
+*.tsbuildinfo
+
 # builds
 build
 coverage

codecov.yml

@@ -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:

docs/config.json

@@ -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"

docs/framework/angular/angular-version-compatibility.md

@@ -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 17 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.

docs/framework/angular/devtools.md

@@ -14,7 +14,7 @@ import {
   QueryClient,
   provideTanStackQuery,
   withDevtools,
-} from '@tanstack/angular-query-experimental'
+} from '@tanstack/angular-query'
 
 export const appConfig: ApplicationConfig = {
   providers: [provideTanStackQuery(new QueryClient(), withDevtools())],

docs/framework/angular/guides/background-fetching-indicators.md

@@ -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',

docs/framework/angular/guides/infinite-queries.md

@@ -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'
 

docs/framework/angular/guides/invalidations-from-mutations.md

@@ -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)

docs/framework/angular/guides/queries.md

@@ -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 }))

docs/framework/angular/guides/query-cancellation.md

@@ -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,

docs/framework/angular/guides/query-invalidation.md

@@ -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)

docs/framework/angular/guides/query-options.md

@@ -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',

docs/framework/angular/guides/query-retries.md

@@ -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(() => ({
@@ -34,7 +34,7 @@ import {
   QueryCache,
   QueryClient,
   QueryClientProvider,
-} from '@tanstack/angular-query-experimental'
+} from '@tanstack/angular-query'
 
 const queryClient = new QueryClient({
   defaultOptions: {

docs/framework/angular/guides/window-focus-refetching.md

@@ -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'

docs/framework/angular/installation.md

@@ -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) 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!

docs/framework/angular/overview.md

@@ -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.
 
@@ -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({

docs/framework/angular/quick-start.md

@@ -13,10 +13,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())],
@@ -27,10 +24,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],
@@ -52,7 +46,7 @@ import {
   injectMutation,
   injectQuery,
   QueryClient
-} from '@tanstack/angular-query-experimental'
+} from '@tanstack/angular-query'
 
 @Component({
   standalone: true,

docs/framework/angular/reference/functions/provideangularquery.md

@@ -16,10 +16,7 @@ Allows to configure a `QueryClient`.
 **Example - standalone**
 
 ```ts
-import {
-  provideAngularQuery,
-  QueryClient,
-} from '@tanstack/angular-query-experimental'
+import { provideAngularQuery, QueryClient } from '@tanstack/angular-query'
 
 bootstrapApplication(AppComponent, {
   providers: [provideAngularQuery(new QueryClient())],
@@ -29,10 +26,7 @@ bootstrapApplication(AppComponent, {
 **Example - NgModule-based**
 
 ```ts
-import {
-  provideAngularQuery,
-  QueryClient,
-} from '@tanstack/angular-query-experimental'
+import { provideAngularQuery, QueryClient } from '@tanstack/angular-query'
 
 @NgModule({
   declarations: [AppComponent],

docs/framework/angular/typescript.md

@@ -6,7 +6,7 @@ replace:
   {
     'useQuery': 'injectQuery',
     'useMutation': 'injectMutation',
-    'react-query': 'angular-query-experimental',
+    'react-query': 'angular-query',
     'public API of React Query': 'public API of TanStack Query and - after the experimental phase, the angular-query package',
     'still follows': 'still follow',
     'React Query': 'TanStack Query',
@@ -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 {
     defaultError: AxiosError
   }

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.74.3",
+    "@tanstack/angular-query": "^5.74.3",
     "rxjs": "^7.8.2",
     "tslib": "^2.8.1",
     "zone.js": "0.15.0"

examples/angular/auto-refetching/src/app/app.config.ts

@@ -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'
 

examples/angular/auto-refetching/src/app/components/auto-refetching.component.ts

@@ -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'
 

examples/angular/auto-refetching/src/app/services/tasks.service.ts

@@ -4,7 +4,7 @@ import {
   QueryClient,
   mutationOptions,
   queryOptions,
-} from '@tanstack/angular-query-experimental'
+} from '@tanstack/angular-query'
 
 import { lastValueFrom } from 'rxjs'
 

examples/angular/basic-persister/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.74.3",
+    "@tanstack/angular-query": "^5.74.3",
     "@tanstack/angular-query-persist-client": "^5.62.7",
     "@tanstack/query-sync-storage-persister": "^5.74.3",
     "rxjs": "^7.8.2",

examples/angular/basic-persister/src/app/app.config.ts

@@ -3,7 +3,7 @@ import {
   QueryClient,
   provideTanStackQuery,
   withDevtools,
-} from '@tanstack/angular-query-experimental'
+} from '@tanstack/angular-query'
 import { withPersistQueryClient } from '@tanstack/angular-query-persist-client'
 import { createSyncStoragePersister } from '@tanstack/query-sync-storage-persister'
 import type { ApplicationConfig } from '@angular/core'

examples/angular/basic-persister/src/app/components/post.component.ts

@@ -6,7 +6,7 @@ import {
   inject,
   input,
 } from '@angular/core'
-import { QueryClient, injectQuery } from '@tanstack/angular-query-experimental'
+import { QueryClient, injectQuery } from '@tanstack/angular-query'
 import { fromEvent, lastValueFrom, takeUntil } from 'rxjs'
 import { PostsService } from '../services/posts-service'
 

examples/angular/basic-persister/src/app/components/posts.component.ts

@@ -5,7 +5,7 @@ import {
   Output,
   inject,
 } from '@angular/core'
-import { QueryClient, injectQuery } from '@tanstack/angular-query-experimental'
+import { QueryClient, injectQuery } from '@tanstack/angular-query'
 import { lastValueFrom } from 'rxjs'
 import { PostsService } from '../services/posts-service'