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
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions .changeset/angular-migration-schematic.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
"@tanstack/angular-query": minor
---

Bundle an Angular 20.1-compatible migrate-from-experimental schematic that updates package and devtools panel imports, migrates workspace and library dependencies, and reports remaining API changes with actionable guidance and a migration summary.
57 changes: 55 additions & 2 deletions docs/framework/angular/guides/migrating-from-experimental.md
Original file line number Diff line number Diff line change
Expand Up @@ -7,15 +7,30 @@ The stable package keeps the callback-based query, mutation, and signal result A
experimental adapter. Most application queries therefore only need an import change. The following
sections cover the breaking configuration and entrypoint changes.

Angular 20.1 or newer is required by the stable package. Upgrade Angular first if your
application is on an older version. Save your work and confirm the application builds before
running the migration.

## Run the migration schematic

Install the stable package, then preview the bundled migration:

```bash
npm install @tanstack/angular-query
ng generate @tanstack/angular-query:migrate-from-experimental --dry-run
ng generate @tanstack/angular-query:migrate-from-experimental
```

The schematic handles common migration steps.
Review the remaining sections for changes that require manual updates.

## Replace the experimental package

```bash
npm uninstall @tanstack/angular-query-experimental
npm install @tanstack/angular-query
```

Angular 20.1 or newer is required by the stable package.

```ts
import { injectQuery } from '@tanstack/angular-query-experimental' // [!code --]
import { injectQuery } from '@tanstack/angular-query' // [!code ++]
Expand Down Expand Up @@ -120,6 +135,44 @@ readonly summary = injectQueries(() => ({
}))
```

## Move explicit injectors into an injection context

All stable injection helpers must run in an Angular injection context. The
experimental `injectQuery`, `injectInfiniteQuery`, `injectMutation`,
`injectMutationState`, `injectIsFetching`, and `injectIsMutating` accepted a second
`{ injector }` options argument. `injectIsRestoring` accepted that options object
as its first argument. The experimental `injectDevtoolsPanel` also accepted a second
`{ injector }` options argument. These arguments have been removed.

```ts
injectQuery(options, { injector }) // [!code --]
runInInjectionContext(injector, () => injectQuery(options)) // [!code ++]

injectMutation(options, { injector }) // [!code --]
runInInjectionContext(injector, () => injectMutation(options)) // [!code ++]

injectIsFetching({ queryKey: ['todos'] }, { injector }) // [!code --]
runInInjectionContext(injector, () =>
injectIsFetching(() => ({ queryKey: ['todos'] })),
) // [!code ++]

injectIsRestoring({ injector }) // [!code --]
runInInjectionContext(injector, () => injectIsRestoring()) // [!code ++]
```

Import `runInInjectionContext` from `@angular/core`. Unlike these helpers,
`injectQueries` previously took the injector directly, as shown above. When the
old argument is `undefined` or an empty options object, remove it and ensure the
call already runs in an injection context.

The `InjectQueryOptions`, `InjectInfiniteQueryOptions`, `InjectMutationOptions`,
`InjectMutationStateOptions`, `InjectIsFetchingOptions`, and
`InjectIsMutatingOptions` types have also been removed, along with the devtools
`InjectDevtoolsPanelOptions` type. Update wrappers that use
these types. The schematic reports explicit arguments, spread arguments, and
imports of these removed types for manual review; it does not infer injector
handling through custom wrappers.

## Review SSR hydration

`provideTanStackQuery` now dehydrates the server cache into Angular `TransferState` and hydrates it
Expand Down
2 changes: 1 addition & 1 deletion knip.ts
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ export default {
ignoreDependencies: ['react', 'react-dom'],
},
'packages/angular-query': {
entry: ['schematics/ng-add/index.ts', 'src/__tests__/*.test-d.ts'],
entry: ['schematics/*/index.ts', 'src/__tests__/*.test-d.ts'],
},
'packages/query-codemods': {
entry: ['src/v4/**/*.cjs', 'src/v5/**/*.cjs'],
Expand Down
Loading
Loading