diff --git a/.changeset/config.json b/.changeset/config.json index 5aebb25fb4b..dba75bb43e2 100644 --- a/.changeset/config.json +++ b/.changeset/config.json @@ -10,8 +10,11 @@ "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", diff --git a/.changeset/pre.json b/.changeset/pre.json new file mode 100644 index 00000000000..3616d3a6ea5 --- /dev/null +++ b/.changeset/pre.json @@ -0,0 +1,4 @@ +{ + "mode": "exit", + "tag": "rc" +} diff --git a/.changeset/pre/angular-migration-schematic.md b/.changeset/pre/angular-migration-schematic.md new file mode 100644 index 00000000000..2a61552b1b0 --- /dev/null +++ b/.changeset/pre/angular-migration-schematic.md @@ -0,0 +1,5 @@ +--- +'@tanstack/angular-query': minor +--- + +Bundle an Angular 20.1-compatible migrate-from-experimental schematic that updates imports, migrates Angular and Nx workspace dependencies, and reports remaining API changes. Include opt-in migrations for ambiguous client references and query-core imports, with optional peer dependencies for schematic tooling. diff --git a/.changeset/pre/angular-stable-release.md b/.changeset/pre/angular-stable-release.md new file mode 100644 index 00000000000..175470b9f80 --- /dev/null +++ b/.changeset/pre/angular-stable-release.md @@ -0,0 +1,7 @@ +--- +'@tanstack/angular-query': major +'@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, experimental Resource API interoperability, persistence integration, improved internal subscription and pending tasks management, stable `injectQueries` and consistency improvements in the API. diff --git a/docs/config.json b/docs/config.json index 5b1a24863cb..48f41879837 100644 --- a/docs/config.json +++ b/docs/config.json @@ -180,20 +180,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" } ] }, @@ -815,6 +815,10 @@ "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" @@ -822,6 +826,18 @@ { "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" } ] }, @@ -5050,12 +5066,12 @@ "to": "framework/angular/reference/functions/injectMutationState" }, { - "label": "Functions / injectQuery", - "to": "framework/angular/reference/functions/injectQuery" + "label": "Functions / injectQueries", + "to": "framework/angular/reference/functions/injectQueries" }, { - "label": "Functions / injectQueryClient", - "to": "framework/angular/reference/functions/injectQueryClient" + "label": "Functions / injectQuery", + "to": "framework/angular/reference/functions/injectQuery" }, { "label": "Functions / isCancelledError", @@ -5085,26 +5101,10 @@ "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", "to": "framework/angular/reference/functions/queryOptions" @@ -5117,6 +5117,18 @@ "label": "Functions / shouldThrowError", "to": "framework/angular/reference/functions/shouldThrowError" }, + { + "label": "Functions / toResource", + "to": "framework/angular/reference/functions/toResource" + }, + { + "label": "Functions / withHydrationKey", + "to": "framework/angular/reference/functions/withHydrationKey" + }, + { + "label": "Functions / withNoQueryHydration", + "to": "framework/angular/reference/functions/withNoQueryHydration" + }, { "label": "Classes / CancelledError", "to": "framework/angular/reference/classes/CancelledError" @@ -5157,6 +5169,10 @@ "label": "Classes / QueryObserver", "to": "framework/angular/reference/classes/QueryObserver" }, + { + "label": "Interfaces / BaseInfiniteQueryNarrowing", + "to": "framework/angular/reference/interfaces/BaseInfiniteQueryNarrowing" + }, { "label": "Interfaces / BaseMutationNarrowing", "to": "framework/angular/reference/interfaces/BaseMutationNarrowing" @@ -5169,10 +5185,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" @@ -5181,14 +5193,18 @@ "label": "Interfaces / CreateMutationOptions", "to": "framework/angular/reference/interfaces/CreateMutationOptions" }, - { - "label": "Interfaces / CreateQueryOptions", - "to": "framework/angular/reference/interfaces/CreateQueryOptions" - }, { "label": "Interfaces / DefaultOptions", "to": "framework/angular/reference/interfaces/DefaultOptions" }, + { + "label": "Interfaces / DefinedInfiniteQueryNarrowing", + "to": "framework/angular/reference/interfaces/DefinedInfiniteQueryNarrowing" + }, + { + "label": "Interfaces / DefinedQueryNarrowing", + "to": "framework/angular/reference/interfaces/DefinedQueryNarrowing" + }, { "label": "Interfaces / DehydrateOptions", "to": "framework/angular/reference/interfaces/DehydrateOptions" @@ -5266,28 +5282,8 @@ "to": "framework/angular/reference/interfaces/InitialPageParam" }, { - "label": "Interfaces / InjectInfiniteQueryOptions", - "to": "framework/angular/reference/interfaces/InjectInfiniteQueryOptions" - }, - { - "label": "Interfaces / InjectIsFetchingOptions", - "to": "framework/angular/reference/interfaces/InjectIsFetchingOptions" - }, - { - "label": "Interfaces / InjectIsMutatingOptions", - "to": "framework/angular/reference/interfaces/InjectIsMutatingOptions" - }, - { - "label": "Interfaces / InjectMutationOptions", - "to": "framework/angular/reference/interfaces/InjectMutationOptions" - }, - { - "label": "Interfaces / InjectMutationStateOptions", - "to": "framework/angular/reference/interfaces/InjectMutationStateOptions" - }, - { - "label": "Interfaces / InjectQueryOptions", - "to": "framework/angular/reference/interfaces/InjectQueryOptions" + "label": "Interfaces / InjectQueriesOptions", + "to": "framework/angular/reference/interfaces/InjectQueriesOptions" }, { "label": "Interfaces / InvalidateOptions", @@ -5409,6 +5405,10 @@ "label": "Interfaces / QueryOptions", "to": "framework/angular/reference/interfaces/QueryOptions" }, + { + "label": "Interfaces / QueryResource", + "to": "framework/angular/reference/interfaces/QueryResource" + }, { "label": "Interfaces / QueryState", "to": "framework/angular/reference/interfaces/QueryState" @@ -5469,6 +5469,10 @@ "label": "Types / CreateMutationResult", "to": "framework/angular/reference/type-aliases/CreateMutationResult" }, + { + "label": "Types / CreateQueryOptions", + "to": "framework/angular/reference/type-aliases/CreateQueryOptions" + }, { "label": "Types / CreateQueryResult", "to": "framework/angular/reference/type-aliases/CreateQueryResult" @@ -5513,10 +5517,6 @@ "label": "Types / DefinedQueryObserverResult", "to": "framework/angular/reference/type-aliases/DefinedQueryObserverResult" }, - { - "label": "Types / DevtoolsFeature", - "to": "framework/angular/reference/type-aliases/DevtoolsFeature" - }, { "label": "Types / DistributiveOmit", "to": "framework/angular/reference/type-aliases/DistributiveOmit" @@ -5601,6 +5601,10 @@ "label": "Types / MutationScope", "to": "framework/angular/reference/type-aliases/MutationScope" }, + { + "label": "Types / MutationStateOptions", + "to": "framework/angular/reference/type-aliases/MutationStateOptions" + }, { "label": "Types / MutationStatus", "to": "framework/angular/reference/type-aliases/MutationStatus" @@ -5629,10 +5633,6 @@ "label": "Types / Override", "to": "framework/angular/reference/type-aliases/Override" }, - { - "label": "Types / PersistQueryClientFeature", - "to": "framework/angular/reference/type-aliases/PersistQueryClientFeature" - }, { "label": "Types / PlaceholderDataFunction", "to": "framework/angular/reference/type-aliases/PlaceholderDataFunction" @@ -5657,10 +5657,6 @@ "label": "Types / QueryCacheNotifyEvent", "to": "framework/angular/reference/type-aliases/QueryCacheNotifyEvent" }, - { - "label": "Types / QueryFeatures", - "to": "framework/angular/reference/type-aliases/QueryFeatures" - }, { "label": "Types / QueryFunction", "to": "framework/angular/reference/type-aliases/QueryFunction" @@ -7258,6 +7254,30 @@ { "label": "Devtools embedded panel (Angular Router)", "to": "framework/angular/examples/devtools-panel-angular-router" + }, + { + "label": "Dynamic devtools", + "to": "framework/angular/examples/dynamic-devtools" + }, + { + "label": "Dynamic queries", + "to": "framework/angular/examples/dynamic-queries" + }, + { + "label": "Persister", + "to": "framework/angular/examples/basic-persister" + }, + { + "label": "SSR", + "to": "framework/angular/examples/ssr" + }, + { + "label": "SSR with persistence", + "to": "framework/angular/examples/ssr-persist" + }, + { + "label": "toResource with Signal Forms", + "to": "framework/angular/examples/to-resource-signal-forms" } ] }, @@ -7411,6 +7431,15 @@ } ] }, + { + "label": "angular", + "children": [ + { + "label": "persistQueryClient", + "to": "framework/angular/plugins/persistQueryClient" + } + ] + }, { "label": "preact", "children": [ 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 index bf075980046..5319e109ccc 100644 --- a/docs/framework/angular/angular-httpclient-and-other-data-fetching-clients.md +++ b/docs/framework/angular/angular-httpclient-and-other-data-fetching-clients.md @@ -1,24 +1,18 @@ --- 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: +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. -- 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-ts +```ts @Component({ // ... }) @@ -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). diff --git a/docs/framework/angular/devtools.md b/docs/framework/angular/devtools.md index 54afa93ed30..62adad473b5 100644 --- a/docs/framework/angular/devtools.md +++ b/docs/framework/angular/devtools.md @@ -11,79 +11,129 @@ title: Devtools ## Enable devtools +Add the devtools package (in addition to `@tanstack/angular-query`): + +```sh +npm install @tanstack/angular-query-devtools +``` + The devtools help you debug and inspect your queries and mutations. You can enable the devtools by adding `withDevtools` to `provideTanStackQuery`. -By default, Angular Query Devtools are only included in development mode bundles, so you don't need to worry about excluding them during a production build. +By default, Angular Query Devtools only load in development. ```ts -import { - QueryClient, - provideTanStackQuery, -} from '@tanstack/angular-query-experimental' +import { QueryClient, provideTanStackQuery } from '@tanstack/angular-query' -import { withDevtools } from '@tanstack/angular-query-experimental/devtools' +import { withDevtools } from '@tanstack/angular-query-devtools' export const appConfig: ApplicationConfig = { - providers: [provideTanStackQuery(new QueryClient(), withDevtools())], + providers: [provideTanStackQuery(() => new QueryClient(), withDevtools())], } ``` ## Devtools in production -Devtools are automatically excluded from production builds. However, it might be desirable to lazy load the devtools in production. - -To use `withDevtools` in production builds, import using the `production` sub-path. The function exported from the production subpath is identical to the main one, but won't be excluded from production builds. +If you need the real implementation in production, import from the `production` entrypoint. ```ts -import { withDevtools } from '@tanstack/angular-query-experimental/devtools/production' +import { withDevtools } from '@tanstack/angular-query-devtools/production' ``` -To control when devtools are loaded, you can use the `loadDevtools` option. +To control when devtools are rendered, use the `loadDevtools` option. -When not setting the option or setting it to 'auto', the devtools will be loaded automatically only when Angular runs in development mode. +When omitted or set to `'auto'`, devtools are only rendered in development mode. ```ts -import { withDevtools } from '@tanstack/angular-query-experimental/devtools' +import { withDevtools } from '@tanstack/angular-query-devtools' -provideTanStackQuery(new QueryClient(), withDevtools()) +providers: [provideTanStackQuery(() => new QueryClient(), withDevtools())] // which is equivalent to -provideTanStackQuery( - new QueryClient(), - withDevtools(() => ({ loadDevtools: 'auto' })), -) +providers: [ + provideTanStackQuery( + () => new QueryClient(), + withDevtools(() => ({ loadDevtools: 'auto' })), + ), +] ``` -When setting the option to true, the devtools will be loaded in both development and production mode. +When setting the option to true, the devtools will be rendered in both development and production mode. This is useful if you want to load devtools based on [Angular environment configurations](https://angular.dev/tools/cli/environments). E.g. you could set this to true when the application is running on your production build staging environment. ```ts import { environment } from './environments/environment' // Make sure to use the production sub-path to load devtools in production builds -import { withDevtools } from '@tanstack/angular-query-experimental/devtools/production' +import { withDevtools } from '@tanstack/angular-query-devtools/production' + +providers: [ + provideTanStackQuery( + () => new QueryClient(), + withDevtools(() => ({ loadDevtools: environment.loadDevtools })), + ), +] +``` + +When setting the option to false, the devtools will not be rendered. + +```ts +providers: [ + provideTanStackQuery( + () => new QueryClient(), + withDevtools(() => ({ loadDevtools: false })), + ), +] +``` + +### Webpack file replacements + +Some webpack-based Angular builders do not apply package export conditions when +they bundle application code. Use the explicit `production` and `stub` +entrypoints with Angular CLI file replacements to keep the devtools dependency +out of production bundles. + +Create an application-level import that can be replaced: + +```ts +// src/app/query-devtools.ts +export { withDevtools } from '@tanstack/angular-query-devtools/production' +``` -provideTanStackQuery( - new QueryClient(), - withDevtools(() => ({ loadDevtools: environment.loadDevtools })), -) +```ts +// src/app/query-devtools.stub.ts +export { withDevtools } from '@tanstack/angular-query-devtools/stub' ``` -When setting the option to false, the devtools will not be loaded. +Import the application-level module from your config: ```ts -provideTanStackQuery( - new QueryClient(), - withDevtools(() => ({ loadDevtools: false })), -) +import { withDevtools } from './query-devtools' +``` + +Then configure the production build: + +```json +{ + "configurations": { + "production": { + "fileReplacements": [ + { + "replace": "src/app/query-devtools.ts", + "with": "src/app/query-devtools.stub.ts" + } + ] + } + } +} ``` -## Derive options through reactivity +The same pattern is available for the [embedded panel](#embedded-mode): +`@tanstack/angular-query-devtools/devtools-panel/production` and +`@tanstack/angular-query-devtools/devtools-panel/stub`. -Options are passed to `withDevtools` from a callback function to support reactivity through signals. In the following example -a signal is created from a RxJS observable that emits on a keyboard shortcut. When the derived signal is set to true, the devtools are lazily loaded. +## Reactive options -The example below always loads devtools in development mode and loads on-demand in production mode when a keyboard shortcut is pressed. +Mutable options can be Angular signals. For example, a signal derived from a keyboard shortcut can show devtools on demand: ```ts import { Injectable, isDevMode } from '@angular/core' @@ -107,29 +157,23 @@ export class DevtoolsOptionsManager { } ``` -If you want to use an injectable such as a service in the callback you can use `deps`. The injected value will be passed as parameter to the callback function. - -This is similar to `deps` in Angular's [`useFactory`](https://angular.dev/guide/di/dependency-injection-providers#factory-providers-usefactory) provider. +The callback runs once in an Angular injection context, so it can call +`inject()`. Return signals as option values to update them reactively: ```ts // ... -// 👇 Note we import from the production sub-path to enable devtools lazy loading in production builds -import { withDevtools } from '@tanstack/angular-query-experimental/devtools/production' +// 👇 Import from the production sub-path to make devtools available in production builds +import { inject } from '@angular/core' +import { withDevtools } from '@tanstack/angular-query-devtools/production' export const appConfig: ApplicationConfig = { providers: [ provideHttpClient(), provideTanStackQuery( - new QueryClient(), - withDevtools( - (devToolsOptionsManager: DevtoolsOptionsManager) => ({ - loadDevtools: devToolsOptionsManager.loadDevtools(), - }), - { - // `deps` is used to inject and pass `DevtoolsOptionsManager` to the `withDevtools` callback. - deps: [DevtoolsOptionsManager], - }, - ), + () => new QueryClient(), + withDevtools(() => ({ + loadDevtools: inject(DevtoolsOptionsManager).loadDevtools, + })), ), ], } @@ -137,11 +181,16 @@ export const appConfig: ApplicationConfig = { ### Options returned from the callback -Of these options `loadDevtools`, `client`, `position`, `errorTypes`, `buttonPosition`, `initialIsOpen`, and `theme` support reactivity through signals. +`loadDevtools`, `client`, `position`, `errorTypes`, `buttonPosition`, +`initialIsOpen`, and `theme` accept either their documented static value or a +signal containing that value. + +`styleNonce`, `shadowDOMTarget`, and `hideDisabledQueries` are construction-time +options and do not accept signals. - `loadDevtools?: 'auto' | boolean` - - Defaults to `auto`: lazily loads devtools when in development mode. Skips loading in production mode. - - Use this to control if the devtools are loaded. + - Omit or `'auto'`: load devtools only in development mode. + - Use this to control whether devtools load when using the `/production` import. - `initialIsOpen?: Boolean` - Set this to `true` if you want the tools to default to being open - `buttonPosition?: "top-left" | "top-right" | "bottom-left" | "bottom-right" | "relative"` @@ -165,17 +214,17 @@ Of these options `loadDevtools`, `client`, `position`, `errorTypes`, `buttonPosi - Set this to true to hide disabled queries from the devtools panel. - `theme?: "light" | "dark" | "system"` - Defaults to the theme selected in the devtools Settings menu, or `system` if none is selected. - - Set this to change the theme of the devtools panel. This overrides the theme selected in the Settings menu. + - Sets the theme of the devtools panel, overriding the Settings menu selection. ## Embedded Mode Embedded mode will show the development tools as a fixed element in your application, so you can use our panel in your own development tools. -Use `injectDevtoolsPanel` to render the devtools panel inside an element of your component. Like `withDevtools`, it is only included in development mode bundles. To use it in production builds, import it from `@tanstack/angular-query-experimental/devtools-panel/production`. +Use `injectDevtoolsPanel` to render the devtools panel inside an element of your component. Like `withDevtools`, it is only included in development mode bundles. To use it in production builds, import it from `@tanstack/angular-query-devtools/devtools-panel/production`. ```angular-ts import { Component, signal, viewChild } from '@angular/core' -import { injectDevtoolsPanel } from '@tanstack/angular-query-experimental/devtools-panel' +import { injectDevtoolsPanel } from '@tanstack/angular-query-devtools/devtools-panel' import type { ElementRef } from '@angular/core' @Component({ @@ -200,15 +249,20 @@ export class AppComponent { } ``` -`injectDevtoolsPanel` must be called in an injection context, or be given an `Injector` through the `injector` option in its second argument: `injectDevtoolsPanel(() => ({ ... }), { injector })`. +`injectDevtoolsPanel` must be called in an injection context. To create the panel later, for example after lazy loading the entry point, wrap the call in [`runInInjectionContext`](https://angular.dev/api/core/runInInjectionContext). It returns a `DevtoolsPanelRef`; call its `destroy()` to remove the panel before the injector that created it is destroyed. + +See the [devtools panel example](./examples/devtools-panel-angular-router) for both variants. ### Options -Of these options `hostElement`, `client`, `errorTypes`, `onClose`, and `theme` support reactivity through signals. +The callback is reactive: `hostElement`, `client`, `errorTypes`, `onClose`, and `theme` are applied whenever a signal read in the callback changes. + +`styleNonce`, `shadowDOMTarget`, and `hideDisabledQueries` are construction-time +options, read when the panel is created. -- `hostElement?: ElementRef` +- `hostElement?: ElementRef | null` - The element to render the devtools panel in. When it is `undefined` or `null`, the devtools panel is not created, or is destroyed if it exists. -- `onClose?: () => void` +- `onClose?: () => unknown` - Callback function that is called when the devtools panel is closed - `client?: QueryClient`, - Use this to use a custom QueryClient. Otherwise, the QueryClient provided through `provideTanStackQuery` will be injected. @@ -224,7 +278,7 @@ Of these options `hostElement`, `client`, `errorTypes`, `onClose`, and `theme` s - Set this to true to hide disabled queries from the devtools panel. - `theme?: "light" | "dark" | "system"` - Defaults to the theme selected in the devtools Settings menu, or `system` if none is selected. - - Set this to change the theme of the devtools panel. This overrides the theme selected in the Settings menu. + - Sets the theme of the devtools panel, overriding the Settings menu selection. ## Filter queries and mutations diff --git a/docs/framework/angular/guides/background-fetching-indicators.md b/docs/framework/angular/guides/background-fetching-indicators.md index 9e5c5804383..032ffae833b 100644 --- a/docs/framework/angular/guides/background-fetching-indicators.md +++ b/docs/framework/angular/guides/background-fetching-indicators.md @@ -6,7 +6,7 @@ replace: { 'useIsFetching': 'injectIsFetching', 'hook': 'function', - '@tanstack/react-query': '@tanstack/angular-query-experimental', + '@tanstack/react-query': '@tanstack/angular-query', } --- @@ -42,7 +42,7 @@ class TodosComponent { [//]: # 'Example2' ```angular-ts -import { injectIsFetching } from '@tanstack/angular-query-experimental' +import { injectIsFetching } from '@tanstack/angular-query' @Component({ selector: 'global-loading-indicator', @@ -58,3 +58,14 @@ export class GlobalLoadingIndicatorComponent { ``` [//]: # 'Example2' + +## Reactive filters + +Pass a factory when filtering activity. It can read signals or required component inputs: + +```ts +readonly isFetching = injectIsFetching(() => ({ queryKey: ['todos', this.userId()] })) +readonly isMutating = injectIsMutating(() => ({ mutationKey: ['save', this.userId()] })) +``` + +The count updates when these dependencies change. diff --git a/docs/framework/angular/guides/default-query-function.md b/docs/framework/angular/guides/default-query-function.md index a7ba445b318..9227eed2817 100644 --- a/docs/framework/angular/guides/default-query-function.md +++ b/docs/framework/angular/guides/default-query-function.md @@ -16,16 +16,17 @@ const defaultQueryFn: QueryFunction = async ({ queryKey }) => { } // provide the default query function to your app with defaultOptions -const queryClient = new QueryClient({ - defaultOptions: { - queries: { - queryFn: defaultQueryFn, +const createQueryClient = () => + new QueryClient({ + defaultOptions: { + queries: { + queryFn: defaultQueryFn, + }, }, - }, -}) + }) bootstrapApplication(MyAppComponent, { - providers: [provideTanStackQuery(queryClient)], + providers: [provideTanStackQuery(createQueryClient)], }) export class PostsComponent { diff --git a/docs/framework/angular/guides/dependent-queries.md b/docs/framework/angular/guides/dependent-queries.md index 38afbd491f7..a1a58286120 100644 --- a/docs/framework/angular/guides/dependent-queries.md +++ b/docs/framework/angular/guides/dependent-queries.md @@ -27,7 +27,13 @@ projectsQuery = injectQuery(() => ({ [//]: # 'Example2' ```ts -// injectQueries is under development for Angular Query +projectsQueries = injectQueries(() => ({ + queries: + this.userQuery.data()?.projectIds.map((projectId) => ({ + queryKey: ['project', projectId], + queryFn: () => getProjectById(projectId), + })) ?? [], +})) ``` [//]: # 'Example2' diff --git a/docs/framework/angular/guides/disabling-queries.md b/docs/framework/angular/guides/disabling-queries.md index b52266505aa..07bacf2d914 100644 --- a/docs/framework/angular/guides/disabling-queries.md +++ b/docs/framework/angular/guides/disabling-queries.md @@ -70,7 +70,7 @@ export class TodosComponent { [//]: # 'Example3' ```angular-ts -import { skipToken, injectQuery } from '@tanstack/angular-query-experimental' +import { skipToken, injectQuery } from '@tanstack/angular-query' @Component({ selector: 'todos', diff --git a/docs/framework/angular/guides/does-this-replace-client-state.md b/docs/framework/angular/guides/does-this-replace-client-state.md index 3872115c940..c1118ff4b28 100644 --- a/docs/framework/angular/guides/does-this-replace-client-state.md +++ b/docs/framework/angular/guides/does-this-replace-client-state.md @@ -4,8 +4,10 @@ title: Does TanStack Query replace global state managers? ref: docs/framework/react/guides/does-this-replace-client-state.md replace: { - 'useQuery': 'injectQuery', - 'useMutation': 'injectMutation', + 'Does TanStack Query replace Redux, MobX or other global state managers\?': 'Does TanStack Query replace global state managers?', + 'Redux, MobX, Zustand, etc.': 'NgRx Store, Signal Store, etc.', + '`useQuery`': '`injectQuery`', + '`useMutation`': '`injectMutation`', 'hook': 'function', } --- diff --git a/docs/framework/angular/guides/error-handling.md b/docs/framework/angular/guides/error-handling.md new file mode 100644 index 00000000000..4efdfcf87ef --- /dev/null +++ b/docs/framework/angular/guides/error-handling.md @@ -0,0 +1,57 @@ +--- +id: error-handling +title: Error Handling +--- + +Query and mutation errors are exposed through their result signals. The adapter does not report +failed requests to a global error handler automatically. + +To report cache failures to Angular's `ErrorHandler`, configure the cache callbacks when creating +the client. Capture the handler in the provider factory, where `inject()` is available: + +```ts +import { ErrorHandler, inject } from '@angular/core' +import { + MutationCache, + QueryCache, + QueryClient, + provideTanStackQuery, +} from '@tanstack/angular-query' + +export const queryProviders = provideTanStackQuery(() => { + const errors = inject(ErrorHandler) + + return new QueryClient({ + queryCache: new QueryCache({ + onError: (error, query) => { + if (query.meta?.reportToErrorHandler !== false) { + errors.handleError(error) + } + }, + }), + mutationCache: new MutationCache({ + onError: (error, _variables, _context, mutation) => { + if (mutation.meta?.reportToErrorHandler !== false) { + errors.handleError(error) + } + }, + }), + }) +}) +``` + +This example reports failures by default. Set `meta: { reportToErrorHandler: false }` on a query or +mutation which your application handles locally. Compose these callbacks with any cache callbacks +you already use. + +A query cache callback reports a failed cache operation once, even when several components observe +the query. Observer-only `select` errors and exceptions in options or `combine` computations are +not cache failures and are not reported by this recipe. + +`mutateAsync()` rejects and can be caught with `try`/`catch`. `mutate()` returns void; use mutation +callbacks or result signals for its error state. `refetch({ throwOnError: true })` opts into promise +rejection for that call. + +The [Resource view](../resource-api.md) throws from `value()` when its mapped status is `error`. +Check `hasValue()` before reading it. An uncaught error while Angular renders a template can still +reach Angular's error handler. This integration does not provide a component error boundary. diff --git a/docs/framework/angular/guides/important-defaults.md b/docs/framework/angular/guides/important-defaults.md index 886792038b1..95a6b1df98a 100644 --- a/docs/framework/angular/guides/important-defaults.md +++ b/docs/framework/angular/guides/important-defaults.md @@ -6,6 +6,7 @@ replace: { 'React': 'Angular', 'react-query': 'angular-query', + '@tanstack/angular-query': '@tanstack/angular-query', 'useQuery': 'injectQuery', 'useInfiniteQuery': 'injectInfiniteQuery', 'useMemo and useCallback': 'setting signal values', diff --git a/docs/framework/angular/guides/infinite-queries.md b/docs/framework/angular/guides/infinite-queries.md index 27a077a048b..b912fb41470 100644 --- a/docs/framework/angular/guides/infinite-queries.md +++ b/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' diff --git a/docs/framework/angular/guides/invalidations-from-mutations.md b/docs/framework/angular/guides/invalidations-from-mutations.md index e69c4e5be7c..dc92e619311 100644 --- a/docs/framework/angular/guides/invalidations-from-mutations.md +++ b/docs/framework/angular/guides/invalidations-from-mutations.md @@ -17,10 +17,7 @@ postTodoMutation = injectMutation(() => ({ [//]: # 'Example2' ```ts -import { - injectMutation, - QueryClient, -} from '@tanstack/angular-query-experimental' +import { injectMutation, QueryClient } from '@tanstack/angular-query' export class TodosComponent { readonly queryClient = inject(QueryClient) diff --git a/docs/framework/angular/guides/migrating-from-experimental.md b/docs/framework/angular/guides/migrating-from-experimental.md new file mode 100644 index 00000000000..2c0b7181a3b --- /dev/null +++ b/docs/framework/angular/guides/migrating-from-experimental.md @@ -0,0 +1,373 @@ +--- +id: migrating-from-experimental +title: Migrating from Angular Query Experimental +--- + +The stable package keeps the callback-based query, mutation, and signal result APIs from the +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. + +## Active codebase recommendations + +Before migrating an active codebase, it is recommended that you: + +- Block imports of the removed `provideQueryClient` in favor of `provideTanStackQuery`. +- Create a `provideTestTanStackQuery` helper or a `createTestQueryClient` factory to pass to `provideTanStackQuery`, so new tests use a shared provider setup. + +Use ESLint's [`no-restricted-imports`](https://eslint.org/docs/latest/rules/no-restricted-imports) +to restrict experimental package imports while new code adopts `@tanstack/angular-query`. +Suppress existing imports with [ESLint suppressions](https://eslint.org/docs/latest/use/suppressions) +or a [rule-specific disable comment](https://eslint.org/docs/latest/use/configure/rules#using-configuration-comments-1), +and remove each suppression as its import is migrated. + +For a gradual import migration, a package-manager alias can let new imports use the experimental +adapter before you switch packages. For example, with pnpm: + +```json +{ + "dependencies": { + "@tanstack/angular-query": "npm:@tanstack/angular-query-experimental@5.90.25", + "@tanstack/angular-query-experimental": "5.90.25" + } +} +``` + +Keep both names on the same resolved version and peer dependency configuration, and verify they +resolve to the same adapter instance. The alias still exposes the experimental API; it does not +make the stable provider signatures available. Leave devtools and `inject-queries-experimental` +imports on their original experimental paths until the package switch so the schematic can +recognize them. Replace the alias with the real stable package before running the schematic. + +## Run the migration schematic + +Install the stable package, then preview the bundled migration: + +```sh +npm install @tanstack/angular-query + +# With the Angular CLI +ng generate @tanstack/angular-query:migrate-from-experimental --dry-run +ng generate @tanstack/angular-query:migrate-from-experimental + +# With Nx +nx g @tanstack/angular-query:migrate-from-experimental --skipInstall +``` + +With `--skipInstall`, run your package manager's install command after applying the migration +to synchronize the dependencies and lockfile. + +The schematic handles common migration steps like updating package and devtools imports, +updating dependencies, renaming providers, and converting direct `new QueryClient()` provider +arguments to factories. Review its warnings and the remaining sections for changes that require +manual updates. + +Two additional migrations are opt-in: + +- `--unsafe-wrap-client-references` wraps references such as `provideTanStackQuery(client)` + in a factory. Review every warning: injection tokens and existing factories need different handling. +- `--migrate-query-core-imports` moves `@tanstack/query-core` imports to `@tanstack/angular-query` + and removes direct core dependencies. Dependencies are kept when unmigrated references remain. + +The schematic also discovers `project.json` and `package.json` `nx` configurations. +It checks project-local `tsconfig.spec.json` and `tsconfig.test.json` for manually configured +test runners, unless a test target supplies an explicit `tsConfig`. Configured includes and +exclusions determine which files are migrated. Projects configured entirely through inferred +plugin settings may need manual review. + +## Replace the experimental package + +```sh +npm uninstall @tanstack/angular-query-experimental +npm install @tanstack/angular-query +``` + +```ts +import { injectQuery } from '@tanstack/angular-query-experimental' // [!code --] +import { injectQuery } from '@tanstack/angular-query' // [!code ++] +``` + +## Provide a client factory + +`provideTanStackQuery` no longer accepts a pre-created `QueryClient`. Pass a factory instead. + +```ts +provideTanStackQuery(new QueryClient()) // [!code --] +provideTanStackQuery(() => new QueryClient()) // [!code ++] +``` + +`provideTanStackQuery` now returns one `EnvironmentProviders` value rather than an array. Use it in +an environment injector, such as `ApplicationConfig.providers`, the `providers` passed to +`bootstrapApplication`, route-level `Route.providers`, or `createEnvironmentInjector`. It is not +supported in `@Component.providers` or `@Directive.providers`. Add the result directly; do not +spread it. + +```ts +providers: [...provideTanStackQuery(() => new QueryClient())] // [!code --] +providers: [provideTanStackQuery(() => new QueryClient())] // [!code ++] +``` + +If another provider already owns the client, resolve it inside the factory: + +```ts +provideTanStackQuery(() => inject(MY_QUERY_CLIENT)) +``` + +Replace direct token arguments with this form. + +`provideAngularQuery` and `provideQueryClient` have been removed. Use `provideTanStackQuery`, +which handles mounting, unmounting, and default hydration. Replacing it with a bare Angular +`useFactory` provider would omit that setup. + +```ts +provideAngularQuery(new QueryClient()) // [!code --] +provideTanStackQuery(() => new QueryClient()) // [!code ++] +``` + +For `provideQueryClient`, rename it to `provideTanStackQuery` and keep the existing client factory. + +## Replace `injectQueryClient` + +`injectQueryClient` has been removed. Inject `QueryClient` directly instead: + +```ts +const queryClient = injectQueryClient() // [!code --] +const queryClient = inject(QueryClient) // [!code ++] +``` + +## Install the standalone devtools package + +Devtools no longer ship as entrypoints of the core Angular package. + +```sh +npm install @tanstack/angular-query-devtools +``` + +```ts +import { withDevtools } from '@tanstack/angular-query-experimental/devtools' // [!code --] +import { withDevtools } from '@tanstack/angular-query-devtools' // [!code ++] +``` + +The production and panel entrypoints move in the same way: + +```ts +import { withDevtools } from '@tanstack/angular-query-experimental/devtools/production' // [!code --] +import { withDevtools } from '@tanstack/angular-query-devtools/production' // [!code ++] +``` + +The devtools options callback now runs in an injection context. Remove the `deps` option and call +`inject()` inside the callback instead. + +```ts +const optionsFromManager = (manager: DevtoolsOptionsManager) => ({ + loadDevtools: manager.loadDevtools, +}) + +withDevtools(optionsFromManager, { deps: [DevtoolsOptionsManager] }) // [!code --] +withDevtools(() => optionsFromManager(inject(DevtoolsOptionsManager))) // [!code ++] +``` + +See the [Devtools guide](../devtools.md) for setup, production entrypoints, and configuration +options. + +## Use the stable `injectQueries` export + +`injectQueries` is now exported from the main package. The helper must be called from an Angular +injection context. + +```ts +import { + injectQueries, // [!code --] +} from '@tanstack/angular-query-experimental/inject-queries-experimental' // [!code --] +import { injectQueries } from '@tanstack/angular-query' // [!code ++] + +const getQueries = () => ({ queries }) +const results = injectQueries(getQueries, injector) // [!code --] +const results = runInInjectionContext(injector, () => injectQueries(getQueries)) // [!code ++] +``` + +The `queries` callback is reactive, tuple inference is preserved, and `combine` can derive a single +result: + +```ts +readonly summary = injectQueries(() => ({ + queries: [todosOptions(), usersOptions()], + combine: ([todos, users]) => ({ + pending: todos.isPending || users.isPending, + todoCount: todos.data?.length ?? 0, + userCount: users.data?.length ?? 0, + }), +})) +``` + +## 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 +in the browser by default. In most SSR applications, no additional setup is necessary. + +If your application already performs manual dehydration and hydration, either remove the manual +implementation or disable the built-in behavior to avoid hydrating the same client twice: + +```ts +provideTanStackQuery(() => new QueryClient(), withNoQueryHydration()) +``` + +Give each client a unique key when multiple clients use automatic hydration: + +```ts +provideTanStackQuery( + () => new QueryClient(), + withHydrationKey('admin-query-cache'), +) +``` + +See the [SSR guide](./ssr.md) for request-scoped client setup and the interaction with Angular +`HttpClient` transfer caching. + +## Update tests that wait for stability + +Observed queries, parallel queries, and mutations started through the adapter register with Angular's `PendingTasks`. +As a result, `ApplicationRef.whenStable()` and `fixture.whenStable()` wait until that work settles. + +In zone-based component tests, call `fixture.autoDetectChanges()` before awaiting stability. +Resolve controlled operations before `whenStable()`; assert pending state while they remain +unresolved. HTTP mutations can start asynchronously, so wait for the request itself before flushing +it. `isPending()` does not prove that a mocked API has been called. + +With fake timers, advance timers and queued microtasks before awaiting stability. Disabled queries +do not fetch automatically; a manual refetch still registers pending work. +See [Testing](./testing.md) for query, mutation, HTTP, and fake-timer examples. + +After a query-key signal changes, `data()` can immediately return cached data for the new key, +before another change-detection pass. Assert the state the test intends to observe rather than +requiring an empty intermediate value. + +## Error handling + +Observer options no longer include `throwOnError`. Errors are exposed through the result's +`error`, `status`, and related signals, without an automatic global report. Cached query data +remains readable when a background refetch fails. + +```ts +injectQuery(() => ({ + queryKey: ['todos'], + queryFn: fetchTodos, + throwOnError: true, +})) // [!code --] +injectQuery(() => ({ queryKey: ['todos'], queryFn: fetchTodos })) // [!code ++] +``` + +Remove observer `throwOnError` from query, infinite-query, and mutation options, including your +Angular-specific client defaults. The shared core client still accepts this option for other +framework adapters, but Angular does not use it for reporting. + +`mutateAsync()` still rejects on failure, and `mutate()` still returns void. Imperative options +such as `query.refetch({ throwOnError: true })` retain their promise-rejection behavior. +To report cache failures to Angular, use the [ErrorHandler guide](./error-handling.md). +`toResource(query).value()` throws when the Resource is in its error state; guard the read with +`hasValue()` or inspect `error()` first. + +## Make activity filters reactive + +```ts +injectIsFetching({ queryKey: ['todos'] }) // [!code --] +injectIsFetching(() => ({ queryKey: ['todos', userId()] })) // [!code ++] + +injectIsMutating({ mutationKey: ['save'] }) // [!code --] +injectIsMutating(() => ({ mutationKey: ['save'] })) // [!code ++] +``` + +Calls without filters remain unchanged. Filter factories can read required inputs and signals; +changing a filter updates the count without waiting for a cache event. + +## Imperative methods + +Methods such as `refetch()` and `fetchNextPage()` use the current options even when called +immediately after changing an options signal. + +Read the current `injectQueries()` result when calling a method after adding, removing, or +reordering queries. + +`injectMutationState` selections and `injectQueries` combined results are no longer deeply +compared by the adapter. A newly allocated selected object or combined result can trigger consumers +even when its contents match the previous value. Prefer returning existing values when possible. + +## Stability and notifications + +Signal updates no longer enter `NgZone` or wait for adapter microtasks. Angular's change-detection +scheduler handles rendering. Keep reading reactive values as signals; callbacks do not gain an +injection context or guaranteed zone membership. + +Each mutation invocation blocks stability until its promise settles, including awaited lifecycle +callbacks. A later invocation completing, or calling `reset()`, does not release an earlier mutation's +work. Destroying the owning component or injector releases its pending tasks. Queries that are +paused offline continue to block stability until resumed, cancelled, or unobserved. + +## Persistence configuration + +Pass a factory to `withPersistQueryClient`: + +```ts +withPersistQueryClient(() => ({ + persistOptions: { persister }, +})) +``` + +The factory runs once per injector, in an injection context, only in the browser. +Create persisters that access `localStorage` inside this factory. + +Persistence manages its restoration state automatically through `withPersistQueryClient`. +See [persistQueryClient](../plugins/persistQueryClient.md) for the options and persisters. + +## New behavior that needs no migration + +The stable package also includes the following compatible improvements: + +- Query results can be converted into an Angular Resource with `toResource`. See the + [Resource API](../resource-api.md). +- `injectQueries` is supported from the main package with reactive options and field-level signals. +- Result field signals are evaluated lazily, so options can safely read required input signals without + being evaluated during class construction. +- Persistence options may be supplied as a browser-only factory, making references such as + `localStorage` safe in SSR applications. diff --git a/docs/framework/angular/guides/migrating-from-ngneat-query.md b/docs/framework/angular/guides/migrating-from-ngneat-query.md new file mode 100644 index 00000000000..946bb526d2d --- /dev/null +++ b/docs/framework/angular/guides/migrating-from-ngneat-query.md @@ -0,0 +1,295 @@ +--- +id: migrating-from-ngneat-query +title: Migrating from ngneat/query +--- + +Angular Query requires Angular 20.1 or newer. + +This guide uses `@ngneat/query` in its examples. + +## Active codebase recommendations + +For a gradual migration: + +- Install `@tanstack/angular-query` alongside the legacy package and share one `QueryClient`, + so migrated and existing code use the same cache, defaults, and invalidations. +- Block `@ngneat/query` imports and its subpaths with ESLint's + [`no-restricted-imports`](https://eslint.org/docs/latest/rules/no-restricted-imports) or a + similar rule, so new code uses `@tanstack/angular-query`. +- Share a test-provider helper or client factory so migrated tests keep the same client defaults. + +Suppress existing imports and the temporary provider bridge with +[ESLint suppressions](https://eslint.org/docs/latest/use/suppressions) or a +[rule-specific disable comment](https://eslint.org/docs/latest/use/configure/rules#using-configuration-comments-1), +and remove each suppression as its import is migrated. + +Keep the existing ngneat client configuration and let the stable adapter resolve that client: + +```ts +import { ApplicationConfig } from '@angular/core' +import { + injectQueryClient as injectLegacyQueryClient, + provideQueryClientOptions, +} from '@ngneat/query' +import { provideTanStackQuery } from '@tanstack/angular-query' + +export const appConfig: ApplicationConfig = { + providers: [ + provideQueryClientOptions({ + // Keep your existing client options here. + }), + provideTanStackQuery(() => injectLegacyQueryClient()), + ], +} +``` + +This preserves the legacy client's Observable-aware methods while both adapters use the same +instance. Keep query keys consistent between migrated and legacy code. + +Use package versions that support the same Angular and `@tanstack/query-core` versions. If the +lockfile selects different core versions, align the direct core dependency required by ngneat +with the stable adapter's dependency. You may need root-level +[npm overrides](https://docs.npmjs.com/cli/v11/configuring-npm/package-json/#overrides) or +[pnpm overrides](https://pnpm.io/settings#overrides) to select one version within both supported +ranges. + +After migrating the remaining legacy code, replace the bridge with a `QueryClient` factory from +`@tanstack/angular-query`, move the client options into that factory, and remove the legacy packages. + +## Replace the packages + +Remove whichever legacy package name your application uses, along with its devtools package. The +stable adapter includes `@tanstack/query-core` as a dependency, so remove a direct installation +unless your application imports it independently. + +```sh +npm uninstall @ngneat/query @ngneat/query-devtools @tanstack/query-core +npm install @tanstack/angular-query @tanstack/angular-query-devtools +``` + +## Configure the `QueryClient` + +Replace `provideQueryClientOptions` with a `QueryClient` factory passed to +`provideTanStackQuery`. The factory runs in an Angular injection context, so it can call `inject()` +when building caches or default options. + +```ts +import { QueryCache } from '@ngneat/query' // [!code --] +import { provideQueryClientOptions } from '@ngneat/query' // [!code --] +import { QueryCache, QueryClient } from '@tanstack/angular-query' // [!code ++] +import { provideTanStackQuery } from '@tanstack/angular-query' // [!code ++] + +const queryClientConfig = { + queryCache: new QueryCache({ onError: handleError }), +} + +providers: [ + provideQueryClientOptions(queryClientConfig), // [!code --] + provideTanStackQuery(() => new QueryClient(queryClientConfig)), // [!code ++] +] +``` + +## Migrate queries + +The legacy `injectQuery()` call returned a function that accepted query options. The stable API +accepts a reactive options callback and returns the query result directly. + +```ts +private readonly useQuery = injectQuery() // [!code --] + +readonly todos = this.useQuery({ // [!code --] + queryKey: ['todos'], // [!code --] + queryFn: fetchTodos, // [!code --] +}) // [!code --] +readonly todos = injectQuery(() => ({ // [!code ++] + queryKey: ['todos'], // [!code ++] + queryFn: fetchTodos, // [!code ++] +})) // [!code ++] +``` + +Read signals inside the callback to update options reactively. This replaces calling +`updateOptions` yourself. + +```ts +readonly filter = signal('') +private readonly useQuery = injectQuery() // [!code --] +readonly todos = this.useQuery({ // [!code --] + queryKey: ['todos', this.filter()], // [!code --] + queryFn: () => fetchTodos(this.filter()), // [!code --] +}) // [!code --] +readonly todos = injectQuery(() => ({ // [!code ++] + queryKey: ['todos', this.filter()], // [!code ++] + queryFn: () => fetchTodos(this.filter()), // [!code ++] +})) // [!code ++] +``` + +When a helper must be called from a callback that is not already in an injection context, use +Angular's `runInInjectionContext` at the call site: + +```ts +runInInjectionContext(injector, () => injectQuery(() => queryOptions)) +``` + +## Migrate infinite queries and mutations + +`injectInfiniteQuery` and `injectMutation` use the same callback pattern: + +```ts +private readonly useInfiniteQuery = injectInfiniteQuery() // [!code --] +readonly posts = this.useInfiniteQuery({ // [!code --] + queryKey: ['posts'], // [!code --] + queryFn: ({ pageParam }) => fetchPosts(pageParam), // [!code --] + initialPageParam: 0, // [!code --] + getNextPageParam: (lastPage) => lastPage.nextId, // [!code --] +}) // [!code --] +readonly posts = injectInfiniteQuery(() => ({ // [!code ++] + queryKey: ['posts'], // [!code ++] + queryFn: ({ pageParam }) => fetchPosts(pageParam), // [!code ++] + initialPageParam: 0, // [!code ++] + getNextPageParam: (lastPage) => lastPage.nextId, // [!code ++] +})) // [!code ++] +``` + +```ts +private readonly useMutation = injectMutation() // [!code --] +readonly addTodo = this.useMutation({ // [!code --] + mutationFn: addTodo, // [!code --] +}) // [!code --] +readonly addTodo = injectMutation(() => ({ // [!code ++] + mutationFn: addTodo, // [!code ++] +})) // [!code ++] +``` + +Imperative methods remain direct methods, for example `addTodo.mutate(value)`, +`addTodo.reset()`, `posts.fetchNextPage()`, and `todos.refetch()`. + +## Migrate query and mutation results + +The legacy adapter exposed one signal and one Observable containing the entire observer result. +The stable adapter exposes each result field as a signal and keeps imperative methods as functions. + +```ts +todos.result().isPending // [!code --] +todos.result().data // [!code --] +todos.result().error // [!code --] +todos.isPending() // [!code ++] +todos.data() // [!code ++] +todos.error() // [!code ++] +``` + +Templates use the field signals in the same way: + +```angular-html +@if (todos.result().isPending) { +@if (todos.isPending()) { + Loading... +} @else if (todos.isError()) { + {{ todos.error()?.message }} +} @else { + @for (todo of todos.data(); track todo.id) { + {{ todo.title }} + } +} +``` + +There is no direct replacement for `result$`. Convert the field signal you need with Angular's +`toObservable`, or compose several fields with `computed` first. + +```ts +readonly todosResult$ = this.todos.result$ // [!code --] +readonly todosState = computed(() => ({ // [!code ++] + data: this.todos.data(), // [!code ++] + error: this.todos.error(), // [!code ++] + status: this.todos.status(), // [!code ++] +})) // [!code ++] +readonly todosResult$ = toObservable(this.todosState) // [!code ++] +``` + +Mutation state follows the same rule: + +```ts +addTodo.result().isPending // [!code --] +addTodo.result().data // [!code --] +addTodo.isPending() // [!code ++] +addTodo.data() // [!code ++] +``` + +## Convert Observable query functions + +The legacy adapter accepted an RxJS `Observable` from `queryFn` and `mutationFn`. The stable +adapter follows TanStack Query's Promise-based contract, so convert an Observable with +`firstValueFrom` or `lastValueFrom`. + +```ts +queryFn: () => this.http.get('/api/todos') // [!code --] +queryFn: () => lastValueFrom(this.http.get('/api/todos')) // [!code ++] +``` + +```ts +const createTodo = (todo: Todo) => this.http.post('/api/todos', todo) + +mutationFn: createTodo // [!code --] +mutationFn: (todo) => lastValueFrom(createTodo(todo)) // [!code ++] +``` + +See [Angular HttpClient](../angular-httpclient-and-other-data-fetching-clients.md) +for a complete example. If an Observable does not complete, prefer `firstValueFrom` or make it +complete before converting it. + +## Migrate background indicators + +`injectIsFetching` and `injectIsMutating` now accept a reactive filters callback and return a +`Signal`. + +```ts +private readonly useIsFetching = injectIsFetching() // [!code --] +readonly fetchingTodos = // [!code --] + this.useIsFetching({ queryKey: ['todos'] }).toSignal() // [!code --] +readonly fetchingTodos = injectIsFetching(() => ({ queryKey: ['todos'] })) // [!code ++] +``` + +```ts +private readonly useIsMutating = injectIsMutating() // [!code --] +readonly mutatingTodos = // [!code --] + this.useIsMutating({ mutationKey: ['todos'] }).toSignal() // [!code --] +readonly mutatingTodos = injectIsMutating(() => ({ mutationKey: ['todos'] })) // [!code ++] +``` + +Use `toObservable(this.fetchingTodos)` if a consumer still needs an Observable. + +## Inject the `QueryClient` + +Use Angular dependency injection directly instead of `injectQueryClient`: + +```ts +import { injectQueryClient } from '@ngneat/query' // [!code --] +import { inject } from '@angular/core' // [!code ++] +import { QueryClient } from '@tanstack/angular-query' // [!code ++] + +private readonly queryClient = injectQueryClient() // [!code --] +private readonly queryClient = inject(QueryClient) // [!code ++] +``` + +## Migrate devtools + +Replace the legacy devtools provider with the `withDevtools` feature from the standalone Angular +Query devtools package. + +```ts +import { provideQueryClientOptions } from '@ngneat/query' // [!code --] +import { provideQueryDevTools } from '@ngneat/query-devtools' // [!code --] +import { QueryClient, provideTanStackQuery } from '@tanstack/angular-query' // [!code ++] +import { withDevtools } from '@tanstack/angular-query-devtools' // [!code ++] + +const devtools = withDevtools(() => ({ initialIsOpen: true })) + +providers: [ + provideQueryClientOptions({}), // [!code --] + provideQueryDevTools({ initialIsOpen: true }), // [!code --] + provideTanStackQuery(() => new QueryClient(), devtools), // [!code ++] +] +``` + +See the [Devtools guide](../devtools.md) for production entrypoints and reactive options. + +See [Error handling](./error-handling.md) for optional Angular `ErrorHandler` integration. diff --git a/docs/framework/angular/guides/migrating-to-angular-query.md b/docs/framework/angular/guides/migrating-to-angular-query.md new file mode 100644 index 00000000000..393d15ea7cc --- /dev/null +++ b/docs/framework/angular/guides/migrating-to-angular-query.md @@ -0,0 +1,11 @@ +--- +id: migrating-to-angular-query +title: Migrating to Angular Query +--- + +Choose the guide for your current adapter: + +- [Migrating from Angular Query Experimental](./migrating-from-experimental.md) +- [Migrating from ngneat/query or openng/query](./migrating-from-ngneat-query.md) + +Both target Angular 20.1 or newer. diff --git a/docs/framework/angular/guides/mutations.md b/docs/framework/angular/guides/mutations.md index 04918de21f9..ea3e53cd2ab 100644 --- a/docs/framework/angular/guides/mutations.md +++ b/docs/framework/angular/guides/mutations.md @@ -274,3 +274,5 @@ queryClient.resumePausedMutations() [//]: # 'OfflineExampleLink' [//]: # 'Materials' [//]: # 'Materials' + +See [Error handling](./error-handling.md) to connect cache failures to Angular’s `ErrorHandler`. diff --git a/docs/framework/angular/guides/parallel-queries.md b/docs/framework/angular/guides/parallel-queries.md index 8e2e2348fc5..d6071e9d3b3 100644 --- a/docs/framework/angular/guides/parallel-queries.md +++ b/docs/framework/angular/guides/parallel-queries.md @@ -17,6 +17,9 @@ replace: [//]: # 'Example' ```ts +@Component({ + // ... +}) export class AppComponent { // The following queries will execute in parallel readonly usersQuery = injectQuery(() => ({ @@ -45,12 +48,14 @@ TanStack Query provides `injectQueries`, which you can use to dynamically execut [//]: # 'Example2' ```ts +@Component({ + // ... +}) export class AppComponent { users = signal>([]) - // Please note injectQueries is under development and this code does not work yet - readonly userQueries = injectQueries(() => ({ - queries: users().map((user) => { + userQueries = injectQueries(() => ({ + queries: this.users().map((user) => { return { queryKey: ['user', user.id], queryFn: () => fetchUserById(user.id), diff --git a/docs/framework/angular/guides/queries.md b/docs/framework/angular/guides/queries.md index 051d332bf8a..1bf5816d206 100644 --- a/docs/framework/angular/guides/queries.md +++ b/docs/framework/angular/guides/queries.md @@ -6,6 +6,7 @@ replace: { 'React': 'Angular', 'react-query': 'angular-query', + '@tanstack/angular-query': '@tanstack/angular-query', 'promise': 'promise or observable', 'custom hooks': 'services', 'the `useQuery` hook': '`injectQuery`', @@ -17,7 +18,7 @@ replace: [//]: # 'Example' ```ts -import { injectQuery } from '@tanstack/angular-query-experimental' +import { injectQuery } from '@tanstack/angular-query' export class TodosComponent { readonly todosQuery = injectQuery(() => ({ @@ -101,4 +102,11 @@ class TodosComponent {} [//]: # 'Example4' [//]: # 'Materials' + +Angular Query can convert each query result into a Resource-compatible view with `toResource`. See +the [Resource API](../resource-api.md) when an Angular API expects a +[Resource](https://angular.dev/api/core/Resource). + [//]: # 'Materials' + +See [Error handling](./error-handling.md) to connect cache failures to Angular’s `ErrorHandler`. diff --git a/docs/framework/angular/guides/query-cancellation.md b/docs/framework/angular/guides/query-cancellation.md index 100ced3c981..8ca511ca000 100644 --- a/docs/framework/angular/guides/query-cancellation.md +++ b/docs/framework/angular/guides/query-cancellation.md @@ -14,10 +14,11 @@ However, if you consume the `AbortSignal`, the Promise will be cancelled (e.g. a ## Using `HttpClient` ```ts -import { injectQuery } from '@tanstack/angular-query-experimental' import { fromEvent, lastValueFrom, takeUntil } from 'rxjs' +import { injectQuery } from '@tanstack/angular-query' postQuery = injectQuery(() => ({ + enabled: this.postId() > 0, queryKey: ['post', this.postId()], queryFn: (context): Promise => { const abort$ = fromEvent(context.signal, 'abort') @@ -96,7 +97,7 @@ export class TodosComponent { readonly queryClient = inject(QueryClient) onCancel() { - this.queryClient.cancelQueries({ queryKey: ['todos'] }) + this.queryClient.cancelQueries(['todos']) } } ``` diff --git a/docs/framework/angular/guides/query-invalidation.md b/docs/framework/angular/guides/query-invalidation.md index 36956557dcf..eb287dd0070 100644 --- a/docs/framework/angular/guides/query-invalidation.md +++ b/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 { readonly queryClient = inject(QueryClient) diff --git a/docs/framework/angular/guides/query-options.md b/docs/framework/angular/guides/query-options.md index eb90770d815..691b52ec4fd 100644 --- a/docs/framework/angular/guides/query-options.md +++ b/docs/framework/angular/guides/query-options.md @@ -7,7 +7,7 @@ ref: docs/framework/react/guides/query-options.md [//]: # 'Example1' ```ts -import { queryOptions, noop } from '@tanstack/angular-query-experimental' +import { noop, queryOptions } from '@tanstack/angular-query' @Injectable({ providedIn: 'root', @@ -38,7 +38,7 @@ queries = inject(QueriesService) postQuery = injectQuery(() => this.queries.post(this.postId())) -queryClient.query(this.queries.post(23)).catch(noop) +void queryClient.query(this.queries.post(23)).catch(noop) queryClient.setQueryData(this.queries.post(42).queryKey, newPost) ``` diff --git a/docs/framework/angular/guides/query-retries.md b/docs/framework/angular/guides/query-retries.md index a7b0b1841ca..e19c8f85a37 100644 --- a/docs/framework/angular/guides/query-retries.md +++ b/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 todoQuery = injectQuery(() => ({ @@ -33,19 +33,20 @@ const todoQuery = injectQuery(() => ({ import { QueryCache, QueryClient, - provideTanStackQuery, -} from '@tanstack/angular-query-experimental' + QueryClientProvider, +} from '@tanstack/angular-query' -const queryClient = new QueryClient({ - defaultOptions: { - queries: { - retryDelay: (attemptIndex) => Math.min(1000 * 2 ** attemptIndex, 30000), +const createQueryClient = () => + new QueryClient({ + defaultOptions: { + queries: { + retryDelay: (attemptIndex) => Math.min(1000 * 2 ** attemptIndex, 30000), + }, }, - }, -}) + }) bootstrapApplication(AppComponent, { - providers: [provideTanStackQuery(queryClient)], + providers: [provideTanStackQuery(createQueryClient)], }) ``` diff --git a/docs/framework/angular/guides/ssr.md b/docs/framework/angular/guides/ssr.md new file mode 100644 index 00000000000..2b6b727796f --- /dev/null +++ b/docs/framework/angular/guides/ssr.md @@ -0,0 +1,101 @@ +--- +id: ssr +title: SSR +--- + +For [Angular SSR](https://angular.dev/guide/ssr), [`provideTanStackQuery`](../reference/functions/provideTanStackQuery.md) serializes the `QueryClient` cache into Angular's `TransferState` and restores it when the browser application starts. + +See the [Angular SSR example](https://github.com/TanStack/query/tree/main/examples/angular/ssr). The +[SSR persistence example](https://github.com/TanStack/query/tree/main/examples/angular/ssr-persist) +builds on the same setup with browser persistence. + +## Query client factory + +```ts +import { isPlatformBrowser } from '@angular/common' +import { inject, PLATFORM_ID } from '@angular/core' +import { QueryClient } from '@tanstack/angular-query' + +export function createQueryClient() { + const isBrowser = isPlatformBrowser(inject(PLATFORM_ID)) + + return new QueryClient({ + defaultOptions: { + queries: { + // Retry failed queries in the browser, but not on the server. + retry: isBrowser ? 3 : 0, + }, + }, + }) +} +``` + +## Browser config + +Use the factory with `provideTanStackQuery` in your application config. Angular's HTTP transfer +cache is enabled by default with +[`provideClientHydration`](https://angular.dev/api/platform-browser/provideClientHydration). Add +[`withNoHttpTransferCache`](https://angular.dev/api/platform-browser/withNoHttpTransferCache) so +query results are not serialized once by each cache. + +```ts +import type { ApplicationConfig } from '@angular/core' +import { provideHttpClient } from '@angular/common/http' +import { + provideClientHydration, + withEventReplay, + withNoHttpTransferCache, +} from '@angular/platform-browser' +import { provideTanStackQuery } from '@tanstack/angular-query' +import { withDevtools } from '@tanstack/angular-query-devtools' +import { createQueryClient } from './query-client' + +export const appConfig: ApplicationConfig = { + providers: [ + provideHttpClient(), + provideClientHydration(withEventReplay(), withNoHttpTransferCache()), + provideTanStackQuery(createQueryClient, withDevtools()), + ], +} +``` + +## Server config + +Merge the application config with `provideServerRendering` in the server config. + +```ts +import { mergeApplicationConfig } from '@angular/core' +import { provideServerRendering, withRoutes } from '@angular/ssr' +import { appConfig } from './app.config' +import { serverRoutes } from './app.routes.server' + +export const serverConfig = mergeApplicationConfig(appConfig, { + providers: [provideServerRendering(withRoutes(serverRoutes))], +}) +``` + +## Multiple query clients + +Built-in hydration uses a default transfer key. For a second `QueryClient` in a child injector, pass a distinct key with `withHydrationKey` so each client's serialized cache stays separate. + +```ts +providers: [ + provideTanStackQuery( + createSecondaryQueryClient, + withHydrationKey('my-secondary-query-cache'), + ), +] +``` + +## Disabling built-in hydration + +If you need to opt out of TanStack Query's built-in `TransferState` integration for a specific injector, add `withNoQueryHydration()`. + +```ts +providers: [provideTanStackQuery(createQueryClient, withNoQueryHydration())] +``` + +## See also + +- [Angular HttpClient and data fetching](../angular-httpclient-and-other-data-fetching-clients.md) +- [Devtools](../devtools.md) diff --git a/docs/framework/angular/guides/testing.md b/docs/framework/angular/guides/testing.md index 857b2a57ee0..007fdca2545 100644 --- a/docs/framework/angular/guides/testing.md +++ b/docs/framework/angular/guides/testing.md @@ -7,13 +7,13 @@ Most Angular tests using TanStack Query will involve services or components that TanStack Query's `inject*` functions integrate with [`PendingTasks`](https://angular.dev/api/core/PendingTasks) which ensures the framework is aware of in-progress queries and mutations. -This lets the framework, for example during SSR, wait until mutations and queries resolve. In unit tests, `ApplicationRef.whenStable()` and `fixture.whenStable()` work for both Zone.js and Zoneless setups when the work settles right away, such as a synchronous query function or a response flushed through `HttpTestingController`. They can resolve before a query or mutation that takes time settles, so advance fake timers instead, as shown in the sections below. +This means tests and SSR can wait until mutations and queries resolve. In unit tests you can use `ApplicationRef.whenStable()` or `fixture.whenStable()` to await query completion. This works for both Zone.js and Zoneless setups. -> This integration requires Angular 19 or later. Earlier versions of Angular do not support `PendingTasks`. +> This adapter requires Angular 20.1 or later. It uses `PendingTasks` to keep application stability open while observed work is pending. ## TestBed setup -Create a fresh `QueryClient` for every spec and provide it with `provideTanStackQuery` or `provideQueryClient`. This keeps caches isolated and lets you change default options per test: +Create a fresh `QueryClient` for every spec and return it from the provider factory. Keeping a reference makes it easy to inspect or clear the cache: ```ts const queryClient = new QueryClient({ @@ -25,11 +25,11 @@ const queryClient = new QueryClient({ }) TestBed.configureTestingModule({ - providers: [provideTanStackQuery(queryClient)], + providers: [provideTanStackQuery(() => queryClient)], }) ``` -> If your applications actual TanStack Query config is used in unit tests, make sure `withDevtools` is not accidentally included in test providers. This can cause slow tests. It is best to keep test and production configs separate. +> If your application's TanStack Query config is used in unit tests, make sure `withDevtools` is not accidentally included in test providers. This can cause slow tests. It is best to keep test and production configs separate. If you share helpers, remember to call `queryClient.clear()` (or build a new instance) in `afterEach` so data from one test never bleeds into another. @@ -46,7 +46,7 @@ const query = TestBed.runInInjectionContext(() => })), ) -TestBed.tick() // Trigger effect +TestBed.tick() // Synchronize the test application // Application is stable when queries are idle await appRef.whenStable() @@ -55,7 +55,7 @@ expect(query.status()).toBe('success') expect(query.data()).toBe('Hello') ``` -Here `whenStable()` resolves after the query settles because the query function returns right away. When using fake timers (Vitest), advance the clock and a microtask before awaiting stability: +PendingTasks will have `whenStable()` resolve after the query settles. When using fake timers (Vitest), advance the clock and a microtask before awaiting stability: ```ts await vi.advanceTimersByTimeAsync(0) @@ -65,89 +65,22 @@ await appRef.whenStable() ## Testing components -For components, create them through `TestBed.createComponent`. `fixture.whenStable()` can resolve before the query data arrives, so with fake timers, advance the clock past the query function's delay, then run `fixture.detectChanges()` and assert on what the component renders: +For components, bootstrap them through `TestBed.createComponent`, then await `fixture.whenStable()`: -```angular-ts -beforeEach(() => { - vi.useFakeTimers() -}) - -afterEach(() => { - vi.useRealTimers() -}) - -it('should render the query data', async () => { - @Component({ - template: `

{{ query.data()?.value ?? 'Loading...' }}

`, - }) - class ExampleComponent { - readonly query = injectQuery(() => ({ - queryKey: ['example'], - queryFn: () => - new Promise<{ value: number }>((resolve) => - setTimeout(() => resolve({ value: 42 }), 10), - ), - })) - } - - const fixture = TestBed.createComponent(ExampleComponent) - fixture.detectChanges() - expect(fixture.nativeElement.textContent).toContain('Loading...') - - await vi.advanceTimersByTimeAsync(11) - fixture.detectChanges() - - expect(fixture.nativeElement.textContent).toContain('42') -}) -``` +```ts +const fixture = TestBed.createComponent(ExampleComponent) +fixture.autoDetectChanges() -If you use [Angular Testing Library](https://testing-library.com/docs/angular-testing-library/intro/), render the component with `render` and follow the same flow, running change detection through `rendered.fixture`: - -```angular-ts -it('should render the query data', async () => { - @Component({ - template: `

{{ query.data()?.value ?? 'Loading...' }}

`, - }) - class ExampleComponent { - readonly query = injectQuery(() => ({ - queryKey: ['example'], - queryFn: () => - new Promise<{ value: number }>((resolve) => - setTimeout(() => resolve({ value: 42 }), 10), - ), - })) - } - - const rendered = await render(ExampleComponent) - expect(rendered.getByText('Loading...')).toBeInTheDocument() - - await vi.advanceTimersByTimeAsync(11) - rendered.fixture.detectChanges() - - expect(rendered.getByText('42')).toBeInTheDocument() -}) +await fixture.whenStable() +expect(fixture.componentInstance.query.data()).toEqual({ value: 42 }) ``` -To test the same query without a component, create it with `TestBed.runInInjectionContext`, advance the clock the same way, and assert on its signals: +In zone-based tests, enable `fixture.autoDetectChanges()` so component effects can run again +as the query settles. Zoneless fixtures enable automatic detection by default. -```ts -it('should resolve the query data', async () => { - const query = TestBed.runInInjectionContext(() => - injectQuery(() => ({ - queryKey: ['example'], - queryFn: () => - new Promise<{ value: number }>((resolve) => - setTimeout(() => resolve({ value: 42 }), 10), - ), - })), - ) - expect(query.isPending()).toBe(true) - - await vi.advanceTimersByTimeAsync(11) - - expect(query.data()).toEqual({ value: 42 }) -}) -``` +When using Angular Testing Library, its `autoDetectChanges` option runs change detection around +library operations; it does not call `fixture.autoDetectChanges()`. Enable the fixture's automatic +detection explicitly when awaiting stability in a zone-based component test. ## Handling retries @@ -155,14 +88,16 @@ Retries slow failing tests because the default backoff runs three times. Set `re ## HttpClient & network stubs -Angular's `HttpClient` testing utilities play nicely with PendingTasks. Register `provideHttpClient()` and `provideHttpClientTesting()` alongside the Query provider and flush responses through `HttpTestingController`: +Angular's `provideHttpClientTesting` plays nicely with PendingTasks. Register it after +`provideHttpClient`, alongside the Query provider, and flush responses through +`HttpTestingController`: ```ts TestBed.configureTestingModule({ providers: [ provideHttpClient(), provideHttpClientTesting(), - provideTanStackQuery(queryClient), + provideTanStackQuery(() => queryClient), ], }) @@ -174,6 +109,7 @@ const query = TestBed.runInInjectionContext(() => })), ) +TestBed.tick() // Synchronize the test application so the request starts const fixturePromise = TestBed.inject(ApplicationRef).whenStable() httpCtrl.expectOne('/api/todos').flush([{ id: 1 }]) await fixturePromise @@ -182,69 +118,96 @@ expect(query.data()).toEqual([{ id: 1 }]) httpCtrl.verify() ``` +Mutations can start their HTTP request asynchronously, after their `onMutate` callbacks finish. +Wait for the request itself before flushing it. This Vitest example uses `vi.waitFor`: + +```ts +const http = TestBed.inject(HttpClient) +const mutation = TestBed.runInInjectionContext(() => + injectMutation(() => ({ + mutationFn: (input: { email: string }) => + lastValueFrom(http.post('/api/reset', input)), + })), +) + +TestBed.tick() +mutation.mutate({ email: 'person@example.com' }) + +const request = await vi.waitFor(() => httpCtrl.expectOne('/api/reset')) +request.flush({ ok: true }) +await TestBed.inject(ApplicationRef).whenStable() + +expect(mutation.isSuccess()).toBe(true) +httpCtrl.verify() +``` + +Do not await stability before flushing a request controlled by the test: the unanswered request +keeps the query or mutation stuck on pending. + +Test observable results after normal Angular initialization and updates. For components, render +with `fixture.autoDetectChanges()` and await `fixture.whenStable()` when the operation should finish. +For injection-context-only tests, synchronize the test application as shown above. When using +HTTP mocks or fake timers, flush the request or advance time before awaiting stability. + +Avoid asserting an exact subscription order or a stale intermediate value during initialization. +Those are implementation details. To test pending mutation or fetching state, hold the operation +open with a controlled promise and assert after rendering; do not await stability until you +resolve that promise. To test completed state, resolve the operation and await stability before +asserting the result. + ## Infinite queries & pagination -`whenStable()` can resolve before the pages of an infinite query reach the `data()` signal. With fake timers, advance the clock past the query function's delay instead, call `fetchNextPage()`, and advance it again before asserting on `data().pages`. Restore real timers in `afterEach`, so they are restored even when an assertion fails: +Use the same pattern for infinite queries: call `fetchNextPage()`, advance timers if you are faking time, then await stability and assert on `data().pages`. ```ts -beforeEach(() => { - vi.useFakeTimers() -}) +const infinite = TestBed.runInInjectionContext(() => + injectInfiniteQuery(() => ({ + queryKey: ['pages'], + initialPageParam: 1, + queryFn: ({ pageParam }) => fetchPage(pageParam), + getNextPageParam: (last, all) => all.length + 1, + })), +) -afterEach(() => { - vi.useRealTimers() -}) +TestBed.tick() +await appRef.whenStable() +expect(infinite.data()?.pages).toHaveLength(1) -it('should load the next page', async () => { - const infinite = TestBed.runInInjectionContext(() => - injectInfiniteQuery(() => ({ - queryKey: ['pages'], - queryFn: ({ pageParam }) => - new Promise((resolve) => - setTimeout(() => resolve(`page ${pageParam}`), 10), - ), - initialPageParam: 1, - getNextPageParam: (_lastPage, allPages) => allPages.length + 1, - })), - ) - - await vi.advanceTimersByTimeAsync(11) - expect(infinite.data()?.pages).toEqual(['page 1']) - - void infinite.fetchNextPage() - await vi.advanceTimersByTimeAsync(11) - expect(infinite.data()?.pages).toEqual(['page 1', 'page 2']) -}) +await infinite.fetchNextPage() +await appRef.whenStable() + +expect(infinite.data()?.pages).toHaveLength(2) ``` ## Mutations and optimistic updates -`whenStable()` can resolve before a mutation started with `mutate()` settles. With fake timers enabled as in the examples above, advance the clock past the mutation function's delay before asserting on the result: - ```ts -it('should uppercase the input', async () => { - const mutation = TestBed.runInInjectionContext(() => - injectMutation(() => ({ - mutationFn: (input: string) => - new Promise((resolve) => - setTimeout(() => resolve(input.toUpperCase()), 10), - ), - })), - ) - - mutation.mutate('test') - await vi.advanceTimersByTimeAsync(11) - - expect(mutation.isSuccess()).toBe(true) - expect(mutation.data()).toBe('TEST') -}) +const mutation = TestBed.runInInjectionContext(() => + injectMutation(() => ({ + mutationFn: async (input: string) => input.toUpperCase(), + })), +) + +mutation.mutate('test') + +// Synchronize the test application +TestBed.tick() + +await appRef.whenStable() + +expect(mutation.isSuccess()).toBe(true) +expect(mutation.data()).toBe('TEST') ``` +`whenStable()` waits for every mutation invocation, including awaited lifecycle callbacks. +Resolve or reject all outstanding mocked mutations before awaiting stability; calling `reset()` +does not finish a request. Queries paused offline also keep stability open until resumed or cancelled. + ## Quick checklist - Fresh `QueryClient` per test (and clear it afterwards) - Disable or control retries to avoid timeouts - Advance timers + microtasks before `whenStable()` when using fake timers -- Use `provideHttpClientTesting()` or your preferred mock to assert network calls -- Advance timers past the query or mutation function after every `refetch`, `fetchNextPage()`, or mutation instead of awaiting `whenStable()` -- Prefer `TestBed.runInInjectionContext` for service tests, and `TestBed.createComponent` or Angular Testing Library's `render` with `fixture.detectChanges()` for component tests +- Use `provideHttpClientTesting` or your preferred mock to assert network calls +- Resolve controlled requests, then await `whenStable()` for settled-state assertions +- Prefer `TestBed.runInInjectionContext` for service tests and `fixture.whenStable()` for component tests diff --git a/docs/framework/angular/guides/window-focus-refetching.md b/docs/framework/angular/guides/window-focus-refetching.md index 14490ba07ca..36e446238df 100644 --- a/docs/framework/angular/guides/window-focus-refetching.md +++ b/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' @@ -11,13 +11,14 @@ replace: { '@tanstack/react-query': '@tanstack/angular-query-experimental' } export const appConfig: ApplicationConfig = { providers: [ provideTanStackQuery( - new QueryClient({ - defaultOptions: { - queries: { - refetchOnWindowFocus: false, // default: true + () => + new QueryClient({ + defaultOptions: { + queries: { + refetchOnWindowFocus: false, // default: true + }, }, - }, - }), + }), ), ], } diff --git a/docs/framework/angular/installation.md b/docs/framework/angular/installation.md index 8ef7db4377b..0ff08b61afb 100644 --- a/docs/framework/angular/installation.md +++ b/docs/framework/angular/installation.md @@ -3,32 +3,45 @@ 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. +_Angular Query is compatible with Angular v20.1 and higher._ -### NPM +### Angular CLI ```sh -npm i @tanstack/angular-query-experimental +ng add @tanstack/angular-query +``` + +This installs the package and devtools, then configures an SSR-safe `QueryClient` factory with +`withDevtools()`. + +### Package managers + +```sh +npm i @tanstack/angular-query ``` or ```sh -pnpm add @tanstack/angular-query-experimental +pnpm add @tanstack/angular-query ``` or ```sh -yarn add @tanstack/angular-query-experimental +yarn add @tanstack/angular-query ``` or ```sh -bun add @tanstack/angular-query-experimental +bun add @tanstack/angular-query ``` -Angular Query is compatible with Angular v16+. +If you want Angular Query devtools, install the standalone devtools package as well: + +```sh +npm i @tanstack/angular-query-devtools +``` -> Wanna give it a spin before you download? Try out the [simple](./examples/simple) or [basic](./examples/basic) examples! +> Want to try it first? See the [simple](./examples/simple) or [basic](./examples/basic) example. diff --git a/docs/framework/angular/overview.md b/docs/framework/angular/overview.md index ac71df931f1..67bb8c72bad 100644 --- a/docs/framework/angular/overview.md +++ b/docs/framework/angular/overview.md @@ -1,19 +1,17 @@ --- id: overview title: Overview +redirect_from: + - framework/angular/zoneless --- -> 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` package offers a 1st-class API for using TanStack Query via Angular. -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. +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. +TanStack Query is compatible with Angular v20.1 and higher. Because the adapter is built on signals, it supports zoneless change detection as well as Zone.js. 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. @@ -63,7 +61,7 @@ In the example below, you can see TanStack Query in its most basic and simple fo ```angular-ts import { ChangeDetectionStrategy, Component, inject } from '@angular/core' import { HttpClient } from '@angular/common/http' -import { injectQuery } from '@tanstack/angular-query-experimental' +import { injectQuery } from '@tanstack/angular-query' import { lastValueFrom } from 'rxjs' @Component({ @@ -72,11 +70,10 @@ import { lastValueFrom } from 'rxjs' template: ` @if (repoDataQuery.isPending()) { Loading... - } - @if (repoDataQuery.isError()) { + } @else if (repoDataQuery.isError()) { An error has occurred: {{ repoDataQuery.error().message }} - } - @if (repoDataQuery.data(); as data) { + } @else if (repoDataQuery.isSuccess()) { + @let data = repoDataQuery.data();

{{ data.name }}

{{ data.description }}

👀 {{ data.subscribers_count }} diff --git a/docs/framework/angular/plugins/persistQueryClient.md b/docs/framework/angular/plugins/persistQueryClient.md new file mode 100644 index 00000000000..1f48ffb32e1 --- /dev/null +++ b/docs/framework/angular/plugins/persistQueryClient.md @@ -0,0 +1,253 @@ +--- +id: persistQueryClient +title: persistQueryClient +--- + +`@tanstack/angular-query-persist-client` saves your `QueryClient` cache with a **persister** and restores it the next time the application starts. Different persisters can store the cache in different storage layers. + +## Installation + +```sh +npm install @tanstack/angular-query-persist-client +``` + +or + +```sh +pnpm add @tanstack/angular-query-persist-client +``` + +or + +```sh +yarn add @tanstack/angular-query-persist-client +``` + +or + +```sh +bun add @tanstack/angular-query-persist-client +``` + +You also need a persister. `@tanstack/query-async-storage-persister` and `@tanstack/query-sync-storage-persister` provide persisters for the Web Storage API and compatible stores, or you can [build your own](#persisters). + +## Usage + +Add `withPersistQueryClient` to `provideTanStackQuery`: + +```ts +import { QueryClient, provideTanStackQuery } from '@tanstack/angular-query' +import { withPersistQueryClient } from '@tanstack/angular-query-persist-client' +import { createAsyncStoragePersister } from '@tanstack/query-async-storage-persister' +import type { ApplicationConfig } from '@angular/core' + +export const appConfig: ApplicationConfig = { + providers: [ + provideTanStackQuery( + () => + new QueryClient({ + defaultOptions: { + queries: { + gcTime: 24 * 60 * 60 * 1000, // 24 hours + }, + }, + }), + withPersistQueryClient(() => ({ + persistOptions: { + persister: createAsyncStoragePersister({ storage: localStorage }), + }, + })), + ), + ], +} +``` + +The options factory runs once per injector, in an injection context, and only in the browser. It can call `inject()` and use browser APIs such as `localStorage`. During server-side rendering the factory is not called and nothing is restored, so create persisters that access browser storage inside the factory. + +When the injector is created in the browser, `withPersistQueryClient`: + +1. Restores the persisted cache into the `QueryClient`. +2. Subscribes to the query cache and saves changes through the persister. +3. Stops saving when the injector is destroyed. + +Restoring is asynchronous. Queries do not start fetching while the cache is being restored. They still render, with `fetchStatus: 'idle'`, until the data has been restored. Then they refetch unless the restored data is fresh enough. `initialData` is respected. + +### Options + +The factory returns an object with: + +- `persistOptions: PersistQueryClientOptions` + - all [options](#persistoptions) for persisting and restoring, minus the `QueryClient` itself +- `onSuccess?: () => Promise | unknown` + - optional + - will be called when the initial restore is finished + - can be used to [resumePausedMutations](../reference/classes/QueryClient.md#resumepausedmutations) + - if a Promise is returned, it will be awaited; restoring is seen as ongoing until then +- `onError?: () => Promise | unknown` + - optional + - will be called when an error is thrown during restoration + - if a Promise is returned, it will be awaited + +### `persistOptions` + +```ts +interface PersistQueryClientOptions { + /** The Persister interface for storing and restoring the cache + * to/from a persisted location */ + persister: Persister + /** The max-allowed age of the cache in milliseconds. + * If a persisted cache is found that is older than this + * time, it will be **silently** discarded + * (defaults to 24 hours) */ + maxAge?: number + /** A unique string that can be used to forcefully + * invalidate existing caches if they do not share the same buster string */ + buster?: string + /** The options passed to the hydrate function */ + hydrateOptions?: HydrateOptions + /** The options passed to the dehydrate function */ + dehydrateOptions?: DehydrateOptions +} +``` + +### injectIsRestoring + +Use [`injectIsRestoring`](../reference/functions/injectIsRestoring.md) to check whether a restore is in progress. It returns a signal that is `true` while the cache is being restored. `injectQuery` and friends also check this internally to avoid race conditions between the restore and mounting queries. + +```angular-ts +import { Component } from '@angular/core' +import { injectIsRestoring } from '@tanstack/angular-query' + +@Component({ + selector: 'app-root', + template: ` + @if (isRestoring()) { +

Restoring the cache...

+ } + `, +}) +export class AppComponent { + readonly isRestoring = injectIsRestoring() +} +``` + +## How It Works + +**IMPORTANT** - for persist to work properly, you probably want to pass `QueryClient` a `gcTime` value to override the default during hydration (as shown above). + +If it is not set when creating the `QueryClient` instance, it will default to `300000` (5 minutes) for hydration, and the stored cache will be discarded after 5 minutes of inactivity. This is the default garbage collection behavior. + +It should be set as the same value or higher than the `maxAge` option. E.g. if `maxAge` is 24 hours (the default) then `gcTime` should be 24 hours or higher. If lower than `maxAge`, garbage collection will kick in and discard the stored cache earlier than expected. + +You can also pass it `Infinity` to disable garbage collection behavior entirely. + +Due to a JavaScript limitation, the maximum allowed `gcTime` is about [24 days](https://developer.mozilla.org/en-US/docs/Web/API/setTimeout#maximum_delay_value), although it is possible to work around this limit using [timeoutManager.setTimeoutProvider](../reference/interfaces/TimeoutManager.md#settimeoutprovider). + +### Cache Busting + +Sometimes you may make changes to your application or data that immediately invalidate any and all cached data. If and when this happens, you can pass a `buster` string option. If the cache that is found does not also have that buster string, it will be discarded. + +```ts +withPersistQueryClient(() => ({ + persistOptions: { persister, buster: buildHash }, +})) +``` + +### Removal + +If data is found to be any of the following: + +1. expired (see `maxAge`) +2. busted (see `buster`) +3. error (ex: `throws ...`) +4. empty (ex: `undefined`) + +the persister `removeClient()` is called and the cache is immediately discarded. + +## Persisters + +### Storage persisters + +`createAsyncStoragePersister` accepts any storage that adheres to the `AsyncStorage` interface. Storages that read and write synchronously, like `window.localStorage`, also adhere to it. + +```ts +import { createAsyncStoragePersister } from '@tanstack/query-async-storage-persister' + +const persister = createAsyncStoragePersister({ storage: localStorage }) +``` + +`createSyncStoragePersister` accepts a synchronous storage, such as `window.localStorage` or `window.sessionStorage`. + +```ts +import { createSyncStoragePersister } from '@tanstack/query-sync-storage-persister' + +const persister = createSyncStoragePersister({ storage: localStorage }) +``` + +Both throttle saving to happen at most every 1 second to save on potentially expensive writes. + +### Persisters Interface + +Persisters have the following interfaces: + +```ts +export interface Persister { + persistClient(persistClient: PersistedClient): Promisable + restoreClient(): Promisable + removeClient(): Promisable +} +``` + +Persisted Client entries have the following interface: + +```ts +export interface PersistedClient { + timestamp: number + buster: string + clientState: DehydratedState +} +``` + +You can import these (to build a persister): + +```ts +import { + PersistedClient, + Persister, +} from '@tanstack/angular-query-persist-client' +``` + +### Building A Persister + +You can persist however you like. Here is an example of how to build an [Indexed DB](https://developer.mozilla.org/en-US/docs/Web/API/IndexedDB_API) persister. Compared to `Web Storage API`, Indexed DB is faster, stores more than 5MB, and doesn't require serialization. That means it can readily store Javascript native types, such as `Date` and `File`. + +```ts +import { get, set, del } from 'idb-keyval' +import { + PersistedClient, + Persister, +} from '@tanstack/angular-query-persist-client' + +/** + * Creates an Indexed DB persister + * @see https://developer.mozilla.org/en-US/docs/Web/API/IndexedDB_API + */ +export function createIDBPersister(idbValidKey: IDBValidKey = 'angularQuery') { + return { + persistClient: async (client: PersistedClient) => { + await set(idbValidKey, client) + }, + restoreClient: async () => { + return await get(idbValidKey) + }, + removeClient: async () => { + await del(idbValidKey) + }, + } satisfies Persister +} +``` + +## Examples + +- [Persister](../examples/basic-persister) +- [SSR with persistence](../examples/ssr-persist) diff --git a/docs/framework/angular/quick-start.md b/docs/framework/angular/quick-start.md index d0033924085..c7358a767af 100644 --- a/docs/framework/angular/quick-start.md +++ b/docs/framework/angular/quick-start.md @@ -3,42 +3,25 @@ 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) -### Provide the client to your App +### Configure the QueryClient -```ts -import { provideHttpClient } from '@angular/common/http' -import { - provideTanStackQuery, - QueryClient, -} from '@tanstack/angular-query-experimental' - -bootstrapApplication(AppComponent, { - providers: [provideHttpClient(), provideTanStackQuery(new QueryClient())], -}) -``` - -or in a NgModule-based app +Pass a factory to `provideTanStackQuery`. Angular runs it once per injector and in an injection context, so it can use `inject()`. ```ts import { provideHttpClient } from '@angular/common/http' -import { - provideTanStackQuery, - QueryClient, -} from '@tanstack/angular-query-experimental' +import { bootstrapApplication } from '@angular/platform-browser' +import { provideTanStackQuery, QueryClient } from '@tanstack/angular-query' -@NgModule({ - declarations: [AppComponent], - imports: [BrowserModule], - providers: [provideHttpClient(), provideTanStackQuery(new QueryClient())], - bootstrap: [AppComponent], +bootstrapApplication(AppComponent, { + providers: [ + provideHttpClient(), + provideTanStackQuery(() => new QueryClient()), + ], }) -export class AppModule {} ``` ### Component with query and mutation @@ -52,7 +35,7 @@ import { injectMutation, injectQuery, QueryClient, -} from '@tanstack/angular-query-experimental' +} from '@tanstack/angular-query' @Component({ template: ` diff --git a/docs/framework/angular/reference/functions/infiniteQueryOptions.md b/docs/framework/angular/reference/functions/infiniteQueryOptions.md index 7af14e4ab67..d9ae08605af 100644 --- a/docs/framework/angular/reference/functions/infiniteQueryOptions.md +++ b/docs/framework/angular/reference/functions/infiniteQueryOptions.md @@ -27,7 +27,7 @@ See also: [Parameters](#parameters-summary) · [Returns](#returns-summary) function infiniteQueryOptions, TQueryKey extends readonly unknown[] = readonly unknown[], TPageParam = unknown>(options: DefinedInitialDataInfiniteOptions): DefinedInitialDataInfiniteOptions & QueryKeyWithDataTag, TError>; ``` -Defined in: [packages/angular-query-experimental/src/infinite-query-options.ts:177](https://github.com/TanStack/query/blob/main/packages/angular-query-experimental/src/infinite-query-options.ts#L177) +Defined in: [packages/angular-query/src/infinite-query-options.ts:177](https://github.com/TanStack/query/blob/main/packages/angular-query/src/infinite-query-options.ts#L177) You can generally pass everything to `infiniteQueryOptions` that you can also pass to `injectInfiniteQuery`. These options can be shared across functions and imperative APIs such as @@ -85,7 +85,7 @@ automatically as the user scrolls. ### Example ```angular-ts -import { infiniteQueryOptions, injectInfiniteQuery } from '@tanstack/angular-query-experimental' +import { infiniteQueryOptions, injectInfiniteQuery } from '@tanstack/angular-query' export const projectsOptions = infiniteQueryOptions({ queryKey: ['projects'], @@ -122,7 +122,7 @@ export class Projects { function infiniteQueryOptions, TQueryKey extends readonly unknown[] = readonly unknown[], TPageParam = unknown>(options: UnusedSkipTokenInfiniteOptions): UnusedSkipTokenInfiniteOptions & QueryKeyWithDataTag, TError>; ``` -Defined in: [packages/angular-query-experimental/src/infinite-query-options.ts:248](https://github.com/TanStack/query/blob/main/packages/angular-query-experimental/src/infinite-query-options.ts#L248) +Defined in: [packages/angular-query/src/infinite-query-options.ts:248](https://github.com/TanStack/query/blob/main/packages/angular-query/src/infinite-query-options.ts#L248) You can generally pass everything to `infiniteQueryOptions` that you can also pass to `injectInfiniteQuery`. These options can be shared across functions and imperative APIs such as @@ -179,7 +179,7 @@ automatically as the user scrolls. A parameterized factory, so the same options object can be reused per `postId`: ```angular-ts -import { infiniteQueryOptions, injectInfiniteQuery } from '@tanstack/angular-query-experimental' +import { infiniteQueryOptions, injectInfiniteQuery } from '@tanstack/angular-query' export const commentsOptions = (postId: string) => infiniteQueryOptions({ @@ -221,7 +221,7 @@ export class Comments { function infiniteQueryOptions, TQueryKey extends readonly unknown[] = readonly unknown[], TPageParam = unknown>(options: UndefinedInitialDataInfiniteOptions): UndefinedInitialDataInfiniteOptions & QueryKeyWithDataTag, TError>; ``` -Defined in: [packages/angular-query-experimental/src/infinite-query-options.ts:319](https://github.com/TanStack/query/blob/main/packages/angular-query-experimental/src/infinite-query-options.ts#L319) +Defined in: [packages/angular-query/src/infinite-query-options.ts:319](https://github.com/TanStack/query/blob/main/packages/angular-query/src/infinite-query-options.ts#L319) You can generally pass everything to `infiniteQueryOptions` that you can also pass to `injectInfiniteQuery`. These options can be shared across functions and imperative APIs such as @@ -278,7 +278,7 @@ automatically as the user scrolls) and that use `skipToken` to disable the query A parameterized factory, so the same options object can be reused per `postId`: ```angular-ts -import { infiniteQueryOptions, injectInfiniteQuery } from '@tanstack/angular-query-experimental' +import { infiniteQueryOptions, injectInfiniteQuery } from '@tanstack/angular-query' export const commentsOptions = (postId: string) => infiniteQueryOptions({ diff --git a/docs/framework/angular/reference/functions/injectInfiniteQuery.md b/docs/framework/angular/reference/functions/injectInfiniteQuery.md index 1916a7ebc20..a7ecafdd6ab 100644 --- a/docs/framework/angular/reference/functions/injectInfiniteQuery.md +++ b/docs/framework/angular/reference/functions/injectInfiniteQuery.md @@ -8,14 +8,14 @@ title: injectInfiniteQuery ## Overview ```ts -function injectInfiniteQuery, TQueryKey extends readonly unknown[] = readonly unknown[], TPageParam = unknown>(injectInfiniteQueryFn: () => DefinedInitialDataInfiniteOptions, options?: InjectInfiniteQueryOptions): DefinedCreateInfiniteQueryResult; -function injectInfiniteQuery, TQueryKey extends readonly unknown[] = readonly unknown[], TPageParam = unknown>(injectInfiniteQueryFn: () => UndefinedInitialDataInfiniteOptions, options?: InjectInfiniteQueryOptions): CreateInfiniteQueryResult; -function injectInfiniteQuery, TQueryKey extends readonly unknown[] = readonly unknown[], TPageParam = unknown>(injectInfiniteQueryFn: () => CreateInfiniteQueryOptions, options?: InjectInfiniteQueryOptions): CreateInfiniteQueryResult; +function injectInfiniteQuery, TQueryKey extends readonly unknown[] = readonly unknown[], TPageParam = unknown>(optionsFn: () => DefinedInitialDataInfiniteOptions): DefinedCreateInfiniteQueryResult; +function injectInfiniteQuery, TQueryKey extends readonly unknown[] = readonly unknown[], TPageParam = unknown>(optionsFn: () => UndefinedInitialDataInfiniteOptions): CreateInfiniteQueryResult; +function injectInfiniteQuery, TQueryKey extends readonly unknown[] = readonly unknown[], TPageParam = unknown>(optionsFn: () => CreateInfiniteQueryOptions): CreateInfiniteQueryResult; ``` -- [`() => DefinedInitialDataInfiniteOptions` → `DefinedCreateInfiniteQueryResult`](#call-signature-1): The options for `injectInfiniteQuery` are identical to `injectQuery`, with the addition of `initialPageParam`, `getNextPageParam`, `getPreviousPageParam`, and `maxPages`. Infinite queries can additively "load more" data onto an existing set of data, or "infinite scroll". -- [`() => UndefinedInitialDataInfiniteOptions` → `CreateInfiniteQueryResult`](#call-signature-2): Injects an infinite query: a declarative dependency on an asynchronous source of data that is tied to a unique key. Infinite queries can additively "load more" data onto an existing set of data, or "infinite scroll". -- [`() => CreateInfiniteQueryOptions` → `CreateInfiniteQueryResult`](#call-signature-3): This overload accepts the general [CreateInfiniteQueryOptions](../interfaces/CreateInfiniteQueryOptions.md) shape rather than the `initialData`-aware overloads above, so whether `data` is defined can't be inferred from the call site — useful when wrapping `injectInfiniteQuery` in your own helper function that forwards caller-provided options. +- [`() => DefinedInitialDataInfiniteOptions` → `DefinedCreateInfiniteQueryResult`](#call-signature-1): This overload is selected when `initialData` is set, so the resulting `data` signal is never `undefined` (unless a `select` changes `TData` to include `undefined`). +- [`() => UndefinedInitialDataInfiniteOptions` → `CreateInfiniteQueryResult`](#call-signature-2): Injects an infinite query: a declarative dependency on an asynchronous source of data that is tied to a unique key. Infinite queries can additively "load more" data onto an existing set of data or support infinite scroll. +- [`() => CreateInfiniteQueryOptions` → `CreateInfiniteQueryResult`](#call-signature-3): This overload accepts the general [CreateInfiniteQueryOptions](../interfaces/CreateInfiniteQueryOptions.md) shape rather than the `initialData`-aware overloads above, so whether `data` is defined can't be inferred from the call site — useful when wrapping `injectInfiniteQuery` in your own helper. See also: [Parameters](#parameters-summary) · [Returns](#returns-summary) @@ -24,18 +24,13 @@ See also: [Parameters](#parameters-summary) · [Returns](#returns-summary) ## Call Signature ```ts -function injectInfiniteQuery, TQueryKey extends readonly unknown[] = readonly unknown[], TPageParam = unknown>(injectInfiniteQueryFn: () => DefinedInitialDataInfiniteOptions, options?: InjectInfiniteQueryOptions): DefinedCreateInfiniteQueryResult; +function injectInfiniteQuery, TQueryKey extends readonly unknown[] = readonly unknown[], TPageParam = unknown>(optionsFn: () => DefinedInitialDataInfiniteOptions): DefinedCreateInfiniteQueryResult; ``` -Defined in: [packages/angular-query-experimental/src/inject-infinite-query.ts:87](https://github.com/TanStack/query/blob/main/packages/angular-query-experimental/src/inject-infinite-query.ts#L87) +Defined in: [packages/angular-query/src/inject-infinite-query.ts:38](https://github.com/TanStack/query/blob/main/packages/angular-query/src/inject-infinite-query.ts#L38) -The options for `injectInfiniteQuery` are identical to `injectQuery`, with the addition of -`initialPageParam`, `getNextPageParam`, `getPreviousPageParam`, and `maxPages`. Infinite queries can -additively "load more" data onto an existing set of data, or "infinite scroll". - -This overload is selected when `initialData` is known to be defined on the options returned by -`injectInfiniteQueryFn`, so the resulting `data` signal is never `undefined` (unless a `select` changes -`TData` to include `undefined`). +This overload is selected when `initialData` is set, so the resulting `data` signal is never `undefined` +(unless a `select` changes `TData` to include `undefined`). ### Type Parameters @@ -61,82 +56,37 @@ This overload is selected when `initialData` is known to be defined on the optio ### Parameters -#### injectInfiniteQueryFn +#### optionsFn () => [`DefinedInitialDataInfiniteOptions`](../type-aliases/DefinedInitialDataInfiniteOptions.md)\<`TQueryFnData`, `TError`, `TData`, `TQueryKey`, `TPageParam`\> -A function returning the [DefinedInitialDataInfiniteOptions](../type-aliases/DefinedInitialDataInfiniteOptions.md) to use — -everything you can pass to `injectInfiniteQuery`, with `initialData` known to be defined. Similar to -`computed` from Angular, this function runs in the reactive context, so signals read inside it drive the -query. - -#### options? - -[`InjectInfiniteQueryOptions`](../interfaces/InjectInfiniteQueryOptions.md) - -Additional configuration. +A function returning infinite-query options with `initialData` set. Similar to +`computed` from Angular, this function runs in the reactive context. ### Returns [`DefinedCreateInfiniteQueryResult`](../type-aliases/DefinedCreateInfiniteQueryResult.md)\<`TData`, `TError`\> -The same signals as `injectQuery`, with the addition of `fetchNextPage`, `fetchPreviousPage`, -`hasNextPage`, `hasPreviousPage`, `isFetchingNextPage`, and `isFetchingPreviousPage`. `data().pages` and -`data().pageParams` are also added, as long as a `select` doesn't change `TData` away from its default -`InfiniteData` shape. - -### Remarks - -Keep in mind that imperative fetch calls, such as `fetchNextPage`, may interfere with the default -refetch behavior, resulting in outdated data. Make sure to call these functions only in response to user -actions, or add conditions like `hasNextPage() && !isFetching()`. +The infinite query result, typed so that `data` is never `undefined`. ### See -[infiniteQueryOptions](infiniteQueryOptions.md) to share these options between `injectInfiniteQuery` and imperative APIs -like `queryClient.fetchInfiniteQuery`. - -### Example - -```angular-ts -@Component({ - selector: 'projects', - template: ` - -
    - @for (page of projectsQuery.data().pages; track $index) { - @for (project of page.projects; track project.id) { -
  • {{ project.name }}
    • - } - } -
- `, -}) -export class Projects { - readonly projectsQuery = injectInfiniteQuery(() => ({ - queryKey: ['projects'], - queryFn: ({ pageParam }) => fetchProjects(pageParam), - initialPageParam: 0, - getNextPageParam: (lastPage) => lastPage.nextId, - initialData: { pages: [], pageParams: [] }, - })) -} -``` + - https://tanstack.com/query/latest/docs/framework/angular/guides/infinite-queries + - [infiniteQueryOptions](infiniteQueryOptions.md) to share these options between `injectInfiniteQuery` and +`queryClient.infiniteQuery`. ## Call Signature ```ts -function injectInfiniteQuery, TQueryKey extends readonly unknown[] = readonly unknown[], TPageParam = unknown>(injectInfiniteQueryFn: () => UndefinedInitialDataInfiniteOptions, options?: InjectInfiniteQueryOptions): CreateInfiniteQueryResult; +function injectInfiniteQuery, TQueryKey extends readonly unknown[] = readonly unknown[], TPageParam = unknown>(optionsFn: () => UndefinedInitialDataInfiniteOptions): CreateInfiniteQueryResult; ``` -Defined in: [packages/angular-query-experimental/src/inject-infinite-query.ts:239](https://github.com/TanStack/query/blob/main/packages/angular-query-experimental/src/inject-infinite-query.ts#L239) +Defined in: [packages/angular-query/src/inject-infinite-query.ts:92](https://github.com/TanStack/query/blob/main/packages/angular-query/src/inject-infinite-query.ts#L92) -Injects an infinite query: a declarative dependency on an asynchronous source of data that is tied to a -unique key. Infinite queries can additively "load more" data onto an existing set of data, or -"infinite scroll". +Injects an infinite query: a declarative dependency on an asynchronous source of data that is tied to a unique key. +Infinite queries can additively "load more" data onto an existing set of data or support infinite scroll. ### Type Parameters @@ -162,155 +112,51 @@ unique key. Infinite queries can additively "load more" data onto an existing se ### Parameters -#### injectInfiniteQueryFn +#### optionsFn () => [`UndefinedInitialDataInfiniteOptions`](../type-aliases/UndefinedInitialDataInfiniteOptions.md)\<`TQueryFnData`, `TError`, `TData`, `TQueryKey`, `TPageParam`\> -A function returning the [UndefinedInitialDataInfiniteOptions](../type-aliases/UndefinedInitialDataInfiniteOptions.md) to use -— everything you can pass to `injectInfiniteQuery`. Similar to `computed` from Angular, this function runs -in the reactive context, so signals read inside it drive the query. - -#### options? - -[`InjectInfiniteQueryOptions`](../interfaces/InjectInfiniteQueryOptions.md) - -Additional configuration. +A function that returns infinite query options. Similar to `computed` from Angular, +this function runs in the reactive context, so signals read inside it drive the query. ### Returns [`CreateInfiniteQueryResult`](../type-aliases/CreateInfiniteQueryResult.md)\<`TData`, `TError`\> -The same signals as `injectQuery`, with the addition of `fetchNextPage`, `fetchPreviousPage`, -`hasNextPage`, `hasPreviousPage`, `isFetchingNextPage`, and `isFetchingPreviousPage`. `data().pages` and -`data().pageParams` are also added, as long as a `select` doesn't change `TData` away from its default -`InfiniteData` shape. - -### Remarks - -Keep in mind that imperative fetch calls, such as `fetchNextPage`, may interfere with the default -refetch behavior, resulting in outdated data. Make sure to call these functions only in response to user -actions, or add conditions like `hasNextPage() && !isFetching()`. This is the only overload that accepts -`queryFn: skipToken`, shown below. +The infinite query result. ### See -[infiniteQueryOptions](infiniteQueryOptions.md) to share these options between `injectInfiniteQuery` and imperative APIs -like `queryClient.fetchInfiniteQuery`. - -### Examples - -Fetching the next page from a button click: -```angular-ts -@Component({ - selector: 'projects-list', - template: ` -
    - @for (page of projectsQuery.data()?.pages; track $index) { - @for (project of page.projects; track project.id) { -
  • {{ project.name }}
    • - } - } -
- - `, -}) -export class ProjectsList { - readonly projectsQuery = injectInfiniteQuery(() => ({ - queryKey: ['projects'], - queryFn: ({ pageParam }) => fetchProjects(pageParam), - initialPageParam: 0, - getNextPageParam: (lastPage) => lastPage.nextId, - })) -} -``` - -Fetching the next page automatically as the user scrolls, using an `IntersectionObserver` on a sentinel -element after the list: -```angular-ts -@Component({ - selector: 'projects-list', - template: ` -
    - @for (page of projectsQuery.data()?.pages; track $index) { - @for (project of page.projects; track project.id) { -
  • {{ project.name }}
    • - } - } -
-
{{ projectsQuery.isFetchingNextPage() ? 'Loading more...' : '' }}
- `, -}) -export class ProjectsList { - readonly sentinel = viewChild>('sentinel') - - readonly projectsQuery = injectInfiniteQuery(() => ({ - queryKey: ['projects'], - queryFn: ({ pageParam }) => fetchProjects(pageParam), - initialPageParam: 0, - getNextPageParam: (lastPage) => lastPage.nextId, - })) + - https://tanstack.com/query/latest/docs/framework/angular/guides/infinite-queries + - [infiniteQueryOptions](infiniteQueryOptions.md) to share these options between `injectInfiniteQuery` and +`queryClient.infiniteQuery`. - constructor() { - effect((onCleanup) => { - const sentinel = this.sentinel()?.nativeElement - if ( - sentinel == null || - !this.projectsQuery.hasNextPage() || - this.projectsQuery.isFetching() - ) { - return - } - - const observer = new IntersectionObserver(([entry]) => { - if (entry?.isIntersecting) this.projectsQuery.fetchNextPage() - }) - observer.observe(sentinel) - - onCleanup(() => observer.disconnect()) - }) - } -} -``` +### Example -A query that's disabled, type safe, until `postId` is set — pass `skipToken` as `queryFn` instead of -setting `enabled: false`: ```angular-ts @Component({ - selector: 'comments', + selector: 'projects', template: ` - @if (postId() == null) { - Select a post - } @else if (commentsQuery.isPending()) { + @if (query.isPending()) { Loading... - } @else if (commentsQuery.isError()) { - Error: {{ commentsQuery.error()?.message }} + } @else if (query.isError()) { + Error: {{ query.error()?.message }} } @else { -
    - @for (page of commentsQuery.data().pages; track $index) { - @for (comment of page.comments; track comment.id) { -
  • {{ comment.text }}
    • - } + @for (page of query.data().pages; track $index) { + @for (project of page; track project.id) { +

    {{ project.name }}

    } -
+ } + } `, }) -export class Comments { - readonly postId = signal(undefined) - - readonly commentsQuery = injectInfiniteQuery(() => ({ - queryKey: ['post', this.postId(), 'comments'], - queryFn: - this.postId() != null - ? ({ pageParam }) => fetchComments(this.postId()!, pageParam) - : skipToken, +export class Projects { + readonly query = injectInfiniteQuery(() => ({ + queryKey: ['projects'], + queryFn: ({ pageParam }) => fetchProjects(pageParam), initialPageParam: 0, - getNextPageParam: (lastPage) => lastPage.nextId, + getNextPageParam: (lastPage) => lastPage.nextCursor, })) } ``` @@ -320,15 +166,14 @@ export class Comments { ## Call Signature ```ts -function injectInfiniteQuery, TQueryKey extends readonly unknown[] = readonly unknown[], TPageParam = unknown>(injectInfiniteQueryFn: () => CreateInfiniteQueryOptions, options?: InjectInfiniteQueryOptions): CreateInfiniteQueryResult; +function injectInfiniteQuery, TQueryKey extends readonly unknown[] = readonly unknown[], TPageParam = unknown>(optionsFn: () => CreateInfiniteQueryOptions): CreateInfiniteQueryResult; ``` -Defined in: [packages/angular-query-experimental/src/inject-infinite-query.ts:266](https://github.com/TanStack/query/blob/main/packages/angular-query-experimental/src/inject-infinite-query.ts#L266) +Defined in: [packages/angular-query/src/inject-infinite-query.ts:117](https://github.com/TanStack/query/blob/main/packages/angular-query/src/inject-infinite-query.ts#L117) This overload accepts the general [CreateInfiniteQueryOptions](../interfaces/CreateInfiniteQueryOptions.md) shape rather than the -`initialData`-aware overloads above, so whether `data` is defined can't be inferred from the call site — -useful when wrapping `injectInfiniteQuery` in your own helper function that forwards caller-provided -options. +`initialData`-aware overloads above, so whether `data` is defined can't be inferred from the call +site — useful when wrapping `injectInfiniteQuery` in your own helper. ### Type Parameters @@ -354,18 +199,12 @@ options. ### Parameters -#### injectInfiniteQueryFn +#### optionsFn () => [`CreateInfiniteQueryOptions`](../interfaces/CreateInfiniteQueryOptions.md)\<`TQueryFnData`, `TError`, `TData`, `TQueryKey`, `TPageParam`\> -A function that returns infinite query options. Similar to `computed` from -Angular, this function runs in the reactive context, so signals read inside it drive the query. - -#### options? - -[`InjectInfiniteQueryOptions`](../interfaces/InjectInfiniteQueryOptions.md) - -Additional configuration. +A function that returns infinite query options. Similar to `computed` from Angular, +this function runs in the reactive context, so signals read inside it drive the query. ### Returns @@ -373,66 +212,54 @@ Additional configuration. The infinite query result. +### See + +https://tanstack.com/query/latest/docs/framework/angular/guides/infinite-queries + ## Parameters -### injectInfiniteQueryFn +### optionsFn () => [`CreateInfiniteQueryOptions`](../interfaces/CreateInfiniteQueryOptions.md)\<`TQueryFnData`, `TError`, `TData`, `TQueryKey`, `TPageParam`\> -A function that returns infinite query options. Similar to `computed` from -Angular, this function runs in the reactive context, so signals read inside it drive the query. +A function that returns infinite query options. Similar to `computed` from Angular, +this function runs in the reactive context, so signals read inside it drive the query. - + -#### `injectInfiniteQueryFn` properties +#### `optionsFn` properties | Property | Type | Default value | Description | | ------ | ------ | ------ | ------ | -| `enabled?` | \| `false` \| `true` \| ((`query`: [`Query`](../classes/Query.md)\<`TQueryFnData`, `TError`, [`InfiniteData`](../interfaces/InfiniteData.md)\<`TQueryFnData`, `TPageParam`\>, `TQueryKey`\>) => `boolean`) | `true` | Set this to `false` or a function that returns `false` to disable automatic refetching when the query mounts or changes query keys. To refetch the query, use the `refetch` method returned from the `useQuery` instance. Accepts a boolean or function that returns a boolean. | -| `gcTime?` | `number` | `undefined` | The time in milliseconds that unused/inactive cache data remains in memory. When a query's cache becomes unused or inactive, that cache data will be garbage collected after this duration. When different garbage collection times are specified, the longest one will be used. Setting it to `Infinity` will disable garbage collection. Defaults to `5 * 60 * 1000` (5 minutes), or `Infinity` during SSR. Note: the maximum allowed time is about 24 days, imposed by `setTimeout`'s 32-bit signed integer delay — see `timeoutManager.setTimeoutProvider` for a workaround. | -| `getNextPageParam` | (`lastPage`: `TQueryFnData`, `allPages`: `TQueryFnData`[], `lastPageParam`: `TPageParam`, `allPageParams`: `TPageParam`[]) => `TPageParam` \| `null` \| `undefined` | `undefined` | This function can be set to automatically get the next cursor for infinite queries. The result will also be used to determine the value of `hasNextPage`. | -| `getPreviousPageParam?` | (`firstPage`: `TQueryFnData`, `allPages`: `TQueryFnData`[], `firstPageParam`: `TPageParam`, `allPageParams`: `TPageParam`[]) => `TPageParam` \| `null` \| `undefined` | `undefined` | This function can be set to automatically get the previous cursor for infinite queries. The result will also be used to determine the value of `hasPreviousPage`. | -| `initialData?` | \| [`InfiniteData`](../interfaces/InfiniteData.md)\<`TQueryFnData`, `TPageParam`\> \| (() => \| [`InfiniteData`](../interfaces/InfiniteData.md)\<`TQueryFnData`, `TPageParam`\> \| `undefined`) | `undefined` | If set, this value will be used as the initial data for the query cache (as long as the query hasn't been created or cached yet). If set to a function, the function will be called **once** during the shared/root query initialization, and be expected to synchronously return the initial data. Initial data is considered stale by default unless a `staleTime` has been set. `initialData` **is persisted** to the cache. | -| `initialDataUpdatedAt?` | `number` \| (() => `number` \| `undefined`) | `undefined` | If set, this value will be used as the time (in milliseconds) of when the `initialData` itself was last updated. | -| `initialPageParam` | `TPageParam` | `undefined` | The page param to start from when an infinite query has no pages yet. It is passed to `queryFn` as `pageParam` for the first page; every page after that gets the value returned by `getNextPageParam` or `getPreviousPageParam`. It only applies while the query has no pages: once a first page exists, refetching starts from that page's own param instead. | -| `maxPages?` | `number` | `undefined` | Maximum number of pages to store in the data of an infinite query. | -| `meta?` | `Record`\<`string`, `unknown`\> | `undefined` | Additional payload to be stored on each query. Use this property to pass information that can be used in other places. | -| `networkMode?` | `"online"` \| `"always"` \| `"offlineFirst"` | `'online'` | Controls whether a query is allowed to run based on the current network connectivity. **See** [Network Mode](https://tanstack.com/query/latest/docs/framework/react/guides/network-mode) for more information. | -| `notifyOnChangeProps?` | \| ( \| `"error"` \| `"data"` \| `"isError"` \| `"isPending"` \| `"isLoading"` \| `"isLoadingError"` \| `"isRefetchError"` \| `"isSuccess"` \| `"isPlaceholderData"` \| `"status"` \| `"dataUpdatedAt"` \| `"errorUpdatedAt"` \| `"failureCount"` \| `"failureReason"` \| `"errorUpdateCount"` \| `"isFetched"` \| `"isFetchedAfterMount"` \| `"isFetching"` \| `"isInitialLoading"` \| `"isPaused"` \| `"isRefetching"` \| `"isStale"` \| `"isEnabled"` \| `"refetch"` \| `"fetchStatus"` \| `"fetchNextPage"` \| `"fetchPreviousPage"` \| `"hasNextPage"` \| `"hasPreviousPage"` \| `"isFetchNextPageError"` \| `"isFetchingNextPage"` \| `"isFetchPreviousPageError"` \| `"isFetchingPreviousPage"`)[] \| `"all"` \| (() => \| `"all"` \| ( \| `"error"` \| `"data"` \| `"isError"` \| `"isPending"` \| `"isLoading"` \| `"isLoadingError"` \| `"isRefetchError"` \| `"isSuccess"` \| `"isPlaceholderData"` \| `"status"` \| `"dataUpdatedAt"` \| `"errorUpdatedAt"` \| `"failureCount"` \| `"failureReason"` \| `"errorUpdateCount"` \| `"isFetched"` \| `"isFetchedAfterMount"` \| `"isFetching"` \| `"isInitialLoading"` \| `"isPaused"` \| `"isRefetching"` \| `"isStale"` \| `"isEnabled"` \| `"refetch"` \| `"fetchStatus"` \| `"fetchNextPage"` \| `"fetchPreviousPage"` \| `"hasNextPage"` \| `"hasPreviousPage"` \| `"isFetchNextPageError"` \| `"isFetchingNextPage"` \| `"isFetchPreviousPageError"` \| `"isFetchingPreviousPage"`)[] \| `undefined`) | `undefined` | If set, the component will only re-render if any of the listed properties change. When set to `['data', 'error']`, the component will only re-render when the `data` or `error` properties change. When set to `'all'`, the component will re-render whenever a query is updated. When set to a function, the function will be executed to compute the list of properties. Defaults to `undefined`, in which case property access is tracked automatically, and the component only re-renders when one of the tracked properties changes. | -| `persister?` | (`queryFn`: (`context`: [`QueryFunctionContext`](../type-aliases/QueryFunctionContext.md)\<`NoInfer`\<`TQueryKey`\>, `TPageParam`\>) => `TQueryFnData` \| `Promise`\<`TQueryFnData`\>, `context`: `object`, `query`: [`Query`](../classes/Query.md)) => `TQueryFnData` \| `Promise`\<`TQueryFnData`\> | `undefined` | This option can be used to persist the result of a query to an external storage, bypassing the need to actually call the `queryFn`. Useful for persisting a query's data across e.g. server/client boundaries. | -| `placeholderData?` | \| [`InfiniteData`](../interfaces/InfiniteData.md)\<`TQueryFnData`, `TPageParam`\> \| ((`previousData`: \| [`InfiniteData`](../interfaces/InfiniteData.md)\<`TQueryFnData`, `TPageParam`\> \| `undefined`, `previousQuery`: \| [`Query`](../classes/Query.md)\<[`InfiniteData`](../interfaces/InfiniteData.md)\<`TQueryFnData`, `TPageParam`\>, `TError`, [`InfiniteData`](../interfaces/InfiniteData.md)\<`TQueryFnData`, `TPageParam`\>, `TQueryKey`\> \| `undefined`) => \| [`InfiniteData`](../interfaces/InfiniteData.md)\<`TQueryFnData`, `TPageParam`\> \| `undefined`) | `undefined` | If set, this value will be used as the placeholder data for this particular query observer while the query is still in the `loading` data and no initialData has been provided. | -| `queryFn?` | \| *typeof* [`skipToken`](../variables/skipToken.md) \| ((`context`: [`QueryFunctionContext`](../type-aliases/QueryFunctionContext.md)\<`TQueryKey`, `TPageParam`\>) => `TQueryFnData` \| `Promise`\<`TQueryFnData`\>) | `undefined` | The function that the query will use to request data. Required, unless a default query function has been set via `queryClient.setQueryDefaults` or `queryClient.setDefaultOptions`. Receives a [QueryFunctionContext](../type-aliases/QueryFunctionContext.md). Must return a promise that will either resolve data or throw an error. The data cannot be `undefined`. | -| `queryHash?` | `string` | `undefined` | The hashed form of `queryKey`, computed with `queryKeyHashFn` (or the default hashing function otherwise). Used as the actual cache key internally. | -| `queryKey` | `TQueryKey` & `object` | `undefined` | The query key to use for this query. The query key will be hashed into a stable hash. See [Query Keys](https://tanstack.com/query/latest/docs/framework/react/guides/query-keys) for more information. The query will automatically update when this key changes (as long as `enabled` is not set to `false`). | -| `queryKeyHashFn?` | (`queryKey`: `TQueryKey`) => `string` | `undefined` | If specified, this function is used to hash the `queryKey` to a string. | -| `refetchInterval?` | \| `number` \| `false` \| ((`query`: [`Query`](../classes/Query.md)\<`TQueryFnData`, `TError`, [`InfiniteData`](../interfaces/InfiniteData.md)\<`TQueryFnData`, `TPageParam`\>, `TQueryKey`\>) => `number` \| `false` \| `undefined`) | `false` | If set to a number, the query will continuously refetch at this frequency in milliseconds. If set to a function, the function will be executed with the latest data and query to compute a frequency | -| `refetchIntervalInBackground?` | `boolean` | `false` | If set to `true`, the query will continue to refetch while their tab/window is in the background. | -| `refetchOnMount?` | \| `boolean` \| `"always"` \| ((`query`: [`Query`](../classes/Query.md)\<`TQueryFnData`, `TError`, [`InfiniteData`](../interfaces/InfiniteData.md)\<`TQueryFnData`, `TPageParam`\>, `TQueryKey`\>) => `boolean` \| `"always"`) | `true` | If set to `true`, the query will refetch on mount if the data is stale. If set to `false`, will disable additional instances of a query to trigger background refetch. If set to `'always'`, the query will always refetch on mount (except when `staleTime: 'static'` is used). If set to a function, the function will be executed with the latest data and query to compute the value | -| `refetchOnReconnect?` | \| `boolean` \| `"always"` \| ((`query`: [`Query`](../classes/Query.md)\<`TQueryFnData`, `TError`, [`InfiniteData`](../interfaces/InfiniteData.md)\<`TQueryFnData`, `TPageParam`\>, `TQueryKey`\>) => `boolean` \| `"always"`) | `undefined` | If set to `true`, the query will refetch on reconnect if the data is stale. If set to `false`, the query will not refetch on reconnect. If set to `'always'`, the query will always refetch on reconnect (except when `staleTime: 'static'` is used). If set to a function, the function will be executed with the latest data and query to compute the value. Defaults to `true` unless `networkMode` is `'always'`. | -| `refetchOnWindowFocus?` | \| `boolean` \| `"always"` \| ((`query`: [`Query`](../classes/Query.md)\<`TQueryFnData`, `TError`, [`InfiniteData`](../interfaces/InfiniteData.md)\<`TQueryFnData`, `TPageParam`\>, `TQueryKey`\>) => `boolean` \| `"always"`) | `true` | If set to `true`, the query will refetch on window focus if the data is stale. If set to `false`, the query will not refetch on window focus. If set to `'always'`, the query will always refetch on window focus (except when `staleTime: 'static'` is used). If set to a function, the function will be executed with the latest data and query to compute the value. | -| `retry?` | \| `number` \| `false` \| `true` \| ((`failureCount`: `number`, `error`: `TError`) => `boolean`) | `undefined` | If `false`, failed queries will not retry by default. If `true`, failed queries will retry infinitely. If set to an integer number, e.g. 3, failed queries will retry until the failed query count meets that number. If set to a function `(failureCount, error) => boolean` failed queries will retry until the function returns false. Defaults to `3` on the client and `0` on the server. | -| `retryDelay?` | `number` \| ((`failureCount`: `number`, `error`: `TError`) => `number`) | `undefined` | This function receives a `retryAttempt` integer and the actual Error and returns the delay to apply before the next attempt in milliseconds. A function like `attempt => Math.min(attempt > 1 ? 2 ** attempt * 1000 : 1000, 30 * 1000)` applies exponential backoff. A function like `attempt => attempt * 1000` applies linear backoff. Defaults to a function that applies exponential backoff, capped at 30 seconds. | -| `retryOnMount?` | \| `false` \| `true` \| ((`query`: [`Query`](../classes/Query.md)\<`TQueryFnData`, `TError`, [`InfiniteData`](../interfaces/InfiniteData.md)\<`TQueryFnData`, `TPageParam`\>, `TQueryKey`\>) => `boolean`) | `true` | If set to `false`, the query will not be retried on mount if it contains an error. If set to a function, the function will be executed with the query to compute the value. | -| `select?` | (`data`: [`InfiniteData`](../interfaces/InfiniteData.md)) => `TData` | `undefined` | This option can be used to transform or select a part of the data returned by the query function. It affects the returned `data` value, but does not affect what gets stored in the query cache. The `select` function will only run if `data` changed, or if the reference to the `select` function itself changes. To optimize, memoize the function so its reference stays stable across calls. | -| `staleTime?` | \| `number` \| `"static"` \| ((`query`: [`Query`](../classes/Query.md)\<`TQueryFnData`, `TError`, [`InfiniteData`](../interfaces/InfiniteData.md)\<`TQueryFnData`, `TPageParam`\>, `TQueryKey`\>) => `number` \| `"static"`) | `0` | The time in milliseconds after data is considered stale. If set to `Infinity`, the data will never be considered stale. If set to `'static'`, the data will never be considered stale. If set to a function, the function will be executed with the query to compute a `staleTime`. | -| `structuralSharing?` | `boolean` \| ((`oldData`: `unknown`, `newData`: `unknown`) => `unknown`) | `true` | Set this to `false` to disable structural sharing between query results. Set this to a function which accepts the old and new data and returns resolved data of the same type to implement custom structural sharing logic. | -| `throwOnError?` | \| `false` \| `true` \| ((`error`: `TError`, `query`: [`Query`](../classes/Query.md)\<`TQueryFnData`, `TError`, [`InfiniteData`](../interfaces/InfiniteData.md)\<`TQueryFnData`, `TPageParam`\>, `TQueryKey`\>) => `boolean`) | `false` | Whether errors should be thrown instead of setting the `error` property. If set to `true` or `suspense` is `true`, all errors will be thrown to the error boundary. If set to `false` and `suspense` is `false`, errors are returned as state. If set to a function, it will be passed the error and the query, and it should return a boolean indicating whether to show the error in an error boundary (`true`) or return the error as state (`false`). | - -### options? - -[`InjectInfiniteQueryOptions`](../interfaces/InjectInfiniteQueryOptions.md) - -Additional configuration. - - - -#### `options` properties - -| Property | Type | Description | -| ------ | ------ | ------ | -| `injector?` | `Injector` | The `Injector` in which to create the infinite query. If this is not provided, the current injection context will be used instead (via `inject`). | +| `enabled?` | \| `false` \| `true` \| ((`query`: [`Query`](../classes/Query.md)\<`TQueryFnData`, `TError`, [`InfiniteData`](../interfaces/InfiniteData.md)\<`TQueryFnData`, `TPageParam`\>, `TQueryKey`\>) => `boolean`) | `true` | Set this to `false` or a function that returns `false` to disable automatic refetching when the query mounts or changes query keys. To refetch the query, use the `refetch` method returned from the `useQuery` instance. Accepts a boolean or function that returns a boolean. | +| `gcTime?` | `number` | `undefined` | The time in milliseconds that unused/inactive cache data remains in memory. When a query's cache becomes unused or inactive, that cache data will be garbage collected after this duration. When different garbage collection times are specified, the longest one will be used. Setting it to `Infinity` will disable garbage collection. Defaults to `5 * 60 * 1000` (5 minutes), or `Infinity` during SSR. Note: the maximum allowed time is about 24 days, imposed by `setTimeout`'s 32-bit signed integer delay — see `timeoutManager.setTimeoutProvider` for a workaround. | +| `getNextPageParam` | (`lastPage`: `TQueryFnData`, `allPages`: `TQueryFnData`[], `lastPageParam`: `TPageParam`, `allPageParams`: `TPageParam`[]) => `TPageParam` \| `null` \| `undefined` | `undefined` | This function can be set to automatically get the next cursor for infinite queries. The result will also be used to determine the value of `hasNextPage`. | +| `getPreviousPageParam?` | (`firstPage`: `TQueryFnData`, `allPages`: `TQueryFnData`[], `firstPageParam`: `TPageParam`, `allPageParams`: `TPageParam`[]) => `TPageParam` \| `null` \| `undefined` | `undefined` | This function can be set to automatically get the previous cursor for infinite queries. The result will also be used to determine the value of `hasPreviousPage`. | +| `initialData?` | \| [`InfiniteData`](../interfaces/InfiniteData.md)\<`TQueryFnData`, `TPageParam`\> \| (() => \| [`InfiniteData`](../interfaces/InfiniteData.md)\<`TQueryFnData`, `TPageParam`\> \| `undefined`) | `undefined` | If set, this value will be used as the initial data for the query cache (as long as the query hasn't been created or cached yet). If set to a function, the function will be called **once** during the shared/root query initialization, and be expected to synchronously return the initial data. Initial data is considered stale by default unless a `staleTime` has been set. `initialData` **is persisted** to the cache. | +| `initialDataUpdatedAt?` | `number` \| (() => `number` \| `undefined`) | `undefined` | If set, this value will be used as the time (in milliseconds) of when the `initialData` itself was last updated. | +| `initialPageParam` | `TPageParam` | `undefined` | The page param to start from when an infinite query has no pages yet. It is passed to `queryFn` as `pageParam` for the first page; every page after that gets the value returned by `getNextPageParam` or `getPreviousPageParam`. It only applies while the query has no pages: once a first page exists, refetching starts from that page's own param instead. | +| `maxPages?` | `number` | `undefined` | Maximum number of pages to store in the data of an infinite query. | +| `meta?` | `Record`\<`string`, `unknown`\> | `undefined` | Additional payload to be stored on each query. Use this property to pass information that can be used in other places. | +| `networkMode?` | `"online"` \| `"always"` \| `"offlineFirst"` | `'online'` | Controls whether a query is allowed to run based on the current network connectivity. **See** [Network Mode](https://tanstack.com/query/latest/docs/framework/react/guides/network-mode) for more information. | +| `persister?` | (`queryFn`: (`context`: [`QueryFunctionContext`](../type-aliases/QueryFunctionContext.md)\<`NoInfer`\<`TQueryKey`\>, `TPageParam`\>) => `TQueryFnData` \| `Promise`\<`TQueryFnData`\>, `context`: `object`, `query`: [`Query`](../classes/Query.md)) => `TQueryFnData` \| `Promise`\<`TQueryFnData`\> | `undefined` | This option can be used to persist the result of a query to an external storage, bypassing the need to actually call the `queryFn`. Useful for persisting a query's data across e.g. server/client boundaries. | +| `placeholderData?` | \| [`InfiniteData`](../interfaces/InfiniteData.md)\<`TQueryFnData`, `TPageParam`\> \| ((`previousData`: \| [`InfiniteData`](../interfaces/InfiniteData.md)\<`TQueryFnData`, `TPageParam`\> \| `undefined`, `previousQuery`: \| [`Query`](../classes/Query.md)\<[`InfiniteData`](../interfaces/InfiniteData.md)\<`TQueryFnData`, `TPageParam`\>, `TError`, [`InfiniteData`](../interfaces/InfiniteData.md)\<`TQueryFnData`, `TPageParam`\>, `TQueryKey`\> \| `undefined`) => \| [`InfiniteData`](../interfaces/InfiniteData.md)\<`TQueryFnData`, `TPageParam`\> \| `undefined`) | `undefined` | If set, this value will be used as the placeholder data for this particular query observer while the query is still in the `loading` data and no initialData has been provided. | +| `queryFn?` | \| *typeof* [`skipToken`](../variables/skipToken.md) \| ((`context`: [`QueryFunctionContext`](../type-aliases/QueryFunctionContext.md)\<`TQueryKey`, `TPageParam`\>) => `TQueryFnData` \| `Promise`\<`TQueryFnData`\>) | `undefined` | The function that the query will use to request data. Required, unless a default query function has been set via `queryClient.setQueryDefaults` or `queryClient.setDefaultOptions`. Receives a [QueryFunctionContext](../type-aliases/QueryFunctionContext.md). Must return a promise that will either resolve data or throw an error. The data cannot be `undefined`. | +| `queryHash?` | `string` | `undefined` | The hashed form of `queryKey`, computed with `queryKeyHashFn` (or the default hashing function otherwise). Used as the actual cache key internally. | +| `queryKey` | `TQueryKey` & `object` | `undefined` | The query key to use for this query. The query key will be hashed into a stable hash. See [Query Keys](https://tanstack.com/query/latest/docs/framework/react/guides/query-keys) for more information. The query will automatically update when this key changes (as long as `enabled` is not set to `false`). | +| `queryKeyHashFn?` | (`queryKey`: `TQueryKey`) => `string` | `undefined` | If specified, this function is used to hash the `queryKey` to a string. | +| `refetchInterval?` | \| `number` \| `false` \| ((`query`: [`Query`](../classes/Query.md)\<`TQueryFnData`, `TError`, [`InfiniteData`](../interfaces/InfiniteData.md)\<`TQueryFnData`, `TPageParam`\>, `TQueryKey`\>) => `number` \| `false` \| `undefined`) | `false` | If set to a number, the query will continuously refetch at this frequency in milliseconds. If set to a function, the function will be executed with the latest data and query to compute a frequency | +| `refetchIntervalInBackground?` | `boolean` | `false` | If set to `true`, the query will continue to refetch while their tab/window is in the background. | +| `refetchOnMount?` | \| `boolean` \| `"always"` \| ((`query`: [`Query`](../classes/Query.md)\<`TQueryFnData`, `TError`, [`InfiniteData`](../interfaces/InfiniteData.md)\<`TQueryFnData`, `TPageParam`\>, `TQueryKey`\>) => `boolean` \| `"always"`) | `true` | If set to `true`, the query will refetch on mount if the data is stale. If set to `false`, will disable additional instances of a query to trigger background refetch. If set to `'always'`, the query will always refetch on mount (except when `staleTime: 'static'` is used). If set to a function, the function will be executed with the latest data and query to compute the value | +| `refetchOnReconnect?` | \| `boolean` \| `"always"` \| ((`query`: [`Query`](../classes/Query.md)\<`TQueryFnData`, `TError`, [`InfiniteData`](../interfaces/InfiniteData.md)\<`TQueryFnData`, `TPageParam`\>, `TQueryKey`\>) => `boolean` \| `"always"`) | `undefined` | If set to `true`, the query will refetch on reconnect if the data is stale. If set to `false`, the query will not refetch on reconnect. If set to `'always'`, the query will always refetch on reconnect (except when `staleTime: 'static'` is used). If set to a function, the function will be executed with the latest data and query to compute the value. Defaults to `true` unless `networkMode` is `'always'`. | +| `refetchOnWindowFocus?` | \| `boolean` \| `"always"` \| ((`query`: [`Query`](../classes/Query.md)\<`TQueryFnData`, `TError`, [`InfiniteData`](../interfaces/InfiniteData.md)\<`TQueryFnData`, `TPageParam`\>, `TQueryKey`\>) => `boolean` \| `"always"`) | `true` | If set to `true`, the query will refetch on window focus if the data is stale. If set to `false`, the query will not refetch on window focus. If set to `'always'`, the query will always refetch on window focus (except when `staleTime: 'static'` is used). If set to a function, the function will be executed with the latest data and query to compute the value. | +| `retry?` | \| `number` \| `false` \| `true` \| ((`failureCount`: `number`, `error`: `TError`) => `boolean`) | `undefined` | If `false`, failed queries will not retry by default. If `true`, failed queries will retry infinitely. If set to an integer number, e.g. 3, failed queries will retry until the failed query count meets that number. If set to a function `(failureCount, error) => boolean` failed queries will retry until the function returns false. Defaults to `3` on the client and `0` on the server. | +| `retryDelay?` | `number` \| ((`failureCount`: `number`, `error`: `TError`) => `number`) | `undefined` | This function receives a `retryAttempt` integer and the actual Error and returns the delay to apply before the next attempt in milliseconds. A function like `attempt => Math.min(attempt > 1 ? 2 ** attempt * 1000 : 1000, 30 * 1000)` applies exponential backoff. A function like `attempt => attempt * 1000` applies linear backoff. Defaults to a function that applies exponential backoff, capped at 30 seconds. | +| `retryOnMount?` | \| `false` \| `true` \| ((`query`: [`Query`](../classes/Query.md)\<`TQueryFnData`, `TError`, [`InfiniteData`](../interfaces/InfiniteData.md)\<`TQueryFnData`, `TPageParam`\>, `TQueryKey`\>) => `boolean`) | `true` | If set to `false`, the query will not be retried on mount if it contains an error. If set to a function, the function will be executed with the query to compute the value. | +| `select?` | (`data`: [`InfiniteData`](../interfaces/InfiniteData.md)) => `TData` | `undefined` | This option can be used to transform or select a part of the data returned by the query function. It affects the returned `data` value, but does not affect what gets stored in the query cache. The `select` function will only run if `data` changed, or if the reference to the `select` function itself changes. To optimize, memoize the function so its reference stays stable across calls. | +| `staleTime?` | \| `number` \| `"static"` \| ((`query`: [`Query`](../classes/Query.md)\<`TQueryFnData`, `TError`, [`InfiniteData`](../interfaces/InfiniteData.md)\<`TQueryFnData`, `TPageParam`\>, `TQueryKey`\>) => `number` \| `"static"`) | `0` | The time in milliseconds after data is considered stale. If set to `Infinity`, the data will never be considered stale. If set to `'static'`, the data will never be considered stale. If set to a function, the function will be executed with the query to compute a `staleTime`. | +| `structuralSharing?` | `boolean` \| ((`oldData`: `unknown`, `newData`: `unknown`) => `unknown`) | `true` | Set this to `false` to disable structural sharing between query results. Set this to a function which accepts the old and new data and returns resolved data of the same type to implement custom structural sharing logic. | @@ -441,9 +268,3 @@ Additional configuration. [`CreateInfiniteQueryResult`](../type-aliases/CreateInfiniteQueryResult.md)\<`TData`, `TError`\> The infinite query result. - - - -### Result properties - -Built from [`BaseQueryNarrowing`](../interfaces/BaseQueryNarrowing.md#properties), [`InfiniteQueryObserverBaseResult`](../interfaces/InfiniteQueryObserverBaseResult.md#properties). See the type above for what it changes. diff --git a/docs/framework/angular/reference/functions/injectIsFetching.md b/docs/framework/angular/reference/functions/injectIsFetching.md index e5f24ac5cb9..a3b6f67d479 100644 --- a/docs/framework/angular/reference/functions/injectIsFetching.md +++ b/docs/framework/angular/reference/functions/injectIsFetching.md @@ -6,21 +6,23 @@ title: injectIsFetching ```ts -function injectIsFetching(filters?: Omit, "fetchStatus">, options?: InjectIsFetchingOptions): Signal; +function injectIsFetching(filters?: () => Omit): Signal; ``` -Defined in: [packages/angular-query-experimental/src/inject-is-fetching.ts:63](https://github.com/TanStack/query/blob/main/packages/angular-query-experimental/src/inject-is-fetching.ts#L63) +Defined in: [packages/angular-query/src/inject-is-fetching.ts:15](https://github.com/TanStack/query/blob/main/packages/angular-query/src/inject-is-fetching.ts#L15) Injects a signal that tracks the number of queries that your application is loading or fetching in the background (useful for app-wide loading indicators). +Can be used for app-wide loading indicators. + ## Parameters ### filters? -`Omit`\<[`QueryFilters`](../interfaces/QueryFilters.md)\, `"fetchStatus"`\> +() => `Omit`\<[`QueryFilters`](../interfaces/QueryFilters.md), `"fetchStatus"`\> -The [QueryFilters](../interfaces/QueryFilters.md) to narrow down the matched queries. +A reactive factory for the filters. @@ -28,55 +30,8 @@ The [QueryFilters](../interfaces/QueryFilters.md) to narrow down the matched que Built from [`QueryFilters`](../interfaces/QueryFilters.md#properties). See the type above for what it changes. -### options? - -[`InjectIsFetchingOptions`](../interfaces/InjectIsFetchingOptions.md) - -Additional configuration - - - -#### `options` properties - -| Property | Type | Description | -| ------ | ------ | ------ | -| `injector?` | `Injector` | The `Injector` in which to create the isFetching signal. If this is not provided, the current injection context will be used instead (via `inject`). | - ## Returns `Signal`\<`number`\> -A `Signal` with the number of queries that your application is currently loading or fetching in -the background. - -## Examples - -```angular-ts -@Component({ - selector: 'posts-fetching-indicator', - template: ` - @if (isFetchingPosts()) { - Refreshing posts... - } - `, -}) -export class PostsFetchingIndicator { - // How many queries matching the posts prefix are fetching? - readonly isFetchingPosts = injectIsFetching({ queryKey: ['posts'] }) -} -``` - -A global loading indicator for any query fetching in the background, not just the ones on screen: -```angular-ts -@Component({ - selector: 'global-loading-indicator', - template: ` - @if (isFetching()) { -
Queries are fetching in the background...
- } - `, -}) -export class GlobalLoadingIndicator { - readonly isFetching = injectIsFetching() -} -``` +signal with number of loading or fetching queries. diff --git a/docs/framework/angular/reference/functions/injectIsMutating.md b/docs/framework/angular/reference/functions/injectIsMutating.md index 960200eae60..4b34de57afc 100644 --- a/docs/framework/angular/reference/functions/injectIsMutating.md +++ b/docs/framework/angular/reference/functions/injectIsMutating.md @@ -6,21 +6,23 @@ title: injectIsMutating ```ts -function injectIsMutating(filters?: Omit, "status">, options?: InjectIsMutatingOptions): Signal; +function injectIsMutating(filters?: () => Omit): Signal; ``` -Defined in: [packages/angular-query-experimental/src/inject-is-mutating.ts:47](https://github.com/TanStack/query/blob/main/packages/angular-query-experimental/src/inject-is-mutating.ts#L47) +Defined in: [packages/angular-query/src/inject-is-mutating.ts:15](https://github.com/TanStack/query/blob/main/packages/angular-query/src/inject-is-mutating.ts#L15) Injects a signal that tracks the number of mutations that your application currently has `pending` (useful for app-wide loading indicators). +Can be used for app-wide loading indicators. + ## Parameters ### filters? -`Omit`\<[`MutationFilters`](../interfaces/MutationFilters.md)\<`unknown`, `Error`, `unknown`, `unknown`\>, `"status"`\> +() => `Omit`\<[`MutationFilters`](../interfaces/MutationFilters.md), `"status"`\> -The [MutationFilters](../interfaces/MutationFilters.md) to narrow down the matched mutations. +A reactive factory for the filters. @@ -28,39 +30,8 @@ The [MutationFilters](../interfaces/MutationFilters.md) to narrow down the match Built from [`MutationFilters`](../interfaces/MutationFilters.md#properties). See the type above for what it changes. -### options? - -[`InjectIsMutatingOptions`](../interfaces/InjectIsMutatingOptions.md) - -Additional configuration - - - -#### `options` properties - -| Property | Type | Description | -| ------ | ------ | ------ | -| `injector?` | `Injector` | The `Injector` in which to create the isMutating signal. If this is not provided, the current injection context will be used instead (via `inject`). | - ## Returns `Signal`\<`number`\> -A `Signal` with the number of mutations that your application currently has `pending`. - -## Example - -```angular-ts -@Component({ - selector: 'posts-mutating-indicator', - template: ` - @if (isMutatingPosts()) { - Saving posts... - } - `, -}) -export class PostsMutatingIndicator { - // How many mutations matching the posts prefix are in progress? - readonly isMutatingPosts = injectIsMutating({ mutationKey: ['posts'] }) -} -``` +A read-only signal with the number of fetching mutations. diff --git a/docs/framework/angular/reference/functions/injectIsRestoring.md b/docs/framework/angular/reference/functions/injectIsRestoring.md index b225be8c414..50457404324 100644 --- a/docs/framework/angular/reference/functions/injectIsRestoring.md +++ b/docs/framework/angular/reference/functions/injectIsRestoring.md @@ -6,26 +6,16 @@ title: injectIsRestoring ```ts -function injectIsRestoring(options?: InjectIsRestoringOptions): Signal; +function injectIsRestoring(): Signal; ``` -Defined in: [packages/angular-query-experimental/src/inject-is-restoring.ts:35](https://github.com/TanStack/query/blob/main/packages/angular-query-experimental/src/inject-is-restoring.ts#L35) +Defined in: [packages/angular-query/src/inject-is-restoring.ts:21](https://github.com/TanStack/query/blob/main/packages/angular-query/src/inject-is-restoring.ts#L21) -Injects a signal that tracks whether a restore (e.g. from a persisted client, wired up via -`provideIsRestoring`) is currently in progress. `injectQuery` and friends also check this internally to -avoid race conditions between the restore and initializing queries. - -## Parameters - -### options? - -`InjectIsRestoringOptions` - -Additional configuration +Injects a readonly signal that is true while the persistence integration restores +cached query data. Returns false when no restoration is in progress. ## Returns `Signal`\<`boolean`\> -A readonly `Signal` — `true` while a restore is in progress, `false` otherwise (the -default when no `provideIsRestoring` provider is registered). +The current restoration state. diff --git a/docs/framework/angular/reference/functions/injectMutation.md b/docs/framework/angular/reference/functions/injectMutation.md index 1cc364b85e9..5dbcff7037c 100644 --- a/docs/framework/angular/reference/functions/injectMutation.md +++ b/docs/framework/angular/reference/functions/injectMutation.md @@ -6,13 +6,13 @@ title: injectMutation ```ts -function injectMutation(injectMutationFn: () => CreateMutationOptions, options?: InjectMutationOptions): CreateMutationResult; +function injectMutation(optionsFn: () => CreateMutationOptions): CreateMutationResult; ``` -Defined in: [packages/angular-query-experimental/src/inject-mutation.ts:172](https://github.com/TanStack/query/blob/main/packages/angular-query-experimental/src/inject-mutation.ts#L172) +Defined in: [packages/angular-query/src/inject-mutation.ts:49](https://github.com/TanStack/query/blob/main/packages/angular-query/src/inject-mutation.ts#L49) -Unlike queries, mutations are typically used to create/update/delete data or perform server side-effects. -`injectMutation` is the function for that. Unlike queries, mutations are not run automatically. +Injects a mutation: an imperative function that can be invoked which typically performs server side effects. +Unlike queries, mutations are not run automatically. ## Type Parameters @@ -34,181 +34,59 @@ Unlike queries, mutations are typically used to create/update/delete data or per ## Parameters -### injectMutationFn +### optionsFn () => [`CreateMutationOptions`](../interfaces/CreateMutationOptions.md)\<`TData`, `TError`, `TVariables`, `TOnMutateResult`\> -A function that returns mutation options. Similar to `computed` from Angular, -this function runs in the reactive context, so signals read inside it drive the mutation's options. +A function that returns mutation options. Similar to `computed` from Angular, this +function runs in the reactive context, so signals read inside it drive the mutation. - + -#### `injectMutationFn` properties +#### `optionsFn` properties | Property | Type | Default value | Description | | ------ | ------ | ------ | ------ | -| `gcTime?` | `number` | `undefined` | The time in milliseconds that an unused/inactive mutation remains in memory before it is garbage collected. Defaults to `5 * 60 * 1000` (5 minutes), or `Infinity` during SSR. | -| `meta?` | `Record`\<`string`, `unknown`\> | `undefined` | Additional payload to be stored on the mutation cache entry. Use it to pass information that can be read wherever the `mutation` is available, such as the `onError` and `onSuccess` callbacks of the `MutationCache`. | -| `mutationFn?` | (`variables`: `TVariables`, `context`: [`MutationFunctionContext`](../type-aliases/MutationFunctionContext.md)) => `Promise`\<`TData`\> | `undefined` | The function that performs the asynchronous task this mutation runs. Required, unless a default mutation function has been set for the matching `mutationKey` via `queryClient.setMutationDefaults`. Receives the `variables` passed to `mutate`, and a [MutationFunctionContext](../type-aliases/MutationFunctionContext.md) holding the `QueryClient`, the `mutationKey` and `meta`. Must return a promise that resolves the mutation's data. | -| `mutationKey?` | readonly `unknown`[] | `undefined` | The key to use for this mutation. Optional, but required to inherit defaults registered with `queryClient.setMutationDefaults`, and to match this mutation with `useMutationState` or `queryClient.isMutating`. | -| `networkMode?` | `"online"` \| `"always"` \| `"offlineFirst"` | `'online'` | Controls whether a mutation is allowed to run based on the current network connectivity. **See** [Network Mode](https://tanstack.com/query/latest/docs/framework/react/guides/network-mode) for more information. | -| `onError?` | (`error`: `TError`, `variables`: `TVariables`, `onMutateResult`: `TOnMutateResult` \| `undefined`, `context`: [`MutationFunctionContext`](../type-aliases/MutationFunctionContext.md)) => `unknown` | `undefined` | This function fires when the mutation encounters an error, and is passed the error. If a promise is returned, it is awaited before `onSettled` runs. | -| `onMutate?` | (`variables`: `TVariables`, `context`: [`MutationFunctionContext`](../type-aliases/MutationFunctionContext.md)) => `TOnMutateResult` \| `Promise`\<`TOnMutateResult`\> | `undefined` | This function fires before the mutation function runs, and receives the same variables. Useful for optimistic updates applied in the hope that the mutation succeeds. The value it returns is passed to `onSuccess`, `onError` and `onSettled` as `onMutateResult`, which is where an optimistic update is usually rolled back. If a promise is returned, it is awaited before the mutation function runs. | -| `onSettled?` | (`data`: `TData` \| `undefined`, `error`: `TError` \| `null`, `variables`: `TVariables`, `onMutateResult`: `TOnMutateResult` \| `undefined`, `context`: [`MutationFunctionContext`](../type-aliases/MutationFunctionContext.md)) => `unknown` | `undefined` | This function fires when the mutation either succeeds or errors, and is passed either the data or the error. If a promise is returned, it is awaited before the mutation settles. | -| `onSuccess?` | (`data`: `TData`, `variables`: `TVariables`, `onMutateResult`: `TOnMutateResult`, `context`: [`MutationFunctionContext`](../type-aliases/MutationFunctionContext.md)) => `unknown` | `undefined` | This function fires when the mutation succeeds, and is passed the mutation's result. If a promise is returned, it is awaited before `onSettled` runs. | -| `retry?` | \| `number` \| `false` \| `true` \| ((`failureCount`: `number`, `error`: `TError`) => `boolean`) | `0` | If `false`, failed mutations will not retry by default. If `true`, failed mutations will retry infinitely. If set to an integer number, e.g. 3, failed mutations will retry until the failed mutation count meets that number. If set to a function `(failureCount, error) => boolean` failed mutations will retry until the function returns false. | -| `retryDelay?` | `number` \| ((`failureCount`: `number`, `error`: `TError`) => `number`) | `undefined` | This function receives a `retryAttempt` integer and the actual Error and returns the delay to apply before the next attempt in milliseconds. Defaults to a function that applies exponential backoff, capped at 30 seconds. | -| `scope?` | [`MutationScope`](../type-aliases/MutationScope.md) | `undefined` | Controls whether this mutation runs alongside others or waits its turn. Mutations sharing the same `scope.id` run serially, in the order they were started. Without a scope, a mutation runs as soon as it is triggered. | -| `throwOnError?` | `boolean` \| ((`error`: `TError`) => `boolean`) | `false` | Whether errors should be thrown instead of setting the `error` property. If set to `true`, all errors will be thrown to the nearest error boundary. If set to a function, it will be passed the error and should return a boolean indicating whether to throw the error (`true`) or return it as state (`false`). | - -### options? - -[`InjectMutationOptions`](../interfaces/InjectMutationOptions.md) - -Additional configuration - - - -#### `options` properties - -| Property | Type | Description | -| ------ | ------ | ------ | -| `injector?` | `Injector` | The `Injector` in which to create the mutation. If this is not provided, the current injection context will be used instead (via `inject`). | +| `gcTime?` | `number` | `undefined` | The time in milliseconds that an unused/inactive mutation remains in memory before it is garbage collected. Defaults to `5 * 60 * 1000` (5 minutes), or `Infinity` during SSR. | +| `meta?` | `Record`\<`string`, `unknown`\> | `undefined` | Additional payload to be stored on the mutation cache entry. Use it to pass information that can be read wherever the `mutation` is available, such as the `onError` and `onSuccess` callbacks of the `MutationCache`. | +| `mutationFn?` | (`variables`: `TVariables`, `context`: [`MutationFunctionContext`](../type-aliases/MutationFunctionContext.md)) => `Promise`\<`TData`\> | `undefined` | The function that performs the asynchronous task this mutation runs. Required, unless a default mutation function has been set for the matching `mutationKey` via `queryClient.setMutationDefaults`. Receives the `variables` passed to `mutate`, and a [MutationFunctionContext](../type-aliases/MutationFunctionContext.md) holding the `QueryClient`, the `mutationKey` and `meta`. Must return a promise that resolves the mutation's data. | +| `mutationKey?` | readonly `unknown`[] | `undefined` | The key to use for this mutation. Optional, but required to inherit defaults registered with `queryClient.setMutationDefaults`, and to match this mutation with `useMutationState` or `queryClient.isMutating`. | +| `networkMode?` | `"online"` \| `"always"` \| `"offlineFirst"` | `'online'` | Controls whether a mutation is allowed to run based on the current network connectivity. **See** [Network Mode](https://tanstack.com/query/latest/docs/framework/react/guides/network-mode) for more information. | +| `onError?` | (`error`: `TError`, `variables`: `TVariables`, `onMutateResult`: `TOnMutateResult` \| `undefined`, `context`: [`MutationFunctionContext`](../type-aliases/MutationFunctionContext.md)) => `unknown` | `undefined` | This function fires when the mutation encounters an error, and is passed the error. If a promise is returned, it is awaited before `onSettled` runs. | +| `onMutate?` | (`variables`: `TVariables`, `context`: [`MutationFunctionContext`](../type-aliases/MutationFunctionContext.md)) => `TOnMutateResult` \| `Promise`\<`TOnMutateResult`\> | `undefined` | This function fires before the mutation function runs, and receives the same variables. Useful for optimistic updates applied in the hope that the mutation succeeds. The value it returns is passed to `onSuccess`, `onError` and `onSettled` as `onMutateResult`, which is where an optimistic update is usually rolled back. If a promise is returned, it is awaited before the mutation function runs. | +| `onSettled?` | (`data`: `TData` \| `undefined`, `error`: `TError` \| `null`, `variables`: `TVariables`, `onMutateResult`: `TOnMutateResult` \| `undefined`, `context`: [`MutationFunctionContext`](../type-aliases/MutationFunctionContext.md)) => `unknown` | `undefined` | This function fires when the mutation either succeeds or errors, and is passed either the data or the error. If a promise is returned, it is awaited before the mutation settles. | +| `onSuccess?` | (`data`: `TData`, `variables`: `TVariables`, `onMutateResult`: `TOnMutateResult`, `context`: [`MutationFunctionContext`](../type-aliases/MutationFunctionContext.md)) => `unknown` | `undefined` | This function fires when the mutation succeeds, and is passed the mutation's result. If a promise is returned, it is awaited before `onSettled` runs. | +| `retry?` | \| `number` \| `false` \| `true` \| ((`failureCount`: `number`, `error`: `TError`) => `boolean`) | `0` | If `false`, failed mutations will not retry by default. If `true`, failed mutations will retry infinitely. If set to an integer number, e.g. 3, failed mutations will retry until the failed mutation count meets that number. If set to a function `(failureCount, error) => boolean` failed mutations will retry until the function returns false. | +| `retryDelay?` | `number` \| ((`failureCount`: `number`, `error`: `TError`) => `number`) | `undefined` | This function receives a `retryAttempt` integer and the actual Error and returns the delay to apply before the next attempt in milliseconds. Defaults to a function that applies exponential backoff, capped at 30 seconds. | +| `scope?` | [`MutationScope`](../type-aliases/MutationScope.md) | `undefined` | Controls whether this mutation runs alongside others or waits its turn. Mutations sharing the same `scope.id` run serially, in the order they were started. Without a scope, a mutation runs as soon as it is triggered. | ## Returns [`CreateMutationResult`](../type-aliases/CreateMutationResult.md)\<`TData`, `TError`, `TVariables`, `TOnMutateResult`\> -The mutation result. Value fields are exposed as a `Signal` — read `data`/`error` by calling them -(e.g. `mutation.data()`) — while function fields (`mutate`, `mutateAsync`, `reset`) are called directly, -unchanged. `isSuccess`/`isError`/`isPending`/`isIdle` are type-guard methods you can call to narrow whether -`data` is defined. - -## Remarks - -`mutate`/`mutateAsync` also accept per-call `onSuccess`/`onError`/`onSettled` callbacks as a -second argument, useful for triggering call-site side effects (e.g. navigation) without coupling them to -the shared mutation definition. Callbacks defined in `injectMutationFn` fire for every mutation; per-call -callbacks fire only for the latest call you've made — `mutateAsync` gives you a promise per call instead, -so you can await `Promise.all`/`Promise.allSettled` over several calls and see each one's outcome. +The mutation result, including `mutate` and `mutateAsync`. ## See -[mutationOptions](mutationOptions.md) to share these options across multiple `injectMutation` call sites, or to look -the mutation up elsewhere via its `mutationKey` (e.g. with `injectMutationState`). + - https://tanstack.com/query/latest/docs/framework/angular/guides/mutations + - [mutationOptions](mutationOptions.md) to share these options between `injectMutation` and `injectMutationState`. -## Examples +## Example ```angular-ts @Component({ - selector: 'todos', template: ` - @if (addMutation.isPending()) { - Adding todo... - } @else if (addMutation.isError()) { -
An error occurred: {{ addMutation.error()?.message }}
+ @if (mutation.isPending()) { + Saving... + } @else if (mutation.isError()) { + Error: {{ mutation.error()?.message }} } - + `, }) -export class Todos { - readonly #queryClient = inject(QueryClient) - - readonly addMutation = injectMutation(() => ({ - mutationFn: addTodo, - onSuccess: () => this.#queryClient.invalidateQueries({ queryKey: ['todos'] }), - })) -} -``` - -Optimistic update via `onMutate`, rolling back on `onError`: -```angular-ts -@Component({ - selector: 'todos', - template: ``, -}) -export class Todos { - readonly #queryClient = inject(QueryClient) - - readonly addMutation = injectMutation(() => ({ - mutationFn: addTodo, - onMutate: async (newTodo) => { - await this.#queryClient.cancelQueries({ queryKey: ['todos'] }) - const previousTodos = this.#queryClient.getQueryData>(['todos']) - - this.#queryClient.setQueryData>(['todos'], (old) => [ - ...(old ?? []), - newTodo, - ]) - - // Passed to `onError` as `onMutateResult` if the mutation fails. - return { previousTodos } - }, - onError: (_err, _newTodo, onMutateResult) => { - this.#queryClient.setQueryData(['todos'], onMutateResult?.previousTodos) - }, - onSettled: () => { - this.#queryClient.invalidateQueries({ queryKey: ['todos'] }) - }, +export class CreatePost { + readonly mutation = injectMutation(() => ({ + mutationFn: createPost, })) } ``` - -Callbacks passed per call to `mutate` only fire for the last call — `mutateAsync` gives you a promise per -call instead, so you can wait for all of them when they succeed: -```angular-ts -@Component({ - selector: 'todos', - template: ` - - `, -}) -export class Todos { - readonly #queryClient = inject(QueryClient) - - readonly addMutation = injectMutation(() => ({ - mutationFn: addTodo, - onSuccess: () => this.#queryClient.invalidateQueries({ queryKey: ['todos'] }), - })) - - async handleAddAll(todos: Array) { - try { - await Promise.all(todos.map((todo) => this.addMutation.mutateAsync(todo))) - } catch (error) { - console.error('Failed to add todos:', error) - } - } -} -``` - -If some of the mutations above can fail independently of the others, and you want to know which ones did — -rather than losing that information the moment the first one rejects — swap `Promise.all` for -`Promise.allSettled`: -```angular-ts -@Component({ - selector: 'todos', - template: ` - - `, -}) -export class Todos { - readonly #queryClient = inject(QueryClient) - - readonly addMutation = injectMutation(() => ({ - mutationFn: addTodo, - onSuccess: () => this.#queryClient.invalidateQueries({ queryKey: ['todos'] }), - })) - - async handleAddAll(todos: Array) { - const addResults = await Promise.allSettled( - todos.map((todo) => this.addMutation.mutateAsync(todo)), - ) - - addResults.forEach((addResult, index) => { - if (addResult.status === 'rejected') { - console.error(`Failed to add "${todos[index]}":`, addResult.reason) - } - }) - } -} -``` diff --git a/docs/framework/angular/reference/functions/injectMutationState.md b/docs/framework/angular/reference/functions/injectMutationState.md index 50a9a29da47..ac8fa2f5a73 100644 --- a/docs/framework/angular/reference/functions/injectMutationState.md +++ b/docs/framework/angular/reference/functions/injectMutationState.md @@ -6,13 +6,12 @@ title: injectMutationState ```ts -function injectMutationState>(injectMutationStateFn?: () => MutationStateOptions, options?: InjectMutationStateOptions): Signal; +function injectMutationState, TMutation extends Mutation = MutationTypeFromResult>(options?: () => MutationStateOptions): Signal; ``` -Defined in: [packages/angular-query-experimental/src/inject-mutation-state.ts:114](https://github.com/TanStack/query/blob/main/packages/angular-query-experimental/src/inject-mutation-state.ts#L114) +Defined in: [packages/angular-query/src/inject-mutation-state.ts:70](https://github.com/TanStack/query/blob/main/packages/angular-query/src/inject-mutation-state.ts#L70) -Injects a signal that gives you access to all mutations in the `MutationCache`. You can pass `filters` -([MutationFilters](../interfaces/MutationFilters.md)) to narrow down your mutations, and `select` to transform the mutation state. +Injects a signal that tracks the state of all mutations. ## Type Parameters @@ -20,21 +19,17 @@ Injects a signal that gives you access to all mutations in the `MutationCache`. `TResult` = [`MutationState`](../interfaces/MutationState.md)\<`unknown`, `Error`, `unknown`, `unknown`\> -## Parameters - -### injectMutationStateFn? +### TMutation -() => `MutationStateOptions`\<`TResult`\> +`TMutation` *extends* [`Mutation`](../classes/Mutation.md)\<`any`, `any`, `any`, `any`\> = `MutationTypeFromResult`\<`TResult`\> -A function returning the `filters` to narrow down matched mutations, and an -optional `select` to transform the mutation state. Similar to `computed` from Angular, this function runs -in the reactive context, so signals read inside it re-narrow the matched mutations. +## Parameters ### options? -[`InjectMutationStateOptions`](../interfaces/InjectMutationStateOptions.md) +() => [`MutationStateOptions`](../type-aliases/MutationStateOptions.md)\<`TResult`, `TMutation`\> -Additional configuration +A function that returns mutation state options. @@ -42,57 +37,11 @@ Additional configuration | Property | Type | Description | | ------ | ------ | ------ | -| `injector?` | `Injector` | The `Injector` in which to create the mutation state signal. If this is not provided, the current injection context will be used instead (via `inject`). | +| `filters?` | [`MutationFilters`](../interfaces/MutationFilters.md) | Restricts the mutation cache entries included in the result. | +| `select?` | (`mutation`: `TMutation`) => `TResult` | Maps each matching mutation to the value exposed in the result signal. | ## Returns `Signal`\<`TResult`[]\> -A `Signal` with an Array of whatever `select` returns for each matching mutation. - -## Examples - -Get all variables of all running mutations: -```angular-ts -@Component({ - selector: 'pending-posts', - template: `{{ pendingVariables().length }} posts saving...`, -}) -export class PendingPosts { - readonly pendingVariables = injectMutationState(() => ({ - filters: { status: 'pending' }, - select: (mutation) => mutation.state.variables, - })) -} -``` - -Get all data for specific mutations via the `mutationKey`: -```angular-ts -const mutationKey = ['posts'] - -@Component({ - selector: 'posts', - template: ` - - `, -}) -export class Posts { - // Some mutation that we want to get the state for - readonly createPostMutation = injectMutation(() => ({ - mutationKey, - mutationFn: createPosts, - })) - - readonly savedPosts = injectMutationState(() => ({ - // this mutation key needs to match the mutation key of the given mutation (see above) - filters: { mutationKey, status: 'success' }, - select: (mutation) => mutation.state.data, - })) - - createPost() { - this.createPostMutation.mutate(['New Post']) - } -} -``` +The signal that tracks the state of all mutations. diff --git a/docs/framework/angular/reference/functions/injectQueries.md b/docs/framework/angular/reference/functions/injectQueries.md new file mode 100644 index 00000000000..f44317cc1fd --- /dev/null +++ b/docs/framework/angular/reference/functions/injectQueries.md @@ -0,0 +1,77 @@ +--- +id: injectQueries +title: injectQueries +--- + + + +```ts +function injectQueries["data"], CreateQueryResult["data"], InferDataAndError["error"]>, DefinedCreateQueryResult["data"], InferDataAndError["error"]>>] : T extends [Head, ...Tails[]] ? [...Tails[]] extends [] ? [] : [...Tails[]] extends [Head] ? [GenericGetDefinedOrUndefinedQueryResult["data"], CreateQueryResult["data"], InferDataAndError["error"]>, DefinedCreateQueryResult["data"], InferDataAndError["error"]>>, GenericGetDefinedOrUndefinedQueryResult["data"], CreateQueryResult["data"], InferDataAndError["error"]>, DefinedCreateQueryResult["data"], InferDataAndError["error"]>>] : [...Tails[]] extends [Head, ...Tails[]] ? [...Tails[]] extends [] ? [] : [...Tails[]] extends [Head] ? [GenericGetDefinedOrUndefinedQueryResult, DefinedCreateQueryResult<..., ...>>, GenericGetDefinedOrUndefinedQueryResult, DefinedCreateQueryResult<..., ...>>, GenericGetDefinedOrUndefinedQueryResult, DefinedCreateQueryResult<..., ...>>] : [...Tails[]] extends [Head, ...Tails[]] ? [...(...)[]] extends [] ? [] : ... extends ... ? ... : ... : [...{ [K in (...)]: (...) }[]] : [...{ [K in string | number | symbol]: GenericGetDefinedOrUndefinedQueryResult["data"], CreateQueryResult<(...)[(...)], (...)[(...)]>, DefinedCreateQueryResult<(...)[(...)], (...)[(...)]>> }[]] : { [K in string | number | symbol]: GenericGetDefinedOrUndefinedQueryResult["data"], CreateQueryResult["data"], InferDataAndError["error"]>, DefinedCreateQueryResult["data"], InferDataAndError["error"]>> }>(optionsFn: () => InjectQueriesOptions): Signal; +``` + +Defined in: [packages/angular-query/src/inject-queries.ts:55](https://github.com/TanStack/query/blob/main/packages/angular-query/src/inject-queries.ts#L55) + +Injects multiple queries that run in parallel and react to Angular signals. + +## Type Parameters + +### T + +`T` *extends* `any`[] + +### TCombinedResult + +`TCombinedResult` = `T` *extends* \[\] ? \[\] : `T` *extends* \[`Head`\] ? \[`GenericGetDefinedOrUndefinedQueryResult`\<`Head`, `InferDataAndError`\<`Head`\>\[`"data"`\], [`CreateQueryResult`](../type-aliases/CreateQueryResult.md)\<`InferDataAndError`\<`Head`\>\[`"data"`\], `InferDataAndError`\<`Head`\>\[`"error"`\]\>, [`DefinedCreateQueryResult`](../type-aliases/DefinedCreateQueryResult.md)\<`InferDataAndError`\<`Head`\>\[`"data"`\], `InferDataAndError`\<`Head`\>\[`"error"`\]\>\>\] : `T` *extends* \[`Head`, `...Tails[]`\] ? \[`...Tails[]`\] *extends* \[\] ? \[\] : \[`...Tails[]`\] *extends* \[`Head`\] ? \[`GenericGetDefinedOrUndefinedQueryResult`\<`Head`, `InferDataAndError`\<`Head`\>\[`"data"`\], [`CreateQueryResult`](../type-aliases/CreateQueryResult.md)\<`InferDataAndError`\<`Head`\>\[`"data"`\], `InferDataAndError`\<`Head`\>\[`"error"`\]\>, [`DefinedCreateQueryResult`](../type-aliases/DefinedCreateQueryResult.md)\<`InferDataAndError`\<`Head`\>\[`"data"`\], `InferDataAndError`\<`Head`\>\[`"error"`\]\>\>, `GenericGetDefinedOrUndefinedQueryResult`\<`Head`, `InferDataAndError`\<`Head`\>\[`"data"`\], [`CreateQueryResult`](../type-aliases/CreateQueryResult.md)\<`InferDataAndError`\<`Head`\>\[`"data"`\], `InferDataAndError`\<`Head`\>\[`"error"`\]\>, [`DefinedCreateQueryResult`](../type-aliases/DefinedCreateQueryResult.md)\<`InferDataAndError`\<`Head`\>\[`"data"`\], `InferDataAndError`\<`Head`\>\[`"error"`\]\>\>\] : \[`...Tails[]`\] *extends* \[`Head`, `...Tails[]`\] ? \[`...Tails[]`\] *extends* \[\] ? \[\] : \[`...Tails[]`\] *extends* \[`Head`\] ? \[`GenericGetDefinedOrUndefinedQueryResult`\<`Head`, ...\[...\], [`CreateQueryResult`](../type-aliases/CreateQueryResult.md)\<..., ...\>, [`DefinedCreateQueryResult`](../type-aliases/DefinedCreateQueryResult.md)\<..., ...\>\>, `GenericGetDefinedOrUndefinedQueryResult`\<`Head`, ...\[...\], [`CreateQueryResult`](../type-aliases/CreateQueryResult.md)\<..., ...\>, [`DefinedCreateQueryResult`](../type-aliases/DefinedCreateQueryResult.md)\<..., ...\>\>, `GenericGetDefinedOrUndefinedQueryResult`\<`Head`, ...\[...\], [`CreateQueryResult`](../type-aliases/CreateQueryResult.md)\<..., ...\>, [`DefinedCreateQueryResult`](../type-aliases/DefinedCreateQueryResult.md)\<..., ...\>\>\] : \[`...Tails[]`\] *extends* \[`Head`, `...Tails[]`\] ? \[`...(...)[]`\] *extends* \[\] ? \[\] : ... *extends* ... ? ... : ... : \[`...{ [K in (...)]: (...) }[]`\] : \[...\{ \[K in string \| number \| symbol\]: GenericGetDefinedOrUndefinedQueryResult\\["data"\], CreateQueryResult\<(...)\[(...)\], (...)\[(...)\]\>, DefinedCreateQueryResult\<(...)\[(...)\], (...)\[(...)\]\>\> \}\[\]\] : \{ \[K in string \| number \| symbol\]: GenericGetDefinedOrUndefinedQueryResult\\["data"\], CreateQueryResult\\["data"\], InferDataAndError\\["error"\]\>, DefinedCreateQueryResult\\["data"\], InferDataAndError\\["error"\]\>\> \} + +## Parameters + +### optionsFn + +() => [`InjectQueriesOptions`](../interfaces/InjectQueriesOptions.md)\<`T`, `TCombinedResult`\> + +A function that returns the queries' options. Similar to `computed` from Angular, +this function runs in the reactive context, so signals read inside it drive the queries. + + + +#### `optionsFn` properties + +| Property | Type | Description | +| ------ | ------ | ------ | +| `combine?` | (`result`: `T` *extends* \[\] ? \[\] : `T` *extends* \[`Head`\] ? \[`GenericGetDefinedOrUndefinedQueryResult`\<`Head`, `InferDataAndError`\<`Head`\>\[`"data"`\], [`QueryObserverResult`](../type-aliases/QueryObserverResult.md)\<`InferDataAndError`\<`Head`\>\[`"data"`\], `InferDataAndError`\<`Head`\>\[`"error"`\]\>, [`DefinedQueryObserverResult`](../type-aliases/DefinedQueryObserverResult.md)\<`InferDataAndError`\<`Head`\>\[`"data"`\], `InferDataAndError`\<`Head`\>\[`"error"`\]\>\>\] : `T` *extends* \[`Head`, `...Tails[]`\] ? \[`...Tails[]`\] *extends* \[\] ? \[\] : \[`...Tails[]`\] *extends* \[`Head`\] ? \[`GenericGetDefinedOrUndefinedQueryResult`\<`Head`, `InferDataAndError`\<...\>\[`"data"`\], [`QueryObserverResult`](../type-aliases/QueryObserverResult.md)\<...\[...\], ...\[...\]\>, [`DefinedQueryObserverResult`](../type-aliases/DefinedQueryObserverResult.md)\<...\[...\], ...\[...\]\>\>, `GenericGetDefinedOrUndefinedQueryResult`\<`Head`, `InferDataAndError`\<...\>\[`"data"`\], [`QueryObserverResult`](../type-aliases/QueryObserverResult.md)\<...\[...\], ...\[...\]\>, [`DefinedQueryObserverResult`](../type-aliases/DefinedQueryObserverResult.md)\<...\[...\], ...\[...\]\>\>\] : \[`...Tails[]`\] *extends* \[`Head`, `...Tails[]`\] ? \[`...Tails[]`\] *extends* \[\] ? \[\] : \[`...(...)[]`\] *extends* \[...\] ? \[..., ..., ...\] : ... *extends* ... ? ... : ... : \[...\{ \[K in (...) \| (...) \| (...)\]: GenericGetDefinedOrUndefinedQueryResult\<(...), (...), (...), (...)\> \}\[\]\] : \{ \[K in string \| number \| symbol\]: GenericGetDefinedOrUndefinedQueryResult\\["data"\], QueryObserverResult\\["data"\], InferDataAndError\<(...)\[(...)\]\>\["error"\]\>, DefinedQueryObserverResult\\["data"\], InferDataAndError\<(...)\[(...)\]\>\["error"\]\>\> \}) => `TCombinedResult` | Projects the current plain observer results into a single reactively computed value. | +| `queries` | \| readonly \[\{ \[K in string \| number \| symbol\]: GetCreateQueryOptionsForCreateQueries\ \}\] \| readonly \[`T` *extends* \[\] ? \[\] : `T` *extends* \[`Head`\] ? \[`GetCreateQueryOptionsForCreateQueries`\<`Head`\>\] : `T` *extends* \[`Head`, `...Tails[]`\] ? \[`...Tails[]`\] *extends* \[\] ? \[\] : \[`...Tails[]`\] *extends* \[`Head`\] ? \[`GetCreateQueryOptionsForCreateQueries`\<`Head`\>, `GetCreateQueryOptionsForCreateQueries`\<`Head`\>\] : \[`...Tails[]`\] *extends* \[`Head`, `...Tails[]`\] ? \[`...Tails[]`\] *extends* \[\] ? \[\] : \[`...(...)[]`\] *extends* \[...\] ? \[..., ..., ...\] : ... *extends* ... ? ... : ... : readonly `unknown`[] *extends* \[`...Tails[]`\] ? \[`...Tails[]`\] : \[`...(...)[]`\] *extends* ...[] ? ...[] : ...[] : readonly `unknown`[] *extends* `T` ? `T` : `T` *extends* `QueryObserverOptionsForCreateQueries`\<`TQueryFnData`, `TError`, `TData`, `TQueryKey`\>[] ? `QueryObserverOptionsForCreateQueries`\<`TQueryFnData`, `TError`, `TData`, `TQueryKey`\>[] : `QueryObserverOptionsForCreateQueries`\<`unknown`, `Error`, `unknown`, readonly `unknown`[]\>[]\] | The ordered query options to observe; entries can be added, removed, or replaced reactively. | + +## Returns + +`Signal`\<`TCombinedResult`\> + +A signal containing the query results in the same order as the input queries. + +## See + +https://tanstack.com/query/latest/docs/framework/angular/guides/parallel-queries + +## Example + +```angular-ts +@Component({ + selector: 'users', + template: ` + @for (query of userQueries(); track $index) { + @if (query.isSuccess()) { +

{{ query.data().name }}

+ } + } + `, +}) +export class UsersComponent { + readonly users = input.required>() + + readonly userQueries = injectQueries(() => ({ + queries: this.users().map((user) => ({ + queryKey: ['user', user.id], + queryFn: () => fetchUserById(user.id), + })), + })) +} +``` diff --git a/docs/framework/angular/reference/functions/injectQuery.md b/docs/framework/angular/reference/functions/injectQuery.md index e26af5742db..1998a908b4f 100644 --- a/docs/framework/angular/reference/functions/injectQuery.md +++ b/docs/framework/angular/reference/functions/injectQuery.md @@ -8,14 +8,14 @@ title: injectQuery ## Overview ```ts -function injectQuery(injectQueryFn: () => DefinedInitialDataOptions, options?: InjectQueryOptions): DefinedCreateQueryResult; -function injectQuery(injectQueryFn: () => UndefinedInitialDataOptions, options?: InjectQueryOptions): CreateQueryResult; -function injectQuery(injectQueryFn: () => CreateQueryOptions, options?: InjectQueryOptions): CreateQueryResult; +function injectQuery(optionsFn: () => DefinedInitialDataOptions): DefinedCreateQueryResult; +function injectQuery(optionsFn: () => UndefinedInitialDataOptions): CreateQueryResult; +function injectQuery(optionsFn: () => CreateQueryOptions): CreateQueryResult; ``` -- [`() => DefinedInitialDataOptions` → `DefinedCreateQueryResult`](#call-signature-1): This overload is selected when `initialData` is known to be defined on the options returned by `injectQueryFn`, so the resulting `data` signal is never `undefined` (unless a `select` changes `TData` to include `undefined`). +- [`() => DefinedInitialDataOptions` → `DefinedCreateQueryResult`](#call-signature-1): This overload is selected when `initialData` is known to be defined on the options returned by `optionsFn`, so the resulting `data` signal is never `undefined` (unless a `select` changes `TData` to include `undefined`). - [`() => UndefinedInitialDataOptions` → `CreateQueryResult`](#call-signature-2): Injects a query: a declarative dependency on an asynchronous source of data that is tied to a unique key. -- [`() => CreateQueryOptions` → `CreateQueryResult`](#call-signature-3): This overload accepts the general [CreateQueryOptions](../interfaces/CreateQueryOptions.md) shape rather than the `initialData`-aware overloads above, so whether `data` is defined can't be inferred from the call site — useful when wrapping `injectQuery` in your own helper function that forwards caller-provided options. +- [`() => CreateQueryOptions` → `CreateQueryResult`](#call-signature-3): This overload accepts the general [CreateQueryOptions](../type-aliases/CreateQueryOptions.md) shape rather than the `initialData`-aware overloads above, so whether `data` is defined can't be inferred from the call site — useful when wrapping `injectQuery` in your own helper function that forwards caller-provided options. See also: [Parameters](#parameters-summary) · [Returns](#returns-summary) @@ -24,14 +24,13 @@ See also: [Parameters](#parameters-summary) · [Returns](#returns-summary) ## Call Signature ```ts -function injectQuery(injectQueryFn: () => DefinedInitialDataOptions, options?: InjectQueryOptions): DefinedCreateQueryResult; +function injectQuery(optionsFn: () => DefinedInitialDataOptions): DefinedCreateQueryResult; ``` -Defined in: [packages/angular-query-experimental/src/inject-query.ts:72](https://github.com/TanStack/query/blob/main/packages/angular-query-experimental/src/inject-query.ts#L72) +Defined in: [packages/angular-query/src/inject-query.ts:59](https://github.com/TanStack/query/blob/main/packages/angular-query/src/inject-query.ts#L59) -This overload is selected when `initialData` is known to be defined on the options returned by -`injectQueryFn`, so the resulting `data` signal is never `undefined` (unless a `select` changes `TData` to -include `undefined`). +This overload is selected when `initialData` is known to be defined on the options returned by `optionsFn`, so the +resulting `data` signal is never `undefined` (unless a `select` changes `TData` to include `undefined`). ### Type Parameters @@ -53,20 +52,13 @@ include `undefined`). ### Parameters -#### injectQueryFn +#### optionsFn () => [`DefinedInitialDataOptions`](../type-aliases/DefinedInitialDataOptions.md)\<`TQueryFnData`, `TError`, `TData`, `TQueryKey`\> A function returning the [DefinedInitialDataOptions](../type-aliases/DefinedInitialDataOptions.md) to use — everything you -can pass to `injectQuery`, with `initialData` known to be defined. Similar to `computed` from Angular, this -function runs in the reactive context, so signals read inside it (in `queryKey`, `enabled`, etc.) drive the -query. - -#### options? - -[`InjectQueryOptions`](../interfaces/InjectQueryOptions.md) - -Additional configuration +can pass to `injectQuery`, with `initialData` known to be defined. Similar to `computed` from Angular, this function runs +in the reactive context, so signals read inside it (in `queryKey`, `enabled`, etc.) drive the query. ### Returns @@ -79,7 +71,7 @@ include `undefined`). - https://tanstack.com/query/latest/docs/framework/angular/guides/queries - [queryOptions](queryOptions.md) to share these options between `injectQuery` and imperative APIs like -`queryClient.fetchQuery`. +`queryClient.query`. ### Example @@ -113,10 +105,10 @@ export class Posts { ## Call Signature ```ts -function injectQuery(injectQueryFn: () => UndefinedInitialDataOptions, options?: InjectQueryOptions): CreateQueryResult; +function injectQuery(optionsFn: () => UndefinedInitialDataOptions): CreateQueryResult; ``` -Defined in: [packages/angular-query-experimental/src/inject-query.ts:158](https://github.com/TanStack/query/blob/main/packages/angular-query-experimental/src/inject-query.ts#L158) +Defined in: [packages/angular-query/src/inject-query.ts:142](https://github.com/TanStack/query/blob/main/packages/angular-query/src/inject-query.ts#L142) Injects a query: a declarative dependency on an asynchronous source of data that is tied to a unique key. @@ -140,7 +132,7 @@ Injects a query: a declarative dependency on an asynchronous source of data that ### Parameters -#### injectQueryFn +#### optionsFn () => [`UndefinedInitialDataOptions`](../type-aliases/UndefinedInitialDataOptions.md)\<`TQueryFnData`, `TError`, `TData`, `TQueryKey`\> @@ -148,12 +140,6 @@ A function returning the [UndefinedInitialDataOptions](../type-aliases/Undefined you can pass to `injectQuery`. Similar to `computed` from Angular, this function runs in the reactive context, so signals read inside it (in `queryKey`, `enabled`, etc.) drive the query. -#### options? - -[`InjectQueryOptions`](../interfaces/InjectQueryOptions.md) - -Additional configuration - ### Returns [`CreateQueryResult`](../type-aliases/CreateQueryResult.md)\<`TData`, `TError`\> @@ -166,7 +152,7 @@ the last fetch attempt failed, or `'success'` if the query has data to display. - https://tanstack.com/query/latest/docs/framework/angular/guides/queries - [queryOptions](queryOptions.md) to share these options between `injectQuery` and imperative APIs like -`queryClient.fetchQuery`. +`queryClient.query`. ### Examples @@ -222,7 +208,6 @@ export class Posts { readonly postsQuery = injectQuery(() => ({ queryKey: ['posts', this.filter()], queryFn: () => fetchPosts(this.filter()), - // Signals can be combined with expressions enabled: !!this.filter(), })) } @@ -233,12 +218,12 @@ export class Posts { ## Call Signature ```ts -function injectQuery(injectQueryFn: () => CreateQueryOptions, options?: InjectQueryOptions): CreateQueryResult; +function injectQuery(optionsFn: () => CreateQueryOptions): CreateQueryResult; ``` -Defined in: [packages/angular-query-experimental/src/inject-query.ts:184](https://github.com/TanStack/query/blob/main/packages/angular-query-experimental/src/inject-query.ts#L184) +Defined in: [packages/angular-query/src/inject-query.ts:165](https://github.com/TanStack/query/blob/main/packages/angular-query/src/inject-query.ts#L165) -This overload accepts the general [CreateQueryOptions](../interfaces/CreateQueryOptions.md) shape rather than the `initialData`-aware +This overload accepts the general [CreateQueryOptions](../type-aliases/CreateQueryOptions.md) shape rather than the `initialData`-aware overloads above, so whether `data` is defined can't be inferred from the call site — useful when wrapping `injectQuery` in your own helper function that forwards caller-provided options. @@ -262,19 +247,12 @@ overloads above, so whether `data` is defined can't be inferred from the call si ### Parameters -#### injectQueryFn +#### optionsFn -() => [`CreateQueryOptions`](../interfaces/CreateQueryOptions.md)\<`TQueryFnData`, `TError`, `TData`, `TQueryKey`\> +() => [`CreateQueryOptions`](../type-aliases/CreateQueryOptions.md)\<`TQueryFnData`, `TError`, `TData`, `TQueryKey`\> A function that returns query options. Similar to `computed` from Angular, this -function runs in the reactive context, so signals read inside it (in `queryKey`, `enabled`, etc.) drive -the query. - -#### options? - -[`InjectQueryOptions`](../interfaces/InjectQueryOptions.md) - -Additional configuration +function runs in the reactive context, so signals read inside it drive the query. ### Returns @@ -290,60 +268,18 @@ https://tanstack.com/query/latest/docs/framework/angular/guides/queries ## Parameters -### injectQueryFn +### optionsFn -() => [`CreateQueryOptions`](../interfaces/CreateQueryOptions.md)\<`TQueryFnData`, `TError`, `TData`, `TQueryKey`\> +() => [`CreateQueryOptions`](../type-aliases/CreateQueryOptions.md)\<`TQueryFnData`, `TError`, `TData`, `TQueryKey`\> A function that returns query options. Similar to `computed` from Angular, this -function runs in the reactive context, so signals read inside it (in `queryKey`, `enabled`, etc.) drive -the query. - - - -#### `injectQueryFn` properties - -| Property | Type | Default value | Description | -| ------ | ------ | ------ | ------ | -| `enabled?` | \| `false` \| `true` \| ((`query`: [`Query`](../classes/Query.md)\<`TQueryFnData`, `TError`, `TQueryFnData`, `TQueryKey`\>) => `boolean`) | `true` | Set this to `false` or a function that returns `false` to disable automatic refetching when the query mounts or changes query keys. To refetch the query, use the `refetch` method returned from the `useQuery` instance. Accepts a boolean or function that returns a boolean. | -| `gcTime?` | `number` | `undefined` | The time in milliseconds that unused/inactive cache data remains in memory. When a query's cache becomes unused or inactive, that cache data will be garbage collected after this duration. When different garbage collection times are specified, the longest one will be used. Setting it to `Infinity` will disable garbage collection. Defaults to `5 * 60 * 1000` (5 minutes), or `Infinity` during SSR. Note: the maximum allowed time is about 24 days, imposed by `setTimeout`'s 32-bit signed integer delay — see `timeoutManager.setTimeoutProvider` for a workaround. | -| `initialData?` | `TQueryFnData` \| (() => `TQueryFnData` \| `undefined`) | `undefined` | If set, this value will be used as the initial data for the query cache (as long as the query hasn't been created or cached yet). If set to a function, the function will be called **once** during the shared/root query initialization, and be expected to synchronously return the initial data. Initial data is considered stale by default unless a `staleTime` has been set. `initialData` **is persisted** to the cache. | -| `initialDataUpdatedAt?` | `number` \| (() => `number` \| `undefined`) | `undefined` | If set, this value will be used as the time (in milliseconds) of when the `initialData` itself was last updated. | -| `maxPages?` | `number` | `undefined` | Maximum number of pages to store in the data of an infinite query. | -| `meta?` | `Record`\<`string`, `unknown`\> | `undefined` | Additional payload to be stored on each query. Use this property to pass information that can be used in other places. | -| `networkMode?` | `"online"` \| `"always"` \| `"offlineFirst"` | `'online'` | Controls whether a query is allowed to run based on the current network connectivity. **See** [Network Mode](https://tanstack.com/query/latest/docs/framework/react/guides/network-mode) for more information. | -| `notifyOnChangeProps?` | \| ( \| `"error"` \| `"data"` \| `"isError"` \| `"isPending"` \| `"isLoading"` \| `"isLoadingError"` \| `"isRefetchError"` \| `"isSuccess"` \| `"isPlaceholderData"` \| `"status"` \| `"dataUpdatedAt"` \| `"errorUpdatedAt"` \| `"failureCount"` \| `"failureReason"` \| `"errorUpdateCount"` \| `"isFetched"` \| `"isFetchedAfterMount"` \| `"isFetching"` \| `"isInitialLoading"` \| `"isPaused"` \| `"isRefetching"` \| `"isStale"` \| `"isEnabled"` \| `"refetch"` \| `"fetchStatus"` \| `"fetchNextPage"` \| `"fetchPreviousPage"` \| `"hasNextPage"` \| `"hasPreviousPage"` \| `"isFetchNextPageError"` \| `"isFetchingNextPage"` \| `"isFetchPreviousPageError"` \| `"isFetchingPreviousPage"`)[] \| `"all"` \| (() => \| `"all"` \| ( \| `"error"` \| `"data"` \| `"isError"` \| `"isPending"` \| `"isLoading"` \| `"isLoadingError"` \| `"isRefetchError"` \| `"isSuccess"` \| `"isPlaceholderData"` \| `"status"` \| `"dataUpdatedAt"` \| `"errorUpdatedAt"` \| `"failureCount"` \| `"failureReason"` \| `"errorUpdateCount"` \| `"isFetched"` \| `"isFetchedAfterMount"` \| `"isFetching"` \| `"isInitialLoading"` \| `"isPaused"` \| `"isRefetching"` \| `"isStale"` \| `"isEnabled"` \| `"refetch"` \| `"fetchStatus"` \| `"fetchNextPage"` \| `"fetchPreviousPage"` \| `"hasNextPage"` \| `"hasPreviousPage"` \| `"isFetchNextPageError"` \| `"isFetchingNextPage"` \| `"isFetchPreviousPageError"` \| `"isFetchingPreviousPage"`)[] \| `undefined`) | `undefined` | If set, the component will only re-render if any of the listed properties change. When set to `['data', 'error']`, the component will only re-render when the `data` or `error` properties change. When set to `'all'`, the component will re-render whenever a query is updated. When set to a function, the function will be executed to compute the list of properties. Defaults to `undefined`, in which case property access is tracked automatically, and the component only re-renders when one of the tracked properties changes. | -| `persister?` | (`queryFn`: (`context`: `object`) => `TQueryFnData` \| `Promise`\<`TQueryFnData`\>, `context`: `object`, `query`: [`Query`](../classes/Query.md)) => `TQueryFnData` \| `Promise`\<`TQueryFnData`\> | `undefined` | This option can be used to persist the result of a query to an external storage, bypassing the need to actually call the `queryFn`. Useful for persisting a query's data across e.g. server/client boundaries. | -| `placeholderData?` | \| `NonFunctionGuard`\<`TQueryFnData`\> \| ((`previousData`: `NonFunctionGuard`\<`TQueryFnData`\> \| `undefined`, `previousQuery`: \| [`Query`](../classes/Query.md)\<`NonFunctionGuard`\<`TQueryFnData`\>, `TError`, `NonFunctionGuard`\<`TQueryFnData`\>, `TQueryKey`\> \| `undefined`) => `NonFunctionGuard`\<`TQueryFnData`\> \| `undefined`) | `undefined` | If set, this value will be used as the placeholder data for this particular query observer while the query is still in the `loading` data and no initialData has been provided. | -| `queryFn?` | \| *typeof* [`skipToken`](../variables/skipToken.md) \| ((`context`: `object`) => `TQueryFnData` \| `Promise`\<`TQueryFnData`\>) | `undefined` | The function that the query will use to request data. Required, unless a default query function has been set via `queryClient.setQueryDefaults` or `queryClient.setDefaultOptions`. Receives a [QueryFunctionContext](../type-aliases/QueryFunctionContext.md). Must return a promise that will either resolve data or throw an error. The data cannot be `undefined`. | -| `queryHash?` | `string` | `undefined` | The hashed form of `queryKey`, computed with `queryKeyHashFn` (or the default hashing function otherwise). Used as the actual cache key internally. | -| `queryKey` | `TQueryKey` & `object` | `undefined` | The query key to use for this query. The query key will be hashed into a stable hash. See [Query Keys](https://tanstack.com/query/latest/docs/framework/react/guides/query-keys) for more information. The query will automatically update when this key changes (as long as `enabled` is not set to `false`). | -| `queryKeyHashFn?` | (`queryKey`: `TQueryKey`) => `string` | `undefined` | If specified, this function is used to hash the `queryKey` to a string. | -| `refetchInterval?` | \| `number` \| `false` \| ((`query`: [`Query`](../classes/Query.md)\<`TQueryFnData`, `TError`, `TQueryFnData`, `TQueryKey`\>) => `number` \| `false` \| `undefined`) | `false` | If set to a number, the query will continuously refetch at this frequency in milliseconds. If set to a function, the function will be executed with the latest data and query to compute a frequency | -| `refetchIntervalInBackground?` | `boolean` | `false` | If set to `true`, the query will continue to refetch while their tab/window is in the background. | -| `refetchOnMount?` | \| `boolean` \| `"always"` \| ((`query`: [`Query`](../classes/Query.md)\<`TQueryFnData`, `TError`, `TQueryFnData`, `TQueryKey`\>) => `boolean` \| `"always"`) | `true` | If set to `true`, the query will refetch on mount if the data is stale. If set to `false`, will disable additional instances of a query to trigger background refetch. If set to `'always'`, the query will always refetch on mount (except when `staleTime: 'static'` is used). If set to a function, the function will be executed with the latest data and query to compute the value | -| `refetchOnReconnect?` | \| `boolean` \| `"always"` \| ((`query`: [`Query`](../classes/Query.md)\<`TQueryFnData`, `TError`, `TQueryFnData`, `TQueryKey`\>) => `boolean` \| `"always"`) | `undefined` | If set to `true`, the query will refetch on reconnect if the data is stale. If set to `false`, the query will not refetch on reconnect. If set to `'always'`, the query will always refetch on reconnect (except when `staleTime: 'static'` is used). If set to a function, the function will be executed with the latest data and query to compute the value. Defaults to `true` unless `networkMode` is `'always'`. | -| `refetchOnWindowFocus?` | \| `boolean` \| `"always"` \| ((`query`: [`Query`](../classes/Query.md)\<`TQueryFnData`, `TError`, `TQueryFnData`, `TQueryKey`\>) => `boolean` \| `"always"`) | `true` | If set to `true`, the query will refetch on window focus if the data is stale. If set to `false`, the query will not refetch on window focus. If set to `'always'`, the query will always refetch on window focus (except when `staleTime: 'static'` is used). If set to a function, the function will be executed with the latest data and query to compute the value. | -| `retry?` | \| `number` \| `false` \| `true` \| ((`failureCount`: `number`, `error`: `TError`) => `boolean`) | `undefined` | If `false`, failed queries will not retry by default. If `true`, failed queries will retry infinitely. If set to an integer number, e.g. 3, failed queries will retry until the failed query count meets that number. If set to a function `(failureCount, error) => boolean` failed queries will retry until the function returns false. Defaults to `3` on the client and `0` on the server. | -| `retryDelay?` | `number` \| ((`failureCount`: `number`, `error`: `TError`) => `number`) | `undefined` | This function receives a `retryAttempt` integer and the actual Error and returns the delay to apply before the next attempt in milliseconds. A function like `attempt => Math.min(attempt > 1 ? 2 ** attempt * 1000 : 1000, 30 * 1000)` applies exponential backoff. A function like `attempt => attempt * 1000` applies linear backoff. Defaults to a function that applies exponential backoff, capped at 30 seconds. | -| `retryOnMount?` | \| `false` \| `true` \| ((`query`: [`Query`](../classes/Query.md)\<`TQueryFnData`, `TError`, `TQueryFnData`, `TQueryKey`\>) => `boolean`) | `true` | If set to `false`, the query will not be retried on mount if it contains an error. If set to a function, the function will be executed with the query to compute the value. | -| `select?` | (`data`: `TQueryFnData`) => `TData` | `undefined` | This option can be used to transform or select a part of the data returned by the query function. It affects the returned `data` value, but does not affect what gets stored in the query cache. The `select` function will only run if `data` changed, or if the reference to the `select` function itself changes. To optimize, memoize the function so its reference stays stable across calls. | -| `staleTime?` | \| `number` \| `"static"` \| ((`query`: [`Query`](../classes/Query.md)\<`TQueryFnData`, `TError`, `TQueryFnData`, `TQueryKey`\>) => `number` \| `"static"`) | `0` | The time in milliseconds after data is considered stale. If set to `Infinity`, the data will never be considered stale. If set to `'static'`, the data will never be considered stale. If set to a function, the function will be executed with the query to compute a `staleTime`. | -| `structuralSharing?` | `boolean` \| ((`oldData`: `unknown`, `newData`: `unknown`) => `unknown`) | `true` | Set this to `false` to disable structural sharing between query results. Set this to a function which accepts the old and new data and returns resolved data of the same type to implement custom structural sharing logic. | -| `throwOnError?` | \| `false` \| `true` \| ((`error`: `TError`, `query`: [`Query`](../classes/Query.md)\<`TQueryFnData`, `TError`, `TQueryFnData`, `TQueryKey`\>) => `boolean`) | `false` | Whether errors should be thrown instead of setting the `error` property. If set to `true` or `suspense` is `true`, all errors will be thrown to the error boundary. If set to `false` and `suspense` is `false`, errors are returned as state. If set to a function, it will be passed the error and the query, and it should return a boolean indicating whether to show the error in an error boundary (`true`) or return the error as state (`false`). | - -### options? - -[`InjectQueryOptions`](../interfaces/InjectQueryOptions.md) - -Additional configuration - - - -#### `options` properties - -| Property | Type | Description | -| ------ | ------ | ------ | -| `injector?` | `Injector` | The `Injector` in which to create the query. If this is not provided, the current injection context will be used instead (via `inject`). | +function runs in the reactive context, so signals read inside it drive the query. + + + +#### `optionsFn` properties + +Built from [`QueryObserverOptions`](../interfaces/QueryObserverOptions.md#properties). See the type above for what it changes. diff --git a/docs/framework/angular/reference/functions/injectQueryClient.md b/docs/framework/angular/reference/functions/injectQueryClient.md deleted file mode 100644 index 92e5c6bf136..00000000000 --- a/docs/framework/angular/reference/functions/injectQueryClient.md +++ /dev/null @@ -1,38 +0,0 @@ ---- -id: injectQueryClient -title: injectQueryClient ---- - - - -```ts -function injectQueryClient(injectOptions?: InjectOptions & object): QueryClient; -``` - -Defined in: [packages/angular-query-experimental/src/inject-query-client.ts:18](https://github.com/TanStack/query/blob/main/packages/angular-query-experimental/src/inject-query-client.ts#L18) - -Injects a `QueryClient` instance and allows passing a custom injector. - -## Parameters - -### injectOptions? - -`InjectOptions` & `object` = `{}` - -Type of the options argument to inject and optionally a custom injector. - -## Returns - -[`QueryClient`](../classes/QueryClient.md) - -The `QueryClient` instance. - -## Deprecated - -Use `inject(QueryClient)` instead. -If you need to get a `QueryClient` from a custom injector, use `injector.get(QueryClient)`. - -**Example** -```ts -const queryClient = injectQueryClient(); -``` diff --git a/docs/framework/angular/reference/functions/mutationOptions.md b/docs/framework/angular/reference/functions/mutationOptions.md index c59d1481dc2..137c4560551 100644 --- a/docs/framework/angular/reference/functions/mutationOptions.md +++ b/docs/framework/angular/reference/functions/mutationOptions.md @@ -25,7 +25,7 @@ See also: [Parameters](#parameters-summary) · [Returns](#returns-summary) function mutationOptions(options: WithRequired, "mutationKey">): WithRequired, "mutationKey">; ``` -Defined in: [packages/angular-query-experimental/src/mutation-options.ts:38](https://github.com/TanStack/query/blob/main/packages/angular-query-experimental/src/mutation-options.ts#L38) +Defined in: [packages/angular-query/src/mutation-options.ts:38](https://github.com/TanStack/query/blob/main/packages/angular-query/src/mutation-options.ts#L38) You can generally pass everything to `mutationOptions` that you can also pass to `injectMutation`. A `mutationKey` is required on this overload so the mutation can be looked up later, e.g. with @@ -72,7 +72,7 @@ The same options object, unchanged. Looking the mutation up elsewhere via its `mutationKey`, e.g. for a global "saving…" indicator: ```angular-ts -import { mutationOptions, injectMutationState } from '@tanstack/angular-query-experimental' +import { mutationOptions, injectMutationState } from '@tanstack/angular-query' const createPostOptions = mutationOptions({ mutationKey: ['posts', 'create'], @@ -103,7 +103,7 @@ export class SavingIndicator { function mutationOptions(options: Omit, "mutationKey">): Omit, "mutationKey">; ``` -Defined in: [packages/angular-query-experimental/src/mutation-options.ts:94](https://github.com/TanStack/query/blob/main/packages/angular-query-experimental/src/mutation-options.ts#L94) +Defined in: [packages/angular-query/src/mutation-options.ts:94](https://github.com/TanStack/query/blob/main/packages/angular-query/src/mutation-options.ts#L94) You can generally pass everything to `mutationOptions` that you can also pass to `injectMutation`. No `mutationKey` is required on this overload — use this when you don't need to target the mutation via a @@ -155,7 +155,7 @@ See the other overload's example for looking a mutation up via `injectMutationSt Sharing options across services, so `QueriesService` stays the single place a mutation is defined: ```angular-ts -import { mutationOptions, injectMutation } from '@tanstack/angular-query-experimental' +import { mutationOptions, injectMutation } from '@tanstack/angular-query' @Injectable({ providedIn: 'root' }) export class QueriesService { diff --git a/docs/framework/angular/reference/functions/provideAngularQuery.md b/docs/framework/angular/reference/functions/provideAngularQuery.md deleted file mode 100644 index ae60f31c7b4..00000000000 --- a/docs/framework/angular/reference/functions/provideAngularQuery.md +++ /dev/null @@ -1,38 +0,0 @@ ---- -id: provideAngularQuery -title: provideAngularQuery ---- - - - -```ts -function provideAngularQuery(queryClient: QueryClient): Provider[]; -``` - -Defined in: [packages/angular-query-experimental/src/providers.ts:115](https://github.com/TanStack/query/blob/main/packages/angular-query-experimental/src/providers.ts#L115) - -Sets up providers necessary to enable TanStack Query functionality for Angular applications. - -Allows configuring a `QueryClient`. - -## Parameters - -### queryClient - -[`QueryClient`](../classes/QueryClient.md) - -A `QueryClient` instance. - -## Returns - -`Provider`[] - -A set of providers to set up TanStack Query. - -## See - -https://tanstack.com/query/v5/docs/framework/angular/quick-start - -## Deprecated - -Use `provideTanStackQuery` instead. diff --git a/docs/framework/angular/reference/functions/provideIsRestoring.md b/docs/framework/angular/reference/functions/provideIsRestoring.md deleted file mode 100644 index 2f50bfc2180..00000000000 --- a/docs/framework/angular/reference/functions/provideIsRestoring.md +++ /dev/null @@ -1,30 +0,0 @@ ---- -id: provideIsRestoring -title: provideIsRestoring ---- - - - -```ts -function provideIsRestoring(isRestoring: Signal): Provider; -``` - -Defined in: [packages/angular-query-experimental/src/inject-is-restoring.ts:48](https://github.com/TanStack/query/blob/main/packages/angular-query-experimental/src/inject-is-restoring.ts#L48) - -Registers a provider for the restore state read by `injectIsRestoring`. Wire this up wherever you drive a -restore yourself — e.g. a persist-client integration — so `injectQuery` and friends can defer subscribing -to their observer (avoiding a race with the restore) until the restore signal flips back to `false`. - -## Parameters - -### isRestoring - -`Signal`\<`boolean`\> - -A readonly `Signal` that tracks the restore state. - -## Returns - -`Provider` - -A provider for the `isRestoring` signal. diff --git a/docs/framework/angular/reference/functions/provideQueryClient.md b/docs/framework/angular/reference/functions/provideQueryClient.md deleted file mode 100644 index 3267fda20e3..00000000000 --- a/docs/framework/angular/reference/functions/provideQueryClient.md +++ /dev/null @@ -1,44 +0,0 @@ ---- -id: provideQueryClient -title: provideQueryClient ---- - - - -```ts -function provideQueryClient(queryClient: - | QueryClient - | InjectionToken): Provider; -``` - -Defined in: [packages/angular-query-experimental/src/providers.ts:21](https://github.com/TanStack/query/blob/main/packages/angular-query-experimental/src/providers.ts#L21) - -Usually [provideTanStackQuery](provideTanStackQuery.md) is used once to set up TanStack Query and the -[`QueryClient`](https://tanstack.com/query/latest/docs/reference/QueryClient) for the entire application — -it calls `provideQueryClient` internally. Use `provideQueryClient` directly to provide a different -`QueryClient` instance for part of the application, or for unit testing. - -## Parameters - -### queryClient - - \| [`QueryClient`](../classes/QueryClient.md) - \| `InjectionToken`\<[`QueryClient`](../classes/QueryClient.md)\> - -A `QueryClient` instance, or an `InjectionToken` which provides a `QueryClient`. - -## Returns - -`Provider` - -A provider object that can be used to provide the `QueryClient` instance. - -## Example - -Providing a test-only `QueryClient` in a component test, without wiring up `provideTanStackQuery`'s other -defaults: -```ts -TestBed.configureTestingModule({ - providers: [provideQueryClient(new QueryClient())], -}) -``` diff --git a/docs/framework/angular/reference/functions/provideTanStackQuery.md b/docs/framework/angular/reference/functions/provideTanStackQuery.md index 9fe89fd95f5..cba33a1b29a 100644 --- a/docs/framework/angular/reference/functions/provideTanStackQuery.md +++ b/docs/framework/angular/reference/functions/provideTanStackQuery.md @@ -6,88 +6,64 @@ title: provideTanStackQuery ```ts -function provideTanStackQuery(queryClient: - | QueryClient - | InjectionToken, ...features: QueryFeatures[]): Provider[]; +function provideTanStackQuery(queryClientFactory: () => QueryClient, ...features: readonly QueryFeature[]): EnvironmentProviders; ``` -Defined in: [packages/angular-query-experimental/src/providers.ts:96](https://github.com/TanStack/query/blob/main/packages/angular-query-experimental/src/providers.ts#L96) +Defined in: [packages/angular-query/src/providers.ts:101](https://github.com/TanStack/query/blob/main/packages/angular-query/src/providers.ts#L101) -Sets up providers necessary to enable TanStack Query functionality for Angular applications. Allows -configuring a `QueryClient` and optional features such as developer tools. +Provides a `QueryClient` and optional TanStack Query features. +The factory runs once per injector in Angular's injection context, so it can +call `inject()` and each SSR request can receive an independent cache. ## Parameters -### queryClient +### queryClientFactory - \| [`QueryClient`](../classes/QueryClient.md) - \| `InjectionToken`\<[`QueryClient`](../classes/QueryClient.md)\> +() => [`QueryClient`](../classes/QueryClient.md) -A `QueryClient` instance, or an `InjectionToken` which provides a `QueryClient`. +Creates or resolves a `QueryClient` in the injection context. ### features -...[`QueryFeatures`](../type-aliases/QueryFeatures.md)[] +...readonly [`QueryFeature`](../interfaces/QueryFeature.md)[] Optional features to configure additional Query functionality. ## Returns -`Provider`[] +`EnvironmentProviders` -A set of providers to set up TanStack Query. +A single EnvironmentProviders value (do not spread into `providers`). ## See - https://tanstack.com/query/v5/docs/framework/angular/quick-start - - withDevtools + - https://tanstack.com/query/v5/docs/framework/angular/devtools + - https://tanstack.com/query/latest/docs/framework/angular/guides/ssr -## Examples +## Example -```ts -import { provideTanStackQuery, QueryClient } from '@tanstack/angular-query-experimental' - -bootstrapApplication(AppComponent, { - providers: [provideTanStackQuery(new QueryClient())], -}) -``` - -The same, in an `NgModule`-based application: -```ts -import { provideTanStackQuery, QueryClient } from '@tanstack/angular-query-experimental' - -@NgModule({ - declarations: [AppComponent], - imports: [BrowserModule], - providers: [provideTanStackQuery(new QueryClient())], - bootstrap: [AppComponent], -}) -export class AppModule {} -``` - -Enabling optional developer tools by adding `withDevtools` — by default, the tools are then loaded when -your app is in development mode: ```ts import { provideTanStackQuery, - withDevtools, QueryClient, -} from '@tanstack/angular-query-experimental' +} from '@tanstack/angular-query' bootstrapApplication(AppComponent, { - providers: [provideTanStackQuery(new QueryClient(), withDevtools())], + providers: [provideTanStackQuery(() => new QueryClient())], }) ``` -Using an `InjectionToken` for the `QueryClient` — an advanced optimization that lets TanStack Query be -absent from the main application bundle, useful for including it on lazy-loaded routes only while still -sharing a `QueryClient`. This is a small optimization; for most applications it's preferable to provide -the `QueryClient` in the main application config, as in the examples above: +You can also enable optional developer tools by adding `withDevtools`. By +default the tools will then be loaded when your app is in development mode. + ```ts -export const MY_QUERY_CLIENT = new InjectionToken('', { - factory: () => new QueryClient(), -}) +import { provideTanStackQuery, QueryClient } from '@tanstack/angular-query' +import { withDevtools } from '@tanstack/angular-query-devtools' -// In a lazy loaded route or lazy loaded component's providers array: -providers: [provideTanStackQuery(MY_QUERY_CLIENT)] +bootstrapApplication(AppComponent, { + providers: [ + provideTanStackQuery(() => new QueryClient(), withDevtools()), + ], +}) ``` diff --git a/docs/framework/angular/reference/functions/queryFeature.md b/docs/framework/angular/reference/functions/queryFeature.md deleted file mode 100644 index a34eec7c09b..00000000000 --- a/docs/framework/angular/reference/functions/queryFeature.md +++ /dev/null @@ -1,49 +0,0 @@ ---- -id: queryFeature -title: queryFeature ---- - - - -```ts -function queryFeature(kind: TFeatureKind, providers: Provider[]): QueryFeature; -``` - -Defined in: [packages/angular-query-experimental/src/providers.ts:143](https://github.com/TanStack/query/blob/main/packages/angular-query-experimental/src/providers.ts#L143) - -Helper function to create an object that represents a Query feature. - -## Type Parameters - -### TFeatureKind - -`TFeatureKind` *extends* `"Devtools"` \| `"PersistQueryClient"` - -## Parameters - -### kind - -`TFeatureKind` - -The kind of feature, e.g. `'Devtools'`. - -### providers - -`Provider`[] - -The Angular providers this feature contributes to `provideTanStackQuery`. - -## Returns - -[`QueryFeature`](../interfaces/QueryFeature.md)\<`TFeatureKind`\> - -A Query feature. - - - -### Result properties - -| Property | Type | Description | -| ------ | ------ | ------ | -| `ɵkind` | `TFeatureKind` | The kind of the feature, e.g. `'Devtools'` or `'PersistQueryClient'`. | -| `ɵproviders` | `Provider`[] | The providers that `provideTanStackQuery` registers for the feature. | diff --git a/docs/framework/angular/reference/functions/queryOptions.md b/docs/framework/angular/reference/functions/queryOptions.md index 5eb7abaa74f..4cc9926c654 100644 --- a/docs/framework/angular/reference/functions/queryOptions.md +++ b/docs/framework/angular/reference/functions/queryOptions.md @@ -13,9 +13,9 @@ function queryOptions(options: UndefinedInitialDataOptions): UndefinedInitialDataOptions & QueryKeyWithDataTag; ``` -- [`DefinedInitialDataOptions` → `DefinedInitialDataOptions & QueryKeyWithDataTag`](#call-signature-1): You can generally pass everything to `queryOptions` that you can also pass to `injectQuery`. These options can be shared across functions and imperative APIs such as `queryClient.fetchQuery`. `options.queryKey` is required and is the query key to generate options for. -- [`UnusedSkipTokenOptions` → `UnusedSkipTokenOptions & QueryKeyWithDataTag`](#call-signature-2): You can generally pass everything to `queryOptions` that you can also pass to `injectQuery`. These options can be shared across functions and imperative APIs such as `queryClient.fetchQuery`. `options.queryKey` is required and is the query key to generate options for. -- [`UndefinedInitialDataOptions` → `UndefinedInitialDataOptions & QueryKeyWithDataTag`](#call-signature-3): You can generally pass everything to `queryOptions` that you can also pass to `injectQuery`. These options can be shared across functions and imperative APIs such as `queryClient.fetchQuery`. `options.queryKey` is required and is the query key to generate options for. +- [`DefinedInitialDataOptions` → `DefinedInitialDataOptions & QueryKeyWithDataTag`](#call-signature-1): You can generally pass everything to `queryOptions` that you can also pass to `injectQuery`. These options can be shared across functions and imperative APIs such as `queryClient.query`. `options.queryKey` is required and is the query key to generate options for. +- [`UnusedSkipTokenOptions` → `UnusedSkipTokenOptions & QueryKeyWithDataTag`](#call-signature-2): You can generally pass everything to `queryOptions` that you can also pass to `injectQuery`. These options can be shared across functions and imperative APIs such as `queryClient.query`. `options.queryKey` is required and is the query key to generate options for. +- [`UndefinedInitialDataOptions` → `UndefinedInitialDataOptions & QueryKeyWithDataTag`](#call-signature-3): You can generally pass everything to `queryOptions` that you can also pass to `injectQuery`. These options can be shared across functions and imperative APIs such as `queryClient.query`. `options.queryKey` is required and is the query key to generate options for. See also: [Parameters](#parameters-summary) · [Returns](#returns-summary) @@ -27,10 +27,10 @@ See also: [Parameters](#parameters-summary) · [Returns](#returns-summary) function queryOptions(options: DefinedInitialDataOptions): DefinedInitialDataOptions & QueryKeyWithDataTag; ``` -Defined in: [packages/angular-query-experimental/src/query-options.ts:149](https://github.com/TanStack/query/blob/main/packages/angular-query-experimental/src/query-options.ts#L149) +Defined in: [packages/angular-query/src/query-options.ts:132](https://github.com/TanStack/query/blob/main/packages/angular-query/src/query-options.ts#L132) You can generally pass everything to `queryOptions` that you can also pass to `injectQuery`. These options -can be shared across functions and imperative APIs such as `queryClient.fetchQuery`. `options.queryKey` is +can be shared across functions and imperative APIs such as `queryClient.query`. `options.queryKey` is required and is the query key to generate options for. This overload is selected when `initialData` is known to be defined, so the resulting `data` is never @@ -77,7 +77,7 @@ The same options object, typed so that `queryKey` carries the inferred data type ### Example ```angular-ts -import { queryOptions, injectQuery } from '@tanstack/angular-query-experimental' +import { queryOptions, injectQuery } from '@tanstack/angular-query' export const postsOptions = queryOptions({ queryKey: ['posts'], @@ -113,10 +113,10 @@ export class Posts { function queryOptions(options: UnusedSkipTokenOptions): UnusedSkipTokenOptions & QueryKeyWithDataTag; ``` -Defined in: [packages/angular-query-experimental/src/query-options.ts:196](https://github.com/TanStack/query/blob/main/packages/angular-query-experimental/src/query-options.ts#L196) +Defined in: [packages/angular-query/src/query-options.ts:179](https://github.com/TanStack/query/blob/main/packages/angular-query/src/query-options.ts#L179) You can generally pass everything to `queryOptions` that you can also pass to `injectQuery`. These options -can be shared across functions and imperative APIs such as `queryClient.fetchQuery`. `options.queryKey` is +can be shared across functions and imperative APIs such as `queryClient.query`. `options.queryKey` is required and is the query key to generate options for. ### Type Parameters @@ -160,7 +160,7 @@ The same options object, typed so that `queryKey` carries the inferred data type A parameterized factory, so the same options object can be reused per `id`: ```angular-ts -import { queryOptions, injectQuery } from '@tanstack/angular-query-experimental' +import { queryOptions, injectQuery } from '@tanstack/angular-query' export const postOptions = (id: string) => queryOptions({ @@ -194,10 +194,10 @@ export class Post { function queryOptions(options: UndefinedInitialDataOptions): UndefinedInitialDataOptions & QueryKeyWithDataTag; ``` -Defined in: [packages/angular-query-experimental/src/query-options.ts:274](https://github.com/TanStack/query/blob/main/packages/angular-query-experimental/src/query-options.ts#L274) +Defined in: [packages/angular-query/src/query-options.ts:257](https://github.com/TanStack/query/blob/main/packages/angular-query/src/query-options.ts#L257) You can generally pass everything to `queryOptions` that you can also pass to `injectQuery`. These options -can be shared across functions and imperative APIs such as `queryClient.fetchQuery`. `options.queryKey` is +can be shared across functions and imperative APIs such as `queryClient.query`. `options.queryKey` is required and is the query key to generate options for. ### Type Parameters @@ -245,7 +245,7 @@ This is the only overload that accepts `queryFn: skipToken`, shown below. A parameterized factory, so the same options object can be reused per `id`: ```angular-ts -import { queryOptions, injectQuery } from '@tanstack/angular-query-experimental' +import { queryOptions, injectQuery } from '@tanstack/angular-query' export const postOptions = (id: string) => queryOptions({ @@ -273,7 +273,7 @@ export class Post { A factory that disables the query, type safe, until `postId` is set: ```angular-ts -import { queryOptions, skipToken, injectQuery } from '@tanstack/angular-query-experimental' +import { queryOptions, skipToken, injectQuery } from '@tanstack/angular-query' export const postOptions = (postId: number | undefined) => queryOptions({ @@ -315,7 +315,7 @@ The [UndefinedInitialDataOptions](../type-aliases/UndefinedInitialDataOptions.md #### `options` properties -Built from [`CreateQueryOptions`](../interfaces/CreateQueryOptions.md#properties). See the type above for what it changes. +Built from [`QueryObserverOptions`](../interfaces/QueryObserverOptions.md#properties). See the type above for what it changes. @@ -329,4 +329,4 @@ The same options object, typed so that `queryKey` carries the inferred data type ### Result properties -Built from [`CreateQueryOptions`](../interfaces/CreateQueryOptions.md#properties), [`QueryKeyWithDataTag`](../type-aliases/QueryKeyWithDataTag.md#properties). See the type above for what it changes. +Built from [`QueryObserverOptions`](../interfaces/QueryObserverOptions.md#properties), [`QueryKeyWithDataTag`](../type-aliases/QueryKeyWithDataTag.md#properties). See the type above for what it changes. diff --git a/docs/framework/angular/reference/functions/toResource.md b/docs/framework/angular/reference/functions/toResource.md new file mode 100644 index 00000000000..20cd4c44c58 --- /dev/null +++ b/docs/framework/angular/reference/functions/toResource.md @@ -0,0 +1,48 @@ +--- +id: toResource +title: toResource +--- + + + +```ts +function toResource(query: QueryResourceSource): QueryResource; +``` + +Defined in: [packages/angular-query/src/query-resource.ts:44](https://github.com/TanStack/query/blob/main/packages/angular-query/src/query-resource.ts#L44) + +Converts an Angular Query result into Angular's Resource interface. + +Warning: experimental feature. The API may change in minor and patch releases. +Pin your package version to an exact version when using this feature. + +Call this function once and reuse the returned resource. + +## Type Parameters + +### TValue + +`TValue` + +## Parameters + +### query + +`QueryResourceSource`\<`TValue`\> + +An Angular Query or infinite-query result. + +## Returns + +[`QueryResource`](../interfaces/QueryResource.md)\<`TValue`\> + +A Resource-compatible view of the query result. + + + +### Result properties + +| Property | Modifier | Type | Description | Overrides | +| ------ | ------ | ------ | ------ | ------ | +| `reload` | `public` | () => `boolean` | Requests a new query fetch only when the current query data is stale. Used for compatibility with Angular APIs that might want to reload a resource, like Signal Forms' validateAsync resource interface. | - | +| `snapshot` | `readonly` | `Signal`\<`ResourceSnapshot`\<`TValue`\>\> | The current query state as a single snapshot. | `Resource.snapshot` | diff --git a/docs/framework/angular/reference/functions/withHydrationKey.md b/docs/framework/angular/reference/functions/withHydrationKey.md new file mode 100644 index 00000000000..e93e4236d5c --- /dev/null +++ b/docs/framework/angular/reference/functions/withHydrationKey.md @@ -0,0 +1,39 @@ +--- +id: withHydrationKey +title: withHydrationKey +--- + + + +```ts +function withHydrationKey(key: string): QueryFeature; +``` + +Defined in: [packages/angular-query/src/providers.ts:173](https://github.com/TanStack/query/blob/main/packages/angular-query/src/providers.ts#L173) + +Sets a non-default serialization key for this injector's `QueryClient` cache (server dehydrate / +browser hydrate via `TransferState`). Use this when you have multiple `QueryClient` instances +so each has its own key. The default key applies when you do not add this feature. + +```ts +providers: [ + provideTanStackQuery( + () => new QueryClient(), + withHydrationKey('my-secondary-query-cache'), + ), +] +``` + +## Parameters + +### key + +`string` + +A unique string for this client's `TransferState` entry. + +## Returns + +[`QueryFeature`](../interfaces/QueryFeature.md) + +A feature that stores this client's cache under the supplied key. diff --git a/docs/framework/angular/reference/functions/withNoQueryHydration.md b/docs/framework/angular/reference/functions/withNoQueryHydration.md new file mode 100644 index 00000000000..19db03d0ba1 --- /dev/null +++ b/docs/framework/angular/reference/functions/withNoQueryHydration.md @@ -0,0 +1,20 @@ +--- +id: withNoQueryHydration +title: withNoQueryHydration +--- + + + +```ts +function withNoQueryHydration(): QueryFeature; +``` + +Defined in: [packages/angular-query/src/providers.ts:188](https://github.com/TanStack/query/blob/main/packages/angular-query/src/providers.ts#L188) + +Disables `TransferState` hydration and dehydration for the current environment injector. + +## Returns + +[`QueryFeature`](../interfaces/QueryFeature.md) + +A feature that prevents automatic cache transfer for this injector. diff --git a/docs/framework/angular/reference/index.md b/docs/framework/angular/reference/index.md index c1414521479..4625e0f7a52 100644 --- a/docs/framework/angular/reference/index.md +++ b/docs/framework/angular/reference/index.md @@ -1,6 +1,6 @@ --- -id: "@tanstack/angular-query-experimental" -title: "@tanstack/angular-query-experimental" +id: "@tanstack/angular-query" +title: "@tanstack/angular-query" --- @@ -20,14 +20,15 @@ title: "@tanstack/angular-query-experimental" ## Interfaces +- [BaseInfiniteQueryNarrowing](interfaces/BaseInfiniteQueryNarrowing.md) - [BaseMutationNarrowing](interfaces/BaseMutationNarrowing.md) - [BaseQueryNarrowing](interfaces/BaseQueryNarrowing.md) - [CancelOptions](interfaces/CancelOptions.md) -- [CreateBaseQueryOptions](interfaces/CreateBaseQueryOptions.md) - [CreateInfiniteQueryOptions](interfaces/CreateInfiniteQueryOptions.md) - [CreateMutationOptions](interfaces/CreateMutationOptions.md) -- [CreateQueryOptions](interfaces/CreateQueryOptions.md) - [DefaultOptions](interfaces/DefaultOptions.md) +- [DefinedInfiniteQueryNarrowing](interfaces/DefinedInfiniteQueryNarrowing.md) +- [DefinedQueryNarrowing](interfaces/DefinedQueryNarrowing.md) - [DehydratedState](interfaces/DehydratedState.md) - [DehydrateOptions](interfaces/DehydrateOptions.md) - [~~EnsureQueryDataOptions~~](interfaces/EnsureQueryDataOptions.md) @@ -47,12 +48,7 @@ title: "@tanstack/angular-query-experimental" - [InfiniteQueryObserverSuccessResult](interfaces/InfiniteQueryObserverSuccessResult.md) - [InfiniteQueryPageParamsOptions](interfaces/InfiniteQueryPageParamsOptions.md) - [InitialPageParam](interfaces/InitialPageParam.md) -- [InjectInfiniteQueryOptions](interfaces/InjectInfiniteQueryOptions.md) -- [InjectIsFetchingOptions](interfaces/InjectIsFetchingOptions.md) -- [InjectIsMutatingOptions](interfaces/InjectIsMutatingOptions.md) -- [InjectMutationOptions](interfaces/InjectMutationOptions.md) -- [InjectMutationStateOptions](interfaces/InjectMutationStateOptions.md) -- [InjectQueryOptions](interfaces/InjectQueryOptions.md) +- [InjectQueriesOptions](interfaces/InjectQueriesOptions.md) - [InvalidateOptions](interfaces/InvalidateOptions.md) - [InvalidateQueryFilters](interfaces/InvalidateQueryFilters.md) - [MutateOptions](interfaces/MutateOptions.md) @@ -83,6 +79,7 @@ title: "@tanstack/angular-query-experimental" - [QueryObserverRefetchErrorResult](interfaces/QueryObserverRefetchErrorResult.md) - [QueryObserverSuccessResult](interfaces/QueryObserverSuccessResult.md) - [QueryOptions](interfaces/QueryOptions.md) +- [QueryResource](interfaces/QueryResource.md) - [QueryState](interfaces/QueryState.md) - [RefetchOptions](interfaces/RefetchOptions.md) - [RefetchQueryFilters](interfaces/RefetchQueryFilters.md) @@ -101,6 +98,7 @@ title: "@tanstack/angular-query-experimental" - [CreateMutateAsyncFunction](type-aliases/CreateMutateAsyncFunction.md) - [CreateMutateFunction](type-aliases/CreateMutateFunction.md) - [CreateMutationResult](type-aliases/CreateMutationResult.md) +- [CreateQueryOptions](type-aliases/CreateQueryOptions.md) - [CreateQueryResult](type-aliases/CreateQueryResult.md) - [DataTag](type-aliases/DataTag.md) - [dataTagErrorSymbol](type-aliases/dataTagErrorSymbol.md) @@ -114,7 +112,6 @@ title: "@tanstack/angular-query-experimental" - [DefinedInitialDataInfiniteOptions](type-aliases/DefinedInitialDataInfiniteOptions.md) - [DefinedInitialDataOptions](type-aliases/DefinedInitialDataOptions.md) - [DefinedQueryObserverResult](type-aliases/DefinedQueryObserverResult.md) -- [DevtoolsFeature](type-aliases/DevtoolsFeature.md) - [DistributiveOmit](type-aliases/DistributiveOmit.md) - [~~EnsureInfiniteQueryDataOptions~~](type-aliases/EnsureInfiniteQueryDataOptions.md) - [~~FetchInfiniteQueryOptions~~](type-aliases/FetchInfiniteQueryOptions.md) @@ -136,6 +133,7 @@ title: "@tanstack/angular-query-experimental" - [MutationMeta](type-aliases/MutationMeta.md) - [MutationObserverResult](type-aliases/MutationObserverResult.md) - [MutationScope](type-aliases/MutationScope.md) +- [MutationStateOptions](type-aliases/MutationStateOptions.md) - [MutationStatus](type-aliases/MutationStatus.md) - [NetworkMode](type-aliases/NetworkMode.md) - [NonUndefinedGuard](type-aliases/NonUndefinedGuard.md) @@ -143,14 +141,12 @@ title: "@tanstack/angular-query-experimental" - [NotifyOnChangeProps](type-aliases/NotifyOnChangeProps.md) - [OmitKeyof](type-aliases/OmitKeyof.md) - [Override](type-aliases/Override.md) -- [PersistQueryClientFeature](type-aliases/PersistQueryClientFeature.md) - [PlaceholderDataFunction](type-aliases/PlaceholderDataFunction.md) - [QueriesOptions](type-aliases/QueriesOptions.md) - [QueriesPlaceholderDataFunction](type-aliases/QueriesPlaceholderDataFunction.md) - [QueriesResults](type-aliases/QueriesResults.md) - [QueryBooleanOption](type-aliases/QueryBooleanOption.md) - [QueryCacheNotifyEvent](type-aliases/QueryCacheNotifyEvent.md) -- [QueryFeatures](type-aliases/QueryFeatures.md) - [QueryFunction](type-aliases/QueryFunction.md) - [QueryFunctionContext](type-aliases/QueryFunctionContext.md) - [QueryKey](type-aliases/QueryKey.md) @@ -204,8 +200,8 @@ title: "@tanstack/angular-query-experimental" - [injectIsRestoring](functions/injectIsRestoring.md) - [injectMutation](functions/injectMutation.md) - [injectMutationState](functions/injectMutationState.md) +- [injectQueries](functions/injectQueries.md) - [injectQuery](functions/injectQuery.md) -- [~~injectQueryClient~~](functions/injectQueryClient.md) - [~~isCancelledError~~](functions/isCancelledError.md) - [keepPreviousData](functions/keepPreviousData.md) - [matchMutation](functions/matchMutation.md) @@ -213,11 +209,10 @@ title: "@tanstack/angular-query-experimental" - [mutationOptions](functions/mutationOptions.md) - [noop](functions/noop.md) - [partialMatchKey](functions/partialMatchKey.md) -- [~~provideAngularQuery~~](functions/provideAngularQuery.md) -- [provideIsRestoring](functions/provideIsRestoring.md) -- [provideQueryClient](functions/provideQueryClient.md) - [provideTanStackQuery](functions/provideTanStackQuery.md) -- [queryFeature](functions/queryFeature.md) - [queryOptions](functions/queryOptions.md) - [replaceEqualDeep](functions/replaceEqualDeep.md) - [shouldThrowError](functions/shouldThrowError.md) +- [toResource](functions/toResource.md) +- [withHydrationKey](functions/withHydrationKey.md) +- [withNoQueryHydration](functions/withNoQueryHydration.md) diff --git a/docs/framework/angular/reference/interfaces/BaseInfiniteQueryNarrowing.md b/docs/framework/angular/reference/interfaces/BaseInfiniteQueryNarrowing.md new file mode 100644 index 00000000000..99e74d7dd94 --- /dev/null +++ b/docs/framework/angular/reference/interfaces/BaseInfiniteQueryNarrowing.md @@ -0,0 +1,28 @@ +--- +id: BaseInfiniteQueryNarrowing +title: BaseInfiniteQueryNarrowing +--- + + + +Defined in: [packages/angular-query/src/types.ts:138](https://github.com/TanStack/query/blob/main/packages/angular-query/src/types.ts#L138) + +Signal-backed guards that narrow a paginated query result by its current status. + +## Type Parameters + +### TData + +`TData` = `unknown` + +### TError + +`TError` = [`DefaultError`](../type-aliases/DefaultError.md) + +## Properties + +| Property | Type | Description | +| ------ | ------ | ------ | +| `isError` | `SignalFunction`\<(`this`: [`CreateInfiniteQueryResult`](../type-aliases/CreateInfiniteQueryResult.md)\<`TData`, `TError`\>) => `this is CreateInfiniteQueryResult>`\> | Returns whether the result failed and narrows its data and error signals. | +| `isPending` | `SignalFunction`\<(`this`: [`CreateInfiniteQueryResult`](../type-aliases/CreateInfiniteQueryResult.md)\<`TData`, `TError`\>) => `this is CreateInfiniteQueryResult>`\> | Narrows the result to the pending state when that state is possible. | +| `isSuccess` | `SignalFunction`\<(`this`: [`CreateInfiniteQueryResult`](../type-aliases/CreateInfiniteQueryResult.md)\<`TData`, `TError`\>) => `this is CreateInfiniteQueryResult>`\> | Returns whether the result is successful and narrows its data and error signals. | diff --git a/docs/framework/angular/reference/interfaces/BaseMutationNarrowing.md b/docs/framework/angular/reference/interfaces/BaseMutationNarrowing.md index be469b2106d..81d6573be7e 100644 --- a/docs/framework/angular/reference/interfaces/BaseMutationNarrowing.md +++ b/docs/framework/angular/reference/interfaces/BaseMutationNarrowing.md @@ -5,11 +5,9 @@ title: BaseMutationNarrowing -Defined in: [packages/angular-query-experimental/src/types.ts:324](https://github.com/TanStack/query/blob/main/packages/angular-query-experimental/src/types.ts#L324) +Defined in: [packages/angular-query/src/types.ts:423](https://github.com/TanStack/query/blob/main/packages/angular-query/src/types.ts#L423) -The `isSuccess`/`isError`/`isPending`/`isIdle` methods on a mutation result. Each is both a `Signal` -(its current boolean value is read reactively without calling it) and a type-guard function you can -call — `if (mutation.isSuccess())` — so that `mutation.data` narrows away `undefined` inside the branch. +Signal-backed guards that narrow mutation data, errors, and variables by the current status. ## Type Parameters @@ -17,27 +15,18 @@ call — `if (mutation.isSuccess())` — so that `mutation.data` narrows away `u `TData` = `unknown` -The type your mutation function resolves to. - ### TError `TError` = [`DefaultError`](../type-aliases/DefaultError.md) -The type of errors your mutation function may throw. - ### TVariables `TVariables` = `unknown` -The type of the variable passed to `mutate`/`mutateAsync`. - ### TOnMutateResult `TOnMutateResult` = `unknown` -The type returned by `onMutate`, passed to `onSuccess`/`onError`/`onSettled` as -their `onMutateResult` parameter — useful for optimistic-update rollback data. - ## Properties | Property | Type | Description | diff --git a/docs/framework/angular/reference/interfaces/BaseQueryNarrowing.md b/docs/framework/angular/reference/interfaces/BaseQueryNarrowing.md index b0043d4e127..b7d8bda7471 100644 --- a/docs/framework/angular/reference/interfaces/BaseQueryNarrowing.md +++ b/docs/framework/angular/reference/interfaces/BaseQueryNarrowing.md @@ -5,12 +5,9 @@ title: BaseQueryNarrowing -Defined in: [packages/angular-query-experimental/src/types.ts:80](https://github.com/TanStack/query/blob/main/packages/angular-query-experimental/src/types.ts#L80) +Defined in: [packages/angular-query/src/types.ts:72](https://github.com/TanStack/query/blob/main/packages/angular-query/src/types.ts#L72) -The `isSuccess`/`isError`/`isPending` methods on a query result. Unlike `react-query`'s derived booleans, -these are type-guard methods you call — `if (query.isSuccess())` — so that `query.data` narrows away -`undefined` inside the branch, the same way `status` narrowing works on the plain object `react-query` -returns. +Signal-backed guards that narrow a query result and its data and error fields by status. ## Type Parameters @@ -18,18 +15,14 @@ returns. `TData` = `unknown` -The type `data` ends up as after `select` runs. - ### TError `TError` = [`DefaultError`](../type-aliases/DefaultError.md) -The type of errors your `queryFn` may throw. - ## Properties | Property | Type | Description | | ------ | ------ | ------ | -| `isError` | (`this`: [`CreateBaseQueryResult`](../type-aliases/CreateBaseQueryResult.md)\<`TData`, `TError`\>) => `this is CreateBaseQueryResult>` | Returns `true` if the query is in the `error` state, narrowing the result to that state. | -| `isPending` | (`this`: [`CreateBaseQueryResult`](../type-aliases/CreateBaseQueryResult.md)\<`TData`, `TError`\>) => `this is CreateBaseQueryResult>` | Returns `true` if the query is in the `pending` state, narrowing the result to that state. | -| `isSuccess` | (`this`: [`CreateBaseQueryResult`](../type-aliases/CreateBaseQueryResult.md)\<`TData`, `TError`\>) => `this is CreateBaseQueryResult>` | Returns `true` if the query is in the `success` state, narrowing the result to that state. | +| `isError` | `SignalFunction`\<() => `this is CreateBaseQueryResult>`\> | Returns whether the result failed and narrows its data and error signals. | +| `isPending` | `SignalFunction`\<() => `this is CreateBaseQueryResult>`\> | Narrows the result to the pending state when that state is possible. | +| `isSuccess` | `SignalFunction`\<() => `this is CreateBaseQueryResult>`\> | Returns whether the result is successful and narrows its data and error signals. | diff --git a/docs/framework/angular/reference/interfaces/CreateBaseQueryOptions.md b/docs/framework/angular/reference/interfaces/CreateBaseQueryOptions.md deleted file mode 100644 index 2f4c9f4fa8b..00000000000 --- a/docs/framework/angular/reference/interfaces/CreateBaseQueryOptions.md +++ /dev/null @@ -1,82 +0,0 @@ ---- -id: CreateBaseQueryOptions -title: CreateBaseQueryOptions ---- - - - -Defined in: [packages/angular-query-experimental/src/types.ts:33](https://github.com/TanStack/query/blob/main/packages/angular-query-experimental/src/types.ts#L33) - -The options shared across `angular-query-experimental`'s query functions. Extends -[QueryObserverOptions](QueryObserverOptions.md) from `@tanstack/query-core` as-is — unlike `react-query`, -`angular-query-experimental` has no extra framework-specific option here. - -## Extends - -- [`QueryObserverOptions`](QueryObserverOptions.md)\<`TQueryFnData`, `TError`, `TData`, `TQueryData`, `TQueryKey`\> - -## Type Parameters - -### TQueryFnData - -`TQueryFnData` = `unknown` - -The type your `queryFn` resolves to. - -### TError - -`TError` = [`DefaultError`](../type-aliases/DefaultError.md) - -The type of errors your `queryFn` may throw. - -### TData - -`TData` = `TQueryFnData` - -The type `data` ends up as after `select` runs. Defaults to `TQueryFnData` when no -`select` is used. - -### TQueryData - -`TQueryData` = `TQueryFnData` - -The type of the data actually held in the query cache — the input to `select` and -`placeholderData`. Defaults to, and is usually the same as, `TQueryFnData`. - -### TQueryKey - -`TQueryKey` *extends* [`QueryKey`](../type-aliases/QueryKey.md) = [`QueryKey`](../type-aliases/QueryKey.md) - -The type of your `queryKey`. - -## Properties - -| Property | Type | Default value | Description | -| ------ | ------ | ------ | ------ | -| `enabled?` | \| `false` \| `true` \| ((`query`: [`Query`](../classes/Query.md)\<`TQueryFnData`, `TError`, `TQueryData`, `TQueryKey`\>) => `boolean`) | `true` | Set this to `false` or a function that returns `false` to disable automatic refetching when the query mounts or changes query keys. To refetch the query, use the `refetch` method returned from the `useQuery` instance. Accepts a boolean or function that returns a boolean. | -| `gcTime?` | `number` | `undefined` | The time in milliseconds that unused/inactive cache data remains in memory. When a query's cache becomes unused or inactive, that cache data will be garbage collected after this duration. When different garbage collection times are specified, the longest one will be used. Setting it to `Infinity` will disable garbage collection. Defaults to `5 * 60 * 1000` (5 minutes), or `Infinity` during SSR. Note: the maximum allowed time is about 24 days, imposed by `setTimeout`'s 32-bit signed integer delay — see `timeoutManager.setTimeoutProvider` for a workaround. | -| `initialData?` | `TQueryData` \| (() => `TQueryData` \| `undefined`) | `undefined` | If set, this value will be used as the initial data for the query cache (as long as the query hasn't been created or cached yet). If set to a function, the function will be called **once** during the shared/root query initialization, and be expected to synchronously return the initial data. Initial data is considered stale by default unless a `staleTime` has been set. `initialData` **is persisted** to the cache. | -| `initialDataUpdatedAt?` | `number` \| (() => `number` \| `undefined`) | `undefined` | If set, this value will be used as the time (in milliseconds) of when the `initialData` itself was last updated. | -| `maxPages?` | `number` | `undefined` | Maximum number of pages to store in the data of an infinite query. | -| `meta?` | `Record`\<`string`, `unknown`\> | `undefined` | Additional payload to be stored on each query. Use this property to pass information that can be used in other places. | -| `networkMode?` | `"online"` \| `"always"` \| `"offlineFirst"` | `'online'` | Controls whether a query is allowed to run based on the current network connectivity. **See** [Network Mode](https://tanstack.com/query/latest/docs/framework/react/guides/network-mode) for more information. | -| `notifyOnChangeProps?` | \| ( \| `"error"` \| `"data"` \| `"isError"` \| `"isPending"` \| `"isLoading"` \| `"isLoadingError"` \| `"isRefetchError"` \| `"isSuccess"` \| `"isPlaceholderData"` \| `"status"` \| `"dataUpdatedAt"` \| `"errorUpdatedAt"` \| `"failureCount"` \| `"failureReason"` \| `"errorUpdateCount"` \| `"isFetched"` \| `"isFetchedAfterMount"` \| `"isFetching"` \| `"isInitialLoading"` \| `"isPaused"` \| `"isRefetching"` \| `"isStale"` \| `"isEnabled"` \| `"refetch"` \| `"fetchStatus"` \| `"fetchNextPage"` \| `"fetchPreviousPage"` \| `"hasNextPage"` \| `"hasPreviousPage"` \| `"isFetchNextPageError"` \| `"isFetchingNextPage"` \| `"isFetchPreviousPageError"` \| `"isFetchingPreviousPage"`)[] \| `"all"` \| (() => \| `"all"` \| ( \| `"error"` \| `"data"` \| `"isError"` \| `"isPending"` \| `"isLoading"` \| `"isLoadingError"` \| `"isRefetchError"` \| `"isSuccess"` \| `"isPlaceholderData"` \| `"status"` \| `"dataUpdatedAt"` \| `"errorUpdatedAt"` \| `"failureCount"` \| `"failureReason"` \| `"errorUpdateCount"` \| `"isFetched"` \| `"isFetchedAfterMount"` \| `"isFetching"` \| `"isInitialLoading"` \| `"isPaused"` \| `"isRefetching"` \| `"isStale"` \| `"isEnabled"` \| `"refetch"` \| `"fetchStatus"` \| `"fetchNextPage"` \| `"fetchPreviousPage"` \| `"hasNextPage"` \| `"hasPreviousPage"` \| `"isFetchNextPageError"` \| `"isFetchingNextPage"` \| `"isFetchPreviousPageError"` \| `"isFetchingPreviousPage"`)[] \| `undefined`) | `undefined` | If set, the component will only re-render if any of the listed properties change. When set to `['data', 'error']`, the component will only re-render when the `data` or `error` properties change. When set to `'all'`, the component will re-render whenever a query is updated. When set to a function, the function will be executed to compute the list of properties. Defaults to `undefined`, in which case property access is tracked automatically, and the component only re-renders when one of the tracked properties changes. | -| `persister?` | (`queryFn`: (`context`: `object`) => `TQueryFnData` \| `Promise`\<`TQueryFnData`\>, `context`: `object`, `query`: [`Query`](../classes/Query.md)) => `TQueryFnData` \| `Promise`\<`TQueryFnData`\> | `undefined` | This option can be used to persist the result of a query to an external storage, bypassing the need to actually call the `queryFn`. Useful for persisting a query's data across e.g. server/client boundaries. | -| `placeholderData?` | \| `NonFunctionGuard`\<`TQueryData`\> \| ((`previousData`: `NonFunctionGuard`\<`TQueryData`\> \| `undefined`, `previousQuery`: \| [`Query`](../classes/Query.md)\<`NonFunctionGuard`\<`TQueryData`\>, `TError`, `NonFunctionGuard`\<`TQueryData`\>, `TQueryKey`\> \| `undefined`) => `NonFunctionGuard`\<`TQueryData`\> \| `undefined`) | `undefined` | If set, this value will be used as the placeholder data for this particular query observer while the query is still in the `loading` data and no initialData has been provided. | -| `queryFn?` | \| *typeof* [`skipToken`](../variables/skipToken.md) \| ((`context`: `object`) => `TQueryFnData` \| `Promise`\<`TQueryFnData`\>) | `undefined` | The function that the query will use to request data. Required, unless a default query function has been set via `queryClient.setQueryDefaults` or `queryClient.setDefaultOptions`. Receives a [QueryFunctionContext](../type-aliases/QueryFunctionContext.md). Must return a promise that will either resolve data or throw an error. The data cannot be `undefined`. | -| `queryHash?` | `string` | `undefined` | The hashed form of `queryKey`, computed with `queryKeyHashFn` (or the default hashing function otherwise). Used as the actual cache key internally. | -| `queryKey` | `TQueryKey` & `object` | `undefined` | The query key to use for this query. The query key will be hashed into a stable hash. See [Query Keys](https://tanstack.com/query/latest/docs/framework/react/guides/query-keys) for more information. The query will automatically update when this key changes (as long as `enabled` is not set to `false`). | -| `queryKeyHashFn?` | (`queryKey`: `TQueryKey`) => `string` | `undefined` | If specified, this function is used to hash the `queryKey` to a string. | -| `refetchInterval?` | \| `number` \| `false` \| ((`query`: [`Query`](../classes/Query.md)\<`TQueryFnData`, `TError`, `TQueryData`, `TQueryKey`\>) => `number` \| `false` \| `undefined`) | `false` | If set to a number, the query will continuously refetch at this frequency in milliseconds. If set to a function, the function will be executed with the latest data and query to compute a frequency | -| `refetchIntervalInBackground?` | `boolean` | `false` | If set to `true`, the query will continue to refetch while their tab/window is in the background. | -| `refetchOnMount?` | \| `boolean` \| `"always"` \| ((`query`: [`Query`](../classes/Query.md)\<`TQueryFnData`, `TError`, `TQueryData`, `TQueryKey`\>) => `boolean` \| `"always"`) | `true` | If set to `true`, the query will refetch on mount if the data is stale. If set to `false`, will disable additional instances of a query to trigger background refetch. If set to `'always'`, the query will always refetch on mount (except when `staleTime: 'static'` is used). If set to a function, the function will be executed with the latest data and query to compute the value | -| `refetchOnReconnect?` | \| `boolean` \| `"always"` \| ((`query`: [`Query`](../classes/Query.md)\<`TQueryFnData`, `TError`, `TQueryData`, `TQueryKey`\>) => `boolean` \| `"always"`) | `undefined` | If set to `true`, the query will refetch on reconnect if the data is stale. If set to `false`, the query will not refetch on reconnect. If set to `'always'`, the query will always refetch on reconnect (except when `staleTime: 'static'` is used). If set to a function, the function will be executed with the latest data and query to compute the value. Defaults to `true` unless `networkMode` is `'always'`. | -| `refetchOnWindowFocus?` | \| `boolean` \| `"always"` \| ((`query`: [`Query`](../classes/Query.md)\<`TQueryFnData`, `TError`, `TQueryData`, `TQueryKey`\>) => `boolean` \| `"always"`) | `true` | If set to `true`, the query will refetch on window focus if the data is stale. If set to `false`, the query will not refetch on window focus. If set to `'always'`, the query will always refetch on window focus (except when `staleTime: 'static'` is used). If set to a function, the function will be executed with the latest data and query to compute the value. | -| `retry?` | \| `number` \| `false` \| `true` \| ((`failureCount`: `number`, `error`: `TError`) => `boolean`) | `undefined` | If `false`, failed queries will not retry by default. If `true`, failed queries will retry infinitely. If set to an integer number, e.g. 3, failed queries will retry until the failed query count meets that number. If set to a function `(failureCount, error) => boolean` failed queries will retry until the function returns false. Defaults to `3` on the client and `0` on the server. | -| `retryDelay?` | `number` \| ((`failureCount`: `number`, `error`: `TError`) => `number`) | `undefined` | This function receives a `retryAttempt` integer and the actual Error and returns the delay to apply before the next attempt in milliseconds. A function like `attempt => Math.min(attempt > 1 ? 2 ** attempt * 1000 : 1000, 30 * 1000)` applies exponential backoff. A function like `attempt => attempt * 1000` applies linear backoff. Defaults to a function that applies exponential backoff, capped at 30 seconds. | -| `retryOnMount?` | \| `false` \| `true` \| ((`query`: [`Query`](../classes/Query.md)\<`TQueryFnData`, `TError`, `TQueryData`, `TQueryKey`\>) => `boolean`) | `true` | If set to `false`, the query will not be retried on mount if it contains an error. If set to a function, the function will be executed with the query to compute the value. | -| `select?` | (`data`: `TQueryData`) => `TData` | `undefined` | This option can be used to transform or select a part of the data returned by the query function. It affects the returned `data` value, but does not affect what gets stored in the query cache. The `select` function will only run if `data` changed, or if the reference to the `select` function itself changes. To optimize, memoize the function so its reference stays stable across calls. | -| `staleTime?` | \| `number` \| `"static"` \| ((`query`: [`Query`](../classes/Query.md)\<`TQueryFnData`, `TError`, `TQueryData`, `TQueryKey`\>) => `number` \| `"static"`) | `0` | The time in milliseconds after data is considered stale. If set to `Infinity`, the data will never be considered stale. If set to `'static'`, the data will never be considered stale. If set to a function, the function will be executed with the query to compute a `staleTime`. | -| `structuralSharing?` | `boolean` \| ((`oldData`: `unknown`, `newData`: `unknown`) => `unknown`) | `true` | Set this to `false` to disable structural sharing between query results. Set this to a function which accepts the old and new data and returns resolved data of the same type to implement custom structural sharing logic. | -| `suspense?` | `boolean` | `false` | If set to `true`, the query will suspend when `status === 'pending'` and throw errors when `status === 'error'`. | -| `throwOnError?` | \| `false` \| `true` \| ((`error`: `TError`, `query`: [`Query`](../classes/Query.md)\<`TQueryFnData`, `TError`, `TQueryData`, `TQueryKey`\>) => `boolean`) | `false` | Whether errors should be thrown instead of setting the `error` property. If set to `true` or `suspense` is `true`, all errors will be thrown to the error boundary. If set to `false` and `suspense` is `false`, errors are returned as state. If set to a function, it will be passed the error and the query, and it should return a boolean indicating whether to show the error in an error boundary (`true`) or return the error as state (`false`). | diff --git a/docs/framework/angular/reference/interfaces/CreateInfiniteQueryOptions.md b/docs/framework/angular/reference/interfaces/CreateInfiniteQueryOptions.md index ade6e903b34..3b903bae81d 100644 --- a/docs/framework/angular/reference/interfaces/CreateInfiniteQueryOptions.md +++ b/docs/framework/angular/reference/interfaces/CreateInfiniteQueryOptions.md @@ -5,16 +5,13 @@ title: CreateInfiniteQueryOptions -Defined in: [packages/angular-query-experimental/src/types.ts:126](https://github.com/TanStack/query/blob/main/packages/angular-query-experimental/src/types.ts#L126) +Defined in: [packages/angular-query/src/types.ts:222](https://github.com/TanStack/query/blob/main/packages/angular-query/src/types.ts#L222) -The options accepted by `injectInfiniteQuery`. Same as [CreateBaseQueryOptions](CreateBaseQueryOptions.md), minus `suspense` — -which `angular-query-experimental` doesn't support, unlike `react-query` — extends -[InfiniteQueryObserverOptions](InfiniteQueryObserverOptions.md) from `@tanstack/query-core` for the infinite-query-specific options -(`getNextPageParam`, `initialPageParam`, etc.). +Options accepted by `injectInfiniteQuery`, including page parameters and pagination callbacks. ## Extends -- [`OmitKeyof`](../type-aliases/OmitKeyof.md)\<[`InfiniteQueryObserverOptions`](InfiniteQueryObserverOptions.md)\<`TQueryFnData`, `TError`, `TData`, `TQueryKey`, `TPageParam`\>, `"suspense"`\> +- [`OmitKeyof`](../type-aliases/OmitKeyof.md)\<[`InfiniteQueryObserverOptions`](InfiniteQueryObserverOptions.md)\<`TQueryFnData`, `TError`, `TData`, `TQueryKey`, `TPageParam`\>, `"notifyOnChangeProps"` \| `"suspense"` \| `"throwOnError"`\> ## Type Parameters @@ -22,34 +19,22 @@ which `angular-query-experimental` doesn't support, unlike `react-query` — ext `TQueryFnData` = `unknown` -The type of a single page, as your `queryFn` resolves it. - ### TError `TError` = [`DefaultError`](../type-aliases/DefaultError.md) -The type of errors your `queryFn` may throw. - ### TData `TData` = `TQueryFnData` -The type `data` ends up as after `select` runs. Defaults to `TQueryFnData` here, though -`injectInfiniteQuery` itself defaults it to `InfiniteData` — the shape `data` actually has -when no `select` is used. - ### TQueryKey `TQueryKey` *extends* [`QueryKey`](../type-aliases/QueryKey.md) = [`QueryKey`](../type-aliases/QueryKey.md) -The type of your `queryKey`. - ### TPageParam `TPageParam` = `unknown` -The type of the parameter passed to `queryFn` to fetch a given page. - ## Properties | Property | Type | Default value | Description | @@ -64,7 +49,6 @@ The type of the parameter passed to `queryFn` to fetch a given page. | `maxPages?` | `number` | `undefined` | Maximum number of pages to store in the data of an infinite query. | | `meta?` | `Record`\<`string`, `unknown`\> | `undefined` | Additional payload to be stored on each query. Use this property to pass information that can be used in other places. | | `networkMode?` | `"online"` \| `"always"` \| `"offlineFirst"` | `'online'` | Controls whether a query is allowed to run based on the current network connectivity. **See** [Network Mode](https://tanstack.com/query/latest/docs/framework/react/guides/network-mode) for more information. | -| `notifyOnChangeProps?` | \| ( \| `"error"` \| `"data"` \| `"isError"` \| `"isPending"` \| `"isLoading"` \| `"isLoadingError"` \| `"isRefetchError"` \| `"isSuccess"` \| `"isPlaceholderData"` \| `"status"` \| `"dataUpdatedAt"` \| `"errorUpdatedAt"` \| `"failureCount"` \| `"failureReason"` \| `"errorUpdateCount"` \| `"isFetched"` \| `"isFetchedAfterMount"` \| `"isFetching"` \| `"isInitialLoading"` \| `"isPaused"` \| `"isRefetching"` \| `"isStale"` \| `"isEnabled"` \| `"refetch"` \| `"fetchStatus"` \| `"fetchNextPage"` \| `"fetchPreviousPage"` \| `"hasNextPage"` \| `"hasPreviousPage"` \| `"isFetchNextPageError"` \| `"isFetchingNextPage"` \| `"isFetchPreviousPageError"` \| `"isFetchingPreviousPage"`)[] \| `"all"` \| (() => \| `"all"` \| ( \| `"error"` \| `"data"` \| `"isError"` \| `"isPending"` \| `"isLoading"` \| `"isLoadingError"` \| `"isRefetchError"` \| `"isSuccess"` \| `"isPlaceholderData"` \| `"status"` \| `"dataUpdatedAt"` \| `"errorUpdatedAt"` \| `"failureCount"` \| `"failureReason"` \| `"errorUpdateCount"` \| `"isFetched"` \| `"isFetchedAfterMount"` \| `"isFetching"` \| `"isInitialLoading"` \| `"isPaused"` \| `"isRefetching"` \| `"isStale"` \| `"isEnabled"` \| `"refetch"` \| `"fetchStatus"` \| `"fetchNextPage"` \| `"fetchPreviousPage"` \| `"hasNextPage"` \| `"hasPreviousPage"` \| `"isFetchNextPageError"` \| `"isFetchingNextPage"` \| `"isFetchPreviousPageError"` \| `"isFetchingPreviousPage"`)[] \| `undefined`) | `undefined` | If set, the component will only re-render if any of the listed properties change. When set to `['data', 'error']`, the component will only re-render when the `data` or `error` properties change. When set to `'all'`, the component will re-render whenever a query is updated. When set to a function, the function will be executed to compute the list of properties. Defaults to `undefined`, in which case property access is tracked automatically, and the component only re-renders when one of the tracked properties changes. | | `persister?` | (`queryFn`: (`context`: [`QueryFunctionContext`](../type-aliases/QueryFunctionContext.md)\<`NoInfer`\<`TQueryKey`\>, `TPageParam`\>) => `TQueryFnData` \| `Promise`\<`TQueryFnData`\>, `context`: `object`, `query`: [`Query`](../classes/Query.md)) => `TQueryFnData` \| `Promise`\<`TQueryFnData`\> | `undefined` | This option can be used to persist the result of a query to an external storage, bypassing the need to actually call the `queryFn`. Useful for persisting a query's data across e.g. server/client boundaries. | | `placeholderData?` | \| [`InfiniteData`](InfiniteData.md)\<`TQueryFnData`, `TPageParam`\> \| ((`previousData`: \| [`InfiniteData`](InfiniteData.md)\<`TQueryFnData`, `TPageParam`\> \| `undefined`, `previousQuery`: \| [`Query`](../classes/Query.md)\<[`InfiniteData`](InfiniteData.md)\<`TQueryFnData`, `TPageParam`\>, `TError`, [`InfiniteData`](InfiniteData.md)\<`TQueryFnData`, `TPageParam`\>, `TQueryKey`\> \| `undefined`) => \| [`InfiniteData`](InfiniteData.md)\<`TQueryFnData`, `TPageParam`\> \| `undefined`) | `undefined` | If set, this value will be used as the placeholder data for this particular query observer while the query is still in the `loading` data and no initialData has been provided. | | `queryFn?` | \| *typeof* [`skipToken`](../variables/skipToken.md) \| ((`context`: [`QueryFunctionContext`](../type-aliases/QueryFunctionContext.md)\<`TQueryKey`, `TPageParam`\>) => `TQueryFnData` \| `Promise`\<`TQueryFnData`\>) | `undefined` | The function that the query will use to request data. Required, unless a default query function has been set via `queryClient.setQueryDefaults` or `queryClient.setDefaultOptions`. Receives a [QueryFunctionContext](../type-aliases/QueryFunctionContext.md). Must return a promise that will either resolve data or throw an error. The data cannot be `undefined`. | @@ -82,4 +66,3 @@ The type of the parameter passed to `queryFn` to fetch a given page. | `select?` | (`data`: [`InfiniteData`](InfiniteData.md)) => `TData` | `undefined` | This option can be used to transform or select a part of the data returned by the query function. It affects the returned `data` value, but does not affect what gets stored in the query cache. The `select` function will only run if `data` changed, or if the reference to the `select` function itself changes. To optimize, memoize the function so its reference stays stable across calls. | | `staleTime?` | \| `number` \| `"static"` \| ((`query`: [`Query`](../classes/Query.md)\<`TQueryFnData`, `TError`, [`InfiniteData`](InfiniteData.md)\<`TQueryFnData`, `TPageParam`\>, `TQueryKey`\>) => `number` \| `"static"`) | `0` | The time in milliseconds after data is considered stale. If set to `Infinity`, the data will never be considered stale. If set to `'static'`, the data will never be considered stale. If set to a function, the function will be executed with the query to compute a `staleTime`. | | `structuralSharing?` | `boolean` \| ((`oldData`: `unknown`, `newData`: `unknown`) => `unknown`) | `true` | Set this to `false` to disable structural sharing between query results. Set this to a function which accepts the old and new data and returns resolved data of the same type to implement custom structural sharing logic. | -| `throwOnError?` | \| `false` \| `true` \| ((`error`: `TError`, `query`: [`Query`](../classes/Query.md)\<`TQueryFnData`, `TError`, [`InfiniteData`](InfiniteData.md)\<`TQueryFnData`, `TPageParam`\>, `TQueryKey`\>) => `boolean`) | `false` | Whether errors should be thrown instead of setting the `error` property. If set to `true` or `suspense` is `true`, all errors will be thrown to the error boundary. If set to `false` and `suspense` is `false`, errors are returned as state. If set to a function, it will be passed the error and the query, and it should return a boolean indicating whether to show the error in an error boundary (`true`) or return the error as state (`false`). | diff --git a/docs/framework/angular/reference/interfaces/CreateMutationOptions.md b/docs/framework/angular/reference/interfaces/CreateMutationOptions.md index 2cf74b7d6d7..6a436c17ceb 100644 --- a/docs/framework/angular/reference/interfaces/CreateMutationOptions.md +++ b/docs/framework/angular/reference/interfaces/CreateMutationOptions.md @@ -5,14 +5,14 @@ title: CreateMutationOptions -Defined in: [packages/angular-query-experimental/src/types.ts:223](https://github.com/TanStack/query/blob/main/packages/angular-query-experimental/src/types.ts#L223) +Defined in: [packages/angular-query/src/types.ts:332](https://github.com/TanStack/query/blob/main/packages/angular-query/src/types.ts#L332) The options accepted by `injectMutation`. Same as [MutationObserverOptions](MutationObserverOptions.md) from `@tanstack/query-core`, minus the internal `_defaulted` flag. ## Extends -- [`OmitKeyof`](../type-aliases/OmitKeyof.md)\<[`MutationObserverOptions`](MutationObserverOptions.md)\<`TData`, `TError`, `TVariables`, `TOnMutateResult`\>, `"_defaulted"`\> +- [`OmitKeyof`](../type-aliases/OmitKeyof.md)\<[`MutationObserverOptions`](MutationObserverOptions.md)\<`TData`, `TError`, `TVariables`, `TOnMutateResult`\>, `"_defaulted"` \| `"throwOnError"`\> ## Type Parameters @@ -57,4 +57,3 @@ their `onMutateResult` parameter — useful for optimistic-update rollback data. | `retry?` | \| `number` \| `false` \| `true` \| ((`failureCount`: `number`, `error`: `TError`) => `boolean`) | `0` | If `false`, failed mutations will not retry by default. If `true`, failed mutations will retry infinitely. If set to an integer number, e.g. 3, failed mutations will retry until the failed mutation count meets that number. If set to a function `(failureCount, error) => boolean` failed mutations will retry until the function returns false. | | `retryDelay?` | `number` \| ((`failureCount`: `number`, `error`: `TError`) => `number`) | `undefined` | This function receives a `retryAttempt` integer and the actual Error and returns the delay to apply before the next attempt in milliseconds. Defaults to a function that applies exponential backoff, capped at 30 seconds. | | `scope?` | [`MutationScope`](../type-aliases/MutationScope.md) | `undefined` | Controls whether this mutation runs alongside others or waits its turn. Mutations sharing the same `scope.id` run serially, in the order they were started. Without a scope, a mutation runs as soon as it is triggered. | -| `throwOnError?` | `boolean` \| ((`error`: `TError`) => `boolean`) | `false` | Whether errors should be thrown instead of setting the `error` property. If set to `true`, all errors will be thrown to the nearest error boundary. If set to a function, it will be passed the error and should return a boolean indicating whether to throw the error (`true`) or return it as state (`false`). | diff --git a/docs/framework/angular/reference/interfaces/CreateQueryOptions.md b/docs/framework/angular/reference/interfaces/CreateQueryOptions.md deleted file mode 100644 index 13dd257ec9c..00000000000 --- a/docs/framework/angular/reference/interfaces/CreateQueryOptions.md +++ /dev/null @@ -1,73 +0,0 @@ ---- -id: CreateQueryOptions -title: CreateQueryOptions ---- - - - -Defined in: [packages/angular-query-experimental/src/types.ts:56](https://github.com/TanStack/query/blob/main/packages/angular-query-experimental/src/types.ts#L56) - -The options accepted by `injectQuery`. Same as [CreateBaseQueryOptions](CreateBaseQueryOptions.md), minus `suspense` — which -`angular-query-experimental` doesn't support, unlike `react-query`. - -## Extends - -- [`OmitKeyof`](../type-aliases/OmitKeyof.md)\<[`CreateBaseQueryOptions`](CreateBaseQueryOptions.md)\<`TQueryFnData`, `TError`, `TData`, `TQueryFnData`, `TQueryKey`\>, `"suspense"`\> - -## Type Parameters - -### TQueryFnData - -`TQueryFnData` = `unknown` - -The type your `queryFn` resolves to. - -### TError - -`TError` = [`DefaultError`](../type-aliases/DefaultError.md) - -The type of errors your `queryFn` may throw. - -### TData - -`TData` = `TQueryFnData` - -The type `data` ends up as after `select` runs. Defaults to `TQueryFnData` when no -`select` is used. - -### TQueryKey - -`TQueryKey` *extends* [`QueryKey`](../type-aliases/QueryKey.md) = [`QueryKey`](../type-aliases/QueryKey.md) - -The type of your `queryKey`. - -## Properties - -| Property | Type | Default value | Description | -| ------ | ------ | ------ | ------ | -| `enabled?` | \| `false` \| `true` \| ((`query`: [`Query`](../classes/Query.md)\<`TQueryFnData`, `TError`, `TQueryFnData`, `TQueryKey`\>) => `boolean`) | `true` | Set this to `false` or a function that returns `false` to disable automatic refetching when the query mounts or changes query keys. To refetch the query, use the `refetch` method returned from the `useQuery` instance. Accepts a boolean or function that returns a boolean. | -| `gcTime?` | `number` | `undefined` | The time in milliseconds that unused/inactive cache data remains in memory. When a query's cache becomes unused or inactive, that cache data will be garbage collected after this duration. When different garbage collection times are specified, the longest one will be used. Setting it to `Infinity` will disable garbage collection. Defaults to `5 * 60 * 1000` (5 minutes), or `Infinity` during SSR. Note: the maximum allowed time is about 24 days, imposed by `setTimeout`'s 32-bit signed integer delay — see `timeoutManager.setTimeoutProvider` for a workaround. | -| `initialData?` | `TQueryFnData` \| (() => `TQueryFnData` \| `undefined`) | `undefined` | If set, this value will be used as the initial data for the query cache (as long as the query hasn't been created or cached yet). If set to a function, the function will be called **once** during the shared/root query initialization, and be expected to synchronously return the initial data. Initial data is considered stale by default unless a `staleTime` has been set. `initialData` **is persisted** to the cache. | -| `initialDataUpdatedAt?` | `number` \| (() => `number` \| `undefined`) | `undefined` | If set, this value will be used as the time (in milliseconds) of when the `initialData` itself was last updated. | -| `maxPages?` | `number` | `undefined` | Maximum number of pages to store in the data of an infinite query. | -| `meta?` | `Record`\<`string`, `unknown`\> | `undefined` | Additional payload to be stored on each query. Use this property to pass information that can be used in other places. | -| `networkMode?` | `"online"` \| `"always"` \| `"offlineFirst"` | `'online'` | Controls whether a query is allowed to run based on the current network connectivity. **See** [Network Mode](https://tanstack.com/query/latest/docs/framework/react/guides/network-mode) for more information. | -| `notifyOnChangeProps?` | \| ( \| `"error"` \| `"data"` \| `"isError"` \| `"isPending"` \| `"isLoading"` \| `"isLoadingError"` \| `"isRefetchError"` \| `"isSuccess"` \| `"isPlaceholderData"` \| `"status"` \| `"dataUpdatedAt"` \| `"errorUpdatedAt"` \| `"failureCount"` \| `"failureReason"` \| `"errorUpdateCount"` \| `"isFetched"` \| `"isFetchedAfterMount"` \| `"isFetching"` \| `"isInitialLoading"` \| `"isPaused"` \| `"isRefetching"` \| `"isStale"` \| `"isEnabled"` \| `"refetch"` \| `"fetchStatus"` \| `"fetchNextPage"` \| `"fetchPreviousPage"` \| `"hasNextPage"` \| `"hasPreviousPage"` \| `"isFetchNextPageError"` \| `"isFetchingNextPage"` \| `"isFetchPreviousPageError"` \| `"isFetchingPreviousPage"`)[] \| `"all"` \| (() => \| `"all"` \| ( \| `"error"` \| `"data"` \| `"isError"` \| `"isPending"` \| `"isLoading"` \| `"isLoadingError"` \| `"isRefetchError"` \| `"isSuccess"` \| `"isPlaceholderData"` \| `"status"` \| `"dataUpdatedAt"` \| `"errorUpdatedAt"` \| `"failureCount"` \| `"failureReason"` \| `"errorUpdateCount"` \| `"isFetched"` \| `"isFetchedAfterMount"` \| `"isFetching"` \| `"isInitialLoading"` \| `"isPaused"` \| `"isRefetching"` \| `"isStale"` \| `"isEnabled"` \| `"refetch"` \| `"fetchStatus"` \| `"fetchNextPage"` \| `"fetchPreviousPage"` \| `"hasNextPage"` \| `"hasPreviousPage"` \| `"isFetchNextPageError"` \| `"isFetchingNextPage"` \| `"isFetchPreviousPageError"` \| `"isFetchingPreviousPage"`)[] \| `undefined`) | `undefined` | If set, the component will only re-render if any of the listed properties change. When set to `['data', 'error']`, the component will only re-render when the `data` or `error` properties change. When set to `'all'`, the component will re-render whenever a query is updated. When set to a function, the function will be executed to compute the list of properties. Defaults to `undefined`, in which case property access is tracked automatically, and the component only re-renders when one of the tracked properties changes. | -| `persister?` | (`queryFn`: (`context`: `object`) => `TQueryFnData` \| `Promise`\<`TQueryFnData`\>, `context`: `object`, `query`: [`Query`](../classes/Query.md)) => `TQueryFnData` \| `Promise`\<`TQueryFnData`\> | `undefined` | This option can be used to persist the result of a query to an external storage, bypassing the need to actually call the `queryFn`. Useful for persisting a query's data across e.g. server/client boundaries. | -| `placeholderData?` | \| `NonFunctionGuard`\<`TQueryFnData`\> \| ((`previousData`: `NonFunctionGuard`\<`TQueryFnData`\> \| `undefined`, `previousQuery`: \| [`Query`](../classes/Query.md)\<`NonFunctionGuard`\<`TQueryFnData`\>, `TError`, `NonFunctionGuard`\<`TQueryFnData`\>, `TQueryKey`\> \| `undefined`) => `NonFunctionGuard`\<`TQueryFnData`\> \| `undefined`) | `undefined` | If set, this value will be used as the placeholder data for this particular query observer while the query is still in the `loading` data and no initialData has been provided. | -| `queryFn?` | \| *typeof* [`skipToken`](../variables/skipToken.md) \| ((`context`: `object`) => `TQueryFnData` \| `Promise`\<`TQueryFnData`\>) | `undefined` | The function that the query will use to request data. Required, unless a default query function has been set via `queryClient.setQueryDefaults` or `queryClient.setDefaultOptions`. Receives a [QueryFunctionContext](../type-aliases/QueryFunctionContext.md). Must return a promise that will either resolve data or throw an error. The data cannot be `undefined`. | -| `queryHash?` | `string` | `undefined` | The hashed form of `queryKey`, computed with `queryKeyHashFn` (or the default hashing function otherwise). Used as the actual cache key internally. | -| `queryKey` | `TQueryKey` & `object` | `undefined` | The query key to use for this query. The query key will be hashed into a stable hash. See [Query Keys](https://tanstack.com/query/latest/docs/framework/react/guides/query-keys) for more information. The query will automatically update when this key changes (as long as `enabled` is not set to `false`). | -| `queryKeyHashFn?` | (`queryKey`: `TQueryKey`) => `string` | `undefined` | If specified, this function is used to hash the `queryKey` to a string. | -| `refetchInterval?` | \| `number` \| `false` \| ((`query`: [`Query`](../classes/Query.md)\<`TQueryFnData`, `TError`, `TQueryFnData`, `TQueryKey`\>) => `number` \| `false` \| `undefined`) | `false` | If set to a number, the query will continuously refetch at this frequency in milliseconds. If set to a function, the function will be executed with the latest data and query to compute a frequency | -| `refetchIntervalInBackground?` | `boolean` | `false` | If set to `true`, the query will continue to refetch while their tab/window is in the background. | -| `refetchOnMount?` | \| `boolean` \| `"always"` \| ((`query`: [`Query`](../classes/Query.md)\<`TQueryFnData`, `TError`, `TQueryFnData`, `TQueryKey`\>) => `boolean` \| `"always"`) | `true` | If set to `true`, the query will refetch on mount if the data is stale. If set to `false`, will disable additional instances of a query to trigger background refetch. If set to `'always'`, the query will always refetch on mount (except when `staleTime: 'static'` is used). If set to a function, the function will be executed with the latest data and query to compute the value | -| `refetchOnReconnect?` | \| `boolean` \| `"always"` \| ((`query`: [`Query`](../classes/Query.md)\<`TQueryFnData`, `TError`, `TQueryFnData`, `TQueryKey`\>) => `boolean` \| `"always"`) | `undefined` | If set to `true`, the query will refetch on reconnect if the data is stale. If set to `false`, the query will not refetch on reconnect. If set to `'always'`, the query will always refetch on reconnect (except when `staleTime: 'static'` is used). If set to a function, the function will be executed with the latest data and query to compute the value. Defaults to `true` unless `networkMode` is `'always'`. | -| `refetchOnWindowFocus?` | \| `boolean` \| `"always"` \| ((`query`: [`Query`](../classes/Query.md)\<`TQueryFnData`, `TError`, `TQueryFnData`, `TQueryKey`\>) => `boolean` \| `"always"`) | `true` | If set to `true`, the query will refetch on window focus if the data is stale. If set to `false`, the query will not refetch on window focus. If set to `'always'`, the query will always refetch on window focus (except when `staleTime: 'static'` is used). If set to a function, the function will be executed with the latest data and query to compute the value. | -| `retry?` | \| `number` \| `false` \| `true` \| ((`failureCount`: `number`, `error`: `TError`) => `boolean`) | `undefined` | If `false`, failed queries will not retry by default. If `true`, failed queries will retry infinitely. If set to an integer number, e.g. 3, failed queries will retry until the failed query count meets that number. If set to a function `(failureCount, error) => boolean` failed queries will retry until the function returns false. Defaults to `3` on the client and `0` on the server. | -| `retryDelay?` | `number` \| ((`failureCount`: `number`, `error`: `TError`) => `number`) | `undefined` | This function receives a `retryAttempt` integer and the actual Error and returns the delay to apply before the next attempt in milliseconds. A function like `attempt => Math.min(attempt > 1 ? 2 ** attempt * 1000 : 1000, 30 * 1000)` applies exponential backoff. A function like `attempt => attempt * 1000` applies linear backoff. Defaults to a function that applies exponential backoff, capped at 30 seconds. | -| `retryOnMount?` | \| `false` \| `true` \| ((`query`: [`Query`](../classes/Query.md)\<`TQueryFnData`, `TError`, `TQueryFnData`, `TQueryKey`\>) => `boolean`) | `true` | If set to `false`, the query will not be retried on mount if it contains an error. If set to a function, the function will be executed with the query to compute the value. | -| `select?` | (`data`: `TQueryFnData`) => `TData` | `undefined` | This option can be used to transform or select a part of the data returned by the query function. It affects the returned `data` value, but does not affect what gets stored in the query cache. The `select` function will only run if `data` changed, or if the reference to the `select` function itself changes. To optimize, memoize the function so its reference stays stable across calls. | -| `staleTime?` | \| `number` \| `"static"` \| ((`query`: [`Query`](../classes/Query.md)\<`TQueryFnData`, `TError`, `TQueryFnData`, `TQueryKey`\>) => `number` \| `"static"`) | `0` | The time in milliseconds after data is considered stale. If set to `Infinity`, the data will never be considered stale. If set to `'static'`, the data will never be considered stale. If set to a function, the function will be executed with the query to compute a `staleTime`. | -| `structuralSharing?` | `boolean` \| ((`oldData`: `unknown`, `newData`: `unknown`) => `unknown`) | `true` | Set this to `false` to disable structural sharing between query results. Set this to a function which accepts the old and new data and returns resolved data of the same type to implement custom structural sharing logic. | -| `throwOnError?` | \| `false` \| `true` \| ((`error`: `TError`, `query`: [`Query`](../classes/Query.md)\<`TQueryFnData`, `TError`, `TQueryFnData`, `TQueryKey`\>) => `boolean`) | `false` | Whether errors should be thrown instead of setting the `error` property. If set to `true` or `suspense` is `true`, all errors will be thrown to the error boundary. If set to `false` and `suspense` is `false`, errors are returned as state. If set to a function, it will be passed the error and the query, and it should return a boolean indicating whether to show the error in an error boundary (`true`) or return the error as state (`false`). | diff --git a/docs/framework/angular/reference/interfaces/DefinedInfiniteQueryNarrowing.md b/docs/framework/angular/reference/interfaces/DefinedInfiniteQueryNarrowing.md new file mode 100644 index 00000000000..7af46858938 --- /dev/null +++ b/docs/framework/angular/reference/interfaces/DefinedInfiniteQueryNarrowing.md @@ -0,0 +1,28 @@ +--- +id: DefinedInfiniteQueryNarrowing +title: DefinedInfiniteQueryNarrowing +--- + + + +Defined in: [packages/angular-query/src/types.ts:183](https://github.com/TanStack/query/blob/main/packages/angular-query/src/types.ts#L183) + +Signal-backed guards for a paginated query whose initial data excludes the pending state. + +## Type Parameters + +### TData + +`TData` = `unknown` + +### TError + +`TError` = [`DefaultError`](../type-aliases/DefaultError.md) + +## Properties + +| Property | Type | Description | +| ------ | ------ | ------ | +| `isError` | `SignalFunction`\<(`this`: [`DefinedCreateInfiniteQueryResult`](../type-aliases/DefinedCreateInfiniteQueryResult.md)\<`TData`, `TError`\>) => `this is DefinedCreateInfiniteQueryResult>`\> | Returns whether the result failed and narrows its data and error signals. | +| `isPending` | `SignalFunction`\<(`this`: [`DefinedCreateInfiniteQueryResult`](../type-aliases/DefinedCreateInfiniteQueryResult.md)\<`TData`, `TError`\>) => `this is never`\> | Narrows the result to the pending state when that state is possible. | +| `isSuccess` | `SignalFunction`\<(`this`: [`DefinedCreateInfiniteQueryResult`](../type-aliases/DefinedCreateInfiniteQueryResult.md)\<`TData`, `TError`\>) => `this is DefinedCreateInfiniteQueryResult>`\> | Returns whether the result is successful and narrows its data and error signals. | diff --git a/docs/framework/angular/reference/interfaces/DefinedQueryNarrowing.md b/docs/framework/angular/reference/interfaces/DefinedQueryNarrowing.md new file mode 100644 index 00000000000..af20e8d1d7d --- /dev/null +++ b/docs/framework/angular/reference/interfaces/DefinedQueryNarrowing.md @@ -0,0 +1,28 @@ +--- +id: DefinedQueryNarrowing +title: DefinedQueryNarrowing +--- + + + +Defined in: [packages/angular-query/src/types.ts:108](https://github.com/TanStack/query/blob/main/packages/angular-query/src/types.ts#L108) + +Signal-backed guards for a query whose initial data excludes the pending state. + +## Type Parameters + +### TData + +`TData` = `unknown` + +### TError + +`TError` = [`DefaultError`](../type-aliases/DefaultError.md) + +## Properties + +| Property | Type | Description | +| ------ | ------ | ------ | +| `isError` | `SignalFunction`\<() => `this is DefinedCreateQueryResult>`\> | Returns whether the result failed and narrows its data and error signals. | +| `isPending` | `SignalFunction`\<() => `this is never`\> | Narrows the result to the pending state when that state is possible. | +| `isSuccess` | `SignalFunction`\<() => `this is DefinedCreateQueryResult>`\> | Returns whether the result is successful and narrows its data and error signals. | diff --git a/docs/framework/angular/reference/interfaces/InjectInfiniteQueryOptions.md b/docs/framework/angular/reference/interfaces/InjectInfiniteQueryOptions.md deleted file mode 100644 index 909185a89b5..00000000000 --- a/docs/framework/angular/reference/interfaces/InjectInfiniteQueryOptions.md +++ /dev/null @@ -1,17 +0,0 @@ ---- -id: InjectInfiniteQueryOptions -title: InjectInfiniteQueryOptions ---- - - - -Defined in: [packages/angular-query-experimental/src/inject-infinite-query.ts:29](https://github.com/TanStack/query/blob/main/packages/angular-query-experimental/src/inject-infinite-query.ts#L29) - -Options for `injectInfiniteQuery`, passed after the function that returns the infinite -query options. - -## Properties - -| Property | Type | Description | -| ------ | ------ | ------ | -| `injector?` | `Injector` | The `Injector` in which to create the infinite query. If this is not provided, the current injection context will be used instead (via `inject`). | diff --git a/docs/framework/angular/reference/interfaces/InjectIsFetchingOptions.md b/docs/framework/angular/reference/interfaces/InjectIsFetchingOptions.md deleted file mode 100644 index 91abb195fe9..00000000000 --- a/docs/framework/angular/reference/interfaces/InjectIsFetchingOptions.md +++ /dev/null @@ -1,16 +0,0 @@ ---- -id: InjectIsFetchingOptions -title: InjectIsFetchingOptions ---- - - - -Defined in: [packages/angular-query-experimental/src/inject-is-fetching.ts:16](https://github.com/TanStack/query/blob/main/packages/angular-query-experimental/src/inject-is-fetching.ts#L16) - -Options for `injectIsFetching`, passed after the query filters. - -## Properties - -| Property | Type | Description | -| ------ | ------ | ------ | -| `injector?` | `Injector` | The `Injector` in which to create the isFetching signal. If this is not provided, the current injection context will be used instead (via `inject`). | diff --git a/docs/framework/angular/reference/interfaces/InjectIsMutatingOptions.md b/docs/framework/angular/reference/interfaces/InjectIsMutatingOptions.md deleted file mode 100644 index a6949e57019..00000000000 --- a/docs/framework/angular/reference/interfaces/InjectIsMutatingOptions.md +++ /dev/null @@ -1,16 +0,0 @@ ---- -id: InjectIsMutatingOptions -title: InjectIsMutatingOptions ---- - - - -Defined in: [packages/angular-query-experimental/src/inject-is-mutating.ts:16](https://github.com/TanStack/query/blob/main/packages/angular-query-experimental/src/inject-is-mutating.ts#L16) - -Options for `injectIsMutating`, passed after the mutation filters. - -## Properties - -| Property | Type | Description | -| ------ | ------ | ------ | -| `injector?` | `Injector` | The `Injector` in which to create the isMutating signal. If this is not provided, the current injection context will be used instead (via `inject`). | diff --git a/docs/framework/angular/reference/interfaces/InjectMutationOptions.md b/docs/framework/angular/reference/interfaces/InjectMutationOptions.md deleted file mode 100644 index 3ce1d38c64e..00000000000 --- a/docs/framework/angular/reference/interfaces/InjectMutationOptions.md +++ /dev/null @@ -1,16 +0,0 @@ ---- -id: InjectMutationOptions -title: InjectMutationOptions ---- - - - -Defined in: [packages/angular-query-experimental/src/inject-mutation.ts:31](https://github.com/TanStack/query/blob/main/packages/angular-query-experimental/src/inject-mutation.ts#L31) - -Options for `injectMutation`, passed after the function that returns the mutation options. - -## Properties - -| Property | Type | Description | -| ------ | ------ | ------ | -| `injector?` | `Injector` | The `Injector` in which to create the mutation. If this is not provided, the current injection context will be used instead (via `inject`). | diff --git a/docs/framework/angular/reference/interfaces/InjectMutationStateOptions.md b/docs/framework/angular/reference/interfaces/InjectMutationStateOptions.md deleted file mode 100644 index b5c2bdf5c65..00000000000 --- a/docs/framework/angular/reference/interfaces/InjectMutationStateOptions.md +++ /dev/null @@ -1,17 +0,0 @@ ---- -id: InjectMutationStateOptions -title: InjectMutationStateOptions ---- - - - -Defined in: [packages/angular-query-experimental/src/inject-mutation-state.ts:51](https://github.com/TanStack/query/blob/main/packages/angular-query-experimental/src/inject-mutation-state.ts#L51) - -Options for `injectMutationState`, passed after the function that returns the mutation state -options. - -## Properties - -| Property | Type | Description | -| ------ | ------ | ------ | -| `injector?` | `Injector` | The `Injector` in which to create the mutation state signal. If this is not provided, the current injection context will be used instead (via `inject`). | diff --git a/docs/framework/angular/reference/interfaces/InjectQueriesOptions.md b/docs/framework/angular/reference/interfaces/InjectQueriesOptions.md new file mode 100644 index 00000000000..a2217dcf726 --- /dev/null +++ b/docs/framework/angular/reference/interfaces/InjectQueriesOptions.md @@ -0,0 +1,27 @@ +--- +id: InjectQueriesOptions +title: InjectQueriesOptions +--- + + + +Defined in: [packages/angular-query/src/inject-queries.types.ts:226](https://github.com/TanStack/query/blob/main/packages/angular-query/src/inject-queries.types.ts#L226) + +A reactive group of query options and an optional projection of their combined results. + +## Type Parameters + +### T + +`T` *extends* `any`[] + +### TCombinedResult + +`TCombinedResult` = [`QueriesResults`](../type-aliases/QueriesResults.md)\<`T`\> + +## Properties + +| Property | Type | Description | +| ------ | ------ | ------ | +| `combine?` | (`result`: `T` *extends* \[\] ? \[\] : `T` *extends* \[`Head`\] ? \[`GenericGetDefinedOrUndefinedQueryResult`\<`Head`, `InferDataAndError`\<`Head`\>\[`"data"`\], [`QueryObserverResult`](../type-aliases/QueryObserverResult.md)\<`InferDataAndError`\<`Head`\>\[`"data"`\], `InferDataAndError`\<`Head`\>\[`"error"`\]\>, [`DefinedQueryObserverResult`](../type-aliases/DefinedQueryObserverResult.md)\<`InferDataAndError`\<`Head`\>\[`"data"`\], `InferDataAndError`\<`Head`\>\[`"error"`\]\>\>\] : `T` *extends* \[`Head`, `...Tails[]`\] ? \[`...Tails[]`\] *extends* \[\] ? \[\] : \[`...Tails[]`\] *extends* \[`Head`\] ? \[`GenericGetDefinedOrUndefinedQueryResult`\<`Head`, `InferDataAndError`\<...\>\[`"data"`\], [`QueryObserverResult`](../type-aliases/QueryObserverResult.md)\<...\[...\], ...\[...\]\>, [`DefinedQueryObserverResult`](../type-aliases/DefinedQueryObserverResult.md)\<...\[...\], ...\[...\]\>\>, `GenericGetDefinedOrUndefinedQueryResult`\<`Head`, `InferDataAndError`\<...\>\[`"data"`\], [`QueryObserverResult`](../type-aliases/QueryObserverResult.md)\<...\[...\], ...\[...\]\>, [`DefinedQueryObserverResult`](../type-aliases/DefinedQueryObserverResult.md)\<...\[...\], ...\[...\]\>\>\] : \[`...Tails[]`\] *extends* \[`Head`, `...Tails[]`\] ? \[`...Tails[]`\] *extends* \[\] ? \[\] : \[`...(...)[]`\] *extends* \[...\] ? \[..., ..., ...\] : ... *extends* ... ? ... : ... : \[...\{ \[K in (...) \| (...) \| (...)\]: GenericGetDefinedOrUndefinedQueryResult\<(...), (...), (...), (...)\> \}\[\]\] : \{ \[K in string \| number \| symbol\]: GenericGetDefinedOrUndefinedQueryResult\\["data"\], QueryObserverResult\\["data"\], InferDataAndError\<(...)\[(...)\]\>\["error"\]\>, DefinedQueryObserverResult\\["data"\], InferDataAndError\<(...)\[(...)\]\>\["error"\]\>\> \}) => `TCombinedResult` | Projects the current plain observer results into a single reactively computed value. | +| `queries` | \| readonly \[\{ \[K in string \| number \| symbol\]: GetCreateQueryOptionsForCreateQueries\ \}\] \| readonly \[`T` *extends* \[\] ? \[\] : `T` *extends* \[`Head`\] ? \[`GetCreateQueryOptionsForCreateQueries`\<`Head`\>\] : `T` *extends* \[`Head`, `...Tails[]`\] ? \[`...Tails[]`\] *extends* \[\] ? \[\] : \[`...Tails[]`\] *extends* \[`Head`\] ? \[`GetCreateQueryOptionsForCreateQueries`\<`Head`\>, `GetCreateQueryOptionsForCreateQueries`\<`Head`\>\] : \[`...Tails[]`\] *extends* \[`Head`, `...Tails[]`\] ? \[`...Tails[]`\] *extends* \[\] ? \[\] : \[`...(...)[]`\] *extends* \[...\] ? \[..., ..., ...\] : ... *extends* ... ? ... : ... : readonly `unknown`[] *extends* \[`...Tails[]`\] ? \[`...Tails[]`\] : \[`...(...)[]`\] *extends* ...[] ? ...[] : ...[] : readonly `unknown`[] *extends* `T` ? `T` : `T` *extends* `QueryObserverOptionsForCreateQueries`\<`TQueryFnData`, `TError`, `TData`, `TQueryKey`\>[] ? `QueryObserverOptionsForCreateQueries`\<`TQueryFnData`, `TError`, `TData`, `TQueryKey`\>[] : `QueryObserverOptionsForCreateQueries`\<`unknown`, `Error`, `unknown`, readonly `unknown`[]\>[]\] | The ordered query options to observe; entries can be added, removed, or replaced reactively. | diff --git a/docs/framework/angular/reference/interfaces/InjectQueryOptions.md b/docs/framework/angular/reference/interfaces/InjectQueryOptions.md deleted file mode 100644 index 80e4adabf20..00000000000 --- a/docs/framework/angular/reference/interfaces/InjectQueryOptions.md +++ /dev/null @@ -1,16 +0,0 @@ ---- -id: InjectQueryOptions -title: InjectQueryOptions ---- - - - -Defined in: [packages/angular-query-experimental/src/inject-query.ts:23](https://github.com/TanStack/query/blob/main/packages/angular-query-experimental/src/inject-query.ts#L23) - -Options for `injectQuery`, passed after the function that returns the query options. - -## Properties - -| Property | Type | Description | -| ------ | ------ | ------ | -| `injector?` | `Injector` | The `Injector` in which to create the query. If this is not provided, the current injection context will be used instead (via `inject`). | diff --git a/docs/framework/angular/reference/interfaces/QueryFeature.md b/docs/framework/angular/reference/interfaces/QueryFeature.md index 612359981e0..d488e6ac3f0 100644 --- a/docs/framework/angular/reference/interfaces/QueryFeature.md +++ b/docs/framework/angular/reference/interfaces/QueryFeature.md @@ -5,19 +5,7 @@ title: QueryFeature -Defined in: [packages/angular-query-experimental/src/providers.ts:126](https://github.com/TanStack/query/blob/main/packages/angular-query-experimental/src/providers.ts#L126) +Defined in: [packages/angular-query/src/providers.ts:121](https://github.com/TanStack/query/blob/main/packages/angular-query/src/providers.ts#L121) -Helper type to represent a Query feature. - -## Type Parameters - -### TFeatureKind - -`TFeatureKind` *extends* `QueryFeatureKind` - -## Properties - -| Property | Type | Description | -| ------ | ------ | ------ | -| `ɵkind` | `TFeatureKind` | The kind of the feature, e.g. `'Devtools'` or `'PersistQueryClient'`. | -| `ɵproviders` | `Provider`[] | The providers that `provideTanStackQuery` registers for the feature. | +Opaque configuration returned by Query feature functions such as `withHydrationKey`. +Pass features to `provideTanStackQuery`; applications do not construct them directly. diff --git a/docs/framework/angular/reference/interfaces/QueryObserverOptions.md b/docs/framework/angular/reference/interfaces/QueryObserverOptions.md index 6a34e6e05cd..eb842bc6f56 100644 --- a/docs/framework/angular/reference/interfaces/QueryObserverOptions.md +++ b/docs/framework/angular/reference/interfaces/QueryObserverOptions.md @@ -18,7 +18,6 @@ The options of a `QueryObserver`, and of the hooks built on it like `useQuery`: ## Extended by - [`InfiniteQueryObserverOptions`](InfiniteQueryObserverOptions.md) -- [`CreateBaseQueryOptions`](CreateBaseQueryOptions.md) ## Type Parameters diff --git a/docs/framework/angular/reference/interfaces/QueryResource.md b/docs/framework/angular/reference/interfaces/QueryResource.md new file mode 100644 index 00000000000..516992c8037 --- /dev/null +++ b/docs/framework/angular/reference/interfaces/QueryResource.md @@ -0,0 +1,27 @@ +--- +id: QueryResource +title: QueryResource +--- + + + +Defined in: [packages/angular-query/src/query-resource.ts:9](https://github.com/TanStack/query/blob/main/packages/angular-query/src/query-resource.ts#L9) + +A query-backed Angular Resource that also exposes an atomic state snapshot. + +## Extends + +- `Resource`\<`TValue`\> + +## Type Parameters + +### TValue + +`TValue` + +## Properties + +| Property | Modifier | Type | Description | Overrides | +| ------ | ------ | ------ | ------ | ------ | +| `reload` | `public` | () => `boolean` | Requests a new query fetch only when the current query data is stale. Used for compatibility with Angular APIs that might want to reload a resource, like Signal Forms' validateAsync resource interface. | - | +| `snapshot` | `readonly` | `Signal`\<`ResourceSnapshot`\<`TValue`\>\> | The current query state as a single snapshot. | `Resource.snapshot` | diff --git a/docs/framework/angular/reference/type-aliases/CreateBaseMutationResult.md b/docs/framework/angular/reference/type-aliases/CreateBaseMutationResult.md index a419ba0c03e..29d15b617e3 100644 --- a/docs/framework/angular/reference/type-aliases/CreateBaseMutationResult.md +++ b/docs/framework/angular/reference/type-aliases/CreateBaseMutationResult.md @@ -11,7 +11,7 @@ type CreateBaseMutationResult & object; ``` -Defined in: [packages/angular-query-experimental/src/types.ts:281](https://github.com/TanStack/query/blob/main/packages/angular-query-experimental/src/types.ts#L281) +Defined in: [packages/angular-query/src/types.ts:389](https://github.com/TanStack/query/blob/main/packages/angular-query/src/types.ts#L389) The pre-`Signal` shape [CreateMutationResult](CreateMutationResult.md) is built from — not what `injectMutation` actually returns. Same as [MutationObserverResult](MutationObserverResult.md) from `@tanstack/query-core`, with `mutate` narrowed to the diff --git a/docs/framework/angular/reference/type-aliases/CreateBaseQueryResult.md b/docs/framework/angular/reference/type-aliases/CreateBaseQueryResult.md index 5e284d7ce79..492a5638948 100644 --- a/docs/framework/angular/reference/type-aliases/CreateBaseQueryResult.md +++ b/docs/framework/angular/reference/type-aliases/CreateBaseQueryResult.md @@ -6,10 +6,10 @@ title: CreateBaseQueryResult ```ts -type CreateBaseQueryResult> = BaseQueryNarrowing & MapToSignals>; +type CreateBaseQueryResult = QueryObserverResult> = BaseQueryNarrowing & MapToSignals, QueryResultFields>; ``` -Defined in: [packages/angular-query-experimental/src/types.ts:153](https://github.com/TanStack/query/blob/main/packages/angular-query-experimental/src/types.ts#L153) +Defined in: [packages/angular-query/src/types.ts:249](https://github.com/TanStack/query/blob/main/packages/angular-query/src/types.ts#L249) The result of `injectQuery` when `initialData` isn't set — `data` may be `undefined` while the query is `pending`. Same shape as [QueryObserverResult](QueryObserverResult.md) from `@tanstack/query-core`, but value fields (like @@ -34,4 +34,4 @@ The type of errors your `queryFn` may throw. ### TState -`TState` = [`QueryObserverResult`](QueryObserverResult.md)\<`TData`, `TError`\> +`TState` *extends* [`QueryObserverResult`](QueryObserverResult.md)\<`TData`, `TError`\> = [`QueryObserverResult`](QueryObserverResult.md)\<`TData`, `TError`\> diff --git a/docs/framework/angular/reference/type-aliases/CreateInfiniteQueryResult.md b/docs/framework/angular/reference/type-aliases/CreateInfiniteQueryResult.md index 64fe8bf7955..f1b973c6119 100644 --- a/docs/framework/angular/reference/type-aliases/CreateInfiniteQueryResult.md +++ b/docs/framework/angular/reference/type-aliases/CreateInfiniteQueryResult.md @@ -6,10 +6,10 @@ title: CreateInfiniteQueryResult ```ts -type CreateInfiniteQueryResult = BaseQueryNarrowing & MapToSignals>; +type CreateInfiniteQueryResult = InfiniteQueryObserverResult> = BaseInfiniteQueryNarrowing & MapToSignals; ``` -Defined in: [packages/angular-query-experimental/src/types.ts:192](https://github.com/TanStack/query/blob/main/packages/angular-query-experimental/src/types.ts#L192) +Defined in: [packages/angular-query/src/types.ts:298](https://github.com/TanStack/query/blob/main/packages/angular-query/src/types.ts#L298) The result of `injectInfiniteQuery` when `initialData` isn't set — `data` may be `undefined` while the query is `pending`. Same shape as [InfiniteQueryObserverResult](InfiniteQueryObserverResult.md) from `@tanstack/query-core`, but @@ -29,3 +29,7 @@ The type `data` ends up as after `select` runs. `TError` = [`DefaultError`](DefaultError.md) The type of errors your `queryFn` may throw. + +### TState + +`TState` *extends* [`InfiniteQueryObserverResult`](InfiniteQueryObserverResult.md)\<`TData`, `TError`\> = [`InfiniteQueryObserverResult`](InfiniteQueryObserverResult.md)\<`TData`, `TError`\> diff --git a/docs/framework/angular/reference/type-aliases/CreateMutateAsyncFunction.md b/docs/framework/angular/reference/type-aliases/CreateMutateAsyncFunction.md index 214d214bd29..81eece6fdf4 100644 --- a/docs/framework/angular/reference/type-aliases/CreateMutateAsyncFunction.md +++ b/docs/framework/angular/reference/type-aliases/CreateMutateAsyncFunction.md @@ -9,7 +9,7 @@ title: CreateMutateAsyncFunction type CreateMutateAsyncFunction = MutateFunction; ``` -Defined in: [packages/angular-query-experimental/src/types.ts:264](https://github.com/TanStack/query/blob/main/packages/angular-query-experimental/src/types.ts#L264) +Defined in: [packages/angular-query/src/types.ts:372](https://github.com/TanStack/query/blob/main/packages/angular-query/src/types.ts#L372) The type of `mutateAsync`, as returned by `injectMutation`. Similar to [CreateMutateFunction](CreateMutateFunction.md), but returns a promise which can be awaited. diff --git a/docs/framework/angular/reference/type-aliases/CreateMutateFunction.md b/docs/framework/angular/reference/type-aliases/CreateMutateFunction.md index b40e164bd6b..5e3204ed8d8 100644 --- a/docs/framework/angular/reference/type-aliases/CreateMutateFunction.md +++ b/docs/framework/angular/reference/type-aliases/CreateMutateFunction.md @@ -9,12 +9,11 @@ title: CreateMutateFunction type CreateMutateFunction = (...args: Parameters>) => void; ``` -Defined in: [packages/angular-query-experimental/src/types.ts:244](https://github.com/TanStack/query/blob/main/packages/angular-query-experimental/src/types.ts#L244) +Defined in: [packages/angular-query/src/types.ts:352](https://github.com/TanStack/query/blob/main/packages/angular-query/src/types.ts#L352) The type of `mutate`, as returned by `injectMutation`. Forwards the variables (and an optional per-call `onSuccess`/`onError`/`onSettled`) to the underlying `mutate` call. Fire-and-forget — errors are surfaced -through the mutation result instead of being thrown by `mutate`, unless `throwOnError` makes -`injectMutation` rethrow them after emitting them on `ngZone.onError`. +through the mutation result, not thrown. ## Type Parameters diff --git a/docs/framework/angular/reference/type-aliases/CreateMutationResult.md b/docs/framework/angular/reference/type-aliases/CreateMutationResult.md index 3b4cccb4b48..09b883ac23a 100644 --- a/docs/framework/angular/reference/type-aliases/CreateMutationResult.md +++ b/docs/framework/angular/reference/type-aliases/CreateMutationResult.md @@ -6,10 +6,10 @@ title: CreateMutationResult ```ts -type CreateMutationResult> = BaseMutationNarrowing & MapToSignals>; +type CreateMutationResult> = BaseMutationNarrowing & MapToSignals, MutationResultFields>; ``` -Defined in: [packages/angular-query-experimental/src/types.ts:423](https://github.com/TanStack/query/blob/main/packages/angular-query-experimental/src/types.ts#L423) +Defined in: [packages/angular-query/src/types.ts:522](https://github.com/TanStack/query/blob/main/packages/angular-query/src/types.ts#L522) The result of `injectMutation`. Based on [CreateBaseMutationResult](CreateBaseMutationResult.md), but value fields are exposed as a `Signal` — read them with `mutation.data()`, not `mutation.data` — while function fields (`mutate`, diff --git a/docs/framework/angular/reference/type-aliases/CreateQueryOptions.md b/docs/framework/angular/reference/type-aliases/CreateQueryOptions.md new file mode 100644 index 00000000000..bbcc0b661f1 --- /dev/null +++ b/docs/framework/angular/reference/type-aliases/CreateQueryOptions.md @@ -0,0 +1,33 @@ +--- +id: CreateQueryOptions +title: CreateQueryOptions +--- + + + +```ts +type CreateQueryOptions = OmitKeyof, "notifyOnChangeProps" | "suspense" | "throwOnError">; +``` + +Defined in: [packages/angular-query/src/types.ts:32](https://github.com/TanStack/query/blob/main/packages/angular-query/src/types.ts#L32) + +Options accepted by `injectQuery`, with cache data projected through an optional `select`. +Angular owns result notifications and exposes errors through signals rather than error boundaries. + +## Type Parameters + +### TQueryFnData + +`TQueryFnData` = `unknown` + +### TError + +`TError` = [`DefaultError`](DefaultError.md) + +### TData + +`TData` = `TQueryFnData` + +### TQueryKey + +`TQueryKey` *extends* [`QueryKey`](QueryKey.md) = [`QueryKey`](QueryKey.md) diff --git a/docs/framework/angular/reference/type-aliases/CreateQueryResult.md b/docs/framework/angular/reference/type-aliases/CreateQueryResult.md index 268f526443f..8451f99a8bb 100644 --- a/docs/framework/angular/reference/type-aliases/CreateQueryResult.md +++ b/docs/framework/angular/reference/type-aliases/CreateQueryResult.md @@ -9,7 +9,7 @@ title: CreateQueryResult type CreateQueryResult = CreateBaseQueryResult; ``` -Defined in: [packages/angular-query-experimental/src/types.ts:165](https://github.com/TanStack/query/blob/main/packages/angular-query-experimental/src/types.ts#L165) +Defined in: [packages/angular-query/src/types.ts:267](https://github.com/TanStack/query/blob/main/packages/angular-query/src/types.ts#L267) The result of `injectQuery`. Same as [CreateBaseQueryResult](CreateBaseQueryResult.md). diff --git a/docs/framework/angular/reference/type-aliases/DefinedCreateInfiniteQueryResult.md b/docs/framework/angular/reference/type-aliases/DefinedCreateInfiniteQueryResult.md index 58ef4a294d6..24bb39e57f2 100644 --- a/docs/framework/angular/reference/type-aliases/DefinedCreateInfiniteQueryResult.md +++ b/docs/framework/angular/reference/type-aliases/DefinedCreateInfiniteQueryResult.md @@ -6,10 +6,10 @@ title: DefinedCreateInfiniteQueryResult ```ts -type DefinedCreateInfiniteQueryResult> = MapToSignals; +type DefinedCreateInfiniteQueryResult = DefinedInfiniteQueryObserverResult> = DefinedInfiniteQueryNarrowing & MapToSignals; ``` -Defined in: [packages/angular-query-experimental/src/types.ts:205](https://github.com/TanStack/query/blob/main/packages/angular-query-experimental/src/types.ts#L205) +Defined in: [packages/angular-query/src/types.ts:313](https://github.com/TanStack/query/blob/main/packages/angular-query/src/types.ts#L313) The result of `injectInfiniteQuery` when `initialData` is set — `data` is never `undefined`. Same shape as [DefinedInfiniteQueryObserverResult](DefinedInfiniteQueryObserverResult.md) from `@tanstack/query-core`, but value fields are exposed as a @@ -31,4 +31,4 @@ The type of errors your `queryFn` may throw. ### TDefinedInfiniteQueryObserver -`TDefinedInfiniteQueryObserver` = [`DefinedInfiniteQueryObserverResult`](DefinedInfiniteQueryObserverResult.md)\<`TData`, `TError`\> +`TDefinedInfiniteQueryObserver` *extends* [`DefinedInfiniteQueryObserverResult`](DefinedInfiniteQueryObserverResult.md)\<`TData`, `TError`\> = [`DefinedInfiniteQueryObserverResult`](DefinedInfiniteQueryObserverResult.md)\<`TData`, `TError`\> diff --git a/docs/framework/angular/reference/type-aliases/DefinedCreateQueryResult.md b/docs/framework/angular/reference/type-aliases/DefinedCreateQueryResult.md index f235e5bdb44..85277c6fb62 100644 --- a/docs/framework/angular/reference/type-aliases/DefinedCreateQueryResult.md +++ b/docs/framework/angular/reference/type-aliases/DefinedCreateQueryResult.md @@ -6,10 +6,10 @@ title: DefinedCreateQueryResult ```ts -type DefinedCreateQueryResult> = BaseQueryNarrowing & MapToSignals>; +type DefinedCreateQueryResult = DefinedQueryObserverResult> = DefinedQueryNarrowing & MapToSignals, QueryResultFields>; ``` -Defined in: [packages/angular-query-experimental/src/types.ts:177](https://github.com/TanStack/query/blob/main/packages/angular-query-experimental/src/types.ts#L177) +Defined in: [packages/angular-query/src/types.ts:279](https://github.com/TanStack/query/blob/main/packages/angular-query/src/types.ts#L279) The result of `injectQuery` when `initialData` is set — `data` is never `undefined`. Same shape as [DefinedQueryObserverResult](DefinedQueryObserverResult.md) from `@tanstack/query-core`, but value fields are exposed as a @@ -31,4 +31,4 @@ The type of errors your `queryFn` may throw. ### TState -`TState` = [`DefinedQueryObserverResult`](DefinedQueryObserverResult.md)\<`TData`, `TError`\> +`TState` *extends* [`DefinedQueryObserverResult`](DefinedQueryObserverResult.md)\<`TData`, `TError`\> = [`DefinedQueryObserverResult`](DefinedQueryObserverResult.md)\<`TData`, `TError`\> diff --git a/docs/framework/angular/reference/type-aliases/DefinedInitialDataInfiniteOptions.md b/docs/framework/angular/reference/type-aliases/DefinedInitialDataInfiniteOptions.md index 59e9af3c26e..bec7095223b 100644 --- a/docs/framework/angular/reference/type-aliases/DefinedInitialDataInfiniteOptions.md +++ b/docs/framework/angular/reference/type-aliases/DefinedInitialDataInfiniteOptions.md @@ -9,7 +9,7 @@ title: DefinedInitialDataInfiniteOptions type DefinedInitialDataInfiniteOptions, TQueryKey extends QueryKey = QueryKey, TPageParam = unknown> = CreateInfiniteQueryOptions & object; ``` -Defined in: [packages/angular-query-experimental/src/infinite-query-options.ts:108](https://github.com/TanStack/query/blob/main/packages/angular-query-experimental/src/infinite-query-options.ts#L108) +Defined in: [packages/angular-query/src/infinite-query-options.ts:108](https://github.com/TanStack/query/blob/main/packages/angular-query/src/infinite-query-options.ts#L108) The options accepted by the `infiniteQueryOptions` overload selected when `initialData` is known to be defined — `data` is never `undefined` (unless a `select` changes `TData` to include `undefined`). diff --git a/docs/framework/angular/reference/type-aliases/DefinedInitialDataOptions.md b/docs/framework/angular/reference/type-aliases/DefinedInitialDataOptions.md index 6d2f1de5847..891724254d7 100644 --- a/docs/framework/angular/reference/type-aliases/DefinedInitialDataOptions.md +++ b/docs/framework/angular/reference/type-aliases/DefinedInitialDataOptions.md @@ -6,10 +6,10 @@ title: DefinedInitialDataOptions ```ts -type DefinedInitialDataOptions = Omit, "queryFn"> & object; +type DefinedInitialDataOptions = CreateQueryOptions & object; ``` -Defined in: [packages/angular-query-experimental/src/query-options.ts:80](https://github.com/TanStack/query/blob/main/packages/angular-query-experimental/src/query-options.ts#L80) +Defined in: [packages/angular-query/src/query-options.ts:79](https://github.com/TanStack/query/blob/main/packages/angular-query/src/query-options.ts#L79) The options accepted by the `queryOptions` overload selected when `initialData` is known to be defined — `data` is never `undefined` (unless a `select` changes `TData` to include `undefined`). @@ -49,19 +49,3 @@ initialData: | NonUndefinedGuard | (() => NonUndefinedGuard); ``` - -If set, this value will be used as the initial data for the query cache (as long as the query hasn't been -created or cached yet). If set to a function, the function will be called **once** during the shared/root -query initialization, and be expected to synchronously return the initial data. Initial data is -considered stale by default unless a `staleTime` has been set. `initialData` **is persisted** to the -cache. - -### queryFn? - -```ts -optional queryFn?: QueryFunction; -``` - -Optional here, but omitting it is only safe when no fetch will be attempted — for example with -`enabled: false`, or when a default query function has been defined. Otherwise, an enabled query with no -`queryFn` still tries to fetch and fails with a "Missing queryFn" error; `initialData` does not prevent this. diff --git a/docs/framework/angular/reference/type-aliases/DevtoolsFeature.md b/docs/framework/angular/reference/type-aliases/DevtoolsFeature.md deleted file mode 100644 index 6d8799c86d3..00000000000 --- a/docs/framework/angular/reference/type-aliases/DevtoolsFeature.md +++ /dev/null @@ -1,19 +0,0 @@ ---- -id: DevtoolsFeature -title: DevtoolsFeature ---- - - - -```ts -type DevtoolsFeature = QueryFeature<"Devtools">; -``` - -Defined in: [packages/angular-query-experimental/src/providers.ts:155](https://github.com/TanStack/query/blob/main/packages/angular-query-experimental/src/providers.ts#L155) - -A type alias that represents a feature which enables developer tools. -The type is used to describe the return value of the `withDevtools` function. - -## See - -withDevtools diff --git a/docs/framework/angular/reference/type-aliases/MutationStateOptions.md b/docs/framework/angular/reference/type-aliases/MutationStateOptions.md new file mode 100644 index 00000000000..db7f7413000 --- /dev/null +++ b/docs/framework/angular/reference/type-aliases/MutationStateOptions.md @@ -0,0 +1,31 @@ +--- +id: MutationStateOptions +title: MutationStateOptions +--- + + + +```ts +type MutationStateOptions = MutationTypeFromResult> = object; +``` + +Defined in: [packages/angular-query/src/inject-mutation-state.ts:26](https://github.com/TanStack/query/blob/main/packages/angular-query/src/inject-mutation-state.ts#L26) + +Filters and optional projection for observing entries in the mutation cache. + +## Type Parameters + +### TResult + +`TResult` = [`MutationState`](../interfaces/MutationState.md) + +### TMutation + +`TMutation` *extends* [`Mutation`](../classes/Mutation.md)\<`any`, `any`, `any`, `any`\> = `MutationTypeFromResult`\<`TResult`\> + +## Properties + +| Property | Type | Description | +| ------ | ------ | ------ | +| `filters?` | [`MutationFilters`](../interfaces/MutationFilters.md) | Restricts the mutation cache entries included in the result. | +| `select?` | (`mutation`: `TMutation`) => `TResult` | Maps each matching mutation to the value exposed in the result signal. | diff --git a/docs/framework/angular/reference/type-aliases/PersistQueryClientFeature.md b/docs/framework/angular/reference/type-aliases/PersistQueryClientFeature.md deleted file mode 100644 index 93f00d82878..00000000000 --- a/docs/framework/angular/reference/type-aliases/PersistQueryClientFeature.md +++ /dev/null @@ -1,15 +0,0 @@ ---- -id: PersistQueryClientFeature -title: PersistQueryClientFeature ---- - - - -```ts -type PersistQueryClientFeature = QueryFeature<"PersistQueryClient">; -``` - -Defined in: [packages/angular-query-experimental/src/providers.ts:161](https://github.com/TanStack/query/blob/main/packages/angular-query-experimental/src/providers.ts#L161) - -A type alias that represents a feature which enables persistence. -The type is used to describe the return value of the `withPersistQueryClient` function. diff --git a/docs/framework/angular/reference/type-aliases/QueriesOptions.md b/docs/framework/angular/reference/type-aliases/QueriesOptions.md index 560224d2435..9a22ca6fa47 100644 --- a/docs/framework/angular/reference/type-aliases/QueriesOptions.md +++ b/docs/framework/angular/reference/type-aliases/QueriesOptions.md @@ -9,13 +9,9 @@ title: QueriesOptions type QueriesOptions = []> = TDepth["length"] extends MAXIMUM_DEPTH ? QueryObserverOptionsForCreateQueries[] : T extends [] ? [] : T extends [infer Head] ? [...TResults, GetCreateQueryOptionsForCreateQueries] : T extends [infer Head, ...(infer Tails)] ? QueriesOptions<[...Tails], [...TResults, GetCreateQueryOptionsForCreateQueries], [...TDepth, 1]> : ReadonlyArray extends T ? T : T extends QueryObserverOptionsForCreateQueries[] ? QueryObserverOptionsForCreateQueries[] : QueryObserverOptionsForCreateQueries[]; ``` -Defined in: [packages/angular-query-experimental/src/inject-queries.ts:153](https://github.com/TanStack/query/blob/main/packages/angular-query-experimental/src/inject-queries.ts#L153) +Defined in: [packages/angular-query/src/inject-queries.types.ts:148](https://github.com/TanStack/query/blob/main/packages/angular-query/src/inject-queries.types.ts#L148) -The `queries` array accepted by `injectQueries`. Recursively unwraps each tuple element so every entry's -`queryFn`/`select`/`throwOnError` are inferred individually, up to 20 elements — past that, tuple -recursion falls back to a single homogeneous options type. An opaque array (e.g. `unknown[]`) is returned -as-is; a non-tuple array of a known element type is mapped to that element type instead, with no such -limit. +Maps a tuple of query descriptions to the options accepted by `injectQueries`. ## Type Parameters @@ -23,18 +19,10 @@ limit. `T` *extends* `any`[] -The type of the `queries` array as written at the call site. - ### TResults `TResults` *extends* `any`[] = \[\] -The internal accumulator that this type builds during recursion. It is not meant to -be set explicitly. - ### TDepth `TDepth` *extends* `ReadonlyArray`\<`number`\> = \[\] - -The internal recursion-depth counter, checked against the 20-element limit. It is not -meant to be set explicitly. diff --git a/docs/framework/angular/reference/type-aliases/QueriesResults.md b/docs/framework/angular/reference/type-aliases/QueriesResults.md index 16322f8cca0..c15f76ba151 100644 --- a/docs/framework/angular/reference/type-aliases/QueriesResults.md +++ b/docs/framework/angular/reference/type-aliases/QueriesResults.md @@ -9,12 +9,9 @@ title: QueriesResults type QueriesResults = []> = TDepth["length"] extends MAXIMUM_DEPTH ? CreateQueryResult[] : T extends [] ? [] : T extends [infer Head] ? [...TResults, GetCreateQueryResult] : T extends [infer Head, ...(infer Tails)] ? QueriesResults<[...Tails], [...TResults, GetCreateQueryResult], [...TDepth, 1]> : { [K in keyof T]: GetCreateQueryResult }; ``` -Defined in: [packages/angular-query-experimental/src/inject-queries.ts:203](https://github.com/TanStack/query/blob/main/packages/angular-query-experimental/src/inject-queries.ts#L203) +Defined in: [packages/angular-query/src/inject-queries.types.ts:187](https://github.com/TanStack/query/blob/main/packages/angular-query/src/inject-queries.types.ts#L187) -The result type returned by `injectQueries`, when no `combine` is provided. Mirrors [QueriesOptions](QueriesOptions.md): -each tuple element's result type is inferred individually, up to 20 elements — past that, tuple recursion -falls back to a single homogeneous [CreateQueryResult](CreateQueryResult.md) type. A non-tuple array is mapped per-element -instead, with no such limit — every entry keeps its individually inferred type regardless of array length. +Maps a tuple of query descriptions to their individual signal-backed results. ## Type Parameters @@ -22,18 +19,10 @@ instead, with no such limit — every entry keeps its individually inferred type `T` *extends* `any`[] -The type of the `queries` array, as inferred by [QueriesOptions](QueriesOptions.md). - ### TResults `TResults` *extends* `any`[] = \[\] -The internal accumulator that this type builds during recursion. It is not meant to -be set explicitly. - ### TDepth `TDepth` *extends* `ReadonlyArray`\<`number`\> = \[\] - -The internal recursion-depth counter, checked against the 20-element limit. It is not -meant to be set explicitly. diff --git a/docs/framework/angular/reference/type-aliases/QueryFeatures.md b/docs/framework/angular/reference/type-aliases/QueryFeatures.md deleted file mode 100644 index 3ea5709ce75..00000000000 --- a/docs/framework/angular/reference/type-aliases/QueryFeatures.md +++ /dev/null @@ -1,23 +0,0 @@ ---- -id: QueryFeatures -title: QueryFeatures ---- - - - -```ts -type QueryFeatures = - | DevtoolsFeature - | PersistQueryClientFeature; -``` - -Defined in: [packages/angular-query-experimental/src/providers.ts:170](https://github.com/TanStack/query/blob/main/packages/angular-query-experimental/src/providers.ts#L170) - -A type alias that represents all Query features available for use with `provideTanStackQuery`. -Features can be enabled by adding special functions to the `provideTanStackQuery` call. -See documentation for each symbol to find corresponding function name. See also `provideTanStackQuery` -documentation on how to use those functions. - -## See - -[provideTanStackQuery](../functions/provideTanStackQuery.md) diff --git a/docs/framework/angular/reference/type-aliases/UndefinedInitialDataInfiniteOptions.md b/docs/framework/angular/reference/type-aliases/UndefinedInitialDataInfiniteOptions.md index ef61b674206..3c3b93f5ca4 100644 --- a/docs/framework/angular/reference/type-aliases/UndefinedInitialDataInfiniteOptions.md +++ b/docs/framework/angular/reference/type-aliases/UndefinedInitialDataInfiniteOptions.md @@ -9,7 +9,7 @@ title: UndefinedInitialDataInfiniteOptions type UndefinedInitialDataInfiniteOptions, TQueryKey extends QueryKey = QueryKey, TPageParam = unknown> = CreateInfiniteQueryOptions & object; ``` -Defined in: [packages/angular-query-experimental/src/infinite-query-options.ts:24](https://github.com/TanStack/query/blob/main/packages/angular-query-experimental/src/infinite-query-options.ts#L24) +Defined in: [packages/angular-query/src/infinite-query-options.ts:24](https://github.com/TanStack/query/blob/main/packages/angular-query/src/infinite-query-options.ts#L24) The options accepted by the `infiniteQueryOptions` overload selected when `initialData` is omitted, may be `undefined`, or is a function that may return `undefined` — `data` may be `undefined` while the query is diff --git a/docs/framework/angular/reference/type-aliases/UndefinedInitialDataOptions.md b/docs/framework/angular/reference/type-aliases/UndefinedInitialDataOptions.md index 9d8d7cc9da2..1e38fb65296 100644 --- a/docs/framework/angular/reference/type-aliases/UndefinedInitialDataOptions.md +++ b/docs/framework/angular/reference/type-aliases/UndefinedInitialDataOptions.md @@ -9,7 +9,7 @@ title: UndefinedInitialDataOptions type UndefinedInitialDataOptions = CreateQueryOptions & object; ``` -Defined in: [packages/angular-query-experimental/src/query-options.ts:22](https://github.com/TanStack/query/blob/main/packages/angular-query-experimental/src/query-options.ts#L22) +Defined in: [packages/angular-query/src/query-options.ts:21](https://github.com/TanStack/query/blob/main/packages/angular-query/src/query-options.ts#L21) The options accepted by the `queryOptions` overload selected when `initialData` is omitted, may be `undefined`, or is a function that may return `undefined` — `data` may be `undefined` while the query is diff --git a/docs/framework/angular/reference/type-aliases/UnusedSkipTokenInfiniteOptions.md b/docs/framework/angular/reference/type-aliases/UnusedSkipTokenInfiniteOptions.md index a52de7268ed..ab582d0a19b 100644 --- a/docs/framework/angular/reference/type-aliases/UnusedSkipTokenInfiniteOptions.md +++ b/docs/framework/angular/reference/type-aliases/UnusedSkipTokenInfiniteOptions.md @@ -9,7 +9,7 @@ title: UnusedSkipTokenInfiniteOptions type UnusedSkipTokenInfiniteOptions, TQueryKey extends QueryKey = QueryKey, TPageParam = unknown> = OmitKeyof, "queryFn"> & object; ``` -Defined in: [packages/angular-query-experimental/src/infinite-query-options.ts:63](https://github.com/TanStack/query/blob/main/packages/angular-query-experimental/src/infinite-query-options.ts#L63) +Defined in: [packages/angular-query/src/infinite-query-options.ts:63](https://github.com/TanStack/query/blob/main/packages/angular-query/src/infinite-query-options.ts#L63) The options accepted by the `infiniteQueryOptions` overload selected when `queryFn` is not `skipToken` and `initialData` is omitted, may be `undefined`, or is a function that may return `undefined` — same as diff --git a/docs/framework/angular/reference/type-aliases/UnusedSkipTokenOptions.md b/docs/framework/angular/reference/type-aliases/UnusedSkipTokenOptions.md index 7695a04936a..24165cac8cf 100644 --- a/docs/framework/angular/reference/type-aliases/UnusedSkipTokenOptions.md +++ b/docs/framework/angular/reference/type-aliases/UnusedSkipTokenOptions.md @@ -9,7 +9,7 @@ title: UnusedSkipTokenOptions type UnusedSkipTokenOptions = OmitKeyof, "queryFn"> & object; ``` -Defined in: [packages/angular-query-experimental/src/query-options.ts:50](https://github.com/TanStack/query/blob/main/packages/angular-query-experimental/src/query-options.ts#L50) +Defined in: [packages/angular-query/src/query-options.ts:49](https://github.com/TanStack/query/blob/main/packages/angular-query/src/query-options.ts#L49) The options accepted by the `queryOptions` overload selected when `queryFn` is not `skipToken` and `initialData` is omitted, may be `undefined`, or is a function that may return `undefined` — same as diff --git a/docs/framework/angular/resource-api.md b/docs/framework/angular/resource-api.md new file mode 100644 index 00000000000..3676698a027 --- /dev/null +++ b/docs/framework/angular/resource-api.md @@ -0,0 +1,180 @@ +--- +id: resource-api +title: Resource API +--- + +> IMPORTANT: `toResource` is experimental. Its API may change in minor and patch releases. +> Pin `@tanstack/angular-query` to an exact version when using this feature. + +Angular Query can convert any query result into an Angular +[`Resource`](https://angular.dev/api/core/Resource)-compatible view with `toResource`. The query +remains responsible for fetching and caching the server state while Angular APIs can consume the +familiar Resource shape. + +```ts +import { Component, input } from '@angular/core' +import { injectQuery, toResource } from '@tanstack/angular-query' + +@Component({ + selector: 'todo-detail', + template: ` + @if (todo.hasValue()) { +

{{ todo.value().title }}

+ } + `, +}) +export class TodoDetail { + readonly id = input.required() + + readonly todoQuery = injectQuery(() => { + const id = this.id() + return { + queryKey: ['todo', id], + queryFn: () => fetchTodo(id), + } + }) + + readonly todo = toResource(this.todoQuery) +} +``` + +The Resource view exposes these fields: + +| Field | Description | +| ----------- | --------------------------------------------------------------------- | +| `value` | The current query data | +| `status` | The query state as an Angular `ResourceStatus` | +| `error` | The current error, normalized to `Error` | +| `isLoading` | Whether the query is loading or reloading | +| `hasValue` | Whether a value is available | +| `snapshot` | The current Resource state as one signal | +| `reload` | Refetches when the query is stale and returns whether a fetch started | + +Use the query's field signals and methods for normal application code. Use `toResource(query)` when +an Angular API expects a Resource or when Resource terminology makes an integration clearer. Call +`query.refetch()` instead of `resource.reload()` when you need an unconditional refetch. + +## Errors + +`value()` throws when the Resource's status is `error`. Read `hasValue()` before accessing it, or +inspect `error()` and `snapshot()` to render an error state. A failed background refetch can leave +cached data available through `query.data()` while the Resource is in its error state. + +Resource errors are not automatically reported globally. See [Error handling](./guides/error-handling.md) +for an opt-in `ErrorHandler` integration. + +## Using Resource with Signal Forms + +> Signal Forms integration requires Angular 21 or newer. + +Angular Signal Forms' +[`validateAsync`](https://angular.dev/guide/forms/signals/async-operations#custom-async-validation-with-validateasync) +accepts a Resource factory. Passing `injectQuery(...)` to `toResource` lets async validation use +Angular Query caching, request deduplication, cancellation, retries, and stale-time behavior. + +The example below validates a username. The query is disabled while the field has no value, and the +factory returns `toResource(query)`. + +> In Angular 21, `validateAsync`'s `factory` requires a return type of `ResourceRef` while +> the implementation works with the read-only `Resource` interface returned by `toResource`. +> To use the integration, cast the result of `toResource` as +> `toResource(query) as unknown as ResourceRef` where `T` is the query's data type. + +> The `debounce` option on `validateAsync` does not work with `toResource(query)` due to +> an [upstream Angular issue](https://github.com/angular/angular/issues/70884). Use +> [`debounce`](https://angular.dev/api/forms/signals/debounce) from `@angular/forms/signals` +> on the field instead. This delays updates from the input to the form model by 300 ms; +> blurring the field or submitting the form flushes the pending update immediately. + +```ts +import { Component, inject, signal } from '@angular/core' +import { + FormField, + debounce, + form, + validateAsync, +} from '@angular/forms/signals' +import { injectQuery, toResource } from '@tanstack/angular-query' + +type UsernameValidation = { + available: boolean +} + +@Component({ + selector: 'registration-form', + imports: [FormField], + template: ``, +}) +export class RegistrationForm { + private readonly users = inject(UserService) + readonly model = signal({ username: '' }) + + readonly registrationForm = form(this.model, (path) => { + debounce(path.username, 300) + + validateAsync(path.username, { + params: ({ value }) => value().trim() || undefined, + factory: (username) => + toResource( + injectQuery(() => { + const name = username() + return { + queryKey: ['username-availability', name], + enabled: !!name, + queryFn: (): Promise => + this.users.checkUsername(name!), + } + }), + ), + onSuccess: (result) => + result?.available + ? null + : { + kind: 'usernameTaken', + message: 'Username is already taken', + }, + onError: () => ({ + kind: 'usernameUnavailable', + message: 'Could not check username availability', + }), + }) + }) +} +``` + +Calling `reloadValidation()` on the field refetches the query only when its cached data is stale. + +## Comparison + +Choosing between Angular's built-in +[`resource`](https://angular.dev/guide/signals/resource) and TanStack Query depends on whether the +operation is isolated async state or server state shared across the application. + +This table focuses on built-in behavior and may not capture every custom implementation. Review +both APIs for the needs of your application. + +Feature/Capability Key: + +- ✅ 1st-class, built-in, and ready to use with no added configuration or code +- 🟠 Supported through an additional package +- 🔶 Possible, but requires custom application code +- 🛑 Not built in + +| | Angular `resource` | TanStack Query | +| --------------------------------------- | ---------------------------------------------- | ----------------------------------------------------- | +| Reactive parameters and signal state | ✅ | ✅ | +| Request cancellation | ✅ | ✅ | +| Angular Resource interface | ✅ | ✅ Through `toResource(query)` | +| Shared cache by data identity | 🛑 | ✅ Query keys identify cached data | +| Request deduplication across components | 🛑 | ✅ For queries with the same key | +| Stale and garbage-collection timing | 🔶 | ✅ `staleTime` and `gcTime` | +| Cache invalidation and updates | 🔶 | ✅ `invalidateQueries` and `setQueryData` | +| Retries and background refetching | 🔶 | ✅ Including focus and reconnect refetching | +| Mutations and optimistic updates | 🔶 | ✅ `injectMutation` and QueryClient cache updates | +| SSR | ✅ A resource can transfer its value with `id` | ✅ The complete query cache is hydrated automatically | +| Persistence | 🔶 | 🟠 Through the persistence package | + +Angular `resource` is a good fit for a self-contained asynchronous task. It retains the value of +its own instance and can transfer that value during SSR, but it does not provide a shared, +query-keyed cache or coordinate invalidation and mutations across the application. Use TanStack +Query for server data that is reused, cached, invalidated, mutated, retried, or persisted. diff --git a/docs/framework/angular/typescript.md b/docs/framework/angular/typescript.md index 6ab40dad9bc..ffacb78c1c1 100644 --- a/docs/framework/angular/typescript.md +++ b/docs/framework/angular/typescript.md @@ -6,12 +6,14 @@ 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', + '@tanstack/angular-query': '@tanstack/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()`', 'function:': 'function.', + "TanStack Query follows \\[DefinitelyTyped's support window\\]\\(https://github\\.com/DefinitelyTyped/DefinitelyTyped#support-window\\) and supports TypeScript versions released within the last 2 years\\. At the moment, that means TypeScript \\*\\*5\\.4\\*\\* and newer\\.": 'Angular Query supports the TypeScript versions required by your Angular version. See [Angular version compatibility](https://angular.dev/reference/versions).', } --- @@ -149,9 +151,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 @@ -176,8 +178,8 @@ computed(() => { If you inline query options into `injectQuery`, you'll get automatic type inference. However, you might want to extract the query options into a separate function to share them between `injectQuery` and e.g. `queryClient.query`, or manage them in a service. In that case, you'd lose type inference. To get it back, you can use the `queryOptions` helper: -```angular-ts -import { noop } from '@tanstack/angular-query-experimental' +```ts +import { noop } from '@tanstack/angular-query' @Injectable({ providedIn: 'root', diff --git a/docs/framework/angular/zoneless.md b/docs/framework/angular/zoneless.md deleted file mode 100644 index ee5811f1a86..00000000000 --- a/docs/framework/angular/zoneless.md +++ /dev/null @@ -1,12 +0,0 @@ ---- -id: zoneless -title: Zoneless Angular ---- - -Because the Angular adapter for TanStack Query is built on signals, it fully supports Zoneless! - -Among Zoneless benefits are improved performance and debugging experience. For details see the [Angular documentation](https://angular.dev/guide/zoneless). - -> Besides Zoneless, ZoneJS change detection is also fully supported. - -> When using Zoneless, ensure you are on Angular v19 or later to take advantage of the `PendingTasks` integration that keeps `ApplicationRef.whenStable()` in sync with ongoing queries and mutations. diff --git a/examples/angular/auto-refetching/angular.json b/examples/angular/auto-refetching/angular.json index 4741f066fd4..e0fbdc2cbef 100644 --- a/examples/angular/auto-refetching/angular.json +++ b/examples/angular/auto-refetching/angular.json @@ -81,6 +81,9 @@ }, "serve": { "builder": "@angular/build:dev-server", + "options": { + "prebundle": { "exclude": ["@angular"] } + }, "configurations": { "production": { "buildTarget": "auto-refetching:build:production" diff --git a/examples/angular/auto-refetching/package.json b/examples/angular/auto-refetching/package.json index 6692ae89665..2d7e559c5b3 100644 --- a/examples/angular/auto-refetching/package.json +++ b/examples/angular/auto-refetching/package.json @@ -15,9 +15,11 @@ "@angular/compiler": "^22.2.4", "@angular/core": "^22.2.4", "@angular/platform-browser": "^22.2.4", - "@tanstack/angular-query-experimental": "^5.107.1", + "@tanstack/angular-query-devtools": "^5.0.0-rc.5", + "@tanstack/angular-query": "^5.0.0-rc.5", "rxjs": "^7.8.2", - "tslib": "^2.8.1" + "tslib": "^2.8.1", + "zone.js": "0.16.1" }, "devDependencies": { "@angular/build": "^22.2.5", diff --git a/examples/angular/auto-refetching/src/app/app.config.ts b/examples/angular/auto-refetching/src/app/app.config.ts index 6fef8b56309..ba6116f9f6b 100644 --- a/examples/angular/auto-refetching/src/app/app.config.ts +++ b/examples/angular/auto-refetching/src/app/app.config.ts @@ -3,11 +3,8 @@ import { withFetch, withInterceptors, } from '@angular/common/http' -import { - QueryClient, - provideTanStackQuery, -} from '@tanstack/angular-query-experimental' -import { withDevtools } from '@tanstack/angular-query-experimental/devtools' +import { QueryClient, provideTanStackQuery } from '@tanstack/angular-query' +import { withDevtools } from '@tanstack/angular-query-devtools' import { mockInterceptor } from './interceptor/mock-api.interceptor' import type { ApplicationConfig } from '@angular/core' @@ -15,13 +12,14 @@ export const appConfig: ApplicationConfig = { providers: [ provideHttpClient(withFetch(), withInterceptors([mockInterceptor])), provideTanStackQuery( - new QueryClient({ - defaultOptions: { - queries: { - gcTime: 24 * 60 * 60 * 1000, // 24 hours + () => + new QueryClient({ + defaultOptions: { + queries: { + gcTime: 1000 * 60 * 60 * 24, // 24 hours + }, }, - }, - }), + }), withDevtools(), ), ], diff --git a/examples/angular/auto-refetching/src/app/components/auto-refetching.component.ts b/examples/angular/auto-refetching/src/app/components/auto-refetching.component.ts index 37050b74c6c..e0b7e42c797 100644 --- a/examples/angular/auto-refetching/src/app/components/auto-refetching.component.ts +++ b/examples/angular/auto-refetching/src/app/components/auto-refetching.component.ts @@ -8,7 +8,7 @@ import { QueryClient, injectMutation, injectQuery, -} from '@tanstack/angular-query-experimental' +} from '@tanstack/angular-query' import { NgStyle } from '@angular/common' import { TasksMutations, TasksQueries } from '../services/tasks/queries' diff --git a/examples/angular/auto-refetching/src/app/services/tasks/queries.ts b/examples/angular/auto-refetching/src/app/services/tasks/queries.ts index bfc3960852a..8268aa18a57 100644 --- a/examples/angular/auto-refetching/src/app/services/tasks/queries.ts +++ b/examples/angular/auto-refetching/src/app/services/tasks/queries.ts @@ -1,8 +1,5 @@ import { Injectable, inject } from '@angular/core' -import { - mutationOptions, - queryOptions, -} from '@tanstack/angular-query-experimental' +import { mutationOptions, queryOptions } from '@tanstack/angular-query' import { lastValueFrom } from 'rxjs' import { TasksAPI } from './api' diff --git a/examples/angular/basic-persister/angular.json b/examples/angular/basic-persister/angular.json index 036d0dda2df..10e65a38330 100644 --- a/examples/angular/basic-persister/angular.json +++ b/examples/angular/basic-persister/angular.json @@ -81,6 +81,9 @@ }, "serve": { "builder": "@angular/build:dev-server", + "options": { + "prebundle": { "exclude": ["@angular"] } + }, "configurations": { "production": { "buildTarget": "basic-persister:build:production" diff --git a/examples/angular/basic-persister/package.json b/examples/angular/basic-persister/package.json index 5da1bc75c41..86f69f65864 100644 --- a/examples/angular/basic-persister/package.json +++ b/examples/angular/basic-persister/package.json @@ -15,11 +15,13 @@ "@angular/compiler": "^22.2.4", "@angular/core": "^22.2.4", "@angular/platform-browser": "^22.2.4", - "@tanstack/angular-query-experimental": "^5.107.1", - "@tanstack/angular-query-persist-client": "^5.103.2", + "@tanstack/angular-query-devtools": "^5.0.0-rc.5", + "@tanstack/angular-query": "^5.0.0-rc.5", + "@tanstack/angular-query-persist-client": "^5.0.0-rc.5", "@tanstack/query-async-storage-persister": "^5.107.1", "rxjs": "^7.8.2", - "tslib": "^2.8.1" + "tslib": "^2.8.1", + "zone.js": "0.16.1" }, "devDependencies": { "@angular/build": "^22.2.5", diff --git a/examples/angular/basic-persister/src/app/app.config.ts b/examples/angular/basic-persister/src/app/app.config.ts index a29a2268e00..669064869ef 100644 --- a/examples/angular/basic-persister/src/app/app.config.ts +++ b/examples/angular/basic-persister/src/app/app.config.ts @@ -1,10 +1,7 @@ import { provideHttpClient, withFetch } from '@angular/common/http' -import { - QueryClient, - provideTanStackQuery, -} from '@tanstack/angular-query-experimental' +import { QueryClient, provideTanStackQuery } from '@tanstack/angular-query' import { withPersistQueryClient } from '@tanstack/angular-query-persist-client' -import { withDevtools } from '@tanstack/angular-query-experimental/devtools' +import { withDevtools } from '@tanstack/angular-query-devtools' import { createAsyncStoragePersister } from '@tanstack/query-async-storage-persister' import type { ApplicationConfig } from '@angular/core' @@ -16,20 +13,21 @@ export const appConfig: ApplicationConfig = { providers: [ provideHttpClient(withFetch()), provideTanStackQuery( - new QueryClient({ - defaultOptions: { - queries: { - staleTime: 60 * 1000, // 1 minute - gcTime: 24 * 60 * 60 * 1000, // 24 hours + () => + new QueryClient({ + defaultOptions: { + queries: { + staleTime: 1000 * 60, // 1 minute + gcTime: 1000 * 60 * 60 * 24, // 24 hours + }, }, - }, - }), + }), withDevtools(), - withPersistQueryClient({ + withPersistQueryClient(() => ({ persistOptions: { persister: localStoragePersister, }, - }), + })), ), ], } diff --git a/examples/angular/basic-persister/src/app/components/post.component.ts b/examples/angular/basic-persister/src/app/components/post.component.ts index 6f8ddec8392..69f79db9672 100644 --- a/examples/angular/basic-persister/src/app/components/post.component.ts +++ b/examples/angular/basic-persister/src/app/components/post.component.ts @@ -5,7 +5,7 @@ import { input, output, } from '@angular/core' -import { injectQuery } from '@tanstack/angular-query-experimental' +import { injectQuery } from '@tanstack/angular-query' import { PostsQueries } from '../services/posts/queries' @Component({ diff --git a/examples/angular/basic-persister/src/app/components/posts.component.ts b/examples/angular/basic-persister/src/app/components/posts.component.ts index e7015896f0a..27d711a47f0 100644 --- a/examples/angular/basic-persister/src/app/components/posts.component.ts +++ b/examples/angular/basic-persister/src/app/components/posts.component.ts @@ -4,7 +4,7 @@ import { inject, output, } from '@angular/core' -import { QueryClient, injectQuery } from '@tanstack/angular-query-experimental' +import { QueryClient, injectQuery } from '@tanstack/angular-query' import { PostsQueries } from '../services/posts/queries' @Component({ diff --git a/examples/angular/basic-persister/src/app/services/posts/queries.ts b/examples/angular/basic-persister/src/app/services/posts/queries.ts index e3bbb2b6b4b..b6b5d993520 100644 --- a/examples/angular/basic-persister/src/app/services/posts/queries.ts +++ b/examples/angular/basic-persister/src/app/services/posts/queries.ts @@ -1,5 +1,5 @@ import { Injectable, inject } from '@angular/core' -import { queryOptions } from '@tanstack/angular-query-experimental' +import { queryOptions } from '@tanstack/angular-query' import { fromEvent, lastValueFrom, takeUntil } from 'rxjs' import { PostsAPI } from './api' diff --git a/examples/angular/basic/angular.json b/examples/angular/basic/angular.json index 337fb81cf3f..d94c3c07436 100644 --- a/examples/angular/basic/angular.json +++ b/examples/angular/basic/angular.json @@ -81,6 +81,9 @@ }, "serve": { "builder": "@angular/build:dev-server", + "options": { + "prebundle": { "exclude": ["@angular"] } + }, "configurations": { "production": { "buildTarget": "basic:build:production" diff --git a/examples/angular/basic/package.json b/examples/angular/basic/package.json index 8829bcfdb55..450cd705786 100644 --- a/examples/angular/basic/package.json +++ b/examples/angular/basic/package.json @@ -15,9 +15,11 @@ "@angular/compiler": "^22.2.4", "@angular/core": "^22.2.4", "@angular/platform-browser": "^22.2.4", - "@tanstack/angular-query-experimental": "^5.107.1", + "@tanstack/angular-query-devtools": "^5.0.0-rc.5", + "@tanstack/angular-query": "^5.0.0-rc.5", "rxjs": "^7.8.2", - "tslib": "^2.8.1" + "tslib": "^2.8.1", + "zone.js": "0.16.1" }, "devDependencies": { "@angular/build": "^22.2.5", diff --git a/examples/angular/basic/src/app/app.config.ts b/examples/angular/basic/src/app/app.config.ts index a70ed7cb384..3c9a748815f 100644 --- a/examples/angular/basic/src/app/app.config.ts +++ b/examples/angular/basic/src/app/app.config.ts @@ -1,22 +1,20 @@ import { provideHttpClient, withFetch } from '@angular/common/http' -import { - QueryClient, - provideTanStackQuery, -} from '@tanstack/angular-query-experimental' -import { withDevtools } from '@tanstack/angular-query-experimental/devtools' +import { QueryClient, provideTanStackQuery } from '@tanstack/angular-query' +import { withDevtools } from '@tanstack/angular-query-devtools' import type { ApplicationConfig } from '@angular/core' export const appConfig: ApplicationConfig = { providers: [ provideHttpClient(withFetch()), provideTanStackQuery( - new QueryClient({ - defaultOptions: { - queries: { - gcTime: 24 * 60 * 60 * 1000, // 24 hours + () => + new QueryClient({ + defaultOptions: { + queries: { + gcTime: 1000 * 60 * 60 * 24, // 24 hours + }, }, - }, - }), + }), withDevtools(), ), ], diff --git a/examples/angular/basic/src/app/components/post.component.ts b/examples/angular/basic/src/app/components/post.component.ts index 6f8ddec8392..69f79db9672 100644 --- a/examples/angular/basic/src/app/components/post.component.ts +++ b/examples/angular/basic/src/app/components/post.component.ts @@ -5,7 +5,7 @@ import { input, output, } from '@angular/core' -import { injectQuery } from '@tanstack/angular-query-experimental' +import { injectQuery } from '@tanstack/angular-query' import { PostsQueries } from '../services/posts/queries' @Component({ diff --git a/examples/angular/basic/src/app/components/posts.component.ts b/examples/angular/basic/src/app/components/posts.component.ts index e7015896f0a..27d711a47f0 100644 --- a/examples/angular/basic/src/app/components/posts.component.ts +++ b/examples/angular/basic/src/app/components/posts.component.ts @@ -4,7 +4,7 @@ import { inject, output, } from '@angular/core' -import { QueryClient, injectQuery } from '@tanstack/angular-query-experimental' +import { QueryClient, injectQuery } from '@tanstack/angular-query' import { PostsQueries } from '../services/posts/queries' @Component({ diff --git a/examples/angular/basic/src/app/services/posts/queries.ts b/examples/angular/basic/src/app/services/posts/queries.ts index e3bbb2b6b4b..b6b5d993520 100644 --- a/examples/angular/basic/src/app/services/posts/queries.ts +++ b/examples/angular/basic/src/app/services/posts/queries.ts @@ -1,5 +1,5 @@ import { Injectable, inject } from '@angular/core' -import { queryOptions } from '@tanstack/angular-query-experimental' +import { queryOptions } from '@tanstack/angular-query' import { fromEvent, lastValueFrom, takeUntil } from 'rxjs' import { PostsAPI } from './api' diff --git a/examples/angular/devtools-panel-angular-router/angular.json b/examples/angular/devtools-panel-angular-router/angular.json index 51e6a5b3d11..e897af75c1b 100644 --- a/examples/angular/devtools-panel-angular-router/angular.json +++ b/examples/angular/devtools-panel-angular-router/angular.json @@ -79,6 +79,9 @@ }, "serve": { "builder": "@angular/build:dev-server", + "options": { + "prebundle": { "exclude": ["@angular"] } + }, "configurations": { "production": { "buildTarget": "devtools-panel:build:production" diff --git a/examples/angular/devtools-panel-angular-router/package.json b/examples/angular/devtools-panel-angular-router/package.json index df5961ab730..c0b8c7cbc4f 100644 --- a/examples/angular/devtools-panel-angular-router/package.json +++ b/examples/angular/devtools-panel-angular-router/package.json @@ -16,9 +16,10 @@ "@angular/core": "^22.2.4", "@angular/platform-browser": "^22.2.4", "@angular/router": "^22.2.4", - "@tanstack/angular-query-experimental": "^5.107.1", + "@tanstack/angular-query": "^5.0.0-rc.5", "rxjs": "^7.8.2", - "tslib": "^2.8.1" + "tslib": "^2.8.1", + "@tanstack/angular-query-devtools": "^5.0.0-rc.5" }, "devDependencies": { "@angular/build": "^22.2.5", diff --git a/examples/angular/devtools-panel-angular-router/src/app/app.config.ts b/examples/angular/devtools-panel-angular-router/src/app/app.config.ts index b51d14cb81e..68222c873ee 100644 --- a/examples/angular/devtools-panel-angular-router/src/app/app.config.ts +++ b/examples/angular/devtools-panel-angular-router/src/app/app.config.ts @@ -1,10 +1,7 @@ import { provideHttpClient, withFetch } from '@angular/common/http' import { provideRouter } from '@angular/router' -import { - QueryClient, - provideTanStackQuery, -} from '@tanstack/angular-query-experimental' +import { QueryClient, provideTanStackQuery } from '@tanstack/angular-query' import { routes } from './app.routes' import type { ApplicationConfig } from '@angular/core' @@ -12,6 +9,6 @@ export const appConfig: ApplicationConfig = { providers: [ provideHttpClient(withFetch()), provideRouter(routes), - provideTanStackQuery(new QueryClient()), + provideTanStackQuery(() => new QueryClient()), ], } diff --git a/examples/angular/devtools-panel-angular-router/src/app/components/basic-devtools-panel-example.component.ts b/examples/angular/devtools-panel-angular-router/src/app/components/basic-devtools-panel-example.component.ts index f0a56611eb0..8f3801c52d8 100644 --- a/examples/angular/devtools-panel-angular-router/src/app/components/basic-devtools-panel-example.component.ts +++ b/examples/angular/devtools-panel-angular-router/src/app/components/basic-devtools-panel-example.component.ts @@ -4,7 +4,7 @@ import { signal, viewChild, } from '@angular/core' -import { injectDevtoolsPanel } from '@tanstack/angular-query-experimental/devtools-panel' +import { injectDevtoolsPanel } from '@tanstack/angular-query-devtools/devtools-panel' import { ExampleQueryComponent } from './example-query.component' import type { ElementRef } from '@angular/core' diff --git a/examples/angular/devtools-panel-angular-router/src/app/components/example-query.component.ts b/examples/angular/devtools-panel-angular-router/src/app/components/example-query.component.ts index 63661dfa3a4..4651a076350 100644 --- a/examples/angular/devtools-panel-angular-router/src/app/components/example-query.component.ts +++ b/examples/angular/devtools-panel-angular-router/src/app/components/example-query.component.ts @@ -1,5 +1,5 @@ import { ChangeDetectionStrategy, Component, inject } from '@angular/core' -import { injectQuery } from '@tanstack/angular-query-experimental' +import { injectQuery } from '@tanstack/angular-query' import { ReposQueries } from '../services/repos/queries' @Component({ diff --git a/examples/angular/devtools-panel-angular-router/src/app/components/lazy-load-devtools-panel-example.component.ts b/examples/angular/devtools-panel-angular-router/src/app/components/lazy-load-devtools-panel-example.component.ts index 9bb23b11924..47c8192d9b4 100644 --- a/examples/angular/devtools-panel-angular-router/src/app/components/lazy-load-devtools-panel-example.component.ts +++ b/examples/angular/devtools-panel-angular-router/src/app/components/lazy-load-devtools-panel-example.component.ts @@ -5,12 +5,13 @@ import { computed, effect, inject, + runInInjectionContext, signal, viewChild, } from '@angular/core' import { ExampleQueryComponent } from './example-query.component' import type { ElementRef } from '@angular/core' -import type { DevtoolsPanelRef } from '@tanstack/angular-query-experimental/devtools-panel' +import type { DevtoolsPanelRef } from '@tanstack/angular-query-devtools/devtools-panel' @Component({ selector: 'lazy-load-devtools-panel-example', @@ -49,11 +50,11 @@ export default class LazyLoadDevtoolsPanelExampleComponent { if (this.devtools()) return if (this.isOpen()) { this.devtools.set( - import('@tanstack/angular-query-experimental/devtools-panel').then( + import('@tanstack/angular-query-devtools/devtools-panel').then( ({ injectDevtoolsPanel }) => - injectDevtoolsPanel(this.devToolsOptions, { - injector: this.injector, - }), + runInInjectionContext(this.injector, () => + injectDevtoolsPanel(this.devToolsOptions), + ), ), ) } diff --git a/examples/angular/devtools-panel-angular-router/src/app/services/repos/queries.ts b/examples/angular/devtools-panel-angular-router/src/app/services/repos/queries.ts index de73d964ff3..4f031c1907c 100644 --- a/examples/angular/devtools-panel-angular-router/src/app/services/repos/queries.ts +++ b/examples/angular/devtools-panel-angular-router/src/app/services/repos/queries.ts @@ -1,5 +1,5 @@ import { Injectable, inject } from '@angular/core' -import { queryOptions } from '@tanstack/angular-query-experimental' +import { queryOptions } from '@tanstack/angular-query' import { lastValueFrom } from 'rxjs' import { ReposAPI } from './api' diff --git a/examples/angular/dynamic-devtools/.devcontainer/devcontainer.json b/examples/angular/dynamic-devtools/.devcontainer/devcontainer.json new file mode 100644 index 00000000000..365adf8f4c3 --- /dev/null +++ b/examples/angular/dynamic-devtools/.devcontainer/devcontainer.json @@ -0,0 +1,4 @@ +{ + "name": "Node.js", + "image": "mcr.microsoft.com/devcontainers/javascript-node:22" +} diff --git a/examples/angular/dynamic-devtools/.eslintrc.cjs b/examples/angular/dynamic-devtools/.eslintrc.cjs new file mode 100644 index 00000000000..cca134ce166 --- /dev/null +++ b/examples/angular/dynamic-devtools/.eslintrc.cjs @@ -0,0 +1,6 @@ +// @ts-check + +/** @type {import('eslint').Linter.Config} */ +const config = {} + +module.exports = config diff --git a/examples/angular/dynamic-devtools/README.md b/examples/angular/dynamic-devtools/README.md new file mode 100644 index 00000000000..fab7a9d9df2 --- /dev/null +++ b/examples/angular/dynamic-devtools/README.md @@ -0,0 +1,10 @@ +# TanStack Query Angular dynamic devtools example + +Devtools load automatically in development. In production builds, press **⌘ Ctrl Shift D** (macOS) to load them on demand. + +To run: + +- From the repo root: `pnpm install` then `pnpm --filter @tanstack/query-example-angular-dynamic-devtools start` +- From this folder: `pnpm start` + +For a production-like devserver (so you can try the shortcut), use `ng serve --configuration production`. diff --git a/examples/angular/dynamic-devtools/angular.json b/examples/angular/dynamic-devtools/angular.json new file mode 100644 index 00000000000..16d6a1b3a26 --- /dev/null +++ b/examples/angular/dynamic-devtools/angular.json @@ -0,0 +1,133 @@ +{ + "$schema": "./node_modules/@angular/cli/lib/config/schema.json", + "version": 1, + "cli": { + "packageManager": "pnpm", + "analytics": false, + "cache": { + "enabled": false + } + }, + "newProjectRoot": "projects", + "projects": { + "dynamic-devtools": { + "projectType": "application", + "schematics": { + "@schematics/angular:component": { + "inlineTemplate": true, + "inlineStyle": true, + "skipTests": true + }, + "@schematics/angular:class": { + "skipTests": true + }, + "@schematics/angular:directive": { + "skipTests": true + }, + "@schematics/angular:guard": { + "skipTests": true + }, + "@schematics/angular:interceptor": { + "skipTests": true + }, + "@schematics/angular:pipe": { + "skipTests": true + }, + "@schematics/angular:resolver": { + "skipTests": true + }, + "@schematics/angular:service": { + "skipTests": true + } + }, + "root": "", + "sourceRoot": "src", + "prefix": "app", + "architect": { + "build": { + "builder": "@angular/build:application", + "options": { + "outputPath": "dist/dynamic-devtools", + "index": "src/index.html", + "browser": "src/main.ts", + "polyfills": ["zone.js"], + "tsConfig": "tsconfig.app.json", + "assets": ["src/favicon.ico"], + "styles": ["src/styles.css"], + "scripts": [] + }, + "configurations": { + "production": { + "budgets": [ + { + "type": "initial", + "maximumWarning": "500kb", + "maximumError": "1mb" + }, + { + "type": "anyComponentStyle", + "maximumWarning": "2kb", + "maximumError": "4kb" + } + ], + "outputHashing": "all" + }, + "development": { + "optimization": false, + "extractLicenses": false, + "sourceMap": true + } + }, + "defaultConfiguration": "production" + }, + "serve": { + "builder": "@angular/build:dev-server", + "options": { + "prebundle": { "exclude": ["@angular"] } + }, + "configurations": { + "production": { + "buildTarget": "dynamic-devtools:build:production" + }, + "development": { + "buildTarget": "dynamic-devtools:build:development" + } + }, + "defaultConfiguration": "development" + }, + "extract-i18n": { + "builder": "@angular/build:extract-i18n", + "options": { + "buildTarget": "dynamic-devtools:build" + } + } + } + } + }, + "schematics": { + "@schematics/angular:component": { + "type": "component" + }, + "@schematics/angular:directive": { + "type": "directive" + }, + "@schematics/angular:service": { + "type": "service" + }, + "@schematics/angular:guard": { + "typeSeparator": "." + }, + "@schematics/angular:interceptor": { + "typeSeparator": "." + }, + "@schematics/angular:module": { + "typeSeparator": "." + }, + "@schematics/angular:pipe": { + "typeSeparator": "." + }, + "@schematics/angular:resolver": { + "typeSeparator": "." + } + } +} diff --git a/examples/angular/dynamic-devtools/package.json b/examples/angular/dynamic-devtools/package.json new file mode 100644 index 00000000000..9a54ea483f7 --- /dev/null +++ b/examples/angular/dynamic-devtools/package.json @@ -0,0 +1,28 @@ +{ + "name": "@tanstack/query-example-angular-dynamic-devtools", + "type": "module", + "scripts": { + "ng": "ng", + "start": "ng serve", + "build": "ng build", + "watch": "ng build --watch --configuration development" + }, + "private": true, + "dependencies": { + "@angular/common": "^22.0.0", + "@angular/compiler": "^22.0.0", + "@angular/core": "^22.0.0", + "@angular/platform-browser": "^22.0.0", + "@tanstack/angular-query-devtools": "^5.0.0-rc.5", + "@tanstack/angular-query": "^5.0.0-rc.5", + "rxjs": "^7.8.2", + "tslib": "^2.8.1", + "zone.js": "0.16.1" + }, + "devDependencies": { + "@angular/build": "^22.0.0", + "@angular/cli": "^22.0.0", + "@angular/compiler-cli": "^22.0.0", + "typescript": "6.0.3" + } +} diff --git a/examples/angular/dynamic-devtools/src/app/app.component.ts b/examples/angular/dynamic-devtools/src/app/app.component.ts new file mode 100644 index 00000000000..4f389242fb8 --- /dev/null +++ b/examples/angular/dynamic-devtools/src/app/app.component.ts @@ -0,0 +1,10 @@ +import { ChangeDetectionStrategy, Component } from '@angular/core' +import { DynamicDevtoolsExampleComponent } from './components/dynamic-devtools-example.component' + +@Component({ + selector: 'app-root', + changeDetection: ChangeDetectionStrategy.OnPush, + imports: [DynamicDevtoolsExampleComponent], + template: ``, +}) +export class AppComponent {} diff --git a/examples/angular/dynamic-devtools/src/app/app.config.ts b/examples/angular/dynamic-devtools/src/app/app.config.ts new file mode 100644 index 00000000000..30f1915f6aa --- /dev/null +++ b/examples/angular/dynamic-devtools/src/app/app.config.ts @@ -0,0 +1,18 @@ +import { provideHttpClient, withFetch } from '@angular/common/http' +import { QueryClient, provideTanStackQuery } from '@tanstack/angular-query' +import { withDevtools } from '@tanstack/angular-query-devtools/production' +import { inject } from '@angular/core' +import type { ApplicationConfig } from '@angular/core' +import { DevtoolsOptionsManager } from './devtools-options.manager' + +export const appConfig: ApplicationConfig = { + providers: [ + provideHttpClient(withFetch()), + provideTanStackQuery( + () => new QueryClient(), + withDevtools(() => ({ + loadDevtools: inject(DevtoolsOptionsManager).loadDevtools, + })), + ), + ], +} diff --git a/examples/angular/dynamic-devtools/src/app/components/dynamic-devtools-example.component.html b/examples/angular/dynamic-devtools/src/app/components/dynamic-devtools-example.component.html new file mode 100644 index 00000000000..9d68159ed16 --- /dev/null +++ b/examples/angular/dynamic-devtools/src/app/components/dynamic-devtools-example.component.html @@ -0,0 +1,18 @@ +

+ Devtools load in development automatically. For a production build, press + ⌘CtrlShiftD once to load them. +

+ +@if (query.isPending()) { +
Loading...
+} +@if (query.isError()) { +
An error has occurred: {{ query.error().message }}
+} +@if (query.data(); as data) { +

{{ data.name }}

+

{{ data.description }}

+ 👀 {{ data.subscribers_count }} + ✨ {{ data.stargazers_count }} + 🍴 {{ data.forks_count }} +} diff --git a/examples/angular/dynamic-devtools/src/app/components/dynamic-devtools-example.component.ts b/examples/angular/dynamic-devtools/src/app/components/dynamic-devtools-example.component.ts new file mode 100644 index 00000000000..e810f3ec773 --- /dev/null +++ b/examples/angular/dynamic-devtools/src/app/components/dynamic-devtools-example.component.ts @@ -0,0 +1,29 @@ +import { HttpClient } from '@angular/common/http' +import { ChangeDetectionStrategy, Component, inject } from '@angular/core' +import { injectQuery } from '@tanstack/angular-query' +import { lastValueFrom } from 'rxjs' + +interface Response { + name: string + description: string + subscribers_count: number + stargazers_count: number + forks_count: number +} + +@Component({ + changeDetection: ChangeDetectionStrategy.OnPush, + selector: 'dynamic-devtools-example', + templateUrl: './dynamic-devtools-example.component.html', +}) +export class DynamicDevtoolsExampleComponent { + readonly #http = inject(HttpClient) + + readonly query = injectQuery(() => ({ + queryKey: ['repoData'], + queryFn: () => + lastValueFrom( + this.#http.get('https://api.github.com/repos/tanstack/query'), + ), + })) +} diff --git a/examples/angular/dynamic-devtools/src/app/devtools-options.manager.ts b/examples/angular/dynamic-devtools/src/app/devtools-options.manager.ts new file mode 100644 index 00000000000..23525f841ac --- /dev/null +++ b/examples/angular/dynamic-devtools/src/app/devtools-options.manager.ts @@ -0,0 +1,19 @@ +import { Injectable, isDevMode } from '@angular/core' +import { toSignal } from '@angular/core/rxjs-interop' +import { fromEvent, map, scan } from 'rxjs' + +@Injectable({ providedIn: 'root' }) +export class DevtoolsOptionsManager { + readonly loadDevtools = toSignal( + fromEvent(document, 'keydown').pipe( + map( + (event): boolean => + event.metaKey && event.ctrlKey && event.shiftKey && event.key === 'D', + ), + scan((acc, curr) => acc || curr, false), + ), + { + initialValue: false, + }, + ) +} diff --git a/examples/angular/dynamic-devtools/src/favicon.ico b/examples/angular/dynamic-devtools/src/favicon.ico new file mode 100644 index 00000000000..57614f9c967 Binary files /dev/null and b/examples/angular/dynamic-devtools/src/favicon.ico differ diff --git a/examples/angular/dynamic-devtools/src/index.html b/examples/angular/dynamic-devtools/src/index.html new file mode 100644 index 00000000000..9988a64448b --- /dev/null +++ b/examples/angular/dynamic-devtools/src/index.html @@ -0,0 +1,13 @@ + + + + + TanStack Query Angular dynamic devtools example + + + + + + + + diff --git a/examples/angular/dynamic-devtools/src/main.ts b/examples/angular/dynamic-devtools/src/main.ts new file mode 100644 index 00000000000..c3d8f9af997 --- /dev/null +++ b/examples/angular/dynamic-devtools/src/main.ts @@ -0,0 +1,5 @@ +import { bootstrapApplication } from '@angular/platform-browser' +import { appConfig } from './app/app.config' +import { AppComponent } from './app/app.component' + +bootstrapApplication(AppComponent, appConfig).catch((err) => console.error(err)) diff --git a/examples/angular/dynamic-devtools/src/styles.css b/examples/angular/dynamic-devtools/src/styles.css new file mode 100644 index 00000000000..256d518a5e1 --- /dev/null +++ b/examples/angular/dynamic-devtools/src/styles.css @@ -0,0 +1,18 @@ +/* You can add global styles to this file, and also import other style files */ + +.hint { + font-size: 0.9rem; + color: #444; + max-width: 42rem; + line-height: 1.45; +} + +kbd { + display: inline-block; + padding: 0.1rem 0.35rem; + margin: 0 0.1rem; + font-size: 0.8rem; + border: 1px solid #ccc; + border-radius: 3px; + background: #f7f7f7; +} diff --git a/examples/angular/dynamic-devtools/tsconfig.app.json b/examples/angular/dynamic-devtools/tsconfig.app.json new file mode 100644 index 00000000000..5b9d3c5ecb0 --- /dev/null +++ b/examples/angular/dynamic-devtools/tsconfig.app.json @@ -0,0 +1,9 @@ +{ + "extends": "./tsconfig.json", + "compilerOptions": { + "outDir": "./out-tsc/app", + "types": [] + }, + "files": ["src/main.ts"], + "include": ["src/**/*.d.ts"] +} diff --git a/examples/angular/dynamic-devtools/tsconfig.json b/examples/angular/dynamic-devtools/tsconfig.json new file mode 100644 index 00000000000..44e0a5238b1 --- /dev/null +++ b/examples/angular/dynamic-devtools/tsconfig.json @@ -0,0 +1,31 @@ +{ + "compileOnSave": false, + "compilerOptions": { + "outDir": "./dist/out-tsc", + "forceConsistentCasingInFileNames": true, + "strict": true, + "noImplicitOverride": true, + "noPropertyAccessFromIndexSignature": true, + "noImplicitReturns": true, + "noFallthroughCasesInSwitch": true, + "skipLibCheck": true, + "isolatedModules": true, + "esModuleInterop": true, + "sourceMap": true, + "declaration": false, + "experimentalDecorators": true, + "moduleResolution": "Bundler", + "importHelpers": true, + "target": "ES2022", + "module": "ES2022", + "useDefineForClassFields": false, + "lib": ["ES2022", "dom"] + }, + "angularCompilerOptions": { + "enableI18nLegacyMessageIdFormat": false, + "strictInjectionParameters": true, + "strictInputAccessModifiers": true, + "strictStandalone": true, + "strictTemplates": true + } +} diff --git a/examples/angular/dynamic-queries/README.md b/examples/angular/dynamic-queries/README.md new file mode 100644 index 00000000000..b2e897b81b7 --- /dev/null +++ b/examples/angular/dynamic-queries/README.md @@ -0,0 +1,10 @@ +# TanStack Query Angular dynamic queries example + +This example keeps a list of items in an Angular signal and creates one +`injectQueries` entry for each item. Add and remove items to see the query list +and its rendered results update together. + +To run this example: + +- `pnpm install` +- `pnpm start` diff --git a/examples/angular/dynamic-queries/angular.json b/examples/angular/dynamic-queries/angular.json new file mode 100644 index 00000000000..7db4b2559d3 --- /dev/null +++ b/examples/angular/dynamic-queries/angular.json @@ -0,0 +1,49 @@ +{ + "$schema": "./node_modules/@angular/cli/lib/config/schema.json", + "version": 1, + "cli": { "packageManager": "pnpm", "analytics": false }, + "projects": { + "dynamic-queries": { + "projectType": "application", + "root": "", + "sourceRoot": "src", + "prefix": "app", + "architect": { + "build": { + "builder": "@angular/build:application", + "options": { + "outputPath": "dist/dynamic-queries", + "index": "src/index.html", + "browser": "src/main.ts", + "polyfills": ["zone.js"], + "tsConfig": "tsconfig.app.json", + "assets": [], + "styles": ["src/styles.css"] + }, + "configurations": { + "production": { "outputHashing": "all" }, + "development": { + "optimization": false, + "extractLicenses": false, + "sourceMap": true + } + }, + "defaultConfiguration": "production" + }, + "serve": { + "builder": "@angular/build:dev-server", + "options": { + "prebundle": { "exclude": ["@angular"] } + }, + "configurations": { + "production": { "buildTarget": "dynamic-queries:build:production" }, + "development": { + "buildTarget": "dynamic-queries:build:development" + } + }, + "defaultConfiguration": "development" + } + } + } + } +} diff --git a/examples/angular/dynamic-queries/package.json b/examples/angular/dynamic-queries/package.json new file mode 100644 index 00000000000..ecbd1ecc268 --- /dev/null +++ b/examples/angular/dynamic-queries/package.json @@ -0,0 +1,28 @@ +{ + "name": "@tanstack/query-example-angular-dynamic-queries", + "private": true, + "type": "module", + "scripts": { + "ng": "ng", + "start": "ng serve", + "build": "ng build", + "watch": "ng build --watch --configuration development" + }, + "dependencies": { + "@angular/common": "^22.0.0", + "@angular/compiler": "^22.0.0", + "@angular/core": "^22.0.0", + "@angular/platform-browser": "^22.0.0", + "@tanstack/angular-query-devtools": "^5.0.0-rc.5", + "@tanstack/angular-query": "^5.0.0-rc.5", + "rxjs": "^7.8.2", + "tslib": "^2.8.1", + "zone.js": "0.16.1" + }, + "devDependencies": { + "@angular/build": "^22.0.0", + "@angular/cli": "^22.0.0", + "@angular/compiler-cli": "^22.0.0", + "typescript": "6.0.3" + } +} diff --git a/examples/angular/dynamic-queries/src/app/app.component.ts b/examples/angular/dynamic-queries/src/app/app.component.ts new file mode 100644 index 00000000000..f3cc5ecd8d4 --- /dev/null +++ b/examples/angular/dynamic-queries/src/app/app.component.ts @@ -0,0 +1,107 @@ +import { ChangeDetectionStrategy, Component, signal } from '@angular/core' +import { injectQueries } from '@tanstack/angular-query' + +type Item = { + id: number + name: string +} + +type ItemDetails = { + description: string + updatedAt: string +} + +@Component({ + changeDetection: ChangeDetectionStrategy.OnPush, + selector: 'app-root', + template: ` +
+

Dynamic queries

+

+ Each item below owns one entry in injectQueries. Add or + remove items to change the query list. +

+ + + + @if (items().length === 0) { +

No items. Add one to start a query.

+ } @else { +
    + @for (item of items(); track item.id; let index = $index) { +
  • +
    + {{ item.name }} + @if (queries()[index].isPending()) { + Loading... + } @else if (queries()[index].isError()) { + Could not load this item. + } @else { + {{ queries()[index].data()?.description }} + } +
    + +
    • + } +
+ } +
+ `, + styles: ` + main { + font: + 16px/1.5 system-ui, + sans-serif; + margin: 3rem auto; + max-width: 42rem; + padding: 0 1rem; + } + + button { + cursor: pointer; + margin: 0.25rem; + padding: 0.45rem 0.7rem; + } + + li { + align-items: center; + display: flex; + justify-content: space-between; + margin: 0.75rem 0; + } + `, +}) +export class AppComponent { + readonly items = signal>([ + { id: 1, name: 'First item' }, + { id: 2, name: 'Second item' }, + ]) + + readonly queries = injectQueries(() => ({ + queries: this.items().map((item) => ({ + queryKey: ['item-details', item.id], + queryFn: () => this.loadItemDetails(item), + })), + })) + + #nextId = 3 + + addItem(): void { + const id = this.#nextId++ + this.items.update((items) => [...items, { id, name: `Item ${id}` }]) + } + + removeItem(id: number): void { + this.items.update((items) => items.filter((item) => item.id !== id)) + } + + private async loadItemDetails(item: Item): Promise { + await new Promise((resolve) => setTimeout(resolve, 350)) + return { + description: `${item.name} was loaded by its own query.`, + updatedAt: new Date().toLocaleTimeString(), + } + } +} diff --git a/examples/angular/dynamic-queries/src/app/app.config.ts b/examples/angular/dynamic-queries/src/app/app.config.ts new file mode 100644 index 00000000000..0038688124f --- /dev/null +++ b/examples/angular/dynamic-queries/src/app/app.config.ts @@ -0,0 +1,7 @@ +import { QueryClient, provideTanStackQuery } from '@tanstack/angular-query' +import { withDevtools } from '@tanstack/angular-query-devtools' +import type { ApplicationConfig } from '@angular/core' + +export const appConfig: ApplicationConfig = { + providers: [provideTanStackQuery(() => new QueryClient(), withDevtools())], +} diff --git a/examples/angular/dynamic-queries/src/index.html b/examples/angular/dynamic-queries/src/index.html new file mode 100644 index 00000000000..cf7c7b4728d --- /dev/null +++ b/examples/angular/dynamic-queries/src/index.html @@ -0,0 +1,12 @@ + + + + + Dynamic Angular queries + + + + + + + diff --git a/examples/angular/dynamic-queries/src/main.ts b/examples/angular/dynamic-queries/src/main.ts new file mode 100644 index 00000000000..ef15666eff7 --- /dev/null +++ b/examples/angular/dynamic-queries/src/main.ts @@ -0,0 +1,7 @@ +import { bootstrapApplication } from '@angular/platform-browser' +import { appConfig } from './app/app.config' +import { AppComponent } from './app/app.component' + +bootstrapApplication(AppComponent, appConfig).catch((error) => + console.error(error), +) diff --git a/examples/angular/dynamic-queries/src/styles.css b/examples/angular/dynamic-queries/src/styles.css new file mode 100644 index 00000000000..acd67bf82bc --- /dev/null +++ b/examples/angular/dynamic-queries/src/styles.css @@ -0,0 +1,5 @@ +body { + background: #f7f7f8; + color: #202124; + margin: 0; +} diff --git a/examples/angular/dynamic-queries/tsconfig.app.json b/examples/angular/dynamic-queries/tsconfig.app.json new file mode 100644 index 00000000000..a7da28e8cea --- /dev/null +++ b/examples/angular/dynamic-queries/tsconfig.app.json @@ -0,0 +1,6 @@ +{ + "extends": "./tsconfig.json", + "compilerOptions": { "outDir": "./out-tsc/app", "types": [] }, + "files": ["src/main.ts"], + "include": ["src/**/*.d.ts"] +} diff --git a/examples/angular/dynamic-queries/tsconfig.json b/examples/angular/dynamic-queries/tsconfig.json new file mode 100644 index 00000000000..f42b458e4ac --- /dev/null +++ b/examples/angular/dynamic-queries/tsconfig.json @@ -0,0 +1,24 @@ +{ + "compileOnSave": false, + "compilerOptions": { + "strict": true, + "noImplicitOverride": true, + "noPropertyAccessFromIndexSignature": true, + "noImplicitReturns": true, + "noFallthroughCasesInSwitch": true, + "skipLibCheck": true, + "isolatedModules": true, + "experimentalDecorators": true, + "moduleResolution": "bundler", + "importHelpers": true, + "target": "ES2022", + "module": "preserve", + "lib": ["ES2022", "dom"] + }, + "angularCompilerOptions": { + "enableI18nLegacyMessageIdFormat": false, + "strictInjectionParameters": true, + "strictInputAccessModifiers": true, + "strictTemplates": true + } +} diff --git a/examples/angular/infinite-query-with-max-pages/angular.json b/examples/angular/infinite-query-with-max-pages/angular.json index fb102ccb1f6..179274866a0 100644 --- a/examples/angular/infinite-query-with-max-pages/angular.json +++ b/examples/angular/infinite-query-with-max-pages/angular.json @@ -81,6 +81,9 @@ }, "serve": { "builder": "@angular/build:dev-server", + "options": { + "prebundle": { "exclude": ["@angular"] } + }, "configurations": { "production": { "buildTarget": "infinite-query-with-max-pages:build:production" diff --git a/examples/angular/infinite-query-with-max-pages/package.json b/examples/angular/infinite-query-with-max-pages/package.json index cf88ed14683..37bb3b1490e 100644 --- a/examples/angular/infinite-query-with-max-pages/package.json +++ b/examples/angular/infinite-query-with-max-pages/package.json @@ -15,9 +15,11 @@ "@angular/compiler": "^22.2.4", "@angular/core": "^22.2.4", "@angular/platform-browser": "^22.2.4", - "@tanstack/angular-query-experimental": "^5.107.1", + "@tanstack/angular-query-devtools": "^5.0.0-rc.5", + "@tanstack/angular-query": "^5.0.0-rc.5", "rxjs": "^7.8.2", - "tslib": "^2.8.1" + "tslib": "^2.8.1", + "zone.js": "0.16.1" }, "devDependencies": { "@angular/build": "^22.2.5", diff --git a/examples/angular/infinite-query-with-max-pages/src/app/app.config.ts b/examples/angular/infinite-query-with-max-pages/src/app/app.config.ts index a0fd8f27b3c..87870fdbbb2 100644 --- a/examples/angular/infinite-query-with-max-pages/src/app/app.config.ts +++ b/examples/angular/infinite-query-with-max-pages/src/app/app.config.ts @@ -3,11 +3,8 @@ import { withFetch, withInterceptors, } from '@angular/common/http' -import { - QueryClient, - provideTanStackQuery, -} from '@tanstack/angular-query-experimental' -import { withDevtools } from '@tanstack/angular-query-experimental/devtools' +import { QueryClient, provideTanStackQuery } from '@tanstack/angular-query' +import { withDevtools } from '@tanstack/angular-query-devtools' import { projectsMockInterceptor } from './api/projects-mock.interceptor' import type { ApplicationConfig } from '@angular/core' @@ -15,13 +12,14 @@ export const appConfig: ApplicationConfig = { providers: [ provideHttpClient(withInterceptors([projectsMockInterceptor]), withFetch()), provideTanStackQuery( - new QueryClient({ - defaultOptions: { - queries: { - gcTime: 24 * 60 * 60 * 1000, // 24 hours + () => + new QueryClient({ + defaultOptions: { + queries: { + gcTime: 1000 * 60 * 60 * 24, // 24 hours + }, }, - }, - }), + }), withDevtools(), ), ], diff --git a/examples/angular/infinite-query-with-max-pages/src/app/components/example.component.ts b/examples/angular/infinite-query-with-max-pages/src/app/components/example.component.ts index 711dc97bb9e..0449fe37339 100644 --- a/examples/angular/infinite-query-with-max-pages/src/app/components/example.component.ts +++ b/examples/angular/infinite-query-with-max-pages/src/app/components/example.component.ts @@ -4,7 +4,7 @@ import { computed, inject, } from '@angular/core' -import { injectInfiniteQuery } from '@tanstack/angular-query-experimental' +import { injectInfiniteQuery } from '@tanstack/angular-query' import { ProjectStyleDirective } from '../directives/project-style.directive' import { ProjectsQueries } from '../services/projects/queries' diff --git a/examples/angular/infinite-query-with-max-pages/src/app/services/projects/queries.ts b/examples/angular/infinite-query-with-max-pages/src/app/services/projects/queries.ts index ad29d68fa2a..60dec0b9239 100644 --- a/examples/angular/infinite-query-with-max-pages/src/app/services/projects/queries.ts +++ b/examples/angular/infinite-query-with-max-pages/src/app/services/projects/queries.ts @@ -1,5 +1,5 @@ import { Injectable, inject } from '@angular/core' -import { infiniteQueryOptions } from '@tanstack/angular-query-experimental' +import { infiniteQueryOptions } from '@tanstack/angular-query' import { lastValueFrom } from 'rxjs' import { ProjectsAPI } from './api' diff --git a/examples/angular/optimistic-updates/angular.json b/examples/angular/optimistic-updates/angular.json index 3c40e3fa338..80eb2a4cfe5 100644 --- a/examples/angular/optimistic-updates/angular.json +++ b/examples/angular/optimistic-updates/angular.json @@ -81,6 +81,9 @@ }, "serve": { "builder": "@angular/build:dev-server", + "options": { + "prebundle": { "exclude": ["@angular"] } + }, "configurations": { "production": { "buildTarget": "optimistic-updates:build:production" diff --git a/examples/angular/optimistic-updates/package.json b/examples/angular/optimistic-updates/package.json index 0d1dc21946c..b634ade2a52 100644 --- a/examples/angular/optimistic-updates/package.json +++ b/examples/angular/optimistic-updates/package.json @@ -16,9 +16,11 @@ "@angular/core": "^22.2.4", "@angular/forms": "^22.2.4", "@angular/platform-browser": "^22.2.4", - "@tanstack/angular-query-experimental": "^5.107.1", + "@tanstack/angular-query-devtools": "^5.0.0-rc.5", + "@tanstack/angular-query": "^5.0.0-rc.5", "rxjs": "^7.8.2", - "tslib": "^2.8.1" + "tslib": "^2.8.1", + "zone.js": "0.16.1" }, "devDependencies": { "@angular/build": "^22.2.5", diff --git a/examples/angular/optimistic-updates/src/app/app.config.ts b/examples/angular/optimistic-updates/src/app/app.config.ts index 6fef8b56309..ba6116f9f6b 100644 --- a/examples/angular/optimistic-updates/src/app/app.config.ts +++ b/examples/angular/optimistic-updates/src/app/app.config.ts @@ -3,11 +3,8 @@ import { withFetch, withInterceptors, } from '@angular/common/http' -import { - QueryClient, - provideTanStackQuery, -} from '@tanstack/angular-query-experimental' -import { withDevtools } from '@tanstack/angular-query-experimental/devtools' +import { QueryClient, provideTanStackQuery } from '@tanstack/angular-query' +import { withDevtools } from '@tanstack/angular-query-devtools' import { mockInterceptor } from './interceptor/mock-api.interceptor' import type { ApplicationConfig } from '@angular/core' @@ -15,13 +12,14 @@ export const appConfig: ApplicationConfig = { providers: [ provideHttpClient(withFetch(), withInterceptors([mockInterceptor])), provideTanStackQuery( - new QueryClient({ - defaultOptions: { - queries: { - gcTime: 24 * 60 * 60 * 1000, // 24 hours + () => + new QueryClient({ + defaultOptions: { + queries: { + gcTime: 1000 * 60 * 60 * 24, // 24 hours + }, }, - }, - }), + }), withDevtools(), ), ], diff --git a/examples/angular/optimistic-updates/src/app/components/optimistic-updates.component.ts b/examples/angular/optimistic-updates/src/app/components/optimistic-updates.component.ts index 9239ec61199..5b105afbf6e 100644 --- a/examples/angular/optimistic-updates/src/app/components/optimistic-updates.component.ts +++ b/examples/angular/optimistic-updates/src/app/components/optimistic-updates.component.ts @@ -3,7 +3,7 @@ import { QueryClient, injectMutation, injectQuery, -} from '@tanstack/angular-query-experimental' +} from '@tanstack/angular-query' import { FormsModule } from '@angular/forms' import { DatePipe } from '@angular/common' import { TasksMutations, TasksQueries } from '../services/tasks/queries' diff --git a/examples/angular/optimistic-updates/src/app/services/tasks/queries.ts b/examples/angular/optimistic-updates/src/app/services/tasks/queries.ts index 90f891c6793..de4e40d6f87 100644 --- a/examples/angular/optimistic-updates/src/app/services/tasks/queries.ts +++ b/examples/angular/optimistic-updates/src/app/services/tasks/queries.ts @@ -1,8 +1,5 @@ import { Injectable, inject } from '@angular/core' -import { - mutationOptions, - queryOptions, -} from '@tanstack/angular-query-experimental' +import { mutationOptions, queryOptions } from '@tanstack/angular-query' import { lastValueFrom } from 'rxjs' import { TasksAPI } from './api' diff --git a/examples/angular/pagination/angular.json b/examples/angular/pagination/angular.json index 3c4a5d2d7b2..7e5b7693752 100644 --- a/examples/angular/pagination/angular.json +++ b/examples/angular/pagination/angular.json @@ -81,6 +81,9 @@ }, "serve": { "builder": "@angular/build:dev-server", + "options": { + "prebundle": { "exclude": ["@angular"] } + }, "configurations": { "production": { "buildTarget": "pagination:build:production" diff --git a/examples/angular/pagination/package.json b/examples/angular/pagination/package.json index c54f2cbf6f1..4f65039ed97 100644 --- a/examples/angular/pagination/package.json +++ b/examples/angular/pagination/package.json @@ -15,9 +15,11 @@ "@angular/compiler": "^22.2.4", "@angular/core": "^22.2.4", "@angular/platform-browser": "^22.2.4", - "@tanstack/angular-query-experimental": "^5.107.1", + "@tanstack/angular-query-devtools": "^5.0.0-rc.5", + "@tanstack/angular-query": "^5.0.0-rc.5", "rxjs": "^7.8.2", - "tslib": "^2.8.1" + "tslib": "^2.8.1", + "zone.js": "0.16.1" }, "devDependencies": { "@angular/build": "^22.2.5", diff --git a/examples/angular/pagination/src/app/app.config.ts b/examples/angular/pagination/src/app/app.config.ts index dc3189ba84b..b36a88a566c 100644 --- a/examples/angular/pagination/src/app/app.config.ts +++ b/examples/angular/pagination/src/app/app.config.ts @@ -3,17 +3,14 @@ import { withFetch, withInterceptors, } from '@angular/common/http' -import { - QueryClient, - provideTanStackQuery, -} from '@tanstack/angular-query-experimental' -import { withDevtools } from '@tanstack/angular-query-experimental/devtools' +import { QueryClient, provideTanStackQuery } from '@tanstack/angular-query' +import { withDevtools } from '@tanstack/angular-query-devtools' import { projectsMockInterceptor } from './api/projects-mock.interceptor' import type { ApplicationConfig } from '@angular/core' export const appConfig: ApplicationConfig = { providers: [ provideHttpClient(withInterceptors([projectsMockInterceptor]), withFetch()), - provideTanStackQuery(new QueryClient(), withDevtools()), + provideTanStackQuery(() => new QueryClient(), withDevtools()), ], } diff --git a/examples/angular/pagination/src/app/components/example.component.ts b/examples/angular/pagination/src/app/components/example.component.ts index 8da56a64585..b8107535dd5 100644 --- a/examples/angular/pagination/src/app/components/example.component.ts +++ b/examples/angular/pagination/src/app/components/example.component.ts @@ -11,7 +11,7 @@ import { injectQuery, keepPreviousData, noop, -} from '@tanstack/angular-query-experimental' +} from '@tanstack/angular-query' import { ProjectsQueries } from '../services/projects/queries' @Component({ diff --git a/examples/angular/pagination/src/app/services/projects/queries.ts b/examples/angular/pagination/src/app/services/projects/queries.ts index fd19e2fe1f5..3bb7ecb83f0 100644 --- a/examples/angular/pagination/src/app/services/projects/queries.ts +++ b/examples/angular/pagination/src/app/services/projects/queries.ts @@ -1,5 +1,5 @@ import { Injectable, inject } from '@angular/core' -import { queryOptions } from '@tanstack/angular-query-experimental' +import { queryOptions } from '@tanstack/angular-query' import { lastValueFrom } from 'rxjs' import { ProjectsAPI } from './api' diff --git a/examples/angular/query-options-from-a-service-angular-router/angular.json b/examples/angular/query-options-from-a-service-angular-router/angular.json index 446a452413a..35d3d5bc867 100644 --- a/examples/angular/query-options-from-a-service-angular-router/angular.json +++ b/examples/angular/query-options-from-a-service-angular-router/angular.json @@ -81,6 +81,9 @@ }, "serve": { "builder": "@angular/build:dev-server", + "options": { + "prebundle": { "exclude": ["@angular"] } + }, "configurations": { "production": { "buildTarget": "query-options-from-a-service:build:production" diff --git a/examples/angular/query-options-from-a-service-angular-router/package.json b/examples/angular/query-options-from-a-service-angular-router/package.json index f65136c58b7..e0f6bb210ce 100644 --- a/examples/angular/query-options-from-a-service-angular-router/package.json +++ b/examples/angular/query-options-from-a-service-angular-router/package.json @@ -16,9 +16,10 @@ "@angular/core": "^22.2.4", "@angular/platform-browser": "^22.2.4", "@angular/router": "^22.2.4", - "@tanstack/angular-query-experimental": "^5.107.1", + "@tanstack/angular-query": "^5.0.0-rc.5", "rxjs": "^7.8.2", - "tslib": "^2.8.1" + "tslib": "^2.8.1", + "@tanstack/angular-query-devtools": "^5.0.0-rc.5" }, "devDependencies": { "@angular/build": "^22.2.5", diff --git a/examples/angular/query-options-from-a-service-angular-router/src/app/app.config.ts b/examples/angular/query-options-from-a-service-angular-router/src/app/app.config.ts index dd6675f997b..06f5240bdfe 100644 --- a/examples/angular/query-options-from-a-service-angular-router/src/app/app.config.ts +++ b/examples/angular/query-options-from-a-service-angular-router/src/app/app.config.ts @@ -1,11 +1,8 @@ import { provideHttpClient, withFetch } from '@angular/common/http' import { provideRouter, withComponentInputBinding } from '@angular/router' -import { - QueryClient, - provideTanStackQuery, -} from '@tanstack/angular-query-experimental' +import { QueryClient, provideTanStackQuery } from '@tanstack/angular-query' -import { withDevtools } from '@tanstack/angular-query-experimental/devtools' +import { withDevtools } from '@tanstack/angular-query-devtools' import { routes } from './app.routes' import type { ApplicationConfig } from '@angular/core' @@ -13,6 +10,6 @@ export const appConfig: ApplicationConfig = { providers: [ provideHttpClient(withFetch()), provideRouter(routes, withComponentInputBinding()), - provideTanStackQuery(new QueryClient(), withDevtools()), + provideTanStackQuery(() => new QueryClient(), withDevtools()), ], } diff --git a/examples/angular/query-options-from-a-service-angular-router/src/app/components/post.component.ts b/examples/angular/query-options-from-a-service-angular-router/src/app/components/post.component.ts index ecc4eb87793..5762b77b7b1 100644 --- a/examples/angular/query-options-from-a-service-angular-router/src/app/components/post.component.ts +++ b/examples/angular/query-options-from-a-service-angular-router/src/app/components/post.component.ts @@ -6,7 +6,7 @@ import { numberAttribute, } from '@angular/core' import { RouterLink } from '@angular/router' -import { injectQuery } from '@tanstack/angular-query-experimental' +import { injectQuery } from '@tanstack/angular-query' import { PostsQueries } from '../services/posts/queries' @Component({ diff --git a/examples/angular/query-options-from-a-service-angular-router/src/app/components/posts.component.ts b/examples/angular/query-options-from-a-service-angular-router/src/app/components/posts.component.ts index 3296798605d..4df7730d6f8 100644 --- a/examples/angular/query-options-from-a-service-angular-router/src/app/components/posts.component.ts +++ b/examples/angular/query-options-from-a-service-angular-router/src/app/components/posts.component.ts @@ -1,6 +1,6 @@ import { ChangeDetectionStrategy, Component, inject } from '@angular/core' import { RouterLink } from '@angular/router' -import { QueryClient, injectQuery } from '@tanstack/angular-query-experimental' +import { QueryClient, injectQuery } from '@tanstack/angular-query' import { PostsQueries } from '../services/posts/queries' @Component({ diff --git a/examples/angular/query-options-from-a-service-angular-router/src/app/services/posts/queries.ts b/examples/angular/query-options-from-a-service-angular-router/src/app/services/posts/queries.ts index 65f21233ecc..5c42c2b7bf4 100644 --- a/examples/angular/query-options-from-a-service-angular-router/src/app/services/posts/queries.ts +++ b/examples/angular/query-options-from-a-service-angular-router/src/app/services/posts/queries.ts @@ -1,5 +1,5 @@ import { Injectable, inject } from '@angular/core' -import { queryOptions } from '@tanstack/angular-query-experimental' +import { queryOptions } from '@tanstack/angular-query' import { lastValueFrom } from 'rxjs' import { PostsAPI } from './api' diff --git a/examples/angular/router/angular.json b/examples/angular/router/angular.json index e8df3afe1c6..1fa3fd4ac4e 100644 --- a/examples/angular/router/angular.json +++ b/examples/angular/router/angular.json @@ -81,6 +81,9 @@ }, "serve": { "builder": "@angular/build:dev-server", + "options": { + "prebundle": { "exclude": ["@angular"] } + }, "configurations": { "production": { "buildTarget": "router:build:production" diff --git a/examples/angular/router/package.json b/examples/angular/router/package.json index 0d681b8d420..de6e35c50aa 100644 --- a/examples/angular/router/package.json +++ b/examples/angular/router/package.json @@ -16,9 +16,11 @@ "@angular/core": "^22.2.4", "@angular/platform-browser": "^22.2.4", "@angular/router": "^22.2.4", - "@tanstack/angular-query-experimental": "^5.107.1", + "@tanstack/angular-query-devtools": "^5.0.0-rc.5", + "@tanstack/angular-query": "^5.0.0-rc.5", "rxjs": "^7.8.2", - "tslib": "^2.8.1" + "tslib": "^2.8.1", + "zone.js": "0.16.1" }, "devDependencies": { "@angular/build": "^22.2.5", diff --git a/examples/angular/router/src/app/app.config.ts b/examples/angular/router/src/app/app.config.ts index 3fbec800b1f..b5a2a890f7f 100644 --- a/examples/angular/router/src/app/app.config.ts +++ b/examples/angular/router/src/app/app.config.ts @@ -1,18 +1,15 @@ import { provideHttpClient, withFetch } from '@angular/common/http' import { provideRouter, withComponentInputBinding } from '@angular/router' -import { - QueryClient, - provideTanStackQuery, -} from '@tanstack/angular-query-experimental' +import { QueryClient, provideTanStackQuery } from '@tanstack/angular-query' -import { withDevtools } from '@tanstack/angular-query-experimental/devtools' +import { withDevtools } from '@tanstack/angular-query-devtools' import { routes } from './app.routes' import type { ApplicationConfig } from '@angular/core' export const appConfig: ApplicationConfig = { providers: [ provideHttpClient(withFetch()), - provideTanStackQuery(new QueryClient(), withDevtools()), + provideTanStackQuery(() => new QueryClient(), withDevtools()), provideRouter(routes, withComponentInputBinding()), ], } diff --git a/examples/angular/router/src/app/components/post.component.ts b/examples/angular/router/src/app/components/post.component.ts index 42421397ba4..5b72b4089c3 100644 --- a/examples/angular/router/src/app/components/post.component.ts +++ b/examples/angular/router/src/app/components/post.component.ts @@ -6,7 +6,7 @@ import { numberAttribute, } from '@angular/core' import { RouterLink } from '@angular/router' -import { injectQuery } from '@tanstack/angular-query-experimental' +import { injectQuery } from '@tanstack/angular-query' import { PostsQueries } from '../services/posts/queries' @Component({ diff --git a/examples/angular/router/src/app/components/posts.component.ts b/examples/angular/router/src/app/components/posts.component.ts index fd31650d84f..d70b80b109e 100644 --- a/examples/angular/router/src/app/components/posts.component.ts +++ b/examples/angular/router/src/app/components/posts.component.ts @@ -1,6 +1,6 @@ import { ChangeDetectionStrategy, Component, inject } from '@angular/core' import { RouterLink } from '@angular/router' -import { QueryClient, injectQuery } from '@tanstack/angular-query-experimental' +import { QueryClient, injectQuery } from '@tanstack/angular-query' import { PostsQueries } from '../services/posts/queries' @Component({ diff --git a/examples/angular/router/src/app/services/posts/queries.ts b/examples/angular/router/src/app/services/posts/queries.ts index 65f21233ecc..5c42c2b7bf4 100644 --- a/examples/angular/router/src/app/services/posts/queries.ts +++ b/examples/angular/router/src/app/services/posts/queries.ts @@ -1,5 +1,5 @@ import { Injectable, inject } from '@angular/core' -import { queryOptions } from '@tanstack/angular-query-experimental' +import { queryOptions } from '@tanstack/angular-query' import { lastValueFrom } from 'rxjs' import { PostsAPI } from './api' diff --git a/examples/angular/rxjs/angular.json b/examples/angular/rxjs/angular.json index 8b1d6c9c974..a2f2c5bef32 100644 --- a/examples/angular/rxjs/angular.json +++ b/examples/angular/rxjs/angular.json @@ -81,6 +81,9 @@ }, "serve": { "builder": "@angular/build:dev-server", + "options": { + "prebundle": { "exclude": ["@angular"] } + }, "configurations": { "production": { "buildTarget": "rxjs:build:production" diff --git a/examples/angular/rxjs/package.json b/examples/angular/rxjs/package.json index f5af5027228..fb3457322c5 100644 --- a/examples/angular/rxjs/package.json +++ b/examples/angular/rxjs/package.json @@ -16,9 +16,11 @@ "@angular/core": "^22.2.4", "@angular/forms": "^22.2.4", "@angular/platform-browser": "^22.2.4", - "@tanstack/angular-query-experimental": "^5.107.1", + "@tanstack/angular-query-devtools": "^5.0.0-rc.5", + "@tanstack/angular-query": "^5.0.0-rc.5", "rxjs": "^7.8.2", - "tslib": "^2.8.1" + "tslib": "^2.8.1", + "zone.js": "0.16.1" }, "devDependencies": { "@angular/build": "^22.2.5", diff --git a/examples/angular/rxjs/src/app/app.config.ts b/examples/angular/rxjs/src/app/app.config.ts index 6cbf5fb605a..8a2ebb37baf 100644 --- a/examples/angular/rxjs/src/app/app.config.ts +++ b/examples/angular/rxjs/src/app/app.config.ts @@ -3,11 +3,8 @@ import { withFetch, withInterceptors, } from '@angular/common/http' -import { - QueryClient, - provideTanStackQuery, -} from '@tanstack/angular-query-experimental' -import { withDevtools } from '@tanstack/angular-query-experimental/devtools' +import { QueryClient, provideTanStackQuery } from '@tanstack/angular-query' +import { withDevtools } from '@tanstack/angular-query-devtools' import { autocompleteMockInterceptor } from './api/autocomplete-mock.interceptor' import type { ApplicationConfig } from '@angular/core' @@ -18,13 +15,14 @@ export const appConfig: ApplicationConfig = { withInterceptors([autocompleteMockInterceptor]), ), provideTanStackQuery( - new QueryClient({ - defaultOptions: { - queries: { - gcTime: 24 * 60 * 60 * 1000, // 24 hours + () => + new QueryClient({ + defaultOptions: { + queries: { + gcTime: 1000 * 60 * 60 * 24, // 24 hours + }, }, - }, - }), + }), withDevtools(), ), ], diff --git a/examples/angular/rxjs/src/app/components/example.component.ts b/examples/angular/rxjs/src/app/components/example.component.ts index 5a48137b571..406a1f8b6c2 100644 --- a/examples/angular/rxjs/src/app/components/example.component.ts +++ b/examples/angular/rxjs/src/app/components/example.component.ts @@ -1,10 +1,7 @@ import { ChangeDetectionStrategy, Component, inject } from '@angular/core' import { toSignal } from '@angular/core/rxjs-interop' import { NonNullableFormBuilder, ReactiveFormsModule } from '@angular/forms' -import { - injectQuery, - keepPreviousData, -} from '@tanstack/angular-query-experimental' +import { injectQuery, keepPreviousData } from '@tanstack/angular-query' import { debounceTime, distinctUntilChanged } from 'rxjs' import { SuggestionsQueries } from '../services/suggestions/queries' diff --git a/examples/angular/rxjs/src/app/services/suggestions/queries.ts b/examples/angular/rxjs/src/app/services/suggestions/queries.ts index a5ad825766a..eb864fac195 100644 --- a/examples/angular/rxjs/src/app/services/suggestions/queries.ts +++ b/examples/angular/rxjs/src/app/services/suggestions/queries.ts @@ -1,5 +1,5 @@ import { Injectable, inject } from '@angular/core' -import { queryOptions } from '@tanstack/angular-query-experimental' +import { queryOptions } from '@tanstack/angular-query' import { lastValueFrom } from 'rxjs' import { SuggestionsAPI } from './api' diff --git a/examples/angular/simple/angular.json b/examples/angular/simple/angular.json index 64bbed591d6..fa577f61200 100644 --- a/examples/angular/simple/angular.json +++ b/examples/angular/simple/angular.json @@ -81,6 +81,9 @@ }, "serve": { "builder": "@angular/build:dev-server", + "options": { + "prebundle": { "exclude": ["@angular"] } + }, "configurations": { "production": { "buildTarget": "simple:build:production" diff --git a/examples/angular/simple/package.json b/examples/angular/simple/package.json index 4c977e01ebf..04fca3a3ae2 100644 --- a/examples/angular/simple/package.json +++ b/examples/angular/simple/package.json @@ -15,9 +15,11 @@ "@angular/compiler": "^22.2.4", "@angular/core": "^22.2.4", "@angular/platform-browser": "^22.2.4", - "@tanstack/angular-query-experimental": "^5.107.1", + "@tanstack/angular-query-devtools": "^5.0.0-rc.5", + "@tanstack/angular-query": "^5.0.0-rc.5", "rxjs": "^7.8.2", - "tslib": "^2.8.1" + "tslib": "^2.8.1", + "zone.js": "0.16.1" }, "devDependencies": { "@angular/build": "^22.2.5", diff --git a/examples/angular/simple/src/app/app.config.ts b/examples/angular/simple/src/app/app.config.ts index 9c7eda25974..6d8eec79b17 100644 --- a/examples/angular/simple/src/app/app.config.ts +++ b/examples/angular/simple/src/app/app.config.ts @@ -1,14 +1,11 @@ import { provideHttpClient, withFetch } from '@angular/common/http' -import { - QueryClient, - provideTanStackQuery, -} from '@tanstack/angular-query-experimental' -import { withDevtools } from '@tanstack/angular-query-experimental/devtools' +import { QueryClient, provideTanStackQuery } from '@tanstack/angular-query' +import { withDevtools } from '@tanstack/angular-query-devtools' import type { ApplicationConfig } from '@angular/core' export const appConfig: ApplicationConfig = { providers: [ provideHttpClient(withFetch()), - provideTanStackQuery(new QueryClient(), withDevtools()), + provideTanStackQuery(() => new QueryClient(), withDevtools()), ], } diff --git a/examples/angular/simple/src/app/components/simple-example.component.ts b/examples/angular/simple/src/app/components/simple-example.component.ts index 494d4568ec5..bd87dc92c23 100644 --- a/examples/angular/simple/src/app/components/simple-example.component.ts +++ b/examples/angular/simple/src/app/components/simple-example.component.ts @@ -1,5 +1,5 @@ import { ChangeDetectionStrategy, Component, inject } from '@angular/core' -import { injectQuery } from '@tanstack/angular-query-experimental' +import { injectQuery } from '@tanstack/angular-query' import { HttpClient } from '@angular/common/http' import { lastValueFrom } from 'rxjs' diff --git a/examples/angular/ssr-persist/.devcontainer/devcontainer.json b/examples/angular/ssr-persist/.devcontainer/devcontainer.json new file mode 100644 index 00000000000..365adf8f4c3 --- /dev/null +++ b/examples/angular/ssr-persist/.devcontainer/devcontainer.json @@ -0,0 +1,4 @@ +{ + "name": "Node.js", + "image": "mcr.microsoft.com/devcontainers/javascript-node:22" +} diff --git a/examples/angular/ssr-persist/.eslintrc.cjs b/examples/angular/ssr-persist/.eslintrc.cjs new file mode 100644 index 00000000000..cca134ce166 --- /dev/null +++ b/examples/angular/ssr-persist/.eslintrc.cjs @@ -0,0 +1,6 @@ +// @ts-check + +/** @type {import('eslint').Linter.Config} */ +const config = {} + +module.exports = config diff --git a/examples/angular/ssr-persist/README.md b/examples/angular/ssr-persist/README.md new file mode 100644 index 00000000000..e981642c723 --- /dev/null +++ b/examples/angular/ssr-persist/README.md @@ -0,0 +1,14 @@ +# TanStack Query Angular SSR + persistence example + +Combines [SSR/hydration](https://tanstack.com/query/latest/docs/framework/angular/guides/ssr), a `localStorage` persister, and a **client-only island**: `ClientPersistDemoComponent` is mounted with `afterNextRender`, so its `injectQuery` `queryFn` does not run during SSR (unlike `@defer` main content, which is still rendered on the server for incremental hydration). + +- **Server:** same bootstrap config shape as the base SSR example; `withPersistQueryClient` uses a factory and skips work when not in the browser. +- **Client:** `showClientDemo` is set to `true` in `afterNextRender`, then `` is created — optional `dehydrateOptions.shouldDehydrateQuery` can scope persistence to `client-persist` query keys only. + +To run: + +- From the repo root: `pnpm install` then + `pnpm --filter @tanstack/query-example-angular-ssr-persist start` +- Production SSR server after build: + `pnpm --filter @tanstack/query-example-angular-ssr-persist run build` + then `pnpm --filter @tanstack/query-example-angular-ssr-persist run serve:ssr` diff --git a/examples/angular/ssr-persist/angular.json b/examples/angular/ssr-persist/angular.json new file mode 100644 index 00000000000..b4bdec992b9 --- /dev/null +++ b/examples/angular/ssr-persist/angular.json @@ -0,0 +1,140 @@ +{ + "$schema": "./node_modules/@angular/cli/lib/config/schema.json", + "version": 1, + "cli": { + "packageManager": "pnpm", + "analytics": false, + "cache": { + "enabled": false + } + }, + "newProjectRoot": "projects", + "projects": { + "ssr-persist": { + "projectType": "application", + "schematics": { + "@schematics/angular:component": { + "inlineTemplate": true, + "inlineStyle": true, + "skipTests": true + }, + "@schematics/angular:class": { + "skipTests": true + }, + "@schematics/angular:directive": { + "skipTests": true + }, + "@schematics/angular:guard": { + "skipTests": true + }, + "@schematics/angular:interceptor": { + "skipTests": true + }, + "@schematics/angular:pipe": { + "skipTests": true + }, + "@schematics/angular:resolver": { + "skipTests": true + }, + "@schematics/angular:service": { + "skipTests": true + } + }, + "root": "", + "sourceRoot": "src", + "prefix": "app", + "architect": { + "build": { + "builder": "@angular/build:application", + "options": { + "outputPath": "dist/ssr-persist", + "index": "src/index.html", + "browser": "src/main.ts", + "polyfills": ["zone.js"], + "tsConfig": "tsconfig.app.json", + "styles": ["src/styles.css"], + "scripts": [], + "server": "src/main.server.ts", + "outputMode": "server", + "security": { + "allowedHosts": ["localhost", "127.0.0.1"] + }, + "ssr": { + "entry": "src/server.ts" + } + }, + "configurations": { + "production": { + "budgets": [ + { + "type": "initial", + "maximumWarning": "500kb", + "maximumError": "1mb" + }, + { + "type": "anyComponentStyle", + "maximumWarning": "2kb", + "maximumError": "4kb" + } + ], + "outputHashing": "all" + }, + "development": { + "optimization": false, + "extractLicenses": false, + "sourceMap": true + } + }, + "defaultConfiguration": "production" + }, + "serve": { + "builder": "@angular/build:dev-server", + "options": { + "prebundle": { "exclude": ["@angular"] } + }, + "configurations": { + "production": { + "buildTarget": "ssr-persist:build:production" + }, + "development": { + "buildTarget": "ssr-persist:build:development" + } + }, + "defaultConfiguration": "development" + }, + "extract-i18n": { + "builder": "@angular/build:extract-i18n", + "options": { + "buildTarget": "ssr-persist:build" + } + } + } + } + }, + "schematics": { + "@schematics/angular:component": { + "type": "component" + }, + "@schematics/angular:directive": { + "type": "directive" + }, + "@schematics/angular:service": { + "type": "service" + }, + "@schematics/angular:guard": { + "typeSeparator": "." + }, + "@schematics/angular:interceptor": { + "typeSeparator": "." + }, + "@schematics/angular:module": { + "typeSeparator": "." + }, + "@schematics/angular:pipe": { + "typeSeparator": "." + }, + "@schematics/angular:resolver": { + "typeSeparator": "." + } + } +} diff --git a/examples/angular/ssr-persist/package.json b/examples/angular/ssr-persist/package.json new file mode 100644 index 00000000000..2ef1daec938 --- /dev/null +++ b/examples/angular/ssr-persist/package.json @@ -0,0 +1,35 @@ +{ + "name": "@tanstack/query-example-angular-ssr-persist", + "type": "module", + "scripts": { + "ng": "ng", + "start": "ng serve", + "build": "ng build", + "watch": "ng build --watch --configuration development", + "serve:ssr": "node dist/ssr-persist/server/server.mjs" + }, + "private": true, + "dependencies": { + "@angular/common": "^22.0.0", + "@angular/compiler": "^22.0.0", + "@angular/core": "^22.0.0", + "@angular/platform-browser": "^22.0.0", + "@angular/platform-server": "^22.0.0", + "@angular/ssr": "^22.0.0", + "@tanstack/angular-query-devtools": "^5.0.0-rc.5", + "@tanstack/angular-query": "^5.0.0-rc.5", + "@tanstack/angular-query-persist-client": "^5.0.0-rc.5", + "@tanstack/query-async-storage-persister": "^5.107.1", + "express": "^5.1.0", + "rxjs": "^7.8.2", + "tslib": "^2.8.1", + "zone.js": "0.16.1" + }, + "devDependencies": { + "@angular/build": "^22.0.0", + "@angular/cli": "^22.0.0", + "@angular/compiler-cli": "^22.0.0", + "@types/express": "^5.0.1", + "typescript": "6.0.3" + } +} diff --git a/examples/angular/ssr-persist/src/app/app.component.ts b/examples/angular/ssr-persist/src/app/app.component.ts new file mode 100644 index 00000000000..ffdde21e388 --- /dev/null +++ b/examples/angular/ssr-persist/src/app/app.component.ts @@ -0,0 +1,127 @@ +import { + ChangeDetectionStrategy, + Component, + afterNextRender, + signal, +} from '@angular/core' +import { ClientPersistDemoComponent } from './components/client-persist-demo.component' +import { PostsComponent } from './components/posts.component' + +@Component({ + changeDetection: ChangeDetectionStrategy.OnPush, + selector: 'ssr-persist-example', + imports: [ClientPersistDemoComponent, PostsComponent], + template: ` +
+
+

Angular SSR + client-only island + persistence

+

SSR queries vs client-only persisted queries

+

+ Posts use queryKey: ['posts'] and run on the server. + Configure the persister with + dehydrateOptions.shouldDehydrateQuery if you want only + client-persist keys in localStorage. +

+

+ The panel below is mounted only in the browser via + afterNextRender, so its query never runs during SSR. + After the first visit, hard-reload: the timestamp can be restored from + persistence while posts render from SSR again. +

+
+ +
+

Server data

+ +
+ +
+

Client-only (afterNextRender)

+ @if (showClientDemo()) { + + } @else { +

+ Server render: this placeholder has no + client-persist-demo component yet — it is created after + the first browser frame via afterNextRender. +

+ } +
+
+ `, + styles: ` + .page { + max-width: 960px; + margin: 0 auto; + padding: 48px 20px 72px; + } + + .hero { + margin-bottom: 32px; + } + + .eyebrow { + margin: 0 0 8px; + font-size: 12px; + font-weight: 700; + letter-spacing: 0.12em; + text-transform: uppercase; + color: #9b5c00; + } + + h1 { + margin: 0 0 12px; + font-size: clamp(2.2rem, 5vw, 4rem); + line-height: 1; + } + + .lede { + max-width: 640px; + margin: 0 0 12px; + font-size: 1rem; + line-height: 1.6; + color: #4b5563; + } + + .hint { + font-size: 0.95rem; + color: #6b7280; + } + + code { + font-size: 0.88em; + padding: 0.1em 0.35em; + border-radius: 4px; + background: #f3f4f6; + } + + .region { + margin-bottom: 40px; + } + + .region-title { + margin: 0 0 16px; + font-size: 1.25rem; + color: #1f2937; + } + + .placeholder { + margin: 0; + padding: 16px; + border-radius: 12px; + background: #f9fafb; + color: #6b7280; + line-height: 1.5; + } + `, +}) +export class SsrPersistExampleComponent { + /** When `true`, `ClientPersistDemoComponent` exists only in the browser (not during SSR). */ + readonly showClientDemo = signal(false) + + constructor() { + afterNextRender(() => { + this.showClientDemo.set(true) + }) + } +} diff --git a/examples/angular/ssr-persist/src/app/app.config.server.ts b/examples/angular/ssr-persist/src/app/app.config.server.ts new file mode 100644 index 00000000000..a1a957f51c4 --- /dev/null +++ b/examples/angular/ssr-persist/src/app/app.config.server.ts @@ -0,0 +1,8 @@ +import { mergeApplicationConfig } from '@angular/core' +import { provideServerRendering, withRoutes } from '@angular/ssr' +import { appConfig } from './app.config' +import { serverRoutes } from './app.routes.server' + +export const serverConfig = mergeApplicationConfig(appConfig, { + providers: [provideServerRendering(withRoutes(serverRoutes))], +}) diff --git a/examples/angular/ssr-persist/src/app/app.config.ts b/examples/angular/ssr-persist/src/app/app.config.ts new file mode 100644 index 00000000000..d8bb855fe3a --- /dev/null +++ b/examples/angular/ssr-persist/src/app/app.config.ts @@ -0,0 +1,31 @@ +import { provideHttpClient, withFetch } from '@angular/common/http' +import type { ApplicationConfig } from '@angular/core' +import { + provideClientHydration, + withEventReplay, +} from '@angular/platform-browser' +import { provideTanStackQuery } from '@tanstack/angular-query' +import { withDevtools } from '@tanstack/angular-query-devtools' +import { withPersistQueryClient } from '@tanstack/angular-query-persist-client' +import { createAsyncStoragePersister } from '@tanstack/query-async-storage-persister' +import { PERSIST_STORAGE_KEY, createQueryClient } from './query-client' + +export const appConfig: ApplicationConfig = { + providers: [ + provideHttpClient(withFetch()), + provideClientHydration(withEventReplay()), + provideTanStackQuery( + createQueryClient, + withDevtools(), + withPersistQueryClient(() => ({ + persistOptions: { + persister: createAsyncStoragePersister({ + storage: localStorage, + key: PERSIST_STORAGE_KEY, + throttleTime: 1000, + }), + }, + })), + ), + ], +} diff --git a/examples/angular/ssr-persist/src/app/app.routes.server.ts b/examples/angular/ssr-persist/src/app/app.routes.server.ts new file mode 100644 index 00000000000..09fcfa3cc95 --- /dev/null +++ b/examples/angular/ssr-persist/src/app/app.routes.server.ts @@ -0,0 +1,9 @@ +import { RenderMode } from '@angular/ssr' +import type { ServerRoute } from '@angular/ssr' + +export const serverRoutes: Array = [ + { + path: '**', + renderMode: RenderMode.Server, + }, +] diff --git a/examples/angular/ssr-persist/src/app/components/client-persist-demo.component.ts b/examples/angular/ssr-persist/src/app/components/client-persist-demo.component.ts new file mode 100644 index 00000000000..41ba96cda48 --- /dev/null +++ b/examples/angular/ssr-persist/src/app/components/client-persist-demo.component.ts @@ -0,0 +1,84 @@ +import { ChangeDetectionStrategy, Component } from '@angular/core' +import { injectQuery } from '@tanstack/angular-query' +import { CLIENT_PERSIST_QUERY_ROOT } from '../query-persist-scope' + +/** + * Mounted only in the browser (parent uses `afterNextRender`), so `queryFn` is not run during SSR. + * Pair with `dehydrateOptions.shouldDehydrateQuery` if you want only `client-persist` keys in storage. + */ +@Component({ + changeDetection: ChangeDetectionStrategy.OnPush, + selector: 'client-persist-demo', + template: ` +
+

Client-only island

+

Client-only persisted query

+ @if (demo.isPending()) { +

Loading client-only data…

+ } @else if (demo.isError()) { +

Failed to load.

+ } @else if (demo.data(); as data) { +

{{ data.createdAt }}

+

+ This value is stored under the client-persist query key. + Hard-reload the page: it should reappear from persistence while the + posts list above is rendered from SSR again. +

+ } +
+ `, + styles: ` + .panel { + margin-top: 8px; + padding: 20px; + border-radius: 18px; + border: 1px dashed #c4b5a0; + background: #fffefb; + } + + .badge { + margin: 0 0 8px; + font-size: 11px; + font-weight: 700; + letter-spacing: 0.1em; + text-transform: uppercase; + color: #7c5a10; + } + + h3 { + margin: 0 0 12px; + font-size: 1.1rem; + } + + .mono { + margin: 0 0 12px; + font-family: ui-monospace, monospace; + font-size: 0.85rem; + word-break: break-all; + } + + .note { + margin: 0; + font-size: 0.9rem; + line-height: 1.5; + color: #4b5563; + } + + code { + font-size: 0.88em; + padding: 0.1em 0.35em; + border-radius: 4px; + background: #f3f4f6; + } + `, +}) +export class ClientPersistDemoComponent { + readonly demo = injectQuery(() => ({ + queryKey: [CLIENT_PERSIST_QUERY_ROOT, 'timestamp-demo'], + queryFn: async () => { + await new Promise((r) => setTimeout(r, 100)) + return { createdAt: new Date().toISOString() } + }, + staleTime: Infinity, + })) +} diff --git a/examples/angular/ssr-persist/src/app/components/posts.component.ts b/examples/angular/ssr-persist/src/app/components/posts.component.ts new file mode 100644 index 00000000000..e9b13754d57 --- /dev/null +++ b/examples/angular/ssr-persist/src/app/components/posts.component.ts @@ -0,0 +1,70 @@ +import { ChangeDetectionStrategy, Component, inject } from '@angular/core' +import { injectQuery } from '@tanstack/angular-query' +import { lastValueFrom } from 'rxjs' +import { PostsService } from '../services/posts.service' + +@Component({ + changeDetection: ChangeDetectionStrategy.OnPush, + selector: 'posts', + template: ` + @if (postsQuery.isPending()) { +

Loading posts...

+ } @else if (postsQuery.isError()) { +

Failed to load posts.

+ } @else { +
+ @for (post of postsQuery.data(); track post.id) { +
+

Post #{{ post.id }}

+

{{ post.title }}

+

{{ post.body }}

+
+ } +
+ } + `, + styles: ` + .grid { + display: grid; + gap: 16px; + grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); + } + + .card { + padding: 20px; + border: 1px solid #eadfcb; + border-radius: 18px; + background: #fffdf8; + box-shadow: 0 12px 30px rgba(123, 88, 31, 0.08); + } + + .meta { + margin: 0 0 10px; + font-size: 12px; + font-weight: 700; + letter-spacing: 0.08em; + text-transform: uppercase; + color: #8b5e34; + } + + h2 { + margin: 0 0 10px; + font-size: 1.1rem; + line-height: 1.3; + } + + p { + margin: 0; + line-height: 1.5; + color: #374151; + } + `, +}) +export class PostsComponent { + readonly #postsService = inject(PostsService) + + readonly postsQuery = injectQuery(() => ({ + queryKey: ['posts'], + queryFn: () => lastValueFrom(this.#postsService.allPosts$()), + })) +} diff --git a/examples/angular/ssr-persist/src/app/query-client.ts b/examples/angular/ssr-persist/src/app/query-client.ts new file mode 100644 index 00000000000..de7b2e1930b --- /dev/null +++ b/examples/angular/ssr-persist/src/app/query-client.ts @@ -0,0 +1,21 @@ +import { isPlatformServer } from '@angular/common' +import { PLATFORM_ID, inject } from '@angular/core' +import { QueryClient } from '@tanstack/angular-query' + +export const PERSIST_STORAGE_KEY = 'tanstack-query-angular-ssr-persist-example' + +export const SHARED_QUERY_DEFAULTS = { + staleTime: 1000 * 30, + gcTime: 1000 * 60 * 60 * 24, +} as const + +export function createQueryClient() { + return new QueryClient({ + defaultOptions: { + queries: { + ...SHARED_QUERY_DEFAULTS, + ...(isPlatformServer(inject(PLATFORM_ID)) ? { retry: false } : {}), + }, + }, + }) +} diff --git a/examples/angular/ssr-persist/src/app/query-persist-scope.ts b/examples/angular/ssr-persist/src/app/query-persist-scope.ts new file mode 100644 index 00000000000..08a420f7932 --- /dev/null +++ b/examples/angular/ssr-persist/src/app/query-persist-scope.ts @@ -0,0 +1,5 @@ +/** + * Query key prefix for data that should be written to `localStorage` by the global persister. + * SSR queries (e.g. `['posts']`) use different keys and are excluded in `dehydrateOptions`. + */ +export const CLIENT_PERSIST_QUERY_ROOT = 'client-persist' as const diff --git a/examples/angular/ssr-persist/src/app/services/posts.service.ts b/examples/angular/ssr-persist/src/app/services/posts.service.ts new file mode 100644 index 00000000000..edb8e084f0e --- /dev/null +++ b/examples/angular/ssr-persist/src/app/services/posts.service.ts @@ -0,0 +1,63 @@ +import { Injectable } from '@angular/core' +import { of, tap } from 'rxjs' +import { delay } from 'rxjs/operators' + +@Injectable({ + providedIn: 'root', +}) +export class PostsService { + allPosts$ = () => + of(posts).pipe( + tap(() => console.log('fetching posts')), + delay(50), + ) +} + +export interface Post { + id: number + title: string + body: string +} + +const posts: Array = [ + { + id: 1, + title: 'Render on the server', + body: 'The initial HTML is produced by Angular SSR before the browser bootstraps the app.', + }, + { + id: 2, + title: 'Hydrate on the client', + body: 'Angular reuses the rendered DOM and turns it into a live client application.', + }, + { + id: 3, + title: 'Query on both sides', + body: 'TanStack Query runs during SSR, hydrates on the client, and the persisted cache can speed up the next full load.', + }, + { + id: 3.5, + title: 'Persist after hydration', + body: 'withPersistQueryClient uses a factory so localStorage is only touched in the browser, not during server render.', + }, + { + id: 4, + title: 'No API needed', + body: 'This example uses a deterministic in-memory data source so the SSR example works without external network access.', + }, + { + id: 5, + title: 'Keep the setup small', + body: 'Only the Angular CLI SSR pieces remain: main.server.ts, server.ts and the server application config.', + }, + { + id: 6, + title: 'Match the other examples', + body: 'The rest of the app keeps the same lightweight structure as the existing Angular examples in this repo.', + }, + { + id: 7, + title: 'Persist after hydration', + body: 'withPersistQueryClient uses a factory so localStorage is only touched in the browser, not during server render.', + }, +] diff --git a/examples/angular/ssr-persist/src/index.html b/examples/angular/ssr-persist/src/index.html new file mode 100644 index 00000000000..c00f1bf3ca5 --- /dev/null +++ b/examples/angular/ssr-persist/src/index.html @@ -0,0 +1,12 @@ + + + + + TanStack Query Angular SSR + persist example + + + + + + + diff --git a/examples/angular/ssr-persist/src/main.server.ts b/examples/angular/ssr-persist/src/main.server.ts new file mode 100644 index 00000000000..1bdb237f23f --- /dev/null +++ b/examples/angular/ssr-persist/src/main.server.ts @@ -0,0 +1,11 @@ +import { + bootstrapApplication, + type BootstrapContext, +} from '@angular/platform-browser' +import { serverConfig } from './app/app.config.server' +import { SsrPersistExampleComponent } from './app/app.component' + +const bootstrap = (context: BootstrapContext) => + bootstrapApplication(SsrPersistExampleComponent, serverConfig, context) + +export default bootstrap diff --git a/examples/angular/ssr-persist/src/main.ts b/examples/angular/ssr-persist/src/main.ts new file mode 100644 index 00000000000..9c2c5ea1079 --- /dev/null +++ b/examples/angular/ssr-persist/src/main.ts @@ -0,0 +1,7 @@ +import { bootstrapApplication } from '@angular/platform-browser' +import { appConfig } from './app/app.config' +import { SsrPersistExampleComponent } from './app/app.component' + +bootstrapApplication(SsrPersistExampleComponent, appConfig).catch((err) => + console.error(err), +) diff --git a/examples/angular/ssr-persist/src/server.ts b/examples/angular/ssr-persist/src/server.ts new file mode 100644 index 00000000000..db670c6eb0d --- /dev/null +++ b/examples/angular/ssr-persist/src/server.ts @@ -0,0 +1,43 @@ +import { + AngularNodeAppEngine, + createNodeRequestHandler, + isMainModule, + writeResponseToNodeResponse, +} from '@angular/ssr/node' +import express from 'express' +import { join } from 'node:path' + +const browserDistFolder = join(import.meta.dirname, '../browser') + +const app = express() +const angularApp = new AngularNodeAppEngine() + +app.use( + express.static(browserDistFolder, { + maxAge: '1y', + index: false, + redirect: false, + }), +) + +app.use((req, res, next) => { + angularApp + .handle(req) + .then((response) => + response ? writeResponseToNodeResponse(response, res) : next(), + ) + .catch(next) +}) + +if (isMainModule(import.meta.url)) { + const port = process.env['PORT'] || 4000 + app.listen(port, (error) => { + if (error) { + throw error + } + + console.log(`Node Express server listening on http://localhost:${port}`) + }) +} + +export const reqHandler = createNodeRequestHandler(app) diff --git a/examples/angular/ssr-persist/src/styles.css b/examples/angular/ssr-persist/src/styles.css new file mode 100644 index 00000000000..e62ddcff1cc --- /dev/null +++ b/examples/angular/ssr-persist/src/styles.css @@ -0,0 +1,12 @@ +body { + margin: 0; + font-family: + ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', + sans-serif; + background: #faf8f2; + color: #1b1f23; +} + +button { + font: inherit; +} diff --git a/examples/angular/ssr-persist/tsconfig.app.json b/examples/angular/ssr-persist/tsconfig.app.json new file mode 100644 index 00000000000..00e9b764198 --- /dev/null +++ b/examples/angular/ssr-persist/tsconfig.app.json @@ -0,0 +1,8 @@ +{ + "extends": "./tsconfig.json", + "compilerOptions": { + "outDir": "./out-tsc/app", + "types": ["node"] + }, + "include": ["src/**/*.ts"] +} diff --git a/examples/angular/ssr-persist/tsconfig.json b/examples/angular/ssr-persist/tsconfig.json new file mode 100644 index 00000000000..5aa05d2d231 --- /dev/null +++ b/examples/angular/ssr-persist/tsconfig.json @@ -0,0 +1,29 @@ +{ + "compileOnSave": false, + "compilerOptions": { + "strict": true, + "noImplicitOverride": true, + "noPropertyAccessFromIndexSignature": true, + "noImplicitReturns": true, + "noFallthroughCasesInSwitch": true, + "skipLibCheck": true, + "isolatedModules": true, + "experimentalDecorators": true, + "importHelpers": true, + "target": "ES2022", + "module": "preserve" + }, + "angularCompilerOptions": { + "enableI18nLegacyMessageIdFormat": false, + "strictInjectionParameters": true, + "strictInputAccessModifiers": true, + "typeCheckHostBindings": true, + "strictTemplates": true + }, + "files": [], + "references": [ + { + "path": "./tsconfig.app.json" + } + ] +} diff --git a/examples/angular/ssr/.devcontainer/devcontainer.json b/examples/angular/ssr/.devcontainer/devcontainer.json new file mode 100644 index 00000000000..365adf8f4c3 --- /dev/null +++ b/examples/angular/ssr/.devcontainer/devcontainer.json @@ -0,0 +1,4 @@ +{ + "name": "Node.js", + "image": "mcr.microsoft.com/devcontainers/javascript-node:22" +} diff --git a/examples/angular/ssr/.eslintrc.cjs b/examples/angular/ssr/.eslintrc.cjs new file mode 100644 index 00000000000..cca134ce166 --- /dev/null +++ b/examples/angular/ssr/.eslintrc.cjs @@ -0,0 +1,6 @@ +// @ts-check + +/** @type {import('eslint').Linter.Config} */ +const config = {} + +module.exports = config diff --git a/examples/angular/ssr/README.md b/examples/angular/ssr/README.md new file mode 100644 index 00000000000..b15e6f599d1 --- /dev/null +++ b/examples/angular/ssr/README.md @@ -0,0 +1,6 @@ +# TanStack Query Angular SSR example + +To run this example: + +- `npm install` or `yarn` or `pnpm i` or `bun i` +- `npm run start` or `yarn start` or `pnpm start` or `bun start` diff --git a/examples/angular/ssr/angular.json b/examples/angular/ssr/angular.json new file mode 100644 index 00000000000..1e393174cf2 --- /dev/null +++ b/examples/angular/ssr/angular.json @@ -0,0 +1,140 @@ +{ + "$schema": "./node_modules/@angular/cli/lib/config/schema.json", + "version": 1, + "cli": { + "packageManager": "pnpm", + "analytics": false, + "cache": { + "enabled": false + } + }, + "newProjectRoot": "projects", + "projects": { + "ssr": { + "projectType": "application", + "schematics": { + "@schematics/angular:component": { + "inlineTemplate": true, + "inlineStyle": true, + "skipTests": true + }, + "@schematics/angular:class": { + "skipTests": true + }, + "@schematics/angular:directive": { + "skipTests": true + }, + "@schematics/angular:guard": { + "skipTests": true + }, + "@schematics/angular:interceptor": { + "skipTests": true + }, + "@schematics/angular:pipe": { + "skipTests": true + }, + "@schematics/angular:resolver": { + "skipTests": true + }, + "@schematics/angular:service": { + "skipTests": true + } + }, + "root": "", + "sourceRoot": "src", + "prefix": "app", + "architect": { + "build": { + "builder": "@angular/build:application", + "options": { + "outputPath": "dist/ssr", + "index": "src/index.html", + "browser": "src/main.ts", + "polyfills": ["zone.js"], + "tsConfig": "tsconfig.app.json", + "styles": ["src/styles.css"], + "scripts": [], + "server": "src/main.server.ts", + "outputMode": "server", + "security": { + "allowedHosts": ["localhost", "127.0.0.1"] + }, + "ssr": { + "entry": "src/server.ts" + } + }, + "configurations": { + "production": { + "budgets": [ + { + "type": "initial", + "maximumWarning": "500kb", + "maximumError": "1mb" + }, + { + "type": "anyComponentStyle", + "maximumWarning": "2kb", + "maximumError": "4kb" + } + ], + "outputHashing": "all" + }, + "development": { + "optimization": false, + "extractLicenses": false, + "sourceMap": true + } + }, + "defaultConfiguration": "production" + }, + "serve": { + "builder": "@angular/build:dev-server", + "options": { + "prebundle": { "exclude": ["@angular"] } + }, + "configurations": { + "production": { + "buildTarget": "ssr:build:production" + }, + "development": { + "buildTarget": "ssr:build:development" + } + }, + "defaultConfiguration": "development" + }, + "extract-i18n": { + "builder": "@angular/build:extract-i18n", + "options": { + "buildTarget": "ssr:build" + } + } + } + } + }, + "schematics": { + "@schematics/angular:component": { + "type": "component" + }, + "@schematics/angular:directive": { + "type": "directive" + }, + "@schematics/angular:service": { + "type": "service" + }, + "@schematics/angular:guard": { + "typeSeparator": "." + }, + "@schematics/angular:interceptor": { + "typeSeparator": "." + }, + "@schematics/angular:module": { + "typeSeparator": "." + }, + "@schematics/angular:pipe": { + "typeSeparator": "." + }, + "@schematics/angular:resolver": { + "typeSeparator": "." + } + } +} diff --git a/examples/angular/ssr/package.json b/examples/angular/ssr/package.json new file mode 100644 index 00000000000..565f3d95263 --- /dev/null +++ b/examples/angular/ssr/package.json @@ -0,0 +1,33 @@ +{ + "name": "@tanstack/query-example-angular-ssr", + "type": "module", + "scripts": { + "ng": "ng", + "start": "ng serve", + "build": "ng build", + "watch": "ng build --watch --configuration development", + "serve:ssr": "node dist/ssr/server/server.mjs" + }, + "private": true, + "dependencies": { + "@angular/common": "^22.0.0", + "@angular/compiler": "^22.0.0", + "@angular/core": "^22.0.0", + "@angular/platform-browser": "^22.0.0", + "@angular/platform-server": "^22.0.0", + "@angular/ssr": "^22.0.0", + "@tanstack/angular-query-devtools": "^5.0.0-rc.5", + "@tanstack/angular-query": "^5.0.0-rc.5", + "express": "^5.1.0", + "rxjs": "^7.8.2", + "tslib": "^2.8.1", + "zone.js": "0.16.1" + }, + "devDependencies": { + "@angular/build": "^22.0.0", + "@angular/cli": "^22.0.0", + "@angular/compiler-cli": "^22.0.0", + "@types/express": "^5.0.1", + "typescript": "6.0.3" + } +} diff --git a/examples/angular/ssr/src/app/app.component.ts b/examples/angular/ssr/src/app/app.component.ts new file mode 100644 index 00000000000..1f17c32569c --- /dev/null +++ b/examples/angular/ssr/src/app/app.component.ts @@ -0,0 +1,57 @@ +import { ChangeDetectionStrategy, Component } from '@angular/core' +import { PostsComponent } from './components/posts.component' + +@Component({ + changeDetection: ChangeDetectionStrategy.OnPush, + selector: 'ssr-example', + imports: [PostsComponent], + template: ` +
+
+

Angular SSR

+

Server-rendered posts with TanStack Query

+

+ The first render comes from the server. Angular then hydrates the app + on the client and TanStack Query continues from a fresh client cache. +

+
+ + +
+ `, + styles: ` + .page { + max-width: 960px; + margin: 0 auto; + padding: 48px 20px 72px; + } + + .hero { + margin-bottom: 32px; + } + + .eyebrow { + margin: 0 0 8px; + font-size: 12px; + font-weight: 700; + letter-spacing: 0.12em; + text-transform: uppercase; + color: #9b5c00; + } + + h1 { + margin: 0 0 12px; + font-size: clamp(2.2rem, 5vw, 4rem); + line-height: 1; + } + + .lede { + max-width: 640px; + margin: 0; + font-size: 1rem; + line-height: 1.6; + color: #4b5563; + } + `, +}) +export class SsrExampleComponent {} diff --git a/examples/angular/ssr/src/app/app.config.server.ts b/examples/angular/ssr/src/app/app.config.server.ts new file mode 100644 index 00000000000..a1a957f51c4 --- /dev/null +++ b/examples/angular/ssr/src/app/app.config.server.ts @@ -0,0 +1,8 @@ +import { mergeApplicationConfig } from '@angular/core' +import { provideServerRendering, withRoutes } from '@angular/ssr' +import { appConfig } from './app.config' +import { serverRoutes } from './app.routes.server' + +export const serverConfig = mergeApplicationConfig(appConfig, { + providers: [provideServerRendering(withRoutes(serverRoutes))], +}) diff --git a/examples/angular/ssr/src/app/app.config.ts b/examples/angular/ssr/src/app/app.config.ts new file mode 100644 index 00000000000..05322a559a5 --- /dev/null +++ b/examples/angular/ssr/src/app/app.config.ts @@ -0,0 +1,17 @@ +import { provideHttpClient, withFetch } from '@angular/common/http' +import type { ApplicationConfig } from '@angular/core' +import { + provideClientHydration, + withEventReplay, +} from '@angular/platform-browser' +import { provideTanStackQuery } from '@tanstack/angular-query' +import { withDevtools } from '@tanstack/angular-query-devtools' +import { createQueryClient } from './query-client' + +export const appConfig: ApplicationConfig = { + providers: [ + provideHttpClient(withFetch()), + provideClientHydration(withEventReplay()), + provideTanStackQuery(createQueryClient, withDevtools()), + ], +} diff --git a/examples/angular/ssr/src/app/app.routes.server.ts b/examples/angular/ssr/src/app/app.routes.server.ts new file mode 100644 index 00000000000..09fcfa3cc95 --- /dev/null +++ b/examples/angular/ssr/src/app/app.routes.server.ts @@ -0,0 +1,9 @@ +import { RenderMode } from '@angular/ssr' +import type { ServerRoute } from '@angular/ssr' + +export const serverRoutes: Array = [ + { + path: '**', + renderMode: RenderMode.Server, + }, +] diff --git a/examples/angular/ssr/src/app/components/posts.component.ts b/examples/angular/ssr/src/app/components/posts.component.ts new file mode 100644 index 00000000000..e9b13754d57 --- /dev/null +++ b/examples/angular/ssr/src/app/components/posts.component.ts @@ -0,0 +1,70 @@ +import { ChangeDetectionStrategy, Component, inject } from '@angular/core' +import { injectQuery } from '@tanstack/angular-query' +import { lastValueFrom } from 'rxjs' +import { PostsService } from '../services/posts.service' + +@Component({ + changeDetection: ChangeDetectionStrategy.OnPush, + selector: 'posts', + template: ` + @if (postsQuery.isPending()) { +

Loading posts...

+ } @else if (postsQuery.isError()) { +

Failed to load posts.

+ } @else { +
+ @for (post of postsQuery.data(); track post.id) { +
+

Post #{{ post.id }}

+

{{ post.title }}

+

{{ post.body }}

+
+ } +
+ } + `, + styles: ` + .grid { + display: grid; + gap: 16px; + grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); + } + + .card { + padding: 20px; + border: 1px solid #eadfcb; + border-radius: 18px; + background: #fffdf8; + box-shadow: 0 12px 30px rgba(123, 88, 31, 0.08); + } + + .meta { + margin: 0 0 10px; + font-size: 12px; + font-weight: 700; + letter-spacing: 0.08em; + text-transform: uppercase; + color: #8b5e34; + } + + h2 { + margin: 0 0 10px; + font-size: 1.1rem; + line-height: 1.3; + } + + p { + margin: 0; + line-height: 1.5; + color: #374151; + } + `, +}) +export class PostsComponent { + readonly #postsService = inject(PostsService) + + readonly postsQuery = injectQuery(() => ({ + queryKey: ['posts'], + queryFn: () => lastValueFrom(this.#postsService.allPosts$()), + })) +} diff --git a/examples/angular/ssr/src/app/query-client.ts b/examples/angular/ssr/src/app/query-client.ts new file mode 100644 index 00000000000..16bf58ab9ca --- /dev/null +++ b/examples/angular/ssr/src/app/query-client.ts @@ -0,0 +1,19 @@ +import { isPlatformServer } from '@angular/common' +import { PLATFORM_ID, inject } from '@angular/core' +import { QueryClient } from '@tanstack/angular-query' + +export const SHARED_QUERY_DEFAULTS = { + staleTime: 1000 * 30, + gcTime: 1000 * 60 * 60 * 24, +} as const + +export function createQueryClient() { + return new QueryClient({ + defaultOptions: { + queries: { + ...SHARED_QUERY_DEFAULTS, + ...(isPlatformServer(inject(PLATFORM_ID)) ? { retry: false } : {}), + }, + }, + }) +} diff --git a/examples/angular/ssr/src/app/services/posts.service.ts b/examples/angular/ssr/src/app/services/posts.service.ts new file mode 100644 index 00000000000..a650707f686 --- /dev/null +++ b/examples/angular/ssr/src/app/services/posts.service.ts @@ -0,0 +1,53 @@ +import { Injectable } from '@angular/core' +import { of, tap } from 'rxjs' +import { delay } from 'rxjs/operators' + +@Injectable({ + providedIn: 'root', +}) +export class PostsService { + allPosts$ = () => + of(posts).pipe( + tap(() => console.log('fetching posts')), + delay(50), + ) +} + +export interface Post { + id: number + title: string + body: string +} + +const posts: Array = [ + { + id: 1, + title: 'Render on the server', + body: 'The initial HTML is produced by Angular SSR before the browser bootstraps the app.', + }, + { + id: 2, + title: 'Hydrate on the client', + body: 'Angular reuses the rendered DOM and turns it into a live client application.', + }, + { + id: 3, + title: 'Query on both sides', + body: 'TanStack Query resolves during server rendering, then transfers the hydrated cache to the browser.', + }, + { + id: 4, + title: 'No API needed', + body: 'This example uses a deterministic in-memory data source so the SSR example works without external network access.', + }, + { + id: 5, + title: 'Keep the setup small', + body: 'Only the Angular CLI SSR pieces remain: main.server.ts, server.ts and the server application config.', + }, + { + id: 6, + title: 'Match the other examples', + body: 'The rest of the app keeps the same lightweight structure as the existing Angular examples in this repo.', + }, +] diff --git a/examples/angular/ssr/src/index.html b/examples/angular/ssr/src/index.html new file mode 100644 index 00000000000..ab7606ebbf6 --- /dev/null +++ b/examples/angular/ssr/src/index.html @@ -0,0 +1,12 @@ + + + + + TanStack Query Angular SSR Example + + + + + + + diff --git a/examples/angular/ssr/src/main.server.ts b/examples/angular/ssr/src/main.server.ts new file mode 100644 index 00000000000..df44a7c47b7 --- /dev/null +++ b/examples/angular/ssr/src/main.server.ts @@ -0,0 +1,11 @@ +import { + bootstrapApplication, + type BootstrapContext, +} from '@angular/platform-browser' +import { serverConfig } from './app/app.config.server' +import { SsrExampleComponent } from './app/app.component' + +const bootstrap = (context: BootstrapContext) => + bootstrapApplication(SsrExampleComponent, serverConfig, context) + +export default bootstrap diff --git a/examples/angular/ssr/src/main.ts b/examples/angular/ssr/src/main.ts new file mode 100644 index 00000000000..f63fdacda8d --- /dev/null +++ b/examples/angular/ssr/src/main.ts @@ -0,0 +1,7 @@ +import { bootstrapApplication } from '@angular/platform-browser' +import { appConfig } from './app/app.config' +import { SsrExampleComponent } from './app/app.component' + +bootstrapApplication(SsrExampleComponent, appConfig).catch((err) => + console.error(err), +) diff --git a/examples/angular/ssr/src/server.ts b/examples/angular/ssr/src/server.ts new file mode 100644 index 00000000000..db670c6eb0d --- /dev/null +++ b/examples/angular/ssr/src/server.ts @@ -0,0 +1,43 @@ +import { + AngularNodeAppEngine, + createNodeRequestHandler, + isMainModule, + writeResponseToNodeResponse, +} from '@angular/ssr/node' +import express from 'express' +import { join } from 'node:path' + +const browserDistFolder = join(import.meta.dirname, '../browser') + +const app = express() +const angularApp = new AngularNodeAppEngine() + +app.use( + express.static(browserDistFolder, { + maxAge: '1y', + index: false, + redirect: false, + }), +) + +app.use((req, res, next) => { + angularApp + .handle(req) + .then((response) => + response ? writeResponseToNodeResponse(response, res) : next(), + ) + .catch(next) +}) + +if (isMainModule(import.meta.url)) { + const port = process.env['PORT'] || 4000 + app.listen(port, (error) => { + if (error) { + throw error + } + + console.log(`Node Express server listening on http://localhost:${port}`) + }) +} + +export const reqHandler = createNodeRequestHandler(app) diff --git a/examples/angular/ssr/src/styles.css b/examples/angular/ssr/src/styles.css new file mode 100644 index 00000000000..e62ddcff1cc --- /dev/null +++ b/examples/angular/ssr/src/styles.css @@ -0,0 +1,12 @@ +body { + margin: 0; + font-family: + ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', + sans-serif; + background: #faf8f2; + color: #1b1f23; +} + +button { + font: inherit; +} diff --git a/examples/angular/ssr/tsconfig.app.json b/examples/angular/ssr/tsconfig.app.json new file mode 100644 index 00000000000..00e9b764198 --- /dev/null +++ b/examples/angular/ssr/tsconfig.app.json @@ -0,0 +1,8 @@ +{ + "extends": "./tsconfig.json", + "compilerOptions": { + "outDir": "./out-tsc/app", + "types": ["node"] + }, + "include": ["src/**/*.ts"] +} diff --git a/examples/angular/ssr/tsconfig.json b/examples/angular/ssr/tsconfig.json new file mode 100644 index 00000000000..5aa05d2d231 --- /dev/null +++ b/examples/angular/ssr/tsconfig.json @@ -0,0 +1,29 @@ +{ + "compileOnSave": false, + "compilerOptions": { + "strict": true, + "noImplicitOverride": true, + "noPropertyAccessFromIndexSignature": true, + "noImplicitReturns": true, + "noFallthroughCasesInSwitch": true, + "skipLibCheck": true, + "isolatedModules": true, + "experimentalDecorators": true, + "importHelpers": true, + "target": "ES2022", + "module": "preserve" + }, + "angularCompilerOptions": { + "enableI18nLegacyMessageIdFormat": false, + "strictInjectionParameters": true, + "strictInputAccessModifiers": true, + "typeCheckHostBindings": true, + "strictTemplates": true + }, + "files": [], + "references": [ + { + "path": "./tsconfig.app.json" + } + ] +} diff --git a/examples/angular/to-resource-signal-forms/README.md b/examples/angular/to-resource-signal-forms/README.md new file mode 100644 index 00000000000..60ec0c8d83d --- /dev/null +++ b/examples/angular/to-resource-signal-forms/README.md @@ -0,0 +1,27 @@ +# TanStack Query Angular `toResource` with Signal Forms example + +This example uses Angular Signal Forms' `validateAsync` with a Resource created +from `injectQuery` and `toResource`. The username check is cached by its query +key, debounced while typing, and cancelled when the value changes. The example +also adds an invite-code field dynamically, giving it its own async validator, +and includes a button that calls Signal Forms' `reloadValidation()` API. The +invite-code validator is applied with `applyEach`, so its Resource factory is +created only when an invite-code item is added to the form array. Query keys and +request options live in `ValidationQueriesService`; the validators spread those +options and add `enabled` based on the current field value. +Submitting the form runs a mock `injectMutation`, disables the submit button while it is pending, +and displays the variables passed to the mutation. + +This example intentionally uses Angular 22 because Signal Forms' `validateAsync` +API is stable starting in Angular 22. + +The `debounce` option on `validateAsync` does not work with `toResource(query)` +due to an [upstream Angular issue](https://github.com/angular/angular/issues/70884). +Instead, the example uses `debounce(fieldPath, 300)` from `@angular/forms/signals` +for the username and invite-code fields. This delays input updates to the form +model; blurring a field or submitting the form flushes its pending update immediately. + +To run this example: + +- `pnpm install` +- `pnpm start` diff --git a/examples/angular/to-resource-signal-forms/angular.json b/examples/angular/to-resource-signal-forms/angular.json new file mode 100644 index 00000000000..8b7a5fde388 --- /dev/null +++ b/examples/angular/to-resource-signal-forms/angular.json @@ -0,0 +1,58 @@ +{ + "$schema": "./node_modules/@angular/cli/lib/config/schema.json", + "version": 1, + "cli": { "packageManager": "pnpm", "analytics": false }, + "projects": { + "to-resource-signal-forms": { + "projectType": "application", + "root": "", + "sourceRoot": "src", + "prefix": "app", + "architect": { + "build": { + "builder": "@angular/build:application", + "options": { + "outputPath": "dist/to-resource-signal-forms", + "index": "src/index.html", + "browser": "src/main.ts", + "polyfills": ["zone.js"], + "tsConfig": "tsconfig.app.json", + "assets": [], + "styles": ["src/styles.css"] + }, + "configurations": { + "production": { "outputHashing": "all" }, + "development": { + "optimization": false, + "extractLicenses": false, + "sourceMap": true + } + }, + "defaultConfiguration": "production" + }, + "serve": { + "builder": "@angular/build:dev-server", + "options": { + "prebundle": { + "exclude": [ + "@angular/common", + "@angular/core", + "@angular/forms", + "@angular/platform-browser" + ] + } + }, + "configurations": { + "production": { + "buildTarget": "to-resource-signal-forms:build:production" + }, + "development": { + "buildTarget": "to-resource-signal-forms:build:development" + } + }, + "defaultConfiguration": "development" + } + } + } + } +} diff --git a/examples/angular/to-resource-signal-forms/package.json b/examples/angular/to-resource-signal-forms/package.json new file mode 100644 index 00000000000..3ec85e01a96 --- /dev/null +++ b/examples/angular/to-resource-signal-forms/package.json @@ -0,0 +1,29 @@ +{ + "name": "@tanstack/query-example-angular-to-resource-signal-forms", + "private": true, + "type": "module", + "scripts": { + "ng": "ng", + "start": "ng serve", + "build": "ng build", + "watch": "ng build --watch --configuration development" + }, + "dependencies": { + "@angular/common": "^22.0.0", + "@angular/compiler": "^22.0.0", + "@angular/core": "^22.0.0", + "@angular/forms": "^22.0.0", + "@angular/platform-browser": "^22.0.0", + "@tanstack/angular-query-devtools": "^5.0.0-rc.5", + "@tanstack/angular-query": "^5.0.0-rc.5", + "rxjs": "^7.8.2", + "tslib": "^2.8.1", + "zone.js": "0.16.1" + }, + "devDependencies": { + "@angular/build": "^22.0.0", + "@angular/cli": "^22.0.0", + "@angular/compiler-cli": "^22.0.0", + "typescript": "6.0.3" + } +} diff --git a/examples/angular/to-resource-signal-forms/src/app/app.component.css b/examples/angular/to-resource-signal-forms/src/app/app.component.css new file mode 100644 index 00000000000..665ce6ad670 --- /dev/null +++ b/examples/angular/to-resource-signal-forms/src/app/app.component.css @@ -0,0 +1,75 @@ +:host { + display: block; +} + +main { + margin: 3rem auto; + max-width: 42rem; + padding: 0 1rem; +} + +form, +label, +.invite-code-row { + display: grid; + gap: 0.5rem; +} + +label { + max-width: 22rem; +} + +input, +button { + font: inherit; +} + +input { + padding: 0.55rem 0.7rem; +} + +button { + padding: 0.275rem 0.7rem; +} + +button { + justify-self: start; +} + +.hint { + color: #5f6368; + font-size: 0.9rem; +} + +.checking { + margin: 0; + padding: 0.2rem 0.45rem; + color: #805b00; +} + +.error { + margin: 0; + padding: 0.2rem 0.45rem; + color: #b42318; +} + +.success { + margin: 0; + padding: 0.2rem 0.45rem; + color: #067647; +} + +.invite-code-row { + grid-template-columns: minmax(0, 1fr) auto; + align-items: end; + border-left: 3px solid #d0d5dd; + padding-left: 0.75rem; +} + +.invite-code-row > button { + margin-bottom: 0; +} + +.invite-code-row > p { + grid-column: 1 / -1; +} diff --git a/examples/angular/to-resource-signal-forms/src/app/app.component.ts b/examples/angular/to-resource-signal-forms/src/app/app.component.ts new file mode 100644 index 00000000000..817341d200d --- /dev/null +++ b/examples/angular/to-resource-signal-forms/src/app/app.component.ts @@ -0,0 +1,250 @@ +import { + ChangeDetectionStrategy, + Component, + inject, + signal, +} from '@angular/core' +import { + FormField, + applyEach, + debounce, + form, + minLength, + required, + submit as submitForm, + validateAsync, +} from '@angular/forms/signals' +import { + injectMutation, + injectQuery, + toResource, +} from '@tanstack/angular-query' +import { ValidationQueriesService } from './validation-queries.service' + +@Component({ + changeDetection: ChangeDetectionStrategy.OnPush, + selector: 'app-root', + imports: [FormField], + styleUrl: './app.component.css', + template: ` +
+

Username availability

+

+ Signal Forms uses a Resource backed by TanStack Query for async + validation. Try taken or any other username. +

+ +
+ + + @if (registrationForm.username().pending()) { +

Checking availability...

+ } + + @if ( + registrationForm.username().touched() && + registrationForm.username().invalid() + ) { + @for (error of registrationForm.username().errors(); track $index) { +

{{ error.message }}

+ } + } + + @if ( + registrationForm.username().touched() && + registrationForm.username().valid() + ) { +

Username is available.

+ } + +

+ Invite-code validators are added with each array item. The query + resource does not exist until an invite code is added. +

+ + + + @for ( + inviteCode of registrationForm.inviteCodes; + track $index; + let index = $index + ) { +
+ + + + + @if (inviteCode().pending()) { +

Checking invite code...

+ } + + @if (inviteCode().touched() && inviteCode().invalid()) { + @for (error of inviteCode().errors(); track $index) { +

{{ error.message }}

+ } + } + + @if (inviteCode().touched() && inviteCode().valid()) { +

Invite code is valid.

+ } +
+ } + + + + + + @if (registrationMutation.isError()) { +

Could not submit the registration.

+ } + + @if ( + registrationMutation.isSuccess() && registrationMutation.data().ok + ) { +

+ Registration accepted for + {{ registrationMutation.variables().username }}. +

+

+ Mutation variables included + {{ registrationMutation.variables().inviteCodes.length }} + invite code(s). +

+ } +
+
+ `, +}) +export class AppComponent { + private readonly queries = inject(ValidationQueriesService) + readonly model = signal({ username: '', inviteCodes: [] as Array }) + readonly registrationMutation = injectMutation(() => + this.queries.submitRegistration(), + ) + + readonly registrationForm = form(this.model, (path) => { + debounce(path.username, 300) + required(path.username, { message: 'Username is required' }) + minLength(path.username, 3, { + message: 'Username must be at least 3 characters', + }) + + validateAsync(path.username, { + params: ({ value }) => value().trim() || undefined, + factory: (username) => { + const query = injectQuery(() => { + const name = username() ?? '' + return { + ...this.queries.usernameAvailability(name), + enabled: !!name, + } + }) + + return toResource(query) + }, + onSuccess: (result) => + result.available + ? null + : { + kind: 'usernameTaken', + message: 'Username is already taken', + }, + onError: () => ({ + kind: 'usernameUnavailable', + message: 'Could not check username availability', + }), + }) + + applyEach(path.inviteCodes, (inviteCode) => { + debounce(inviteCode, 300) + required(inviteCode, { message: 'Invite code is required' }) + minLength(inviteCode, 3, { + message: 'Invite code must be at least 3 characters', + }) + + validateAsync(inviteCode, { + params: ({ value }) => value().trim() || undefined, + factory: (code) => { + const query = injectQuery(() => { + const value = code() ?? '' + return { + ...this.queries.inviteCodeValidation(value), + enabled: !!value, + } + }) + + return toResource(query) + }, + onSuccess: (result) => + result.valid + ? null + : { + kind: 'invalidInviteCode', + message: 'Invite code must start with TEAM-', + }, + onError: () => ({ + kind: 'inviteCodeUnavailable', + message: 'Could not check the invite code', + }), + }) + }) + }) + + addInviteCode() { + this.model.update((model) => ({ + ...model, + inviteCodes: [...model.inviteCodes, ''], + })) + } + + removeInviteCode(index: number) { + this.model.update((model) => ({ + ...model, + inviteCodes: model.inviteCodes.filter( + (_, itemIndex) => itemIndex !== index, + ), + })) + } + + async submit(event: SubmitEvent) { + event.preventDefault() + + const success = await submitForm(this.registrationForm, { + ignoreValidators: 'none', + action: async (field) => { + const result = await this.registrationMutation.mutateAsync( + field().value(), + ) + + if (!result.ok) { + return result.errors.map((error) => ({ + fieldTree: + error.fieldPath[0] === 'username' + ? this.registrationForm.username + : this.registrationForm.inviteCodes[error.fieldPath[1]], + kind: 'server', + message: error.error, + })) + } + + return undefined + }, + }) + if (success) { + this.model.set({ username: '', inviteCodes: [] }) + } + } +} diff --git a/examples/angular/to-resource-signal-forms/src/app/app.config.ts b/examples/angular/to-resource-signal-forms/src/app/app.config.ts new file mode 100644 index 00000000000..0038688124f --- /dev/null +++ b/examples/angular/to-resource-signal-forms/src/app/app.config.ts @@ -0,0 +1,7 @@ +import { QueryClient, provideTanStackQuery } from '@tanstack/angular-query' +import { withDevtools } from '@tanstack/angular-query-devtools' +import type { ApplicationConfig } from '@angular/core' + +export const appConfig: ApplicationConfig = { + providers: [provideTanStackQuery(() => new QueryClient(), withDevtools())], +} diff --git a/examples/angular/to-resource-signal-forms/src/app/validation-queries.service.ts b/examples/angular/to-resource-signal-forms/src/app/validation-queries.service.ts new file mode 100644 index 00000000000..85d5529e666 --- /dev/null +++ b/examples/angular/to-resource-signal-forms/src/app/validation-queries.service.ts @@ -0,0 +1,89 @@ +import { Injectable } from '@angular/core' +import { mutationOptions, queryOptions } from '@tanstack/angular-query' + +export type UsernameValidation = { + available: boolean +} + +export type InviteCodeValidation = { + valid: boolean +} + +export type RegistrationData = { + username: string + inviteCodes: Array +} + +export type RegistrationMutationResult = + | { ok: true } + | { + ok: false + errors: Array<{ + fieldPath: ['username'] | ['inviteCodes', number] + error: string + }> + } + +@Injectable({ providedIn: 'root' }) +export class ValidationQueriesService { + usernameAvailability(username: string) { + return queryOptions({ + queryKey: ['username-availability', username], + gcTime: 15_000, + queryFn: async (): Promise => { + await this.delay() + return { available: username.toLowerCase() !== 'taken' } + }, + }) + } + + inviteCodeValidation(code: string) { + return queryOptions({ + queryKey: ['invite-code-validation', code], + gcTime: 15_000, + staleTime: 30_000, + queryFn: async (): Promise => { + await this.delay() + return { valid: code.toUpperCase().startsWith('TEAM-') } + }, + }) + } + + submitRegistration() { + return mutationOptions({ + gcTime: 20_000, + mutationFn: async ( + variables: RegistrationData, + ): Promise => { + await this.delay() + + const errors: Array<{ + fieldPath: ['username'] | ['inviteCodes', number] + error: string + }> = [] + + if (variables.username.toLowerCase().includes('error')) { + errors.push({ + fieldPath: ['username'], + error: 'This username cannot be registered', + }) + } + + variables.inviteCodes.forEach((inviteCode, index) => { + if (inviteCode.toLowerCase().includes('error')) { + errors.push({ + fieldPath: ['inviteCodes', index], + error: 'This invite code cannot be registered', + }) + } + }) + + return errors.length > 0 ? { ok: false, errors } : { ok: true } + }, + }) + } + + private delay() { + return new Promise((resolve) => setTimeout(resolve, 450)) + } +} diff --git a/examples/angular/to-resource-signal-forms/src/index.html b/examples/angular/to-resource-signal-forms/src/index.html new file mode 100644 index 00000000000..fac15051cbe --- /dev/null +++ b/examples/angular/to-resource-signal-forms/src/index.html @@ -0,0 +1,12 @@ + + + + + toResource with Signal Forms + + + + + + + diff --git a/examples/angular/to-resource-signal-forms/src/main.ts b/examples/angular/to-resource-signal-forms/src/main.ts new file mode 100644 index 00000000000..ef15666eff7 --- /dev/null +++ b/examples/angular/to-resource-signal-forms/src/main.ts @@ -0,0 +1,7 @@ +import { bootstrapApplication } from '@angular/platform-browser' +import { appConfig } from './app/app.config' +import { AppComponent } from './app/app.component' + +bootstrapApplication(AppComponent, appConfig).catch((error) => + console.error(error), +) diff --git a/examples/angular/to-resource-signal-forms/src/styles.css b/examples/angular/to-resource-signal-forms/src/styles.css new file mode 100644 index 00000000000..be398679351 --- /dev/null +++ b/examples/angular/to-resource-signal-forms/src/styles.css @@ -0,0 +1,8 @@ +body { + background: #f7f7f8; + color: #202124; + font: + 16px/1.5 system-ui, + sans-serif; + margin: 0; +} diff --git a/examples/angular/to-resource-signal-forms/tsconfig.app.json b/examples/angular/to-resource-signal-forms/tsconfig.app.json new file mode 100644 index 00000000000..a7da28e8cea --- /dev/null +++ b/examples/angular/to-resource-signal-forms/tsconfig.app.json @@ -0,0 +1,6 @@ +{ + "extends": "./tsconfig.json", + "compilerOptions": { "outDir": "./out-tsc/app", "types": [] }, + "files": ["src/main.ts"], + "include": ["src/**/*.d.ts"] +} diff --git a/examples/angular/to-resource-signal-forms/tsconfig.json b/examples/angular/to-resource-signal-forms/tsconfig.json new file mode 100644 index 00000000000..f42b458e4ac --- /dev/null +++ b/examples/angular/to-resource-signal-forms/tsconfig.json @@ -0,0 +1,24 @@ +{ + "compileOnSave": false, + "compilerOptions": { + "strict": true, + "noImplicitOverride": true, + "noPropertyAccessFromIndexSignature": true, + "noImplicitReturns": true, + "noFallthroughCasesInSwitch": true, + "skipLibCheck": true, + "isolatedModules": true, + "experimentalDecorators": true, + "moduleResolution": "bundler", + "importHelpers": true, + "target": "ES2022", + "module": "preserve", + "lib": ["ES2022", "dom"] + }, + "angularCompilerOptions": { + "enableI18nLegacyMessageIdFormat": false, + "strictInjectionParameters": true, + "strictInputAccessModifiers": true, + "strictTemplates": true + } +} diff --git a/integrations/angular/cli-22/package.json b/integrations/angular/cli-22/package.json index f639d792807..22c7f31d840 100644 --- a/integrations/angular/cli-22/package.json +++ b/integrations/angular/cli-22/package.json @@ -14,7 +14,8 @@ "@angular/forms": "^22.2.4", "@angular/platform-browser": "^22.2.4", "@angular/router": "^22.2.4", - "@tanstack/angular-query-experimental": "workspace:*", + "@tanstack/angular-query": "workspace:*", + "@tanstack/angular-query-devtools": "workspace:*", "rxjs": "^7.8.2", "tslib": "^2.8.1" }, diff --git a/integrations/angular/cli-22/src/app/app.config.ts b/integrations/angular/cli-22/src/app/app.config.ts index 94c85253d45..59dfe9ae7d6 100644 --- a/integrations/angular/cli-22/src/app/app.config.ts +++ b/integrations/angular/cli-22/src/app/app.config.ts @@ -2,15 +2,12 @@ import { ApplicationConfig, provideBrowserGlobalErrorListeners, } from '@angular/core' -import { - provideTanStackQuery, - QueryClient, -} from '@tanstack/angular-query-experimental' -import { withDevtools } from '@tanstack/angular-query-experimental/devtools' +import { provideTanStackQuery, QueryClient } from '@tanstack/angular-query' +import { withDevtools } from '@tanstack/angular-query-devtools' export const appConfig: ApplicationConfig = { providers: [ provideBrowserGlobalErrorListeners(), - provideTanStackQuery(new QueryClient(), withDevtools()), + provideTanStackQuery(() => new QueryClient(), withDevtools()), ], } diff --git a/integrations/angular/cli-22/src/app/app.ts b/integrations/angular/cli-22/src/app/app.ts index a0f0a34ba44..b918333c774 100644 --- a/integrations/angular/cli-22/src/app/app.ts +++ b/integrations/angular/cli-22/src/app/app.ts @@ -1,5 +1,5 @@ import { Component } from '@angular/core' -import { injectQuery } from '@tanstack/angular-query-experimental' +import { injectQuery } from '@tanstack/angular-query' @Component({ selector: 'app-root', diff --git a/integrations/angular/types-20/package.json b/integrations/angular/types-20/package.json new file mode 100644 index 00000000000..f44f88dc835 --- /dev/null +++ b/integrations/angular/types-20/package.json @@ -0,0 +1,35 @@ +{ + "name": "@tanstack/query-integration-angular-types-20", + "private": true, + "type": "module", + "scripts": { + "test:types": "ngc --project tsconfig.json" + }, + "devDependencies": { + "@angular/common": "~20.1.0", + "@angular/compiler": "~20.1.0", + "@angular/compiler-cli": "~20.1.0", + "@angular/core": "~20.1.0", + "@tanstack/angular-query": "workspace:*", + "@tanstack/angular-query-devtools": "workspace:*", + "@tanstack/angular-query-persist-client": "workspace:*", + "typescript": "5.8.3" + }, + "nx": { + "targets": { + "test:types": { + "dependsOn": [ + "^build" + ], + "inputs": [ + "default", + "^production", + "{workspaceRoot}/scripts/angular-types/**/*", + "{workspaceRoot}/packages/angular-query/src/**/*", + "{workspaceRoot}/packages/angular-query-devtools/src/**/*", + "{workspaceRoot}/packages/angular-query-persist-client/src/**/*" + ] + } + } + } +} diff --git a/integrations/angular/types-20/tsconfig.json b/integrations/angular/types-20/tsconfig.json new file mode 100644 index 00000000000..b1df7a6c0dc --- /dev/null +++ b/integrations/angular/types-20/tsconfig.json @@ -0,0 +1,23 @@ +{ + "extends": "../../../scripts/angular-types/tsconfig.json", + "compilerOptions": { + "paths": { + "@angular/common": ["./node_modules/@angular/common"], + "@angular/core": ["./node_modules/@angular/core"], + "@angular/common/*": ["./node_modules/@angular/common/*"], + "@angular/core/*": ["./node_modules/@angular/core/*"], + "@tanstack/angular-query": [ + "../../../packages/angular-query/src/index.ts" + ], + "@tanstack/angular-query-devtools": [ + "../../../packages/angular-query-devtools/src/index.ts" + ], + "@tanstack/angular-query-persist-client": [ + "../../../packages/angular-query-persist-client/src/index.ts" + ], + "@tanstack/angular-query/internal": [ + "../../../packages/angular-query/src/internal.ts" + ] + } + } +} diff --git a/integrations/angular/types-21/package.json b/integrations/angular/types-21/package.json new file mode 100644 index 00000000000..f5f9727dec7 --- /dev/null +++ b/integrations/angular/types-21/package.json @@ -0,0 +1,35 @@ +{ + "name": "@tanstack/query-integration-angular-types-21", + "private": true, + "type": "module", + "scripts": { + "test:types": "ngc --project tsconfig.json" + }, + "devDependencies": { + "@angular/common": "^21.0.0", + "@angular/compiler": "^21.0.0", + "@angular/compiler-cli": "^21.0.0", + "@angular/core": "^21.0.0", + "@tanstack/angular-query": "workspace:*", + "@tanstack/angular-query-devtools": "workspace:*", + "@tanstack/angular-query-persist-client": "workspace:*", + "typescript": "5.9.3" + }, + "nx": { + "targets": { + "test:types": { + "dependsOn": [ + "^build" + ], + "inputs": [ + "default", + "^production", + "{workspaceRoot}/scripts/angular-types/**/*", + "{workspaceRoot}/packages/angular-query/src/**/*", + "{workspaceRoot}/packages/angular-query-devtools/src/**/*", + "{workspaceRoot}/packages/angular-query-persist-client/src/**/*" + ] + } + } + } +} diff --git a/integrations/angular/types-21/tsconfig.json b/integrations/angular/types-21/tsconfig.json new file mode 100644 index 00000000000..b1df7a6c0dc --- /dev/null +++ b/integrations/angular/types-21/tsconfig.json @@ -0,0 +1,23 @@ +{ + "extends": "../../../scripts/angular-types/tsconfig.json", + "compilerOptions": { + "paths": { + "@angular/common": ["./node_modules/@angular/common"], + "@angular/core": ["./node_modules/@angular/core"], + "@angular/common/*": ["./node_modules/@angular/common/*"], + "@angular/core/*": ["./node_modules/@angular/core/*"], + "@tanstack/angular-query": [ + "../../../packages/angular-query/src/index.ts" + ], + "@tanstack/angular-query-devtools": [ + "../../../packages/angular-query-devtools/src/index.ts" + ], + "@tanstack/angular-query-persist-client": [ + "../../../packages/angular-query-persist-client/src/index.ts" + ], + "@tanstack/angular-query/internal": [ + "../../../packages/angular-query/src/internal.ts" + ] + } + } +} diff --git a/integrations/angular/types-22/package.json b/integrations/angular/types-22/package.json new file mode 100644 index 00000000000..07b3d6b064c --- /dev/null +++ b/integrations/angular/types-22/package.json @@ -0,0 +1,35 @@ +{ + "name": "@tanstack/query-integration-angular-types-22", + "private": true, + "type": "module", + "scripts": { + "test:types": "ngc --project tsconfig.json" + }, + "devDependencies": { + "@angular/common": "^22.0.0", + "@angular/compiler": "^22.0.0", + "@angular/compiler-cli": "^22.0.0", + "@angular/core": "^22.0.0", + "@tanstack/angular-query": "workspace:*", + "@tanstack/angular-query-devtools": "workspace:*", + "@tanstack/angular-query-persist-client": "workspace:*", + "typescript": "catalog:" + }, + "nx": { + "targets": { + "test:types": { + "dependsOn": [ + "^build" + ], + "inputs": [ + "default", + "^production", + "{workspaceRoot}/scripts/angular-types/**/*", + "{workspaceRoot}/packages/angular-query/src/**/*", + "{workspaceRoot}/packages/angular-query-devtools/src/**/*", + "{workspaceRoot}/packages/angular-query-persist-client/src/**/*" + ] + } + } + } +} diff --git a/integrations/angular/types-22/tsconfig.json b/integrations/angular/types-22/tsconfig.json new file mode 100644 index 00000000000..b1df7a6c0dc --- /dev/null +++ b/integrations/angular/types-22/tsconfig.json @@ -0,0 +1,23 @@ +{ + "extends": "../../../scripts/angular-types/tsconfig.json", + "compilerOptions": { + "paths": { + "@angular/common": ["./node_modules/@angular/common"], + "@angular/core": ["./node_modules/@angular/core"], + "@angular/common/*": ["./node_modules/@angular/common/*"], + "@angular/core/*": ["./node_modules/@angular/core/*"], + "@tanstack/angular-query": [ + "../../../packages/angular-query/src/index.ts" + ], + "@tanstack/angular-query-devtools": [ + "../../../packages/angular-query-devtools/src/index.ts" + ], + "@tanstack/angular-query-persist-client": [ + "../../../packages/angular-query-persist-client/src/index.ts" + ], + "@tanstack/angular-query/internal": [ + "../../../packages/angular-query/src/internal.ts" + ] + } + } +} diff --git a/knip.ts b/knip.ts index 7dfd5f76ad6..d3da385dfda 100644 --- a/knip.ts +++ b/knip.ts @@ -1,4 +1,3 @@ -import angularQuery from './packages/angular-query-experimental/package.json' import reactQuery from './packages/react-query/package.json' import reactQueryDevtools from './packages/react-query-devtools/package.json' import reactQueryNextExperimental from './packages/react-query-next-experimental/package.json' @@ -16,24 +15,24 @@ const optionalPeerDependencies = (pkg: { .map((dependency) => `${dependency}!`) export default { - ignore: ['scripts/*.{j,t}s', '**/ts-fixture/file.ts'], + ignore: [ + 'scripts/*.{j,t}s', + // Compiled by the Angular version matrix with ngc. + 'scripts/angular-types/consumer.ts', + '**/ts-fixture/file.ts', + ], treatConfigHintsAsErrors: true, treatTagHintsAsErrors: true, ignoreDependencies: [ '@oxc-project/runtime', - // Used by the ESLint configs of the React examples + // Used by the ESLint configs of the examples. '@tanstack/eslint-config', ], ignoreWorkspaces: ['examples/**', 'integrations/**'], rules: { duplicates: 'warn' }, workspaces: { - 'packages/angular-query-experimental': { - ignore: ['scripts/prepack.js'], - // Strict mode excludes optional dependencies. Read the declared names - // so removing a declaration still causes an unlisted dependency error. - ignoreDependencies: Object.keys(angularQuery.optionalDependencies).map( - (dependency) => `${dependency}!`, - ), + 'packages/angular-query': { + entry: ['schematics/*/index.ts', 'src/__tests__/*.test-d.ts'], }, 'packages/query-codemods': { entry: ['src/v4/**/*.cjs', 'src/v5/**/*.cjs'], diff --git a/packages/angular-query-devtools/CHANGELOG.md b/packages/angular-query-devtools/CHANGELOG.md new file mode 100644 index 00000000000..2fcb406f0fe --- /dev/null +++ b/packages/angular-query-devtools/CHANGELOG.md @@ -0,0 +1,54 @@ +# @tanstack/angular-query-devtools + +## 5.0.0-rc.5 + +### Patch Changes + +- [#12054](https://github.com/TanStack/query/pull/12054) [`9464a5e`](https://github.com/TanStack/query/commit/9464a5e71f68c95cc12a07068ae30a2f1b13b0ea) - Update the Angular packages to the latest Query core and incorporate upstream adapter fixes, type coverage, and tooling updates. + +- [#12054](https://github.com/TanStack/query/pull/12054) [`9464a5e`](https://github.com/TanStack/query/commit/9464a5e71f68c95cc12a07068ae30a2f1b13b0ea) - Build the Angular packages with Vite 8 while preserving their module entry points and external dependencies. +- Updated dependencies [[`9464a5e`](https://github.com/TanStack/query/commit/9464a5e71f68c95cc12a07068ae30a2f1b13b0ea)]: + - @tanstack/angular-query@5.0.0-rc.5 + +## 5.0.0-rc.4 + +### Patch Changes + +- Updated dependencies [[`46da583`](https://github.com/TanStack/query/commit/46da583fa3760715d9fb13677bbe022f901e0730), [`1a2f6b3`](https://github.com/TanStack/query/commit/1a2f6b38d534245b957c7ea87ac830cc1e06d7f1)]: + - @tanstack/angular-query@5.0.0-rc.4 + +## 5.0.0-rc.3 + +### Patch Changes + +- Updated dependencies [[`d83eef6`](https://github.com/TanStack/query/commit/d83eef68ae3484ec8254a9c28582ed41af30035b)]: + - @tanstack/angular-query@5.0.0-rc.3 + +## 5.0.0-rc.2 + +### Patch Changes + +- [#11999](https://github.com/TanStack/query/pull/11999) [`9e9dfb7`](https://github.com/TanStack/query/commit/9e9dfb7e752334c90378546635e87b03852e39bc) - Clear removed panel close callbacks and release devtools ownership when the injector is destroyed. + +- Updated dependencies []: + - @tanstack/angular-query@5.0.0-rc.2 + +## 5.0.0-rc.1 + +### Patch Changes + +- [#11786](https://github.com/TanStack/query/pull/11786) [`afdf617`](https://github.com/TanStack/query/commit/afdf6173ea7d5e3e89827e3b6209036447303eb1) - Support the theme option in injectDevtoolsPanel + +- Updated dependencies []: + - @tanstack/angular-query@5.0.0-rc.1 + +## 5.0.0-rc.0 + +### Major Changes + +- [#11516](https://github.com/TanStack/query/pull/11516) [`7da5a24`](https://github.com/TanStack/query/commit/7da5a24becd506c0d121c4c1d264251e62e53d96) - 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. + +### Patch Changes + +- Updated dependencies [[`7da5a24`](https://github.com/TanStack/query/commit/7da5a24becd506c0d121c4c1d264251e62e53d96)]: + - @tanstack/angular-query@5.0.0-rc.0 diff --git a/packages/angular-query-devtools/README.md b/packages/angular-query-devtools/README.md new file mode 100644 index 00000000000..1981576c796 --- /dev/null +++ b/packages/angular-query-devtools/README.md @@ -0,0 +1,23 @@ +# @tanstack/angular-query-devtools + +Developer tools for `@tanstack/angular-query`. + +```sh +pnpm add -D @tanstack/angular-query-devtools +``` + +```ts +import { QueryClient, provideTanStackQuery } from '@tanstack/angular-query' +import { withDevtools } from '@tanstack/angular-query-devtools' + +export const appConfig: ApplicationConfig = { + providers: [provideTanStackQuery(() => new QueryClient(), withDevtools())], +} +``` + +The default import resolves to a stub in production builds. To opt in to the +real implementation in production, import `withDevtools` from +`@tanstack/angular-query-devtools/production`. + +The options callback runs inside an Angular injection context, so it can call +`inject()` and read signals directly. diff --git a/packages/angular-query-devtools/oxlint.config.ts b/packages/angular-query-devtools/oxlint.config.ts new file mode 100644 index 00000000000..396987b4462 --- /dev/null +++ b/packages/angular-query-devtools/oxlint.config.ts @@ -0,0 +1,7 @@ +import { defineConfig } from 'oxlint' +import rootConfig from './root.oxlint.config.ts' + +export default defineConfig({ + extends: [rootConfig], + settings: rootConfig.settings, +}) diff --git a/packages/angular-query-devtools/package.json b/packages/angular-query-devtools/package.json new file mode 100644 index 00000000000..3de004841ca --- /dev/null +++ b/packages/angular-query-devtools/package.json @@ -0,0 +1,121 @@ +{ + "name": "@tanstack/angular-query-devtools", + "version": "5.0.0-rc.5", + "description": "Developer tools to interact with and visualize the TanStack Angular Query cache", + "author": "Arnoud de Vries", + "license": "MIT", + "repository": { + "type": "git", + "url": "git+https://github.com/TanStack/query.git", + "directory": "packages/angular-query-devtools" + }, + "homepage": "https://tanstack.com/query", + "funding": { + "type": "github", + "url": "https://github.com/sponsors/tannerlinsley" + }, + "keywords": [ + "angular", + "angular query", + "devtools", + "tanstack" + ], + "scripts": { + "clean": "premove ./dist ./coverage ./dist-ts ./.cache/test-types", + "compile": "tsc --project tsconfig.json", + "test:types": "npm-run-all --serial test:types:*", + "test:types:tscurrent": "tsc --project tsconfig.json --outDir .cache/test-types/tscurrent --tsBuildInfoFile .cache/test-types/tscurrent.tsbuildinfo", + "test:lib": "vitest", + "test:lib:dev": "pnpm run test:lib --watch", + "test:build": "pnpm run prepack && publint --strict && attw ./dist --pack --ignore-rules cjs-resolves-to-esm", + "build": "vite build", + "prepack": "node scripts/prepack.js", + "test:oxlint": "oxlint ./src" + }, + "nx": { + "targets": { + "test:lib": { + "dependsOn": [ + "^compile", + { + "target": "build", + "projects": [ + "@tanstack/angular-query" + ] + } + ] + } + } + }, + "type": "module", + "types": "dist/index.d.ts", + "module": "dist/index.mjs", + "exports": { + ".": { + "@tanstack/custom-condition": "./src/index.ts", + "types": "./dist/index.d.ts", + "development": "./dist/index.mjs", + "default": "./dist/stub.mjs" + }, + "./package.json": "./package.json", + "./stub": { + "types": "./dist/stub.d.ts", + "default": "./dist/stub.mjs" + }, + "./production": { + "types": "./dist/production/index.d.ts", + "default": "./dist/index.mjs" + }, + "./devtools-panel": { + "@tanstack/custom-condition": "./src/devtools-panel/index.ts", + "types": "./dist/devtools-panel/index.d.ts", + "development": "./dist/devtools-panel/index.mjs", + "default": "./dist/devtools-panel/stub.mjs" + }, + "./devtools-panel/production": { + "types": "./dist/devtools-panel/production/index.d.ts", + "default": "./dist/devtools-panel/index.mjs" + }, + "./devtools-panel/stub": { + "types": "./dist/devtools-panel/stub.d.ts", + "default": "./dist/devtools-panel/stub.mjs" + } + }, + "sideEffects": false, + "files": [ + "**/*.d.ts", + "**/*.mjs", + "**/*.mjs.map" + ], + "dependencies": { + "@tanstack/query-devtools": "workspace:*" + }, + "devDependencies": { + "@analogjs/vite-plugin-angular": "catalog:", + "@angular/build": "catalog:", + "@angular/common": "catalog:", + "@angular/compiler": "catalog:", + "@angular/compiler-cli": "catalog:", + "@angular/core": "catalog:", + "@angular/platform-browser": "catalog:", + "@tanstack/angular-query": "workspace:*", + "@testing-library/jest-dom": "^6.8.0", + "npm-run-all2": "^9.0.3", + "rxjs": "^7.8.2", + "typescript": "catalog:", + "vite-plugin-dts": "4.2.3", + "vite-tsconfig-paths": "^5.1.4", + "vitest": "^5.0.5", + "zone.js": "^0.16.0", + "vite": "^8.3.5" + }, + "peerDependencies": { + "@angular/common": ">=20.1.0", + "@angular/core": ">=20.1.0", + "@tanstack/angular-query": "workspace:^" + }, + "publishConfig": { + "directory": "dist", + "linkDirectory": false + } +} diff --git a/packages/angular-query-experimental/root.oxlint.config.ts b/packages/angular-query-devtools/root.oxlint.config.ts similarity index 100% rename from packages/angular-query-experimental/root.oxlint.config.ts rename to packages/angular-query-devtools/root.oxlint.config.ts diff --git a/packages/angular-query-experimental/scripts/prepack.js b/packages/angular-query-devtools/scripts/prepack.js similarity index 89% rename from packages/angular-query-experimental/scripts/prepack.js rename to packages/angular-query-devtools/scripts/prepack.js index bf4bef0cc75..b01eaa65a0d 100644 --- a/packages/angular-query-experimental/scripts/prepack.js +++ b/packages/angular-query-devtools/scripts/prepack.js @@ -50,14 +50,16 @@ function replaceDist(filePath) { */ function processExports(exports) { return Object.fromEntries( - Object.entries(exports).map(([key, value]) => [ - key, - typeof value === 'string' - ? replaceDist(value) - : typeof value === 'object' && value !== null - ? processExports(value) - : value, - ]), + Object.entries(exports) + .filter(([key]) => key !== '@tanstack/custom-condition') + .map(([key, value]) => [ + key, + typeof value === 'string' + ? replaceDist(value) + : typeof value === 'object' && value !== null + ? processExports(value) + : value, + ]), ) } diff --git a/packages/angular-query-experimental/src/__tests__/inject-devtools-panel.test.ts b/packages/angular-query-devtools/src/__tests__/inject-devtools-panel.test.ts similarity index 56% rename from packages/angular-query-experimental/src/__tests__/inject-devtools-panel.test.ts rename to packages/angular-query-devtools/src/__tests__/inject-devtools-panel.test.ts index e2ea53c70dd..04a28f69547 100644 --- a/packages/angular-query-experimental/src/__tests__/inject-devtools-panel.test.ts +++ b/packages/angular-query-devtools/src/__tests__/inject-devtools-panel.test.ts @@ -1,13 +1,9 @@ -import { - ElementRef, - provideZonelessChangeDetection, - signal, -} from '@angular/core' +import { ApplicationRef, ElementRef, signal } from '@angular/core' import { TestBed } from '@angular/core/testing' import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest' -import { QueryClient } from '@tanstack/query-core' -import { provideTanStackQuery } from '../providers' +import { QueryClient } from '@tanstack/angular-query' import { injectDevtoolsPanel } from '../devtools-panel' +import { setupTanStackQueryTestBed } from './test-utils' import type { TanstackQueryDevtoolsPanel, Theme, @@ -34,7 +30,7 @@ const mocks = vi.hoisted(() => { } }) -// oxlint-disable-next-line vitest/prefer-import-in-mock -- the mocked devtools classes have '#private' fields, and this environment cannot load the real Solid module +// oxlint-disable-next-line vitest/prefer-import-in-mock -- The mock cannot implement the devtools class's private fields. vi.mock('@tanstack/query-devtools', () => ({ TanstackQueryDevtoolsPanel: mocks.mockTanstackQueryDevtoolsPanel, })) @@ -53,12 +49,8 @@ describe('injectDevtoolsPanel', () => { vi.clearAllMocks() queryClient = new QueryClient() mockElementRef = new ElementRef(document.createElement('div')) - TestBed.configureTestingModule({ - providers: [ - provideZonelessChangeDetection(), - provideTanStackQuery(queryClient), - { provide: ElementRef, useValue: signal(mockElementRef) }, - ], + setupTanStackQueryTestBed(queryClient, { + providers: [{ provide: ElementRef, useValue: signal(mockElementRef) }], }) }) @@ -82,12 +74,49 @@ describe('injectDevtoolsPanel', () => { TestBed.runInInjectionContext(() => { injectDevtoolsPanel(() => ({ hostElement: TestBed.inject(ElementRef), + hideDisabledQueries: true, })) }) - TestBed.tick() + await TestBed.inject(ApplicationRef).whenStable() + await waitForDevtoolsToBeCreated() + expect(mockDevtoolsPanelInstance.mount).toHaveBeenCalledTimes(1) + expect(mocks.mockTanstackQueryDevtoolsPanel).toHaveBeenCalledWith( + expect.objectContaining({ theme: undefined, hideDisabledQueries: true }), + ) + }) + + it('should update the theme and restore the saved preference when it is removed', async () => { + const theme = signal('dark') + + TestBed.runInInjectionContext(() => { + injectDevtoolsPanel(() => ({ + hostElement: mockElementRef, + theme: theme(), + })) + }) + + await TestBed.inject(ApplicationRef).whenStable() + await waitForDevtoolsToBeCreated() + + expect(mocks.mockTanstackQueryDevtoolsPanel).toHaveBeenCalledWith( + expect.objectContaining({ theme: 'dark' }), + ) + expect(mockDevtoolsPanelInstance.setTheme).not.toHaveBeenCalled() + + theme.set('light') + await TestBed.inject(ApplicationRef).whenStable() + expect(mockDevtoolsPanelInstance.setTheme).toHaveBeenLastCalledWith('light') + + theme.set(undefined) + await TestBed.inject(ApplicationRef).whenStable() + expect(mockDevtoolsPanelInstance.setTheme).toHaveBeenLastCalledWith( + undefined, + ) + expect(mockDevtoolsPanelInstance.setTheme).toHaveBeenCalledTimes(2) + expect(mocks.mockTanstackQueryDevtoolsPanel).toHaveBeenCalledTimes(1) }) it('should destroy TanstackQueryDevtoolsPanel', async () => { @@ -97,7 +126,8 @@ describe('injectDevtoolsPanel', () => { })) }) - TestBed.tick() + await TestBed.inject(ApplicationRef).whenStable() + await waitForDevtoolsToBeCreated() result.destroy() @@ -105,8 +135,44 @@ describe('injectDevtoolsPanel', () => { expect(mockDevtoolsPanelInstance.unmount).toHaveBeenCalledTimes(1) }) + it('should stop reacting after it is manually destroyed', async () => { + const hostElement = signal(mockElementRef) + const result = TestBed.runInInjectionContext(() => + injectDevtoolsPanel(() => ({ + hostElement: hostElement(), + })), + ) + + await TestBed.inject(ApplicationRef).whenStable() + await waitForDevtoolsToBeCreated() + + result.destroy() + hostElement.set(undefined) + hostElement.set(mockElementRef) + await TestBed.inject(ApplicationRef).whenStable() + + expect(mocks.mockTanstackQueryDevtoolsPanel).toHaveBeenCalledTimes(1) + expect(mockDevtoolsPanelInstance.mount).toHaveBeenCalledTimes(1) + expect(mockDevtoolsPanelInstance.unmount).toHaveBeenCalledTimes(1) + }) + + it('should not mount when destroyed while the devtools import is pending', async () => { + const result = TestBed.runInInjectionContext(() => + injectDevtoolsPanel(() => ({ + hostElement: mockElementRef, + })), + ) + + TestBed.tick() + result.destroy() + await TestBed.inject(ApplicationRef).whenStable() + + expect(mocks.mockTanstackQueryDevtoolsPanel).not.toHaveBeenCalled() + expect(mockDevtoolsPanelInstance.mount).not.toHaveBeenCalled() + }) + it('should destroy TanstackQueryDevtoolsPanel when hostElement is removed', async () => { - const hostElement = signal(mockElementRef) + const hostElement = signal(mockElementRef) TestBed.runInInjectionContext(() => { return injectDevtoolsPanel(() => ({ @@ -114,12 +180,16 @@ describe('injectDevtoolsPanel', () => { })) }) - TestBed.tick() + await TestBed.inject(ApplicationRef).whenStable() + await waitForDevtoolsToBeCreated() + expect(mockDevtoolsPanelInstance.unmount).toHaveBeenCalledTimes(0) - hostElement.set(null as unknown as ElementRef) - TestBed.tick() + hostElement.set(null) + + await TestBed.inject(ApplicationRef).whenStable() + expect(mockDevtoolsPanelInstance.unmount).toHaveBeenCalledTimes(1) }) @@ -133,12 +203,16 @@ describe('injectDevtoolsPanel', () => { })) }) - TestBed.tick() + await TestBed.inject(ApplicationRef).whenStable() + await waitForDevtoolsToBeCreated() + expect(mockDevtoolsPanelInstance.setClient).toHaveBeenCalledTimes(0) client.set(new QueryClient()) - TestBed.tick() + + await TestBed.inject(ApplicationRef).whenStable() + expect(mockDevtoolsPanelInstance.setClient).toHaveBeenCalledTimes(1) }) @@ -152,20 +226,24 @@ describe('injectDevtoolsPanel', () => { })) }) - TestBed.tick() + await TestBed.inject(ApplicationRef).whenStable() + await waitForDevtoolsToBeCreated() + expect(mockDevtoolsPanelInstance.setErrorTypes).toHaveBeenCalledTimes(0) errorTypes.set([]) - TestBed.tick() + + await TestBed.inject(ApplicationRef).whenStable() + expect(mockDevtoolsPanelInstance.setErrorTypes).toHaveBeenCalledTimes(1) }) - it('should update onclose', async () => { - const functionA = () => {} - const functionB = () => {} + it('should update onClose and clear it when removed', async () => { + const functionA = vi.fn<() => void>() + const functionB = vi.fn<() => void>() - const onClose = signal(functionA) + const onClose = signal(functionA) TestBed.runInInjectionContext(() => { return injectDevtoolsPanel(() => ({ @@ -174,55 +252,29 @@ describe('injectDevtoolsPanel', () => { })) }) - TestBed.tick() + await TestBed.inject(ApplicationRef).whenStable() + await waitForDevtoolsToBeCreated() + expect(mockDevtoolsPanelInstance.setOnClose).toHaveBeenCalledTimes(0) onClose.set(functionB) - TestBed.tick() - expect(mockDevtoolsPanelInstance.setOnClose).toHaveBeenCalledTimes(1) - }) - it('should pass hideDisabledQueries and theme to TanstackQueryDevtoolsPanel', async () => { - TestBed.runInInjectionContext(() => { - injectDevtoolsPanel(() => ({ - hostElement: TestBed.inject(ElementRef), - hideDisabledQueries: true, - theme: 'dark', - })) - }) + await TestBed.inject(ApplicationRef).whenStable() - TestBed.tick() - await waitForDevtoolsToBeCreated() - expect(mocks.mockTanstackQueryDevtoolsPanel).toHaveBeenCalledWith( - expect.objectContaining({ hideDisabledQueries: true, theme: 'dark' }), + expect(mockDevtoolsPanelInstance.setOnClose).toHaveBeenCalledTimes(1) + expect(mockDevtoolsPanelInstance.setOnClose).toHaveBeenLastCalledWith( + functionB, ) - }) - it('should update theme', async () => { - const theme = signal('light') + onClose.set(undefined) + await TestBed.inject(ApplicationRef).whenStable() - TestBed.runInInjectionContext(() => { - return injectDevtoolsPanel(() => ({ - hostElement: TestBed.inject(ElementRef), - theme: theme(), - })) - }) - - TestBed.tick() - await waitForDevtoolsToBeCreated() - expect(mockDevtoolsPanelInstance.setTheme).toHaveBeenCalledTimes(0) - - theme.set('dark') - TestBed.tick() - expect(mockDevtoolsPanelInstance.setTheme).toHaveBeenCalledTimes(1) - expect(mockDevtoolsPanelInstance.setTheme).toHaveBeenCalledWith('dark') - - theme.set(undefined) - TestBed.tick() - expect(mockDevtoolsPanelInstance.setTheme).toHaveBeenCalledTimes(2) - expect(mockDevtoolsPanelInstance.setTheme).toHaveBeenLastCalledWith( - undefined, - ) + expect(mockDevtoolsPanelInstance.setOnClose).toHaveBeenCalledTimes(2) + const resetOnClose = mockDevtoolsPanelInstance.setOnClose.mock.lastCall?.[0] + expect(resetOnClose).toBeTypeOf('function') + resetOnClose?.() + expect(functionA).not.toHaveBeenCalled() + expect(functionB).not.toHaveBeenCalled() }) }) diff --git a/packages/angular-query-devtools/src/__tests__/test-utils.ts b/packages/angular-query-devtools/src/__tests__/test-utils.ts new file mode 100644 index 00000000000..91b3ebdecbe --- /dev/null +++ b/packages/angular-query-devtools/src/__tests__/test-utils.ts @@ -0,0 +1,19 @@ +import { provideZonelessChangeDetection } from '@angular/core' +import { TestBed } from '@angular/core/testing' +import { provideTanStackQuery } from '@tanstack/angular-query' +import type { QueryClient } from '@tanstack/angular-query' +import type { EnvironmentProviders, Provider } from '@angular/core' + +export function setupTanStackQueryTestBed( + queryClient: QueryClient, + options: { providers?: Array } = {}, +) { + TestBed.resetTestingModule() + TestBed.configureTestingModule({ + providers: [ + provideZonelessChangeDetection(), + provideTanStackQuery(() => queryClient), + ...(options.providers ?? []), + ], + }) +} diff --git a/packages/angular-query-experimental/src/__tests__/with-devtools.test.ts b/packages/angular-query-devtools/src/__tests__/with-devtools.test.ts similarity index 59% rename from packages/angular-query-experimental/src/__tests__/with-devtools.test.ts rename to packages/angular-query-devtools/src/__tests__/with-devtools.test.ts index c97bb04c69e..6f189e76890 100644 --- a/packages/angular-query-experimental/src/__tests__/with-devtools.test.ts +++ b/packages/angular-query-devtools/src/__tests__/with-devtools.test.ts @@ -1,18 +1,20 @@ import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest' -import { QueryClient } from '@tanstack/query-core' import { TestBed } from '@angular/core/testing' import { + ApplicationRef, ENVIRONMENT_INITIALIZER, EnvironmentInjector, InjectionToken, PLATFORM_ID, createEnvironmentInjector, + inject, isDevMode, provideZonelessChangeDetection, signal, } from '@angular/core' -import { provideTanStackQuery } from '../providers' -import { withDevtools } from '../devtools' +import { QueryClient, provideTanStackQuery } from '@tanstack/angular-query' +import { getQueryFeatureProviders } from '@tanstack/angular-query/internal' +import { withDevtools } from '../index' import type { DevtoolsButtonPosition, DevtoolsErrorType, @@ -20,28 +22,32 @@ import type { TanstackQueryDevtools, Theme, } from '@tanstack/query-devtools' -import type { DevtoolsOptions } from '../devtools' - -const mockDevtoolsInstance = { - mount: vi.fn(), - unmount: vi.fn(), - setClient: vi.fn(), - setPosition: vi.fn(), - setErrorTypes: vi.fn(), - setButtonPosition: vi.fn(), - setInitialIsOpen: vi.fn(), - setTheme: vi.fn(), -} - -function MockTanstackQueryDevtools() { - return mockDevtoolsInstance -} - -const mockTanstackQueryDevtools = vi.fn( - MockTanstackQueryDevtools, -) - -// oxlint-disable-next-line vitest/prefer-import-in-mock -- the mocked devtools classes have '#private' fields, and this environment cannot load the real Solid module +import type { WritableSignal } from '@angular/core' +import type { DevtoolsOptions } from '../types' + +const { mockDevtoolsInstance, mockTanstackQueryDevtools } = vi.hoisted(() => { + const instance = { + mount: vi.fn(), + unmount: vi.fn(), + setClient: vi.fn(), + setPosition: vi.fn(), + setErrorTypes: vi.fn(), + setButtonPosition: vi.fn(), + setInitialIsOpen: vi.fn(), + setTheme: vi.fn(), + } + + return { + mockDevtoolsInstance: instance, + mockTanstackQueryDevtools: vi.fn<() => typeof instance>( + function MockTanstackQueryDevtools() { + return instance + }, + ), + } +}) + +// oxlint-disable-next-line vitest/prefer-import-in-mock -- The mock cannot implement the devtools class's private fields. vi.mock('@tanstack/query-devtools', () => ({ TanstackQueryDevtools: mockTanstackQueryDevtools, })) @@ -59,13 +65,11 @@ const mockIsDevMode = vi.mocked(isDevMode) describe('withDevtools feature', () => { beforeEach(() => { vi.clearAllMocks() - vi.useFakeTimers() }) afterEach(() => { vi.restoreAllMocks() TestBed.resetTestingModule() - vi.useRealTimers() }) it.each([ @@ -127,7 +131,7 @@ describe('withDevtools feature', () => { const providers = [ provideZonelessChangeDetection(), provideTanStackQuery( - new QueryClient(), + () => new QueryClient(), loadDevtools !== undefined ? withDevtools( () => @@ -144,50 +148,22 @@ describe('withDevtools feature', () => { }) TestBed.inject(ENVIRONMENT_INITIALIZER) - await vi.advanceTimersByTimeAsync(0) - TestBed.tick() - await vi.dynamicImportSettled() - TestBed.tick() - await vi.dynamicImportSettled() - expect(mockTanstackQueryDevtools).toHaveBeenCalledTimes( - expectedCalled ? 1 : 0, - ) + expect(mockTanstackQueryDevtools).toHaveBeenCalledTimes(1) + + await TestBed.inject(ApplicationRef).whenStable() + expect(mockDevtoolsInstance.mount).toHaveBeenCalledTimes( expectedCalled ? 1 : 0, ) }, ) - it("should throw 'No QueryClient found' when 'loadDevtools' is 'true' and no 'QueryClient' is provided", async () => { - const consoleErrorMock = vi - .spyOn(console, 'error') - .mockReturnValue(undefined) - - TestBed.configureTestingModule({ - providers: [ - provideZonelessChangeDetection(), - withDevtools(() => ({ - loadDevtools: true, - })).ɵproviders, - ], - }) - - TestBed.inject(ENVIRONMENT_INITIALIZER) - TestBed.tick() - await vi.dynamicImportSettled() - expect(mockTanstackQueryDevtools).not.toHaveBeenCalled() - expect(consoleErrorMock).toHaveBeenCalledWith( - 'Install @tanstack/query-devtools or reinstall without --omit=optional.', - expect.objectContaining({ message: 'No QueryClient found' }), - ) - }) - it('should not continue loading devtools after injector is destroyed', async () => { TestBed.configureTestingModule({ providers: [ provideZonelessChangeDetection(), provideTanStackQuery( - new QueryClient(), + () => new QueryClient(), withDevtools(() => ({ loadDevtools: true, })), @@ -195,12 +171,15 @@ describe('withDevtools feature', () => { ], }) + const app = TestBed.inject(ApplicationRef) TestBed.inject(ENVIRONMENT_INITIALIZER) + const stable = app.whenStable() // Destroys injector TestBed.resetTestingModule() - await vi.advanceTimersByTimeAsync(0) - await vi.dynamicImportSettled() - expect(mockTanstackQueryDevtools).not.toHaveBeenCalled() + await stable + + expect(mockTanstackQueryDevtools).toHaveBeenCalledTimes(1) + expect(mockDevtoolsInstance.mount).not.toHaveBeenCalled() }) it('should not create devtools again when already provided', async () => { @@ -208,7 +187,7 @@ describe('withDevtools feature', () => { providers: [ provideZonelessChangeDetection(), provideTanStackQuery( - new QueryClient(), + () => new QueryClient(), withDevtools(() => ({ loadDevtools: true, })), @@ -217,23 +196,26 @@ describe('withDevtools feature', () => { }) TestBed.inject(ENVIRONMENT_INITIALIZER) - await vi.advanceTimersByTimeAsync(0) - await vi.dynamicImportSettled() + await TestBed.inject(ApplicationRef).whenStable() + expect(mockTanstackQueryDevtools).toHaveBeenCalledTimes(1) const injector = TestBed.inject(EnvironmentInjector) createEnvironmentInjector( [ - withDevtools(() => ({ - loadDevtools: true, - })).ɵproviders, + getQueryFeatureProviders( + withDevtools(() => ({ + loadDevtools: true, + })), + ), ], injector, ) TestBed.inject(ENVIRONMENT_INITIALIZER) - await vi.advanceTimersByTimeAsync(0) + await TestBed.inject(ApplicationRef).whenStable() + expect(mockTanstackQueryDevtools).toHaveBeenCalledTimes(1) }) @@ -246,7 +228,7 @@ describe('withDevtools feature', () => { }, provideZonelessChangeDetection(), provideTanStackQuery( - new QueryClient(), + () => new QueryClient(), withDevtools(() => ({ loadDevtools: true, })), @@ -255,7 +237,8 @@ describe('withDevtools feature', () => { }) TestBed.inject(ENVIRONMENT_INITIALIZER) - await vi.runAllTimersAsync() + await TestBed.inject(ApplicationRef).whenStable() + expect(mockTanstackQueryDevtools).not.toHaveBeenCalled() }) @@ -266,20 +249,22 @@ describe('withDevtools feature', () => { providers: [ provideZonelessChangeDetection(), provideTanStackQuery( - new QueryClient(), + () => new QueryClient(), withDevtools(() => ({ loadDevtools: true, - errorTypes: errorTypes(), + errorTypes, })), ), ], }) TestBed.inject(ENVIRONMENT_INITIALIZER) - await vi.advanceTimersByTimeAsync(0) - await vi.dynamicImportSettled() - TestBed.tick() - expect(mockDevtoolsInstance.setErrorTypes).toHaveBeenCalledTimes(0) + await TestBed.inject(ApplicationRef).whenStable() + + expect(mockDevtoolsInstance.setErrorTypes).toHaveBeenCalledTimes(1) + expect(mockDevtoolsInstance.setErrorTypes).toHaveBeenLastCalledWith( + errorTypes(), + ) const newErrorTypes = [ { @@ -289,9 +274,10 @@ describe('withDevtools feature', () => { ] errorTypes.set(newErrorTypes) - TestBed.tick() - expect(mockDevtoolsInstance.setErrorTypes).toHaveBeenCalledTimes(1) - expect(mockDevtoolsInstance.setErrorTypes).toHaveBeenCalledWith( + await TestBed.inject(ApplicationRef).whenStable() + + expect(mockDevtoolsInstance.setErrorTypes).toHaveBeenCalledTimes(2) + expect(mockDevtoolsInstance.setErrorTypes).toHaveBeenLastCalledWith( newErrorTypes, ) }) @@ -303,26 +289,27 @@ describe('withDevtools feature', () => { providers: [ provideZonelessChangeDetection(), provideTanStackQuery( - new QueryClient(), + () => new QueryClient(), withDevtools(() => ({ loadDevtools: true, - client: client(), + client, })), ), ], }) TestBed.inject(ENVIRONMENT_INITIALIZER) - await vi.advanceTimersByTimeAsync(0) - await vi.dynamicImportSettled() - TestBed.tick() - expect(mockDevtoolsInstance.setClient).toHaveBeenCalledTimes(0) + await TestBed.inject(ApplicationRef).whenStable() + + expect(mockDevtoolsInstance.setClient).toHaveBeenCalledTimes(1) + expect(mockDevtoolsInstance.setClient).toHaveBeenLastCalledWith(client()) const newClient = new QueryClient() client.set(newClient) - TestBed.tick() - expect(mockDevtoolsInstance.setClient).toHaveBeenCalledTimes(1) - expect(mockDevtoolsInstance.setClient).toHaveBeenCalledWith(newClient) + await TestBed.inject(ApplicationRef).whenStable() + + expect(mockDevtoolsInstance.setClient).toHaveBeenCalledTimes(2) + expect(mockDevtoolsInstance.setClient).toHaveBeenLastCalledWith(newClient) }) it('should update position', async () => { @@ -332,25 +319,26 @@ describe('withDevtools feature', () => { providers: [ provideZonelessChangeDetection(), provideTanStackQuery( - new QueryClient(), + () => new QueryClient(), withDevtools(() => ({ loadDevtools: true, - position: position(), + position, })), ), ], }) TestBed.inject(ENVIRONMENT_INITIALIZER) - await vi.advanceTimersByTimeAsync(0) - await vi.dynamicImportSettled() - TestBed.tick() - expect(mockDevtoolsInstance.setPosition).toHaveBeenCalledTimes(0) + await TestBed.inject(ApplicationRef).whenStable() - position.set('left') - TestBed.tick() expect(mockDevtoolsInstance.setPosition).toHaveBeenCalledTimes(1) - expect(mockDevtoolsInstance.setPosition).toHaveBeenCalledWith('left') + expect(mockDevtoolsInstance.setPosition).toHaveBeenLastCalledWith('top') + + position.set('left') + await TestBed.inject(ApplicationRef).whenStable() + + expect(mockDevtoolsInstance.setPosition).toHaveBeenCalledTimes(2) + expect(mockDevtoolsInstance.setPosition).toHaveBeenLastCalledWith('left') }) it('should update button position', async () => { @@ -360,25 +348,28 @@ describe('withDevtools feature', () => { providers: [ provideZonelessChangeDetection(), provideTanStackQuery( - new QueryClient(), + () => new QueryClient(), withDevtools(() => ({ loadDevtools: true, - buttonPosition: buttonPosition(), + buttonPosition, })), ), ], }) TestBed.inject(ENVIRONMENT_INITIALIZER) - await vi.advanceTimersByTimeAsync(0) - await vi.dynamicImportSettled() - TestBed.tick() - expect(mockDevtoolsInstance.setButtonPosition).toHaveBeenCalledTimes(0) + await TestBed.inject(ApplicationRef).whenStable() - buttonPosition.set('bottom-right') - TestBed.tick() expect(mockDevtoolsInstance.setButtonPosition).toHaveBeenCalledTimes(1) - expect(mockDevtoolsInstance.setButtonPosition).toHaveBeenCalledWith( + expect(mockDevtoolsInstance.setButtonPosition).toHaveBeenLastCalledWith( + 'bottom-left', + ) + + buttonPosition.set('bottom-right') + await TestBed.inject(ApplicationRef).whenStable() + + expect(mockDevtoolsInstance.setButtonPosition).toHaveBeenCalledTimes(2) + expect(mockDevtoolsInstance.setButtonPosition).toHaveBeenLastCalledWith( 'bottom-right', ) }) @@ -390,25 +381,28 @@ describe('withDevtools feature', () => { providers: [ provideZonelessChangeDetection(), provideTanStackQuery( - new QueryClient(), + () => new QueryClient(), withDevtools(() => ({ loadDevtools: true, - initialIsOpen: initialIsOpen(), + initialIsOpen, })), ), ], }) TestBed.inject(ENVIRONMENT_INITIALIZER) - await vi.advanceTimersByTimeAsync(0) - await vi.dynamicImportSettled() - TestBed.tick() - expect(mockDevtoolsInstance.setInitialIsOpen).toHaveBeenCalledTimes(0) + await TestBed.inject(ApplicationRef).whenStable() - initialIsOpen.set(true) - TestBed.tick() expect(mockDevtoolsInstance.setInitialIsOpen).toHaveBeenCalledTimes(1) - expect(mockDevtoolsInstance.setInitialIsOpen).toHaveBeenCalledWith(true) + expect(mockDevtoolsInstance.setInitialIsOpen).toHaveBeenLastCalledWith( + false, + ) + + initialIsOpen.set(true) + await TestBed.inject(ApplicationRef).whenStable() + + expect(mockDevtoolsInstance.setInitialIsOpen).toHaveBeenCalledTimes(2) + expect(mockDevtoolsInstance.setInitialIsOpen).toHaveBeenLastCalledWith(true) }) it('should update theme', async () => { @@ -418,25 +412,26 @@ describe('withDevtools feature', () => { providers: [ provideZonelessChangeDetection(), provideTanStackQuery( - new QueryClient(), + () => new QueryClient(), withDevtools(() => ({ loadDevtools: true, - theme: theme(), + theme, })), ), ], }) TestBed.inject(ENVIRONMENT_INITIALIZER) - await vi.advanceTimersByTimeAsync(0) - await vi.dynamicImportSettled() - TestBed.tick() - expect(mockDevtoolsInstance.setTheme).toHaveBeenCalledTimes(0) + await TestBed.inject(ApplicationRef).whenStable() - theme.set('dark') - TestBed.tick() expect(mockDevtoolsInstance.setTheme).toHaveBeenCalledTimes(1) - expect(mockDevtoolsInstance.setTheme).toHaveBeenCalledWith('dark') + expect(mockDevtoolsInstance.setTheme).toHaveBeenLastCalledWith('system') + + theme.set('dark') + await TestBed.inject(ApplicationRef).whenStable() + + expect(mockDevtoolsInstance.setTheme).toHaveBeenCalledTimes(2) + expect(mockDevtoolsInstance.setTheme).toHaveBeenLastCalledWith('dark') }) it('should update theme to undefined when it is removed', async () => { @@ -446,25 +441,59 @@ describe('withDevtools feature', () => { providers: [ provideZonelessChangeDetection(), provideTanStackQuery( - new QueryClient(), + () => new QueryClient(), withDevtools(() => ({ loadDevtools: true, - theme: theme(), + theme, })), ), ], }) TestBed.inject(ENVIRONMENT_INITIALIZER) - await vi.advanceTimersByTimeAsync(0) - await vi.dynamicImportSettled() - TestBed.tick() - expect(mockDevtoolsInstance.setTheme).toHaveBeenCalledTimes(0) + await TestBed.inject(ApplicationRef).whenStable() - theme.set(undefined) - TestBed.tick() expect(mockDevtoolsInstance.setTheme).toHaveBeenCalledTimes(1) - expect(mockDevtoolsInstance.setTheme).toHaveBeenCalledWith(undefined) + expect(mockDevtoolsInstance.setTheme).toHaveBeenLastCalledWith('dark') + + theme.set(undefined) + await TestBed.inject(ApplicationRef).whenStable() + + expect(mockDevtoolsInstance.setTheme).toHaveBeenCalledTimes(2) + expect(mockDevtoolsInstance.setTheme).toHaveBeenLastCalledWith(undefined) + expect(mockTanstackQueryDevtools).toHaveBeenCalledTimes(1) + }) + + it('should pass construction-only options to the devtools', async () => { + const shadowDOMTarget = document + .createElement('div') + .attachShadow({ mode: 'open' }) + + TestBed.configureTestingModule({ + providers: [ + provideZonelessChangeDetection(), + provideTanStackQuery( + () => new QueryClient(), + withDevtools(() => ({ + loadDevtools: true, + styleNonce: 'nonce', + shadowDOMTarget, + hideDisabledQueries: true, + })), + ), + ], + }) + + TestBed.inject(ENVIRONMENT_INITIALIZER) + await TestBed.inject(ApplicationRef).whenStable() + + expect(mockTanstackQueryDevtools).toHaveBeenCalledWith( + expect.objectContaining({ + styleNonce: 'nonce', + shadowDOMTarget, + hideDisabledQueries: true, + }), + ) }) it('should destroy devtools', async () => { @@ -474,22 +503,23 @@ describe('withDevtools feature', () => { providers: [ provideZonelessChangeDetection(), provideTanStackQuery( - new QueryClient(), + () => new QueryClient(), withDevtools(() => ({ - loadDevtools: loadDevtools(), + loadDevtools, })), ), ], }) TestBed.inject(ENVIRONMENT_INITIALIZER) - await vi.advanceTimersByTimeAsync(0) - await vi.dynamicImportSettled() + await TestBed.inject(ApplicationRef).whenStable() + expect(mockDevtoolsInstance.mount).toHaveBeenCalledTimes(1) expect(mockDevtoolsInstance.unmount).toHaveBeenCalledTimes(0) loadDevtools.set(false) - TestBed.tick() + await TestBed.inject(ApplicationRef).whenStable() + expect(mockDevtoolsInstance.unmount).toHaveBeenCalledTimes(1) }) @@ -498,7 +528,7 @@ describe('withDevtools feature', () => { providers: [ provideZonelessChangeDetection(), provideTanStackQuery( - new QueryClient(), + () => new QueryClient(), withDevtools(() => ({ loadDevtools: true, })), @@ -507,15 +537,9 @@ describe('withDevtools feature', () => { }) TestBed.inject(ENVIRONMENT_INITIALIZER) - await vi.advanceTimersByTimeAsync(0) - TestBed.tick() - await vi.dynamicImportSettled() - expect(mockTanstackQueryDevtools).toHaveBeenCalledWith( - expect.objectContaining({ - client: expect.any(QueryClient), - queryFlavor: 'Angular Query', - }), - ) + await TestBed.inject(ApplicationRef).whenStable() + + expect(mockTanstackQueryDevtools).toHaveBeenCalledTimes(1) expect(mockDevtoolsInstance.mount).toHaveBeenCalledTimes(1) expect(mockDevtoolsInstance.unmount).toHaveBeenCalledTimes(0) @@ -532,106 +556,123 @@ describe('withDevtools feature', () => { providers: [ provideZonelessChangeDetection(), provideTanStackQuery( - new QueryClient(), + () => new QueryClient(), withDevtools(() => ({ - loadDevtools: loadDevtools(), + loadDevtools, })), ), ], }) TestBed.inject(ENVIRONMENT_INITIALIZER) - await vi.advanceTimersByTimeAsync(0) - expect(mockTanstackQueryDevtools).not.toHaveBeenCalled() + await TestBed.inject(ApplicationRef).whenStable() + + expect(mockTanstackQueryDevtools).toHaveBeenCalledTimes(1) expect(mockDevtoolsInstance.mount).not.toHaveBeenCalled() loadDevtools.set(true) - TestBed.tick() - await vi.dynamicImportSettled() - expect(mockTanstackQueryDevtools).toHaveBeenCalledTimes(1) + await TestBed.inject(ApplicationRef).whenStable() + expect(mockDevtoolsInstance.mount).toHaveBeenCalledTimes(1) expect(mockDevtoolsInstance.unmount).not.toHaveBeenCalled() loadDevtools.set(false) - TestBed.tick() + await TestBed.inject(ApplicationRef).whenStable() + expect(mockDevtoolsInstance.unmount).toHaveBeenCalledTimes(1) expect(mockDevtoolsInstance.mount).toHaveBeenCalledTimes(1) loadDevtools.set(true) - TestBed.tick() - await vi.dynamicImportSettled() + await TestBed.inject(ApplicationRef).whenStable() // Should remount (mount called twice now) expect(mockDevtoolsInstance.mount).toHaveBeenCalledTimes(2) expect(mockDevtoolsInstance.unmount).toHaveBeenCalledTimes(1) }) - describe('deps parameter', () => { - it('should inject dependencies and pass them to withDevtoolsFn in correct order', async () => { - const mockService1 = { value: 'service1' } - const mockService2 = { value: 'service2' } - const mockService1Token = new InjectionToken('MockService1') - const mockService2Token = new InjectionToken('MockService2') - const withDevtoolsFn = vi - .fn<() => { loadDevtools: boolean }>() - .mockReturnValue({ loadDevtools: true }) + it('should keep devtools mounted when loadDevtools resolves to the same state', async () => { + mockIsDevMode.mockReturnValue(true) + const loadDevtools = signal<'auto' | boolean>(true) - TestBed.configureTestingModule({ - providers: [ - provideZonelessChangeDetection(), - { - provide: mockService1Token, - useValue: mockService1, - }, - { - provide: mockService2Token, - useValue: mockService2, - }, - provideTanStackQuery( - new QueryClient(), - withDevtools(withDevtoolsFn, { - deps: [mockService1Token, mockService2Token], - }), - ), - ], - }) - - TestBed.inject(ENVIRONMENT_INITIALIZER) - await vi.advanceTimersByTimeAsync(0) - expect(withDevtoolsFn).toHaveBeenCalledWith(mockService1, mockService2) + TestBed.configureTestingModule({ + providers: [ + provideZonelessChangeDetection(), + provideTanStackQuery( + () => new QueryClient(), + withDevtools(() => ({ loadDevtools })), + ), + ], }) + await TestBed.inject(ApplicationRef).whenStable() - it('should work with empty deps array', async () => { - const withDevtoolsFn = vi - .fn<() => { loadDevtools: boolean }>() - .mockReturnValue({ loadDevtools: true }) + const container = document.querySelector('.tsqd-parent-container') + expect(container).not.toBeNull() + expect(mockDevtoolsInstance.mount).toHaveBeenCalledTimes(1) + + loadDevtools.set('auto') + await TestBed.inject(ApplicationRef).whenStable() + + expect(mockDevtoolsInstance.mount).toHaveBeenCalledTimes(1) + expect(mockDevtoolsInstance.unmount).not.toHaveBeenCalled() + expect(document.querySelector('.tsqd-parent-container')).toBe(container) + }) + + describe('injection context', () => { + it('should inject dependencies directly in the callback', async () => { + const firstService = { value: 'first' } + const secondService = { value: 'second' } + const firstServiceToken = new InjectionToken('FirstService') + const secondServiceToken = new InjectionToken('SecondService') + const withDevtoolsFn = vi.fn< + () => { loadDevtools: boolean; initialIsOpen: boolean } + >(() => { + const first = inject(firstServiceToken) + const second = inject(secondServiceToken) + + return { + loadDevtools: true, + initialIsOpen: first === firstService && second === secondService, + } + }) TestBed.configureTestingModule({ providers: [ provideZonelessChangeDetection(), + { provide: firstServiceToken, useValue: firstService }, + { provide: secondServiceToken, useValue: secondService }, provideTanStackQuery( - new QueryClient(), - withDevtools(withDevtoolsFn, { - deps: [], - }), + () => new QueryClient(), + withDevtools(withDevtoolsFn), ), ], }) TestBed.inject(ENVIRONMENT_INITIALIZER) - await vi.advanceTimersByTimeAsync(0) + await TestBed.inject(ApplicationRef).whenStable() + expect(withDevtoolsFn).toHaveBeenCalledWith() + expect(mockTanstackQueryDevtools).toHaveBeenCalledWith( + expect.objectContaining({ initialIsOpen: true }), + ) }) - it('should reactively update when injected services change', async () => { + it('should reactively update when an injected service changes', async () => { class ReactiveService { enabled = signal(false) position = signal('bottom') } - const withDevtoolsFn = (service: ReactiveService) => ({ - loadDevtools: service.enabled(), - position: service.position(), + const withDevtoolsFn = vi.fn< + () => { + loadDevtools: WritableSignal + position: WritableSignal + } + >(() => { + const service = inject(ReactiveService) + return { + loadDevtools: service.enabled, + position: service.position, + } }) TestBed.configureTestingModule({ @@ -639,25 +680,23 @@ describe('withDevtools feature', () => { provideZonelessChangeDetection(), ReactiveService, provideTanStackQuery( - new QueryClient(), - withDevtools(withDevtoolsFn, { - deps: [ReactiveService], - }), + () => new QueryClient(), + withDevtools(withDevtoolsFn), ), ], }) TestBed.inject(ENVIRONMENT_INITIALIZER) - await vi.advanceTimersByTimeAsync(0) + await TestBed.inject(ApplicationRef).whenStable() const service = TestBed.inject(ReactiveService) - expect(mockTanstackQueryDevtools).not.toHaveBeenCalled() + expect(mockTanstackQueryDevtools).toHaveBeenCalledTimes(1) + expect(mockDevtoolsInstance.mount).not.toHaveBeenCalled() service.enabled.set(true) - TestBed.tick() - await vi.dynamicImportSettled() - expect(mockTanstackQueryDevtools).toHaveBeenCalledTimes(1) + await TestBed.inject(ApplicationRef).whenStable() + expect(mockTanstackQueryDevtools).toHaveBeenCalledWith( expect.objectContaining({ position: 'bottom', @@ -665,8 +704,10 @@ describe('withDevtools feature', () => { ) service.position.set('top') - TestBed.tick() - expect(mockDevtoolsInstance.setPosition).toHaveBeenCalledWith('top') + await TestBed.inject(ApplicationRef).whenStable() + + expect(mockDevtoolsInstance.setPosition).toHaveBeenLastCalledWith('top') + expect(withDevtoolsFn).toHaveBeenCalledTimes(1) }) }) }) diff --git a/packages/angular-query-experimental/src/devtools-panel/index.ts b/packages/angular-query-devtools/src/devtools-panel/index.ts similarity index 84% rename from packages/angular-query-experimental/src/devtools-panel/index.ts rename to packages/angular-query-devtools/src/devtools-panel/index.ts index 2742a154692..b5ed79fa96a 100644 --- a/packages/angular-query-experimental/src/devtools-panel/index.ts +++ b/packages/angular-query-devtools/src/devtools-panel/index.ts @@ -1,7 +1,6 @@ export type { InjectDevtoolsPanel, DevtoolsPanelOptions, - InjectDevtoolsPanelOptions, DevtoolsPanelRef, } from './types' diff --git a/packages/angular-query-devtools/src/devtools-panel/inject-devtools-panel.ts b/packages/angular-query-devtools/src/devtools-panel/inject-devtools-panel.ts new file mode 100644 index 00000000000..b0ad0b3ec82 --- /dev/null +++ b/packages/angular-query-devtools/src/devtools-panel/inject-devtools-panel.ts @@ -0,0 +1,121 @@ +import { + DestroyRef, + PLATFORM_ID, + assertInInjectionContext, + computed, + effect, + inject, + untracked, +} from '@angular/core' +import { QueryClient, onlineManager } from '@tanstack/angular-query' +import { isPlatformBrowser } from '@angular/common' +import type { TanstackQueryDevtoolsPanel } from '@tanstack/query-devtools' +import type { DevtoolsPanelOptions, InjectDevtoolsPanel } from './types' + +/** + * Inject a TanStack Query devtools panel and render it in the DOM. + * + * Devtools panel allows programmatic control over the devtools, for example if you want to render + * the devtools as part of your own devtools. + * + * Consider `withDevtools` instead if you don't need this. + * @param injectDevtoolsPanelFn - A function that returns devtools panel options. + * @returns DevtoolsPanelRef + * @see https://tanstack.com/query/v5/docs/framework/angular/devtools + */ +export const injectDevtoolsPanel: InjectDevtoolsPanel = ( + injectDevtoolsPanelFn: () => DevtoolsPanelOptions, +) => { + assertInInjectionContext(injectDevtoolsPanel) + const destroyRef = inject(DestroyRef) + const isBrowser = isPlatformBrowser(inject(PLATFORM_ID)) + const injectedClient = inject(QueryClient, { optional: true }) + + const queryOptions = computed(injectDevtoolsPanelFn) + let devtools: TanstackQueryDevtoolsPanel | null = null + let optionsEffect: ReturnType | undefined + let manuallyDestroyed = false + let loadGeneration = 0 + + const unmount = () => { + devtools?.unmount() + devtools = null + } + + const destroy = () => { + if (manuallyDestroyed) return + + manuallyDestroyed = true + loadGeneration++ + optionsEffect?.destroy() + unmount() + } + + if (!isBrowser) + return { + destroy, + } + + optionsEffect = effect(() => { + const generation = ++loadGeneration + const { + client = injectedClient, + errorTypes = [], + theme, + styleNonce, + shadowDOMTarget, + hideDisabledQueries, + onClose, + hostElement, + } = queryOptions() + + untracked(() => { + if (!client) throw new Error('No QueryClient found') + if (!devtools && hostElement) { + import('@tanstack/query-devtools') + .then((queryDevtools) => { + if ( + manuallyDestroyed || + destroyRef.destroyed || + generation !== loadGeneration + ) { + return + } + + devtools = new queryDevtools.TanstackQueryDevtoolsPanel({ + client, + queryFlavor: 'Angular Query', + version: '5', + buttonPosition: 'bottom-left', + position: 'bottom', + initialIsOpen: true, + errorTypes, + theme, + styleNonce, + shadowDOMTarget, + hideDisabledQueries, + onClose, + onlineManager, + }) + devtools.mount(hostElement.nativeElement) + }) + .catch((error) => { + console.error('Failed to load @tanstack/query-devtools.', error) + }) + } else if (devtools && hostElement) { + devtools.setClient(client) + devtools.setErrorTypes(errorTypes) + devtools.setTheme(theme) + devtools.setOnClose(onClose ?? (() => {})) + } else if (devtools && !hostElement) { + unmount() + } + }) + }) + + destroyRef.onDestroy(destroy) + + return { + destroy, + } +} diff --git a/packages/angular-query-devtools/src/devtools-panel/production/index.ts b/packages/angular-query-devtools/src/devtools-panel/production/index.ts new file mode 100644 index 00000000000..90be57a57c8 --- /dev/null +++ b/packages/angular-query-devtools/src/devtools-panel/production/index.ts @@ -0,0 +1,6 @@ +export type { + DevtoolsPanelOptions, + DevtoolsPanelRef, + InjectDevtoolsPanel, +} from '../types' +export { injectDevtoolsPanel } from '../inject-devtools-panel' diff --git a/packages/angular-query-experimental/src/devtools-panel/stub.ts b/packages/angular-query-devtools/src/devtools-panel/stub.ts similarity index 52% rename from packages/angular-query-experimental/src/devtools-panel/stub.ts rename to packages/angular-query-devtools/src/devtools-panel/stub.ts index ab52842f48a..871a56550e7 100644 --- a/packages/angular-query-experimental/src/devtools-panel/stub.ts +++ b/packages/angular-query-devtools/src/devtools-panel/stub.ts @@ -1,5 +1,9 @@ -import { noop } from '@tanstack/query-core' -import type { InjectDevtoolsPanel } from './types' +import { noop } from '@tanstack/angular-query' +import type { + DevtoolsPanelOptions, + DevtoolsPanelRef, + InjectDevtoolsPanel, +} from './types' /** * Replaces `injectDevtoolsPanel` in production builds: returns a panel whose `destroy` does nothing. @@ -8,3 +12,5 @@ import type { InjectDevtoolsPanel } from './types' export const injectDevtoolsPanel: InjectDevtoolsPanel = () => ({ destroy: noop, }) + +export type { InjectDevtoolsPanel, DevtoolsPanelOptions, DevtoolsPanelRef } diff --git a/packages/angular-query-experimental/src/devtools-panel/types.ts b/packages/angular-query-devtools/src/devtools-panel/types.ts similarity index 70% rename from packages/angular-query-experimental/src/devtools-panel/types.ts rename to packages/angular-query-devtools/src/devtools-panel/types.ts index 56c8c4c5330..b2a050c37a7 100644 --- a/packages/angular-query-experimental/src/devtools-panel/types.ts +++ b/packages/angular-query-devtools/src/devtools-panel/types.ts @@ -1,18 +1,6 @@ import type { DevtoolsErrorType, Theme } from '@tanstack/query-devtools' -import type { ElementRef, Injector } from '@angular/core' -import type { QueryClient } from '@tanstack/query-core' - -/** - * Options for `injectDevtoolsPanel`. - */ -export interface InjectDevtoolsPanelOptions { - /** - * The `Injector` in which to create the devtools panel. - * - * If this is not provided, the current injection context will be used instead (via `inject`). - */ - injector?: Injector -} +import type { ElementRef } from '@angular/core' +import type { QueryClient } from '@tanstack/angular-query' /** * A devtools panel, which can be manually destroyed. @@ -36,6 +24,12 @@ export interface DevtoolsPanelOptions { * Use this so you can define custom errors that can be shown in the devtools. */ errorTypes?: Array + /** + * The theme of the devtools panel. Overrides the theme selected in the devtools + * Settings menu. When omitted, the selected theme is used, or `'system'` if none + * is selected. + */ + theme?: Theme /** * Use this to pass a nonce to the style tag that is added to the document head. This is useful if you are using a Content Security Policy (CSP) nonce to allow inline styles. */ @@ -49,23 +43,17 @@ export interface DevtoolsPanelOptions { * Set this to true to hide disabled queries from the devtools panel. */ hideDisabledQueries?: boolean - /** - * Set this to 'light', 'dark', or 'system' to change the theme of the devtools panel. - * This overrides the theme selected in the devtools Settings menu. When omitted, the - * selected theme is used, or `'system'` if none is selected. - */ - theme?: Theme /** * Callback function that is called when the devtools panel is closed */ - onClose?: () => void + onClose?: () => unknown /** * Element where to render the devtools panel. When set to undefined or null, the devtools panel will not be created, or destroyed if existing. * If changed from undefined to an ElementRef, the devtools panel will be created. */ - hostElement?: ElementRef + hostElement?: ElementRef | null } /** @@ -73,5 +61,4 @@ export interface DevtoolsPanelOptions { */ export type InjectDevtoolsPanel = ( injectDevtoolsPanelFn: () => DevtoolsPanelOptions, - options?: InjectDevtoolsPanelOptions, ) => DevtoolsPanelRef diff --git a/packages/angular-query-devtools/src/index.ts b/packages/angular-query-devtools/src/index.ts new file mode 100644 index 00000000000..bf0f9e7b156 --- /dev/null +++ b/packages/angular-query-devtools/src/index.ts @@ -0,0 +1,3 @@ +export type { DevtoolsOptions, WithDevtools, WithDevtoolsFn } from './types' + +export { withDevtools } from './with-devtools' diff --git a/packages/angular-query-devtools/src/production/index.ts b/packages/angular-query-devtools/src/production/index.ts new file mode 100644 index 00000000000..002179bb9b2 --- /dev/null +++ b/packages/angular-query-devtools/src/production/index.ts @@ -0,0 +1,2 @@ +export type { DevtoolsOptions, WithDevtools, WithDevtoolsFn } from '../types' +export { withDevtools } from '../with-devtools' diff --git a/packages/angular-query-devtools/src/stub.ts b/packages/angular-query-devtools/src/stub.ts new file mode 100644 index 00000000000..99140ccb0b3 --- /dev/null +++ b/packages/angular-query-devtools/src/stub.ts @@ -0,0 +1,13 @@ +import { makeEnvironmentProviders } from '@angular/core' +import { queryFeature } from '@tanstack/angular-query/internal' +import type { DevtoolsOptions, WithDevtools, WithDevtoolsFn } from './types' + +// Stub which replaces `withDevtools` in production builds +/** + * Provides an inert Query feature for production builds. + * @returns A feature that creates no devtools or subscriptions. + */ +export const withDevtools: WithDevtools = () => + queryFeature(makeEnvironmentProviders([])) + +export type { DevtoolsOptions, WithDevtools, WithDevtoolsFn } diff --git a/packages/angular-query-devtools/src/types.ts b/packages/angular-query-devtools/src/types.ts new file mode 100644 index 00000000000..74419583cec --- /dev/null +++ b/packages/angular-query-devtools/src/types.ts @@ -0,0 +1,94 @@ +import type { + DevtoolsButtonPosition, + DevtoolsErrorType, + DevtoolsPosition, + Theme, +} from '@tanstack/query-devtools' +import type { QueryClient, QueryFeature } from '@tanstack/angular-query' +import type { Signal } from '@angular/core' + +/** A static devtools option or an Angular signal containing that option. */ +type MaybeSignal = T | Signal + +/** + * Options for configuring the TanStack Query devtools. + */ +export interface DevtoolsOptions { + /** + * Set this true if you want the devtools to default to being open + */ + initialIsOpen?: MaybeSignal + /** + * The position of the TanStack logo to open and close the devtools panel. + * `top-left` | `top-right` | `bottom-left` | `bottom-right` | `relative` + * Defaults to `bottom-right`. + */ + buttonPosition?: MaybeSignal + /** + * The position of the TanStack Query devtools panel. + * `top` | `bottom` | `left` | `right` + * Defaults to `bottom`. + */ + position?: MaybeSignal + /** + * Custom instance of QueryClient + */ + client?: MaybeSignal + /** + * Use this so you can define custom errors that can be shown in the devtools. + */ + errorTypes?: MaybeSignal> + /** + * Use this to pass a nonce to the style tag that is added to the document head. This is useful if you are using a Content Security Policy (CSP) nonce to allow inline styles. + */ + styleNonce?: string + /** + * Use this so you can attach the devtool's styles to a specific element in the DOM. + */ + shadowDOMTarget?: ShadowRoot + /** + * Set this to true to hide disabled queries from the devtools panel. + */ + hideDisabledQueries?: boolean + /** + * Set this to 'light', 'dark', or 'system' to change the theme of the devtools panel. + * Defaults to 'system'. + */ + theme?: MaybeSignal + + /** + * Whether the developer tools should be rendered. + * - `auto`- (Default) Renders devtools in development mode. Skips rendering in production mode. + * - `true`- Always render the devtools, regardless of the environment. + * - `false`- Never render the devtools, regardless of the environment. + * + * You can use `true` and `false` to override loading developer tools from an environment file. + * For example, a test environment might run in production mode but you may want to load developer tools. + * + * You can pass a signal to dynamically render the devtools based on a + * condition. For example, the signal could be created from an RxJS + * observable that listens for a keyboard shortcut. + * + * **Example** + * ```ts + * withDevtools(() => ({ + * initialIsOpen: true, + * loadDevtools: inject(ExampleService).loadDevtools, + * })) + * ``` + */ + loadDevtools?: MaybeSignal<'auto' | boolean> +} + +/** + * Returns devtools options. The function runs once in an Angular injection + * context, so it can call `inject()`. Pass signals as option values to make + * mutable options reactive. `styleNonce`, `shadowDOMTarget`, and + * `hideDisabledQueries` are read only when the devtools are constructed. + */ +export type WithDevtoolsFn = () => DevtoolsOptions + +/** + * Creates a Query feature from an optional factory of developer-tools options. + */ +export type WithDevtools = (withDevtoolsFn?: WithDevtoolsFn) => QueryFeature diff --git a/packages/angular-query-devtools/src/with-devtools.ts b/packages/angular-query-devtools/src/with-devtools.ts new file mode 100644 index 00000000000..d74d810757e --- /dev/null +++ b/packages/angular-query-devtools/src/with-devtools.ts @@ -0,0 +1,165 @@ +import { isPlatformBrowser } from '@angular/common' +import { + DestroyRef, + InjectionToken, + PLATFORM_ID, + afterRenderEffect, + computed, + inject, + isDevMode, + isSignal, + makeEnvironmentProviders, + provideEnvironmentInitializer, + untracked, +} from '@angular/core' +import { QueryClient, onlineManager } from '@tanstack/angular-query' +import { queryFeature } from '@tanstack/angular-query/internal' +import { TanstackQueryDevtools } from '@tanstack/query-devtools' +import type { Signal } from '@angular/core' +import type { DevtoolsOptions, WithDevtools } from './types' + +/** + * Internal token used to prevent double providing of devtools in child injectors + */ +const DEVTOOLS_PROVIDED = new InjectionToken('', { + factory: () => ({ + isProvided: false, + }), +}) + +/** Internal token for providing devtools options. */ +const DEVTOOLS_OPTIONS = new InjectionToken('') + +/** + * Reads a devtools option that may be supplied as an Angular signal. + * @param option - A static option value or a signal containing it. + * @returns The current option value, or undefined when no value is supplied. + */ +function resolveOption(option: T | Signal | undefined) { + return isSignal(option) ? option() : option +} + +/** + * Enables developer tools in Angular development builds. + * + * **Example** + * + * ```ts + * export const appConfig: ApplicationConfig = { + * providers: [ + * provideTanStackQuery(() => new QueryClient(), withDevtools()), + * ] + * } + * ``` + * The devtools will be rendered in ``. + * + * If you need more control over when devtools are loaded, you can use the `loadDevtools` option. + * + * If you need more control over where devtools are rendered, consider `injectDevtoolsPanel`. This allows rendering devtools inside your own devtools for example. + * @param withDevtoolsFn - A function that returns `DevtoolsOptions`. It runs + * once in an Angular injection context and can call `inject()`. Return signals + * as individual mutable option values to update them reactively. + * @returns A set of providers for use with `provideTanStackQuery`. + * @see {@link provideTanStackQuery} + * @see {@link DevtoolsOptions} + */ +export const withDevtools: WithDevtools = (withDevtoolsFn) => + queryFeature( + makeEnvironmentProviders([ + { + provide: DEVTOOLS_OPTIONS, + useFactory: () => withDevtoolsFn?.() ?? {}, + }, + provideEnvironmentInitializer(() => { + const devtoolsProvided = inject(DEVTOOLS_PROVIDED) + if ( + !isPlatformBrowser(inject(PLATFORM_ID)) || + devtoolsProvided.isProvided + ) + return + + const injectedClient = inject(QueryClient, { optional: true }) + const options = inject(DEVTOOLS_OPTIONS) + const destroyRef = inject(DestroyRef) + + const client = resolveOption(options.client) ?? injectedClient + + devtoolsProvided.isProvided = true + destroyRef.onDestroy(() => { + devtoolsProvided.isProvided = false + }) + + if (!client) throw new Error('No QueryClient found') + + const devtools = new TanstackQueryDevtools({ + client, + queryFlavor: 'Angular Query', + version: '5', + onlineManager, + buttonPosition: resolveOption(options.buttonPosition), + position: resolveOption(options.position), + initialIsOpen: resolveOption(options.initialIsOpen), + errorTypes: resolveOption(options.errorTypes), + styleNonce: options.styleNonce, + shadowDOMTarget: options.shadowDOMTarget, + hideDisabledQueries: options.hideDisabledQueries, + theme: resolveOption(options.theme), + }) + + const shouldMount = computed(() => { + const loadDevtools = resolveOption(options.loadDevtools) + return typeof loadDevtools === 'boolean' ? loadDevtools : isDevMode() + }) + + const mount = () => { + const element = document.body.appendChild( + document.createElement('div'), + ) + element.classList.add('tsqd-parent-container') + devtools.mount(element) + + return () => { + devtools.unmount() + element.remove() + } + } + + afterRenderEffect({ + write: (onCleanup) => { + if (shouldMount()) onCleanup(untracked(mount)) + }, + }) + + const registerOptionEffect = ( + option: T | Signal | undefined, + update: (value: T | undefined) => void, + ) => { + if (!isSignal(option)) return + afterRenderEffect({ + write: () => { + update(option()) + }, + }) + } + + registerOptionEffect(options.client, (value) => { + devtools.setClient(value ?? injectedClient!) + }) + registerOptionEffect(options.buttonPosition, (value) => { + devtools.setButtonPosition(value ?? 'bottom-right') + }) + registerOptionEffect(options.position, (value) => { + devtools.setPosition(value ?? 'bottom') + }) + registerOptionEffect(options.initialIsOpen, (value) => { + devtools.setInitialIsOpen(value ?? false) + }) + registerOptionEffect(options.errorTypes, (value) => { + devtools.setErrorTypes(value ?? []) + }) + registerOptionEffect(options.theme, (value) => { + devtools.setTheme(value) + }) + }), + ]), + ) diff --git a/packages/angular-query-experimental/test-setup.ts b/packages/angular-query-devtools/test-setup.ts similarity index 91% rename from packages/angular-query-experimental/test-setup.ts rename to packages/angular-query-devtools/test-setup.ts index cb8519a824c..eb69f3f05a9 100644 --- a/packages/angular-query-experimental/test-setup.ts +++ b/packages/angular-query-devtools/test-setup.ts @@ -1,4 +1,5 @@ import '@testing-library/jest-dom/vitest' +import '@angular/compiler' import { getTestBed } from '@angular/core/testing' import { BrowserTestingModule, diff --git a/packages/angular-query-devtools/tsconfig.json b/packages/angular-query-devtools/tsconfig.json new file mode 100644 index 00000000000..bec09d17d91 --- /dev/null +++ b/packages/angular-query-devtools/tsconfig.json @@ -0,0 +1,23 @@ +{ + "extends": "../../tsconfig.json", + "compilerOptions": { + "outDir": "./dist-ts", + "rootDir": ".", + "noFallthroughCasesInSwitch": true, + "useDefineForClassFields": false, + "target": "ES2022" + }, + "angularCompilerOptions": { + "enableI18nLegacyMessageIdFormat": false, + "strictInjectionParameters": true, + "strictInputAccessModifiers": true, + "strictStandalone": true, + "strictTemplates": true + }, + "include": ["src", "scripts", "test-setup.ts", "*.config.*", "package.json"], + "references": [ + { "path": "../angular-query" }, + { "path": "../query-core" }, + { "path": "../query-devtools" } + ] +} diff --git a/packages/angular-query-experimental/tsconfig.prod.json b/packages/angular-query-devtools/tsconfig.prod.json similarity index 57% rename from packages/angular-query-experimental/tsconfig.prod.json rename to packages/angular-query-devtools/tsconfig.prod.json index 2bb29fdf02a..b470042ddc1 100644 --- a/packages/angular-query-experimental/tsconfig.prod.json +++ b/packages/angular-query-devtools/tsconfig.prod.json @@ -3,8 +3,7 @@ "compilerOptions": { "incremental": false, "composite": false, - "rootDir": "../../" - }, - "include": ["src"], - "exclude": ["src/__tests__"] + "rootDir": "../../", + "customConditions": null + } } diff --git a/packages/angular-query-devtools/tsconfig.spec.json b/packages/angular-query-devtools/tsconfig.spec.json new file mode 100644 index 00000000000..f787da7dcf8 --- /dev/null +++ b/packages/angular-query-devtools/tsconfig.spec.json @@ -0,0 +1,15 @@ +{ + "extends": "./tsconfig.json", + "compilerOptions": { + "types": ["vitest/globals", "node"], + "noEmit": false, + "emitDeclarationOnly": false, + "declaration": false, + "declarationMap": false, + "composite": false, + "target": "ES2022" + }, + "files": ["test-setup.ts"], + "include": ["src/**/*.test.ts", "src/**/*.test-d.ts"], + "references": [{ "path": "../query-devtools" }] +} diff --git a/packages/angular-query-devtools/vite.config.ts b/packages/angular-query-devtools/vite.config.ts new file mode 100644 index 00000000000..8fb48c0639a --- /dev/null +++ b/packages/angular-query-devtools/vite.config.ts @@ -0,0 +1,114 @@ +import { isBuiltin } from 'node:module' +import path from 'node:path' +import { fileURLToPath } from 'node:url' +import { defineConfig } from 'vite' +import tsconfigPaths from 'vite-tsconfig-paths' +import dts from 'vite-plugin-dts' +import packageJson from './package.json' with { type: 'json' } + +const packageDir = path.dirname(fileURLToPath(import.meta.url)) +const angularQueryEntry = path.join( + packageDir, + '../angular-query/dist/index.mjs', +) +const angularQueryInternalEntry = path.join( + packageDir, + '../angular-query/dist/internal.mjs', +) +const queryDevtoolsEntry = path.join( + packageDir, + '../query-devtools/src/index.ts', +) + +function ensureImportFileExtension({ + content, + extension, +}: { + content: string + extension: string +}) { + content = content.replace( + /(im|ex)port\s[\w{}/*\s,]+from\s['"](?:\.\.?\/)+?[^.'"]+(?=['"];?)/gm, + `$&.${extension}`, + ) + + content = content.replace( + /import\(['"](?:\.\.?\/)+?[^.'"]+(?=['"];?)/gm, + `$&.${extension}`, + ) + return content +} + +const externalDependencies = Object.keys({ + ...packageJson.dependencies, + ...packageJson.peerDependencies, +}) + +export default defineConfig({ + resolve: { + conditions: ['@tanstack/custom-condition'], + ...(process.env.VITEST === 'true' + ? { + alias: { + '@tanstack/angular-query/internal': angularQueryInternalEntry, + '@tanstack/angular-query': angularQueryEntry, + '@tanstack/query-devtools': queryDevtoolsEntry, + }, + } + : {}), + }, + plugins: [ + tsconfigPaths({ projects: ['tsconfig.prod.json'] }), + dts({ + outDir: 'dist', + entryRoot: './src', + include: './src', + exclude: ['src/__tests__'], + tsconfigPath: 'tsconfig.prod.json', + compilerOptions: { + module: 99, // ESNext + declarationMap: false, + }, + beforeWriteFile: (filePath, content) => { + return { + filePath, + content: ensureImportFileExtension({ content, extension: 'js' }), + } + }, + afterDiagnostic: (diagnostics) => { + if (diagnostics.length > 0) { + console.error('Please fix the above type errors') + process.exit(1) + } + }, + }), + ], + build: { + outDir: 'dist', + minify: false, + sourcemap: true, + lib: { + entry: [ + './src/index.ts', + './src/stub.ts', + './src/production/index.ts', + './src/devtools-panel/index.ts', + './src/devtools-panel/stub.ts', + './src/devtools-panel/production/index.ts', + ], + formats: ['es'], + fileName: () => '[name].mjs', + }, + rolldownOptions: { + external: (id) => + isBuiltin(id) || + externalDependencies.some( + (dependency) => id === dependency || id.startsWith(`${dependency}/`), + ), + output: { + preserveModules: true, + preserveModulesRoot: 'src', + }, + }, + }, +}) diff --git a/packages/angular-query-devtools/vitest.config.ts b/packages/angular-query-devtools/vitest.config.ts new file mode 100644 index 00000000000..e8592b2ebc8 --- /dev/null +++ b/packages/angular-query-devtools/vitest.config.ts @@ -0,0 +1,43 @@ +import path from 'node:path' +import { fileURLToPath } from 'node:url' +import angular from '@analogjs/vite-plugin-angular' +import { defineConfig } from 'vitest/config' +import packageJson from './package.json' with { type: 'json' } + +const packageDir = path.dirname(fileURLToPath(import.meta.url)) +const angularQueryEntry = path.join( + packageDir, + '../angular-query/dist/index.mjs', +) +const angularQueryInternalEntry = path.join( + packageDir, + '../angular-query/dist/internal.mjs', +) + +export default defineConfig({ + oxc: { + target: 'es2022', + }, + plugins: [angular({ tsconfig: './tsconfig.spec.json' })], + resolve: { + alias: { + '@tanstack/angular-query/internal': angularQueryInternalEntry, + '@tanstack/angular-query': angularQueryEntry, + '@tanstack/query-devtools': path.join( + packageDir, + '../query-devtools/src/index.ts', + ), + }, + }, + test: { + name: packageJson.name, + dir: './src', + watch: false, + environment: 'jsdom', + setupFiles: ['./test-setup.ts'], + coverage: { enabled: true, provider: 'istanbul', include: ['src/**/*'] }, + include: ['**/*.{test,spec}.{ts,mts,cts,tsx,js,mjs,cjs,jsx}'], + globals: true, + restoreMocks: true, + }, +}) diff --git a/packages/angular-query-experimental/CHANGELOG.md b/packages/angular-query-experimental/CHANGELOG.md deleted file mode 100644 index 1b81dd5a1e9..00000000000 --- a/packages/angular-query-experimental/CHANGELOG.md +++ /dev/null @@ -1,619 +0,0 @@ -# @tanstack/angular-query-experimental - -## 5.107.1 - -### Patch Changes - -- Updated dependencies []: - - @tanstack/query-core@5.107.1 - -## 5.107.0 - -### Patch Changes - -- Updated dependencies [[`b6add89`](https://github.com/TanStack/query/commit/b6add891c1b846c1f276a4c0110edb58b62defaa)]: - - @tanstack/query-core@5.107.0 - -## 5.106.1 - -### Patch Changes - -- Updated dependencies []: - - @tanstack/query-core@5.106.1 - -## 5.106.0 - -### Patch Changes - -- Updated dependencies []: - - @tanstack/query-core@5.106.0 - -## 5.105.3 - -### Patch Changes - -- Updated dependencies [[`3f4de1b`](https://github.com/TanStack/query/commit/3f4de1b40cce4314f7572b515ad8fd26dd85fe04), [`969e580`](https://github.com/TanStack/query/commit/969e58019bf650fb17c273fddd0e8d2adf56d4d9)]: - - @tanstack/query-core@5.105.3 - -## 5.105.2 - -### Patch Changes - -- [#12480](https://github.com/TanStack/query/pull/12480) [`8d0dc27`](https://github.com/TanStack/query/commit/8d0dc278a728a97eb677b6f2baf37d1677c2edc1) - Exclude `status` from the filters accepted by `QueryClient.isMutating`, `useIsMutating`, and `injectIsMutating`. These APIs always count mutations with `status: 'pending'`. -- Updated dependencies [[`2ee2fd9`](https://github.com/TanStack/query/commit/2ee2fd935acd88532255947c4b5e29baffd21ce8), [`8d0dc27`](https://github.com/TanStack/query/commit/8d0dc278a728a97eb677b6f2baf37d1677c2edc1), [`e69cac6`](https://github.com/TanStack/query/commit/e69cac69d99cc3c4f6f32b2ad8aad53da83b4a72), [`f2215d2`](https://github.com/TanStack/query/commit/f2215d25945e6461252b7c32bf822f31239e507e), [`86e7957`](https://github.com/TanStack/query/commit/86e79571fd45f29ab7d172102fdd718d3b8bde69), [`b6576b3`](https://github.com/TanStack/query/commit/b6576b388f2784839081358fa82744b0aacdeecd), [`af0e0ef`](https://github.com/TanStack/query/commit/af0e0ef5fc04e9d232fdc3aebd24ffe528b256d7), [`05d9b6a`](https://github.com/TanStack/query/commit/05d9b6a40b9d4ac49943e9d881789e098db5bdfa)]: - - @tanstack/query-core@5.105.2 - -## 5.105.1 - -### Patch Changes - -- [#11373](https://github.com/TanStack/query/pull/11373) [`7ccba6e`](https://github.com/TanStack/query/commit/7ccba6e959fcb9c51e691db9e2b09ff41d21e0b6) - fix({react,preact,angular,solid,vue}-query/infiniteQueryOptions): correct the overload selected for a possibly-undefined 'initialData' - -- [#12390](https://github.com/TanStack/query/pull/12390) [`18e54bf`](https://github.com/TanStack/query/commit/18e54bfac3dc3756afdb8840418d831c61bc15bf) - Exclude `fetchStatus` from the filters accepted by `QueryClient.isFetching`, `useIsFetching`, and `injectIsFetching`. These APIs always count queries with `fetchStatus: 'fetching'`. -- Updated dependencies [[`6f8a48d`](https://github.com/TanStack/query/commit/6f8a48d543b499b6d9b0e95050c28183c8c18ae0), [`18e54bf`](https://github.com/TanStack/query/commit/18e54bfac3dc3756afdb8840418d831c61bc15bf)]: - - @tanstack/query-core@5.105.1 - -## 5.105.0 - -### Minor Changes - -- [#12316](https://github.com/TanStack/query/pull/12316) [`8f9dfcb`](https://github.com/TanStack/query/commit/8f9dfcb30ce901b867b06ba08feba28daf5d9fb4) - feat(angular-query-experimental/injectDevtoolsPanel): add the 'theme' and 'hideDisabledQueries' options - -### Patch Changes - -- [#12315](https://github.com/TanStack/query/pull/12315) [`9e42537`](https://github.com/TanStack/query/commit/9e4253766f8015d1372bcd515f50103fd067a42d) - fix(angular-query-experimental/withDevtools): forward an unset 'theme' to the devtools so removing it falls back to the theme selected in the devtools Settings menu -- Updated dependencies []: - - @tanstack/query-core@5.105.0 - -## 5.104.5 - -### Patch Changes - -- Updated dependencies [[`f608f93`](https://github.com/TanStack/query/commit/f608f933a36da30670082e90d0a56b2569290563)]: - - @tanstack/query-core@5.104.5 - -## 5.104.4 - -### Patch Changes - -- [#11251](https://github.com/TanStack/query/pull/11251) [`fc3a384`](https://github.com/TanStack/query/commit/fc3a3848f25adec750e6ee6d3abf9280c7e3a990) - fix({preact,solid,svelte,angular-query-experimental}): switch to 'export type *' for type-only re-exports -- Updated dependencies [[`1fee044`](https://github.com/TanStack/query/commit/1fee0443dbeb346b8401557ca286a66cdec7ad71), [`fce89dd`](https://github.com/TanStack/query/commit/fce89ddf7a35b14252096ff64a1217efd81b415c)]: - - @tanstack/query-core@5.104.4 - -## 5.104.3 - -### Patch Changes - -- Updated dependencies [[`0f15bc9`](https://github.com/TanStack/query/commit/0f15bc925db5813be6a17527988ec7d7b3c8cfc0)]: - - @tanstack/query-core@5.104.3 - -## 5.104.2 - -### Patch Changes - -- Updated dependencies [[`03e8c39`](https://github.com/TanStack/query/commit/03e8c3955ddbf20f0a07b79982b52dfad8df5323)]: - - @tanstack/query-core@5.104.2 - -## 5.104.1 - -### Patch Changes - -- Updated dependencies []: - - @tanstack/query-core@5.104.1 - -## 5.104.0 - -### Minor Changes - -- [#11650](https://github.com/TanStack/query/pull/11650) [`5279b05`](https://github.com/TanStack/query/commit/5279b05211223dd719803ca22a9d1fa46c98638e) - Build projects with Vite 8 - -### Patch Changes - -- Updated dependencies [[`5279b05`](https://github.com/TanStack/query/commit/5279b05211223dd719803ca22a9d1fa46c98638e)]: - - @tanstack/query-core@5.104.0 - -## 5.103.3 - -### Patch Changes - -- [#11649](https://github.com/TanStack/query/pull/11649) [`a0ee654`](https://github.com/TanStack/query/commit/a0ee654cd8d60773abf47beef177c3f0f1b3a0e4) - build: switch to tsdown -- Updated dependencies []: - - @tanstack/query-core@5.103.3 - -## 5.103.2 - -### Patch Changes - -- Updated dependencies [[`8a28904`](https://github.com/TanStack/query/commit/8a28904aaccb6bc26398b751400a181c0f6d7f0e)]: - - @tanstack/query-core@5.103.2 - -## 5.103.1 - -### Patch Changes - -- Updated dependencies [[`8330b2f`](https://github.com/TanStack/query/commit/8330b2f2d431f226d7bb95eb727c637be9d4c6d8), [`3212966`](https://github.com/TanStack/query/commit/3212966a3681e02d14eb79e9cce0d3265b046877)]: - - @tanstack/query-core@5.103.1 - -## 5.103.0 - -### Patch Changes - -- Updated dependencies [[`e57f816`](https://github.com/TanStack/query/commit/e57f8163b18ab3abfe52ad69cdbdda4d31453393), [`fdae2ce`](https://github.com/TanStack/query/commit/fdae2ce4e5382af7326c7c38ce5d5a12751ada12), [`a1119e5`](https://github.com/TanStack/query/commit/a1119e5a3ffa52534de7390f17c7183d17658051), [`cbf77bf`](https://github.com/TanStack/query/commit/cbf77bf8e1a9ce09caef0cdd9a8ed10fef57edf0)]: - - @tanstack/query-core@5.103.0 - -## 5.102.8 - -### Patch Changes - -- Updated dependencies []: - - @tanstack/query-core@5.102.8 - -## 5.102.7 - -### Patch Changes - -- Updated dependencies []: - - @tanstack/query-core@5.102.7 - -## 5.102.6 - -### Patch Changes - -- Updated dependencies []: - - @tanstack/query-core@5.102.6 - -## 5.102.5 - -### Patch Changes - -- Updated dependencies [[`578e5c2`](https://github.com/TanStack/query/commit/578e5c26e8ebd0d7351b4b8e2bafba695e672b8d)]: - - @tanstack/query-core@5.102.5 - -## 5.102.4 - -### Patch Changes - -- Updated dependencies [[`a05df6a`](https://github.com/TanStack/query/commit/a05df6aefb0e2489ec2c879ae16e2ee7cb3123ec)]: - - @tanstack/query-core@5.102.4 - -## 5.102.3 - -### Patch Changes - -- Updated dependencies []: - - @tanstack/query-core@5.102.3 - -## 5.102.2 - -### Patch Changes - -- Updated dependencies [[`80fbf73`](https://github.com/TanStack/query/commit/80fbf73e77892d702c107e14a84c219a8ed825dc)]: - - @tanstack/query-core@5.102.2 - -## 5.102.1 - -### Patch Changes - -- Updated dependencies [[`134890d`](https://github.com/TanStack/query/commit/134890dbdc60e4fb0313e44b512d29284ca82f96)]: - - @tanstack/query-core@5.102.1 - -## 5.102.0 - -### Patch Changes - -- [#11224](https://github.com/TanStack/query/pull/11224) [`294d4e6`](https://github.com/TanStack/query/commit/294d4e62c4f7d674574a4903eef2a1bc3dd1413b) - Fix `queryOptions` and `infiniteQueryOptions` return types so exported inferred options can be emitted in declaration files without leaking internal data tag symbols. - -- [#8737](https://github.com/TanStack/query/pull/8737) [`2215bb0`](https://github.com/TanStack/query/commit/2215bb031139cdc8a84751b37a485c38ca9d2b6e) - fix: make mutation variables optional when `undefined extends TVariables` - -- [#11221](https://github.com/TanStack/query/pull/11221) [`1ef4208`](https://github.com/TanStack/query/commit/1ef42087c9a266c2137d2ef645cbcc662f60ac93) - Remove experimental render-time prefetching and the `promise` property from query results. - -- Updated dependencies [[`34f7cee`](https://github.com/TanStack/query/commit/34f7ceed09c10e4a3aa2df31a106ddf02ec4e787), [`b4368c4`](https://github.com/TanStack/query/commit/b4368c43792349f6c29d1fb41f7ee1ef3a8bdd2c), [`5bb089d`](https://github.com/TanStack/query/commit/5bb089d153d33933983b7ea80f8d69b51d423698), [`ba4650c`](https://github.com/TanStack/query/commit/ba4650c05e61e33c609e051b948c9f7d31ce70d1), [`294d4e6`](https://github.com/TanStack/query/commit/294d4e62c4f7d674574a4903eef2a1bc3dd1413b), [`1f631b3`](https://github.com/TanStack/query/commit/1f631b3604aab6567fb3f6c90646a5a304641546), [`01a02bf`](https://github.com/TanStack/query/commit/01a02bfad32f9efbc17796be31d6399f1197a655), [`18c1c1e`](https://github.com/TanStack/query/commit/18c1c1ef94883e781ad36d36f9ea4a043ce4260b), [`5448063`](https://github.com/TanStack/query/commit/5448063f828d2270dccd41ae375e1afde35e91f2), [`2215bb0`](https://github.com/TanStack/query/commit/2215bb031139cdc8a84751b37a485c38ca9d2b6e), [`1ef4208`](https://github.com/TanStack/query/commit/1ef42087c9a266c2137d2ef645cbcc662f60ac93), [`5981771`](https://github.com/TanStack/query/commit/5981771abec9330b344a2617543eb05ba7c99e24), [`4a9bef6`](https://github.com/TanStack/query/commit/4a9bef6cf19b1cd6b014032d696129f12a848185), [`bef4bc7`](https://github.com/TanStack/query/commit/bef4bc780ce7cca32b7e3dea85f77d92f82a62a2), [`9656dc4`](https://github.com/TanStack/query/commit/9656dc4e5fef5f8c502579b52459f9e8c72e787c), [`326aaf1`](https://github.com/TanStack/query/commit/326aaf1333e5d9cbc46569c53f218d31684162d2), [`3e83601`](https://github.com/TanStack/query/commit/3e836010032c2586e9f1c66a271fa9114a6401f9), [`c6fc17c`](https://github.com/TanStack/query/commit/c6fc17cfad6e452261c585fabfb8c210e60531ed)]: - - @tanstack/query-core@5.102.0 - -## 5.101.4 - -### Patch Changes - -- Updated dependencies []: - - @tanstack/query-core@5.101.4 - -## 5.101.3 - -### Patch Changes - -- Updated dependencies [[`7e3c822`](https://github.com/TanStack/query/commit/7e3c822a10896f41a8f1031c16b85096277af677)]: - - @tanstack/query-core@5.101.3 - -## 5.101.2 - -### Patch Changes - -- Updated dependencies []: - - @tanstack/query-core@5.101.2 - -## 5.101.1 - -### Patch Changes - -- Updated dependencies [[`9eff92e`](https://github.com/TanStack/query/commit/9eff92ed86e284ec0125b3a3539d028688235bd1)]: - - @tanstack/query-core@5.101.1 - -## 5.101.0 - -### Patch Changes - -- Updated dependencies []: - - @tanstack/query-core@5.101.0 - -## 5.100.14 - -### Patch Changes - -- Updated dependencies []: - - @tanstack/query-core@5.100.14 - -## 5.100.13 - -### Patch Changes - -- Updated dependencies [[`d423168`](https://github.com/TanStack/query/commit/d423168f6261a5cb3d353e53b27c8150cc271151)]: - - @tanstack/query-core@5.100.13 - -## 5.100.12 - -### Patch Changes - -- Updated dependencies []: - - @tanstack/query-core@5.100.12 - -## 5.100.11 - -### Patch Changes - -- Updated dependencies []: - - @tanstack/query-core@5.100.11 - -## 5.100.10 - -### Patch Changes - -- Updated dependencies []: - - @tanstack/query-core@5.100.10 - -## 5.100.9 - -### Patch Changes - -- Add theme option support to Angular floating devtools. ([#10609](https://github.com/TanStack/query/pull/10609)) - -- Updated dependencies [[`fcee7bd`](https://github.com/TanStack/query/commit/fcee7bdc429385ae8ffa224fa8a7a9ec7b8ee380)]: - - @tanstack/query-core@5.100.9 - -## 5.100.8 - -### Patch Changes - -- Updated dependencies []: - - @tanstack/query-core@5.100.8 - -## 5.100.7 - -### Patch Changes - -- docs(devtools): align logo, panel, and 'buttonPosition' union descriptions across docs and JSDoc ([#10617](https://github.com/TanStack/query/pull/10617)) - -- Updated dependencies []: - - @tanstack/query-core@5.100.7 - -## 5.100.6 - -### Patch Changes - -- Updated dependencies []: - - @tanstack/query-core@5.100.6 - -## 5.100.5 - -### Patch Changes - -- Updated dependencies [[`a53ef97`](https://github.com/TanStack/query/commit/a53ef97f87decb8ea2431710f5199431d3c94c8d)]: - - @tanstack/query-core@5.100.5 - -## 5.100.4 - -### Patch Changes - -- fix(devtools): change onClose callback type from () => unknown to () => void ([#10118](https://github.com/TanStack/query/pull/10118)) - -- Updated dependencies []: - - @tanstack/query-core@5.100.4 - -## 5.100.3 - -### Patch Changes - -- Updated dependencies [[`f85d825`](https://github.com/TanStack/query/commit/f85d825e02efbbff02e2081528ed28f5e5382f7a)]: - - @tanstack/query-core@5.100.3 - -## 5.100.2 - -### Patch Changes - -- Updated dependencies [[`ea4497e`](https://github.com/TanStack/query/commit/ea4497e8aa00d8c1c3a36fb1e17563a889d6ab31), [`d6a7bf3`](https://github.com/TanStack/query/commit/d6a7bf3e3e024c1a77d0536813238cc8007a5fa7), [`645d5d1`](https://github.com/TanStack/query/commit/645d5d130f5e8017cb1bf1a37987f7b980aed705)]: - - @tanstack/query-core@5.100.2 - -## 5.100.1 - -### Patch Changes - -- Updated dependencies [[`1bb0d23`](https://github.com/TanStack/query/commit/1bb0d234280fd4ae1725c439088426a20593a8df)]: - - @tanstack/query-core@5.100.1 - -## 5.100.0 - -### Patch Changes - -- Updated dependencies [[`6540a41`](https://github.com/TanStack/query/commit/6540a4126b1c087d86d64525e78f32d9920dcd31)]: - - @tanstack/query-core@5.100.0 - -## 5.99.2 - -### Patch Changes - -- Updated dependencies []: - - @tanstack/query-core@5.99.2 - -## 5.99.1 - -### Patch Changes - -- Updated dependencies []: - - @tanstack/query-core@5.99.1 - -## 5.99.0 - -### Patch Changes - -- Updated dependencies []: - - @tanstack/query-core@5.99.0 - -## 5.98.0 - -### Patch Changes - -- Updated dependencies []: - - @tanstack/query-core@5.98.0 - -## 5.97.0 - -### Patch Changes - -- Updated dependencies [[`2bfb12c`](https://github.com/TanStack/query/commit/2bfb12cc44f1d8495106136e4ddacb817135f8f9)]: - - @tanstack/query-core@5.97.0 - -## 5.96.2 - -### Patch Changes - -- Updated dependencies []: - - @tanstack/query-core@5.96.2 - -## 5.96.1 - -### Patch Changes - -- Updated dependencies []: - - @tanstack/query-core@5.96.1 - -## 5.96.0 - -### Patch Changes - -- Updated dependencies []: - - @tanstack/query-core@5.96.0 - -## 5.95.2 - -### Patch Changes - -- Updated dependencies [[`cd5a35b`](https://github.com/TanStack/query/commit/cd5a35b328837781aa4f9305bb2bd7877ca934e9)]: - - @tanstack/query-core@5.95.2 - -## 5.95.1 - -### Patch Changes - -- Updated dependencies [[`1f1775c`](https://github.com/TanStack/query/commit/1f1775ca92f2b6c035682947ff3b3424804ff31a)]: - - @tanstack/query-core@5.95.1 - -## 5.95.0 - -### Patch Changes - -- Updated dependencies []: - - @tanstack/query-core@5.95.0 - -## 5.94.5 - -### Patch Changes - -- fix(\*): resolve issue about excluded build directory ([#10312](https://github.com/TanStack/query/pull/10312)) - -- Updated dependencies [[`4b6536d`](https://github.com/TanStack/query/commit/4b6536dfce99036f4e37f52943c6fed3ad0e0a18)]: - - @tanstack/query-core@5.94.5 - -## 5.94.4 - -### Patch Changes - -- chore: fixed version ([#10064](https://github.com/TanStack/query/pull/10064)) - -- Updated dependencies [[`4c75210`](https://github.com/TanStack/query/commit/4c75210ce8235fe3d39b67e1029eff11278927cc)]: - - @tanstack/query-core@5.94.4 - -## 5.90.28 - -### Patch Changes - -- fix(streamedQuery): maintain error state on reset refetch with initialData defined ([#10287](https://github.com/TanStack/query/pull/10287)) - -- Updated dependencies [[`248975e`](https://github.com/TanStack/query/commit/248975e896f585f6eaa505c796e73fcf7bfd1eec)]: - - @tanstack/query-core@5.91.2 - -## 5.90.27 - -### Patch Changes - -- Updated dependencies [[`a89aab9`](https://github.com/TanStack/query/commit/a89aab975581c25c113a26c8af486b4cafad272a)]: - - @tanstack/query-core@5.91.1 - -## 5.90.26 - -### Patch Changes - -- Updated dependencies [[`6fa901b`](https://github.com/TanStack/query/commit/6fa901b97a22a80d0fca3f6ed86237ff0cbdd13b)]: - - @tanstack/query-core@5.91.0 - -## 5.90.25 - -## 5.90.24 - -### Patch Changes - -- Updated dependencies [[`e7258c5`](https://github.com/TanStack/query/commit/e7258c5cb30cafa456cdb4e6bc75b43bf619954d)]: - - @tanstack/query-core@5.90.20 - -## 5.90.23 - -### Patch Changes - -- Updated dependencies [[`53fc74e`](https://github.com/TanStack/query/commit/53fc74ebb16730bd3317f039a69c6821386bae93)]: - - @tanstack/query-core@5.90.19 - -## 5.90.22 - -### Patch Changes - -- Updated dependencies [[`dea1614`](https://github.com/TanStack/query/commit/dea1614aaad5c572cf43cea54b64ac09dc4d5b41)]: - - @tanstack/query-core@5.90.18 - -## 5.90.21 - -### Patch Changes - -- Updated dependencies [[`269351b`](https://github.com/TanStack/query/commit/269351b8ce4b4846da3d320ac5b850ee6aada0d6)]: - - @tanstack/query-core@5.90.17 - -## 5.90.20 - -### Patch Changes - -- Updated dependencies [[`7f47906`](https://github.com/TanStack/query/commit/7f47906eaccc3f3aa5ce24b77a83bd7a620a237b)]: - - @tanstack/query-core@5.90.16 - -## 5.90.19 - -### Patch Changes - -- Updated dependencies [[`fccef79`](https://github.com/TanStack/query/commit/fccef797d57d4a9566517bba87c8377f363920f2)]: - - @tanstack/query-core@5.90.15 - -## 5.90.18 - -### Patch Changes - -- Updated dependencies [[`d576092`](https://github.com/TanStack/query/commit/d576092e2ece4ca3936add3eb0da5234c1d82ed4)]: - - @tanstack/query-core@5.90.14 - -## 5.90.17 - -### Patch Changes - -- Updated dependencies [[`4a0a78a`](https://github.com/TanStack/query/commit/4a0a78afbc2432f8cb6828035965853fa98c86a0)]: - - @tanstack/query-core@5.90.13 - -## 5.90.16 - -### Patch Changes - -- Updated dependencies [[`72d8ac5`](https://github.com/TanStack/query/commit/72d8ac5c592004b8f9c3ee086fcb9c3cd615ca05)]: - - @tanstack/query-core@5.90.12 - -## 5.90.15 - -### Patch Changes - -- Updated dependencies [[`c01b150`](https://github.com/TanStack/query/commit/c01b150e3673e11d6533768529a5e6fe3ebee68c)]: - - @tanstack/query-core@5.90.11 - -## 5.90.14 - -## 5.90.13 - -## 5.90.12 - -### Patch Changes - -- Updated dependencies [[`8e2e174`](https://github.com/TanStack/query/commit/8e2e174e9fd2e7b94cd232041e49c9d014d74e26), [`eb559a6`](https://github.com/TanStack/query/commit/eb559a66dc0d77dd46435f624fa64fc068bef9ae)]: - - @tanstack/query-core@5.90.10 - -## 5.90.11 - -### Patch Changes - -- Updated dependencies [[`08b211f`](https://github.com/TanStack/query/commit/08b211f8aa475e05d2f13a36517fc556861ef962)]: - - @tanstack/query-core@5.90.9 - -## 5.90.10 - -### Patch Changes - -- Updated dependencies [[`c0ec9fe`](https://github.com/TanStack/query/commit/c0ec9fe0d1426fe3f233adda3ebf23989ffaa110)]: - - @tanstack/query-core@5.90.8 - -## 5.90.9 - -### Patch Changes - -- Updated dependencies [[`b4cd121`](https://github.com/TanStack/query/commit/b4cd121a39d07cefaa3a3411136d342cc54ce8fb)]: - - @tanstack/query-core@5.90.7 - -## 5.90.8 - -### Patch Changes - -- Updated dependencies [[`1638c02`](https://github.com/TanStack/query/commit/1638c028df55648995d04431179904371a189772)]: - - @tanstack/query-core@5.90.6 - -## 5.90.7 - -### Patch Changes - -- Make `injectIsMutating` signal read-only to prevent external modifications to the internal state ([#9801](https://github.com/TanStack/query/pull/9801)) - -## 5.90.6 - -### Patch Changes - -- Rename `DeveloperToolsFeature` to `DevtoolsFeature` for consistency with internal naming conventions and ecosystem ([#9794](https://github.com/TanStack/query/pull/9794)) - -## 5.90.5 - -### Patch Changes - -- Updated dependencies [[`e42ddfe`](https://github.com/TanStack/query/commit/e42ddfe919f34f847ca101aeef162c69845f9a1e)]: - - @tanstack/query-core@5.90.5 - -## 5.90.4 - -### Patch Changes - -- Updated dependencies [[`20ef922`](https://github.com/TanStack/query/commit/20ef922a0a7c3aee00150bf69123c338b0922922)]: - - @tanstack/query-core@5.90.4 - -## 5.90.3 - -### Patch Changes - -- Updated dependencies [[`4e1c433`](https://github.com/TanStack/query/commit/4e1c4338a72f7384600bbda99e44bc1891695df4)]: - - @tanstack/query-core@5.90.3 diff --git a/packages/angular-query-experimental/package.json b/packages/angular-query-experimental/package.json deleted file mode 100644 index 05ea9c65728..00000000000 --- a/packages/angular-query-experimental/package.json +++ /dev/null @@ -1,103 +0,0 @@ -{ - "name": "@tanstack/angular-query-experimental", - "version": "5.107.1", - "description": "Signals for managing, caching and syncing asynchronous and remote data in Angular", - "author": "Arnoud de Vries", - "license": "MIT", - "repository": { - "type": "git", - "url": "git+https://github.com/TanStack/query.git", - "directory": "packages/angular-query-experimental" - }, - "homepage": "https://tanstack.com/query", - "funding": { - "type": "github", - "url": "https://github.com/sponsors/tannerlinsley" - }, - "keywords": [ - "angular query", - "angular", - "cache", - "performance", - "reactive", - "rxjs", - "signals", - "state management", - "state", - "tanstack" - ], - "scripts": { - "clean": "premove ./dist ./coverage ./dist-ts ./.cache/test-types", - "compile": "tsc --project tsconfig.json", - "test:oxlint": "oxlint ./src", - "test:types": "npm-run-all --serial test:types:*", - "test:types:ts57": "node ../../node_modules/typescript57/lib/tsc.js --project tsconfig.legacy.json --outDir .cache/test-types/ts57 --tsBuildInfoFile .cache/test-types/ts57.tsbuildinfo", - "test:types:ts58": "node ../../node_modules/typescript58/lib/tsc.js --project tsconfig.legacy.json --outDir .cache/test-types/ts58 --tsBuildInfoFile .cache/test-types/ts58.tsbuildinfo", - "test:types:ts59": "node ../../node_modules/typescript59/lib/tsc.js --project tsconfig.legacy.json --outDir .cache/test-types/ts59 --tsBuildInfoFile .cache/test-types/ts59.tsbuildinfo", - "test:types:tscurrent": "tsc --project tsconfig.json --outDir .cache/test-types/tscurrent --tsBuildInfoFile .cache/test-types/tscurrent.tsbuildinfo", - "test:types:ts70": "node ../../node_modules/typescript70/lib/tsc.js --project tsconfig.legacy.json --outDir .cache/test-types/ts70 --tsBuildInfoFile .cache/test-types/ts70.tsbuildinfo", - "test:types:ts71": "node ../../node_modules/typescript71/lib/tsc.js --project tsconfig.legacy.json --outDir .cache/test-types/ts71 --tsBuildInfoFile .cache/test-types/ts71.tsbuildinfo", - "test:lib": "vitest", - "test:lib:dev": "pnpm run test:lib --watch", - "build": "tsdown --tsconfig tsconfig.prod.json" - }, - "type": "module", - "types": "dist/index.d.mts", - "module": "dist/index.mjs", - "exports": { - ".": { - "@tanstack/custom-condition": "./src/index.ts", - "types": "./dist/index.d.mts", - "default": "./dist/index.mjs" - }, - "./inject-queries-experimental": { - "types": "./dist/inject-queries-experimental/index.d.mts", - "default": "./dist/inject-queries-experimental/index.mjs" - }, - "./devtools": { - "types": "./dist/devtools/index.d.mts", - "development": "./dist/devtools/index.mjs", - "default": "./dist/devtools/stub.mjs" - }, - "./devtools/production": { - "types": "./dist/devtools/production/index.d.mts", - "default": "./dist/devtools/index.mjs" - }, - "./devtools-panel": { - "types": "./dist/devtools-panel/index.d.mts", - "development": "./dist/devtools-panel/index.mjs", - "default": "./dist/devtools-panel/stub.mjs" - }, - "./devtools-panel/production": { - "types": "./dist/devtools-panel/production/index.d.mts", - "default": "./dist/devtools-panel/index.mjs" - } - }, - "sideEffects": false, - "files": [ - "dist", - "src" - ], - "dependencies": { - "@tanstack/query-core": "workspace:*" - }, - "devDependencies": { - "@analogjs/vite-plugin-angular": "catalog:", - "@angular/common": "catalog:", - "@angular/compiler": "catalog:", - "@angular/core": "catalog:", - "@angular/platform-browser": "catalog:", - "@oxc-project/runtime": "^0.151.0", - "@tanstack/query-test-utils": "workspace:*", - "@testing-library/angular": "catalog:", - "rxjs": "^7.8.2", - "typescript": "catalog:" - }, - "optionalDependencies": { - "@tanstack/query-devtools": "workspace:*" - }, - "peerDependencies": { - "@angular/common": ">=16.0.0", - "@angular/core": ">=16.0.0" - } -} diff --git a/packages/angular-query-experimental/src/__tests__/inject-infinite-query.test-d.ts b/packages/angular-query-experimental/src/__tests__/inject-infinite-query.test-d.ts deleted file mode 100644 index 1809aa6c714..00000000000 --- a/packages/angular-query-experimental/src/__tests__/inject-infinite-query.test-d.ts +++ /dev/null @@ -1,66 +0,0 @@ -import { TestBed } from '@angular/core/testing' -import { afterEach, beforeEach, describe, expectTypeOf, it, vi } from 'vitest' -import { provideZonelessChangeDetection } from '@angular/core' -import { createKey, sleep } from '@tanstack/query-test-utils' -import { - QueryClient, - injectInfiniteQuery, - provideTanStackQuery, - skipToken, -} from '..' -import type { InfiniteData } from '@tanstack/query-core' - -describe('injectInfiniteQuery', () => { - let queryClient: QueryClient - - beforeEach(() => { - queryClient = new QueryClient() - vi.useFakeTimers() - TestBed.configureTestingModule({ - providers: [ - provideZonelessChangeDetection(), - provideTanStackQuery(queryClient), - ], - }) - }) - - afterEach(() => { - vi.useRealTimers() - }) - - it('should narrow type after isSuccess', () => { - const key = createKey() - const query = TestBed.runInInjectionContext(() => { - return injectInfiniteQuery(() => ({ - queryKey: key, - queryFn: ({ pageParam }) => - sleep(0).then(() => 'data on page ' + pageParam), - initialPageParam: 0, - getNextPageParam: () => 12, - })) - }) - - if (query.isSuccess()) { - const data = query.data() - expectTypeOf(data).toEqualTypeOf>() - } - }) - - it('should work when queryFn is skipToken', () => { - const key = createKey() - const query = TestBed.runInInjectionContext(() => { - return injectInfiniteQuery(() => ({ - queryKey: key, - queryFn: skipToken, - initialPageParam: 0, - getNextPageParam: () => 1, - })) - }) - - // TPageParam falls back to `unknown` here (unlike `infiniteQueryOptions`, which infers - // `number` for the same options) because there's no skipToken-specific overload to carry it. - expectTypeOf(query.data()).toEqualTypeOf< - InfiniteData | undefined - >() - }) -}) diff --git a/packages/angular-query-experimental/src/__tests__/inject-infinite-query.test.ts b/packages/angular-query-experimental/src/__tests__/inject-infinite-query.test.ts deleted file mode 100644 index afe0f508dc6..00000000000 --- a/packages/angular-query-experimental/src/__tests__/inject-infinite-query.test.ts +++ /dev/null @@ -1,222 +0,0 @@ -import { TestBed } from '@angular/core/testing' -import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest' -import { - Component, - Injector, - provideZonelessChangeDetection, - signal, -} from '@angular/core' -import { render } from '@testing-library/angular' -import { createKey, sleep } from '@tanstack/query-test-utils' -import { - QueryClient, - injectInfiniteQuery, - provideTanStackQuery, - skipToken, -} from '..' - -describe('injectInfiniteQuery', () => { - let queryClient: QueryClient - - beforeEach(() => { - queryClient = new QueryClient() - vi.useFakeTimers() - TestBed.configureTestingModule({ - providers: [ - provideZonelessChangeDetection(), - provideTanStackQuery(queryClient), - ], - }) - }) - - afterEach(() => { - vi.useRealTimers() - }) - - it('should properly execute infinite query', async () => { - const key = createKey() - - @Component({ - template: ` -
status: {{ query.status() }}
-
pages: {{ query.data()?.pages?.join(', ') ?? 'none' }}
- `, - }) - class Page { - readonly query = injectInfiniteQuery(() => ({ - queryKey: key, - queryFn: ({ pageParam }) => - sleep(10).then(() => 'data on page ' + pageParam), - initialPageParam: 0, - getNextPageParam: () => 12, - })) - } - - const rendered = await render(Page) - - expect(rendered.getByText('status: pending')).toBeInTheDocument() - expect(rendered.getByText('pages: none')).toBeInTheDocument() - await vi.advanceTimersByTimeAsync(11) - rendered.fixture.detectChanges() - expect(rendered.getByText('status: success')).toBeInTheDocument() - expect(rendered.getByText('pages: data on page 0')).toBeInTheDocument() - - rendered.fixture.componentInstance.query.fetchNextPage() - await vi.advanceTimersByTimeAsync(11) - rendered.fixture.detectChanges() - expect(rendered.getByText('status: success')).toBeInTheDocument() - expect( - rendered.getByText('pages: data on page 0, data on page 12'), - ).toBeInTheDocument() - }) - - it('should reject and update signal', async () => { - const key = createKey() - - @Component({ - template: ` -
status: {{ query.status() }}
-
pages: {{ query.data()?.pages?.join(', ') ?? 'none' }}
-
error: {{ query.error()?.message ?? 'none' }}
-
isError: {{ query.isError() }}
-
failureCount: {{ query.failureCount() }}
- `, - }) - class Page { - readonly query = injectInfiniteQuery(() => ({ - retry: false, - queryKey: key, - queryFn: () => - sleep(10).then(() => Promise.reject(new Error('Some error'))), - initialPageParam: 0, - getNextPageParam: () => 12, - })) - } - - const rendered = await render(Page) - - expect(rendered.getByText('status: pending')).toBeInTheDocument() - expect(rendered.getByText('pages: none')).toBeInTheDocument() - await vi.advanceTimersByTimeAsync(11) - rendered.fixture.detectChanges() - expect(rendered.getByText('status: error')).toBeInTheDocument() - expect(rendered.getByText('pages: none')).toBeInTheDocument() - expect(rendered.getByText('error: Some error')).toBeInTheDocument() - expect(rendered.getByText('isError: true')).toBeInTheDocument() - expect(rendered.getByText('failureCount: 1')).toBeInTheDocument() - }) - - it('should keep initialData visible alongside the error when a refetch fails', async () => { - const key = createKey() - - @Component({ - template: ` -
pages: {{ query.data().pages.join(', ') }}
-
isError: {{ query.isError() }}
- `, - }) - class Page { - readonly query = injectInfiniteQuery(() => ({ - queryKey: key, - queryFn: () => - sleep(10).then(() => Promise.reject(new Error('Some error'))), - initialData: { pages: [1], pageParams: [1] }, - getNextPageParam: (lastPage: number) => lastPage + 1, - initialPageParam: 0, - retry: false, - })) - } - - const rendered = await render(Page) - - expect(rendered.getByText('pages: 1')).toBeInTheDocument() - expect(rendered.getByText('isError: false')).toBeInTheDocument() - await vi.advanceTimersByTimeAsync(11) - rendered.fixture.detectChanges() - expect(rendered.getByText('pages: 1')).toBeInTheDocument() - expect(rendered.getByText('isError: true')).toBeInTheDocument() - }) - - describe('skipToken', () => { - it('should not fetch when queryFn is skipToken, and fetch once it is replaced', async () => { - const key = createKey() - const queryFn = vi.fn< - (context: { pageParam: number }) => Promise - >(({ pageParam }: { pageParam: number }) => - sleep(10).then(() => `comments for 1 page ${pageParam}`), - ) - - @Component({ - template: ` -
status: {{ query.status() }}
-
isFetching: {{ query.isFetching() }}
-
pages: {{ query.data()?.pages?.join(', ') ?? 'none' }}
- `, - }) - class Page { - postId = signal(undefined) - - readonly query = injectInfiniteQuery(() => ({ - queryKey: key, - queryFn: this.postId() != null ? queryFn : skipToken, - initialPageParam: 0, - getNextPageParam: () => 12, - })) - } - - const rendered = await render(Page) - - expect(rendered.getByText('status: pending')).toBeInTheDocument() - expect(rendered.getByText('isFetching: false')).toBeInTheDocument() - await vi.advanceTimersByTimeAsync(11) - rendered.fixture.detectChanges() - expect(queryFn).not.toHaveBeenCalled() - expect(rendered.getByText('status: pending')).toBeInTheDocument() - expect(rendered.getByText('isFetching: false')).toBeInTheDocument() - - rendered.fixture.componentInstance.postId.set('1') - rendered.fixture.detectChanges() - expect(rendered.getByText('isFetching: true')).toBeInTheDocument() - await vi.advanceTimersByTimeAsync(11) - rendered.fixture.detectChanges() - expect(queryFn).toHaveBeenCalledTimes(1) - expect(rendered.getByText('status: success')).toBeInTheDocument() - expect( - rendered.getByText('pages: comments for 1 page 0'), - ).toBeInTheDocument() - }) - }) - - describe('injection context', () => { - it('should throw NG0203 with descriptive error outside injection context', () => { - const key = createKey() - expect(() => { - injectInfiniteQuery(() => ({ - queryKey: key, - queryFn: ({ pageParam }) => - sleep(0).then(() => 'data on page ' + pageParam), - initialPageParam: 0, - getNextPageParam: () => 12, - })) - }).toThrow(/NG0203(.*?)injectInfiniteQuery/) - }) - - it('should be usable outside injection context when passing an injector', () => { - const key = createKey() - const query = injectInfiniteQuery( - () => ({ - queryKey: key, - queryFn: ({ pageParam }) => - sleep(0).then(() => 'data on page ' + pageParam), - initialPageParam: 0, - getNextPageParam: () => 12, - }), - { - injector: TestBed.inject(Injector), - }, - ) - - expect(query.status()).toBe('pending') - }) - }) -}) diff --git a/packages/angular-query-experimental/src/__tests__/inject-is-restoring.test.ts b/packages/angular-query-experimental/src/__tests__/inject-is-restoring.test.ts deleted file mode 100644 index 72ca01f9d69..00000000000 --- a/packages/angular-query-experimental/src/__tests__/inject-is-restoring.test.ts +++ /dev/null @@ -1,93 +0,0 @@ -import { TestBed } from '@angular/core/testing' -import { beforeEach, describe, expect, it } from 'vitest' -import { Injector, provideZonelessChangeDetection, signal } from '@angular/core' -import { - QueryClient, - injectIsRestoring, - provideIsRestoring, - provideTanStackQuery, -} from '..' - -describe('injectIsRestoring', () => { - let queryClient: QueryClient - - beforeEach(() => { - queryClient = new QueryClient() - TestBed.configureTestingModule({ - providers: [ - provideZonelessChangeDetection(), - provideTanStackQuery(queryClient), - ], - }) - }) - - it('should return false by default when provideIsRestoring is not used', () => { - const isRestoring = TestBed.runInInjectionContext(() => { - return injectIsRestoring() - }) - - expect(isRestoring()).toBe(false) - }) - - it('should return the provided signal value when provideIsRestoring is used', () => { - const restoringSignal = signal(true) - - TestBed.configureTestingModule({ - providers: [provideIsRestoring(restoringSignal.asReadonly())], - }) - - const isRestoring = TestBed.runInInjectionContext(() => { - return injectIsRestoring() - }) - - expect(isRestoring()).toBe(true) - }) - - it('should reactively reflect changes to the provided signal', () => { - const restoringSignal = signal(true) - - TestBed.configureTestingModule({ - providers: [provideIsRestoring(restoringSignal.asReadonly())], - }) - - const isRestoring = TestBed.runInInjectionContext(() => { - return injectIsRestoring() - }) - - expect(isRestoring()).toBe(true) - - restoringSignal.set(false) - expect(isRestoring()).toBe(false) - - restoringSignal.set(true) - expect(isRestoring()).toBe(true) - }) - - it('should be usable outside injection context when passing an injector', () => { - const isRestoring = injectIsRestoring({ - injector: TestBed.inject(Injector), - }) - - expect(isRestoring()).toBe(false) - }) - - it('should return the provided signal value when using injector option', () => { - const restoringSignal = signal(true) - - TestBed.configureTestingModule({ - providers: [provideIsRestoring(restoringSignal.asReadonly())], - }) - - const isRestoring = injectIsRestoring({ - injector: TestBed.inject(Injector), - }) - - expect(isRestoring()).toBe(true) - }) - - it('should throw NG0203 with descriptive error outside injection context', () => { - expect(() => { - injectIsRestoring() - }).toThrow(/NG0203(.*?)injectIsRestoring/) - }) -}) diff --git a/packages/angular-query-experimental/src/__tests__/inject-queries.test-d.ts b/packages/angular-query-experimental/src/__tests__/inject-queries.test-d.ts deleted file mode 100644 index 554ad018655..00000000000 --- a/packages/angular-query-experimental/src/__tests__/inject-queries.test-d.ts +++ /dev/null @@ -1,196 +0,0 @@ -import { describe, expectTypeOf, it } from 'vitest' -import { createKey } from '@tanstack/query-test-utils' -import { skipToken } from '..' -import { injectQueries } from '../inject-queries' -import { queryOptions } from '../query-options' -import type { CreateQueryOptions, CreateQueryResult, OmitKeyof } from '..' -import type { Signal } from '@angular/core' - -describe('injectQueries', () => { - describe('config object overload', () => { - it('should always define TData when initialData is provided as an object', () => { - const key1 = createKey() - const key2 = createKey() - const key3 = createKey() - - const query1 = { - queryKey: key1, - queryFn: () => { - return { - wow: true, - } - }, - initialData: { - wow: false, - }, - } - - const query2 = { - queryKey: key2, - queryFn: () => 'Query Data', - initialData: 'initial data', - } - - const query3 = { - queryKey: key3, - queryFn: () => 'Query Data', - } - - const queryResults = injectQueries(() => ({ - queries: [query1, query2, query3], - })) - - const query1Data = queryResults()[0].data() - const query2Data = queryResults()[1].data() - const query3Data = queryResults()[2].data() - - expectTypeOf(query1Data).toEqualTypeOf<{ wow: boolean }>() - expectTypeOf(query2Data).toEqualTypeOf() - expectTypeOf(query3Data).toEqualTypeOf() - }) - - it('should define TData when passed through queryOptions', () => { - const key = createKey() - const options = queryOptions({ - queryKey: key, - queryFn: () => { - return { - wow: true, - } - }, - initialData: { - wow: true, - }, - }) - const queryResults = injectQueries(() => ({ queries: [options] })) - - const data = queryResults()[0].data() - - expectTypeOf(data).toEqualTypeOf<{ wow: boolean }>() - }) - - it('should be possible to define a different TData than TQueryFnData using select with queryOptions spread into injectQuery', () => { - const key1 = createKey() - const key2 = createKey() - - const query1 = queryOptions({ - queryKey: key1, - queryFn: () => Promise.resolve(1), - select: (data) => data > 1, - }) - - const query2 = { - queryKey: key2, - queryFn: () => Promise.resolve(1), - select: (data: number) => data > 1, - } - - const queryResults = injectQueries(() => ({ queries: [query1, query2] })) - const query1Data = queryResults()[0].data() - const query2Data = queryResults()[1].data() - - expectTypeOf(query1Data).toEqualTypeOf() - expectTypeOf(query2Data).toEqualTypeOf() - }) - - it('should have undefined in the TData union when initialData is provided as a function which can return undefined', () => { - const key = createKey() - const queryResults = injectQueries(() => ({ - queries: [ - { - queryKey: key, - queryFn: () => { - return { - wow: true, - } - }, - initialData: () => undefined as { wow: boolean } | undefined, - }, - ], - })) - - const data = queryResults()[0].data() - - expectTypeOf(data).toEqualTypeOf<{ wow: boolean } | undefined>() - }) - - describe('custom injectable', () => { - it('should allow custom hooks using UseQueryOptions', () => { - type Data = string - const key = createKey() - - const injectCustomQueries = ( - options?: OmitKeyof, 'queryKey' | 'queryFn'>, - ) => { - return injectQueries(() => ({ - queries: [ - { - ...options, - queryKey: key, - queryFn: () => Promise.resolve('data'), - }, - ], - })) - } - - const queryResults = injectCustomQueries() - const data = queryResults()[0].data() - - expectTypeOf(data).toEqualTypeOf() - }) - }) - - it('should have correct TData type when conditional skipToken is passed', () => { - const key = createKey() - const queryResults = injectQueries(() => ({ - queries: [ - { - queryKey: key, - queryFn: Math.random() > 0.5 ? skipToken : () => Promise.resolve(5), - }, - ], - })) - - const firstResult = queryResults()[0] - - expectTypeOf(firstResult).toEqualTypeOf< - CreateQueryResult - >() - expectTypeOf(firstResult.data()).toEqualTypeOf() - }) - - it('should return correct data for dynamic queries with mixed result types', () => { - const key1 = createKey() - const key2 = createKey() - - const Queries1 = { - get: () => - queryOptions({ - queryKey: key1, - queryFn: () => Promise.resolve(1), - }), - } - const Queries2 = { - get: () => - queryOptions({ - queryKey: key2, - queryFn: () => Promise.resolve(true), - }), - } - - const queries1List = [1, 2, 3].map(() => ({ ...Queries1.get() })) - const result = injectQueries(() => ({ - queries: [...queries1List, { ...Queries2.get() }], - })) - - expectTypeOf(result).branded.toEqualTypeOf< - Signal< - [ - ...Array>, - CreateQueryResult, - ] - > - >() - }) - }) -}) diff --git a/packages/angular-query-experimental/src/__tests__/inject-queries.test.ts b/packages/angular-query-experimental/src/__tests__/inject-queries.test.ts deleted file mode 100644 index 843d2cf96ee..00000000000 --- a/packages/angular-query-experimental/src/__tests__/inject-queries.test.ts +++ /dev/null @@ -1,239 +0,0 @@ -import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest' -import { - Component, - effect, - provideZonelessChangeDetection, - signal, -} from '@angular/core' -import { TestBed } from '@angular/core/testing' -import { render } from '@testing-library/angular' -import { createKey, sleep } from '@tanstack/query-test-utils' -import { QueryClient, provideIsRestoring, provideTanStackQuery } from '..' -import { injectQueries } from '../inject-queries' - -describe('injectQueries', () => { - let queryClient: QueryClient - - beforeEach(() => { - vi.useFakeTimers() - queryClient = new QueryClient() - TestBed.configureTestingModule({ - providers: [ - provideZonelessChangeDetection(), - provideTanStackQuery(queryClient), - ], - }) - }) - - afterEach(() => { - vi.useRealTimers() - }) - - it('should return the correct states', async () => { - const key1 = createKey() - const key2 = createKey() - const results: Array>> = [] - - @Component({ - template: ` -
-
- data1: {{ result()[0].data() ?? 'null' }}, data2: - {{ result()[1].data() ?? 'null' }} -
-
- `, - }) - class Page { - readonly result = injectQueries(() => ({ - queries: [ - { - queryKey: key1, - queryFn: () => sleep(10).then(() => 1), - }, - { - queryKey: key2, - queryFn: () => sleep(100).then(() => 2), - }, - ], - })) - - constructor() { - effect(() => { - const snapshot = this.result().map((q) => ({ data: q.data() })) - results.push(snapshot) - }) - } - } - - const rendered = await render(Page) - - await vi.advanceTimersByTimeAsync(101) - rendered.fixture.detectChanges() - expect(rendered.getByText('data1: 1, data2: 2')).toBeInTheDocument() - - expect(results).toHaveLength(3) - expect(results[0]).toMatchObject([{ data: undefined }, { data: undefined }]) - expect(results[1]).toMatchObject([{ data: 1 }, { data: undefined }]) - expect(results[2]).toMatchObject([{ data: 1 }, { data: 2 }]) - }) - - it('should return the combined result when combine is provided', async () => { - const key1 = createKey() - const key2 = createKey() - const results: Array> = [] - - @Component({ - template: ` -
data: {{ combined().data.join(',') }}
-
isPending: {{ combined().isPending }}
- `, - }) - class Page { - readonly combined = injectQueries(() => ({ - queries: [ - { - queryKey: key1, - queryFn: () => sleep(10).then(() => 1), - }, - { - queryKey: key2, - queryFn: () => sleep(10).then(() => 2), - }, - ], - combine: (queries) => ({ - data: queries.map((q) => q.data), - isPending: queries.some((q) => q.isPending), - }), - })) - - constructor() { - effect(() => { - results.push({ ...this.combined() }) - }) - } - } - - const rendered = await render(Page) - - expect(rendered.getByText('data: ,')).toBeInTheDocument() - expect(rendered.getByText('isPending: true')).toBeInTheDocument() - expect(results[0]).toMatchObject({ - data: [undefined, undefined], - isPending: true, - }) - await vi.advanceTimersByTimeAsync(11) - rendered.fixture.detectChanges() - expect(rendered.getByText('data: 1,2')).toBeInTheDocument() - expect(rendered.getByText('isPending: false')).toBeInTheDocument() - expect(results[results.length - 1]).toMatchObject({ - data: [1, 2], - isPending: false, - }) - expect(results.length).toBeGreaterThanOrEqual(2) - }) - - it('should reflect error state when one of the queries rejects', async () => { - const key1 = createKey() - const key2 = createKey() - - @Component({ - template: ` -
- status1: {{ result()[0].status() }}, error1: - {{ result()[0].error()?.message ?? 'none' }} -
-
- status2: {{ result()[1].status() }}, data2: - {{ result()[1].data() ?? 'none' }} -
- `, - }) - class Page { - readonly result = injectQueries(() => ({ - queries: [ - { - queryKey: key1, - queryFn: () => - sleep(10).then(() => Promise.reject(new Error('Some error'))), - retry: false, - }, - { - queryKey: key2, - queryFn: () => sleep(10).then(() => 2), - }, - ], - })) - } - - const rendered = await render(Page) - - await vi.advanceTimersByTimeAsync(11) - rendered.fixture.detectChanges() - expect( - rendered.getByText('status1: error, error1: Some error'), - ).toBeInTheDocument() - expect(rendered.getByText('status2: success, data2: 2')).toBeInTheDocument() - }) - - describe('isRestoring', () => { - it('should not fetch for the duration of the restoring period when isRestoring is true', async () => { - const key1 = createKey() - const key2 = createKey() - const queryFn1 = vi.fn<() => Promise>(() => - sleep(10).then(() => 1), - ) - const queryFn2 = vi.fn<() => Promise>(() => - sleep(10).then(() => 2), - ) - - TestBed.configureTestingModule({ - providers: [provideIsRestoring(signal(true).asReadonly())], - }) - - @Component({ - template: ` -
- status1: {{ queries()[0].status() }}, fetchStatus1: - {{ queries()[0].fetchStatus() }} -
-
- status2: {{ queries()[1].status() }}, fetchStatus2: - {{ queries()[1].fetchStatus() }} -
- `, - }) - class Page { - readonly queries = injectQueries(() => ({ - queries: [ - { queryKey: key1, queryFn: queryFn1 }, - { queryKey: key2, queryFn: queryFn2 }, - ], - })) - } - - const rendered = await render(Page) - - await vi.advanceTimersByTimeAsync(0) - rendered.fixture.detectChanges() - expect( - rendered.getByText('status1: pending, fetchStatus1: idle'), - ).toBeInTheDocument() - expect( - rendered.getByText('status2: pending, fetchStatus2: idle'), - ).toBeInTheDocument() - expect(queryFn1).toHaveBeenCalledTimes(0) - expect(queryFn2).toHaveBeenCalledTimes(0) - await vi.advanceTimersByTimeAsync(11) - rendered.fixture.detectChanges() - expect( - rendered.getByText('status1: pending, fetchStatus1: idle'), - ).toBeInTheDocument() - expect( - rendered.getByText('status2: pending, fetchStatus2: idle'), - ).toBeInTheDocument() - expect(queryFn1).toHaveBeenCalledTimes(0) - expect(queryFn2).toHaveBeenCalledTimes(0) - }) - }) -}) diff --git a/packages/angular-query-experimental/src/__tests__/inject-query.test-d.ts b/packages/angular-query-experimental/src/__tests__/inject-query.test-d.ts deleted file mode 100644 index f7017d41193..00000000000 --- a/packages/angular-query-experimental/src/__tests__/inject-query.test-d.ts +++ /dev/null @@ -1,357 +0,0 @@ -import { describe, expectTypeOf, it } from 'vitest' -import { createKey, sleep } from '@tanstack/query-test-utils' -import { injectQuery, queryOptions } from '..' -import type { Signal } from '@angular/core' -import type { CreateQueryOptions, OmitKeyof, QueryFunction } from '..' - -describe('injectQuery', () => { - it('should return the correct types', () => { - const key = createKey() - // unspecified query function should default to unknown - const noQueryFn = injectQuery(() => ({ - queryKey: key, - })) - expectTypeOf(noQueryFn.data()).toEqualTypeOf() - expectTypeOf(noQueryFn.error()).toEqualTypeOf() - - // it should infer the result type from the query function - const fromQueryFn = injectQuery(() => ({ - queryKey: key, - queryFn: () => 'test', - })) - expectTypeOf(fromQueryFn.data()).toEqualTypeOf() - expectTypeOf(fromQueryFn.error()).toEqualTypeOf() - - // it should be possible to specify the result type - const withResult = injectQuery(() => ({ - queryKey: key, - queryFn: () => 'test', - })) - expectTypeOf(withResult.data()).toEqualTypeOf() - expectTypeOf(withResult.error()).toEqualTypeOf() - - // it should be possible to specify the error type - type CustomErrorType = { message: string } - const withError = injectQuery(() => ({ - queryKey: key, - queryFn: () => 'test', - })) - expectTypeOf(withError.data()).toEqualTypeOf() - expectTypeOf(withError.error()).toEqualTypeOf() - - // it should infer the result type from the configuration - const withResultInfer = injectQuery(() => ({ - queryKey: key, - queryFn: () => true, - })) - expectTypeOf(withResultInfer.data()).toEqualTypeOf() - expectTypeOf(withResultInfer.error()).toEqualTypeOf() - - // it should be possible to specify a union type as result type - const unionTypeSync = injectQuery(() => ({ - queryKey: key, - queryFn: () => (Math.random() > 0.5 ? ('a' as const) : ('b' as const)), - })) - expectTypeOf(unionTypeSync.data()).toEqualTypeOf<'a' | 'b' | undefined>() - const unionTypeAsync = injectQuery<'a' | 'b'>(() => ({ - queryKey: key, - queryFn: () => Promise.resolve(Math.random() > 0.5 ? 'a' : 'b'), - })) - expectTypeOf(unionTypeAsync.data()).toEqualTypeOf<'a' | 'b' | undefined>() - - // it should error when the query function result does not match with the specified type - // @ts-expect-error - injectQuery(() => ({ queryKey: key, queryFn: () => 'test' })) - - // it should infer the result type from a generic query function - /** - * - */ - function queryFn(): Promise { - return Promise.resolve({} as T) - } - - const fromGenericQueryFn = injectQuery(() => ({ - queryKey: key, - queryFn: () => queryFn(), - })) - expectTypeOf(fromGenericQueryFn.data()).toEqualTypeOf() - expectTypeOf(fromGenericQueryFn.error()).toEqualTypeOf() - - type MyData = number - type MyQueryKey = readonly ['my-data', number] - - const getMyDataArrayKey: QueryFunction = ({ - queryKey: [, n], - }) => { - return n + 42 - } - - const fromMyDataArrayKeyQueryFn = injectQuery(() => ({ - queryKey: ['my-data', 100] as const, - queryFn: getMyDataArrayKey, - })) - expectTypeOf(fromMyDataArrayKeyQueryFn.data()).toEqualTypeOf< - number | undefined - >() - - // it should handle query-functions that return Promise - const fromPromiseAnyQueryFn = injectQuery(() => ({ - queryKey: key, - queryFn: () => fetch('return Promise').then((resp) => resp.json()), - })) - expectTypeOf(fromPromiseAnyQueryFn.data()).toEqualTypeOf() - - const getMyDataStringKey: QueryFunction = (context) => { - expectTypeOf(context.queryKey).toEqualTypeOf<['1']>() - return Number(context.queryKey[0]) + 42 - } - - const fromGetMyDataStringKeyQueryFn = injectQuery(() => ({ - queryKey: ['1'] as ['1'], - queryFn: getMyDataStringKey, - })) - expectTypeOf(fromGetMyDataStringKeyQueryFn.data()).toEqualTypeOf< - number | undefined - >() - - // handles wrapped queries with custom fetcher passed as inline queryFn - const createWrappedQuery = < - TQueryKey extends [string, Record?], - TQueryFnData, - TError, - TData = TQueryFnData, - >( - qk: TQueryKey, - fetcher: ( - obj: TQueryKey[1], - token: string, - // return type must be wrapped with TQueryFnReturn - ) => Promise, - options?: OmitKeyof< - CreateQueryOptions, - 'queryKey' | 'queryFn' | 'initialData', - 'safely' - >, - ) => - injectQuery(() => ({ - queryKey: qk, - queryFn: () => fetcher(qk[1], 'token'), - ...options, - })) - const fromWrappedQuery = createWrappedQuery([''], () => - Promise.resolve('1'), - ) - expectTypeOf(fromWrappedQuery.data()).toEqualTypeOf() - - // handles wrapped queries with custom fetcher passed directly to createQuery - const createWrappedFuncStyleQuery = < - TQueryKey extends [string, Record?], - TQueryFnData, - TError, - TData = TQueryFnData, - >( - qk: TQueryKey, - fetcher: () => Promise, - options?: OmitKeyof< - CreateQueryOptions, - 'queryKey' | 'queryFn' | 'initialData', - 'safely' - >, - ) => injectQuery(() => ({ queryKey: qk, queryFn: fetcher, ...options })) - const fromWrappedFuncStyleQuery = createWrappedFuncStyleQuery([''], () => - Promise.resolve(true), - ) - expectTypeOf(fromWrappedFuncStyleQuery.data()).toEqualTypeOf< - boolean | undefined - >() - }) - - describe('initialData', () => { - describe('Config object overload', () => { - it('should always define TData when initialData is provided as an object', () => { - const key = createKey() - const { data } = injectQuery(() => ({ - queryKey: key, - queryFn: () => ({ wow: true }), - initialData: { wow: true }, - })) - - expectTypeOf(data).toEqualTypeOf>() - }) - - it('should define TData when passed through queryOptions', () => { - const key = createKey() - const options = () => - queryOptions({ - queryKey: key, - queryFn: () => { - return { - wow: true, - } - }, - initialData: { - wow: true, - }, - }) - const { data } = injectQuery(options) - - expectTypeOf(data).toEqualTypeOf>() - }) - - it('should be possible to define a different TData than TQueryFnData using select with queryOptions spread into useQuery', () => { - const key = createKey() - const options = queryOptions({ - queryKey: key, - queryFn: () => Promise.resolve(1), - }) - - const query = injectQuery(() => ({ - ...options, - select: (data) => data > 1, - })) - - expectTypeOf(query.data).toEqualTypeOf>() - }) - - it('should always define TData when initialData is provided as a function which ALWAYS returns the data', () => { - const key = createKey() - const { data } = injectQuery(() => ({ - queryKey: key, - queryFn: () => { - return { - wow: true, - } - }, - initialData: () => ({ - wow: true, - }), - })) - - expectTypeOf(data).toEqualTypeOf>() - }) - - it('should have undefined in the TData union when initialData is NOT provided', () => { - const key = createKey() - const { data } = injectQuery(() => ({ - queryKey: key, - queryFn: () => { - return { - wow: true, - } - }, - })) - - expectTypeOf(data).toEqualTypeOf>() - }) - - it('should have undefined in the TData union when initialData is provided as a function which can return undefined', () => { - const key = createKey() - const { data } = injectQuery(() => ({ - queryKey: key, - queryFn: () => { - return { - wow: true, - } - }, - initialData: () => undefined as { wow: boolean } | undefined, - })) - - expectTypeOf(data).toEqualTypeOf>() - }) - - it('should narrow TData after an isSuccess check when initialData is provided as a function which can return undefined', () => { - const key = createKey() - const query = injectQuery(() => ({ - queryKey: key, - queryFn: () => { - return { - wow: true, - } - }, - initialData: () => undefined as { wow: boolean } | undefined, - })) - - if (query.isSuccess()) { - expectTypeOf(query.data).toEqualTypeOf>() - } - }) - }) - - describe('structuralSharing', () => { - it('should be able to use structuralSharing with unknown types', () => { - const key = createKey() - // https://github.com/TanStack/query/issues/6525#issuecomment-1938411343 - injectQuery(() => ({ - queryKey: key, - queryFn: () => 5, - structuralSharing: (oldData, newData) => { - expectTypeOf(oldData).toBeUnknown() - expectTypeOf(newData).toBeUnknown() - return newData - }, - })) - }) - }) - }) - - describe('Discriminated union return type', () => { - it('should have possibly undefined data by default', () => { - const key = createKey() - const query = injectQuery(() => ({ - queryKey: key, - queryFn: () => sleep(0).then(() => 'Some data'), - })) - - expectTypeOf(query.data).toEqualTypeOf>() - }) - - it('should have defined data when query is success', () => { - const key = createKey() - const query = injectQuery(() => ({ - queryKey: key, - queryFn: () => sleep(0).then(() => 'Some data'), - })) - - if (query.isSuccess()) { - expectTypeOf(query.data).toEqualTypeOf>() - } - }) - - it('should have null error when query is success', () => { - const key = createKey() - const query = injectQuery(() => ({ - queryKey: key, - queryFn: () => sleep(0).then(() => 'Some data'), - })) - - if (query.isSuccess()) { - expectTypeOf(query.error).toEqualTypeOf>() - } - }) - - it('should have undefined data when query is pending', () => { - const key = createKey() - const query = injectQuery(() => ({ - queryKey: key, - queryFn: () => sleep(0).then(() => 'Some data'), - })) - - if (query.isPending()) { - expectTypeOf(query.data).toEqualTypeOf>() - } - }) - - it('should have defined error when query is error', () => { - const key = createKey() - const query = injectQuery(() => ({ - queryKey: key, - queryFn: () => sleep(0).then(() => 'Some data'), - })) - - if (query.isError()) { - expectTypeOf(query.error).toEqualTypeOf>() - } - }) - }) -}) diff --git a/packages/angular-query-experimental/src/__tests__/inject-query.test.ts b/packages/angular-query-experimental/src/__tests__/inject-query.test.ts deleted file mode 100644 index 7a258334d88..00000000000 --- a/packages/angular-query-experimental/src/__tests__/inject-query.test.ts +++ /dev/null @@ -1,686 +0,0 @@ -import { - ApplicationRef, - Component, - Injector, - computed, - input, - provideZonelessChangeDetection, - signal, -} from '@angular/core' -import { TestBed } from '@angular/core/testing' -import { HttpClient, provideHttpClient } from '@angular/common/http' -import { - HttpTestingController, - provideHttpClientTesting, -} from '@angular/common/http/testing' -import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest' -import { render } from '@testing-library/angular' -import { createKey, sleep } from '@tanstack/query-test-utils' -import { lastValueFrom } from 'rxjs' -import { - QueryCache, - QueryClient, - injectQuery, - provideIsRestoring, - provideTanStackQuery, -} from '..' -import { setSignalInputs } from './test-utils' -import type { Query } from '..' - -describe('injectQuery', () => { - let queryCache: QueryCache - let queryClient: QueryClient - - beforeEach(() => { - vi.useFakeTimers() - queryCache = new QueryCache() - queryClient = new QueryClient({ queryCache }) - TestBed.configureTestingModule({ - providers: [ - provideZonelessChangeDetection(), - provideTanStackQuery(queryClient), - ], - }) - }) - - afterEach(() => { - vi.useRealTimers() - }) - - it('should return pending status initially', () => { - const key = createKey() - const query = TestBed.runInInjectionContext(() => { - return injectQuery(() => ({ - queryKey: key, - queryFn: () => sleep(10).then(() => 'Some data'), - })) - }) - - expect(query.status()).toBe('pending') - expect(query.isPending()).toBe(true) - expect(query.isFetching()).toBe(true) - expect(query.isStale()).toBe(true) - expect(query.isFetched()).toBe(false) - }) - - it('should resolve to success and update signal: injectQuery()', async () => { - const key = createKey() - - @Component({ - template: ` -
status: {{ query.status() }}
-
data: {{ query.data() ?? 'none' }}
-
isPending: {{ query.isPending() }}
-
isFetching: {{ query.isFetching() }}
-
isFetched: {{ query.isFetched() }}
-
isSuccess: {{ query.isSuccess() }}
- `, - }) - class Page { - readonly query = injectQuery(() => ({ - queryKey: key, - queryFn: () => sleep(10).then(() => 'result2'), - })) - } - - const rendered = await render(Page) - - await vi.advanceTimersByTimeAsync(11) - rendered.fixture.detectChanges() - expect(rendered.getByText('status: success')).toBeInTheDocument() - expect(rendered.getByText('data: result2')).toBeInTheDocument() - expect(rendered.getByText('isPending: false')).toBeInTheDocument() - expect(rendered.getByText('isFetching: false')).toBeInTheDocument() - expect(rendered.getByText('isFetched: true')).toBeInTheDocument() - expect(rendered.getByText('isSuccess: true')).toBeInTheDocument() - }) - - it('should reject and update signal', async () => { - const key = createKey() - - @Component({ - template: ` -
status: {{ query.status() }}
-
data: {{ query.data() ?? 'none' }}
-
error: {{ query.error()?.message ?? 'none' }}
-
isPending: {{ query.isPending() }}
-
isFetching: {{ query.isFetching() }}
-
isError: {{ query.isError() }}
-
failureCount: {{ query.failureCount() }}
-
failureReason: {{ query.failureReason()?.message ?? 'none' }}
- `, - }) - class Page { - readonly query = injectQuery(() => ({ - retry: false, - queryKey: key, - queryFn: () => - sleep(10).then(() => Promise.reject(new Error('Some error'))), - })) - } - - const rendered = await render(Page) - - await vi.advanceTimersByTimeAsync(11) - rendered.fixture.detectChanges() - expect(rendered.getByText('status: error')).toBeInTheDocument() - expect(rendered.getByText('data: none')).toBeInTheDocument() - expect(rendered.getByText('error: Some error')).toBeInTheDocument() - expect(rendered.getByText('isPending: false')).toBeInTheDocument() - expect(rendered.getByText('isFetching: false')).toBeInTheDocument() - expect(rendered.getByText('isError: true')).toBeInTheDocument() - expect(rendered.getByText('failureCount: 1')).toBeInTheDocument() - expect(rendered.getByText('failureReason: Some error')).toBeInTheDocument() - }) - - it('should be able to select a part of the data with select', async () => { - const key = createKey() - - @Component({ - template: `
data: {{ query.data() ?? 'none' }}
`, - }) - class Page { - readonly query = injectQuery<{ name: string }, Error, string>(() => ({ - queryKey: key, - queryFn: () => sleep(10).then(() => ({ name: 'test' })), - select: (data) => data.name, - })) - } - - const rendered = await render(Page) - - expect(rendered.getByText('data: none')).toBeInTheDocument() - await vi.advanceTimersByTimeAsync(11) - rendered.fixture.detectChanges() - expect(rendered.getByText('data: test')).toBeInTheDocument() - }) - - it('should show placeholderData until queryFn resolves and then expose real data', async () => { - const key = createKey() - - @Component({ - template: ` -
data: {{ query.data() }}
-
isPlaceholderData: {{ query.isPlaceholderData() }}
-
isSuccess: {{ query.isSuccess() }}
- `, - }) - class Page { - readonly query = injectQuery(() => ({ - queryKey: key, - queryFn: () => sleep(10).then(() => 'real-data'), - placeholderData: 'placeholder', - })) - } - - const rendered = await render(Page) - - expect(rendered.getByText('data: placeholder')).toBeInTheDocument() - expect(rendered.getByText('isPlaceholderData: true')).toBeInTheDocument() - expect(rendered.getByText('isSuccess: true')).toBeInTheDocument() - await vi.advanceTimersByTimeAsync(11) - rendered.fixture.detectChanges() - expect(rendered.getByText('data: real-data')).toBeInTheDocument() - expect(rendered.getByText('isPlaceholderData: false')).toBeInTheDocument() - expect(rendered.getByText('isSuccess: true')).toBeInTheDocument() - }) - - it('should update query on options contained signal change', async () => { - const key1 = createKey() - const key2 = createKey() - const key = signal(key1) - const queryFn = vi.fn<() => Promise>(() => - sleep(10).then(() => 'Some data'), - ) - - const query = TestBed.runInInjectionContext(() => { - return injectQuery(() => ({ - queryKey: key(), - queryFn, - })) - }) - - await vi.advanceTimersByTimeAsync(0) - expect(queryFn).toHaveBeenCalledTimes(1) - await vi.advanceTimersByTimeAsync(10) - expect(query.status()).toBe('success') - - key.set(key2) - TestBed.tick() - expect(queryFn).toHaveBeenCalledTimes(2) - // should call queryFn with context containing the new queryKey - expect(queryFn).toHaveBeenNthCalledWith( - 2, - expect.objectContaining({ - client: queryClient, - meta: undefined, - queryKey: key2, - signal: expect.anything(), - }), - ) - }) - - it('should only run query once enabled signal is set to true', async () => { - const key = createKey() - const queryFn = vi.fn<() => Promise>(() => - sleep(10).then(() => 'Some data'), - ) - const enabled = signal(false) - - const query = TestBed.runInInjectionContext(() => { - return injectQuery(() => ({ - queryKey: key, - queryFn, - enabled: enabled(), - })) - }) - - expect(queryFn).not.toHaveBeenCalled() - expect(query.status()).toBe('pending') - - enabled.set(true) - await vi.advanceTimersByTimeAsync(10) - expect(queryFn).toHaveBeenCalledTimes(1) - expect(query.status()).toBe('success') - }) - - it('should not fetch while the enabled signal is false, and fetch again once it is truthy', async () => { - const key = createKey() - const queryFn = vi.fn<() => Promise>(() => - sleep(10).then(() => 'Some data'), - ) - const filter = signal('a') - - const query = TestBed.runInInjectionContext(() => { - return injectQuery(() => ({ - queryKey: [...key, filter()], - queryFn, - enabled: !!filter(), - })) - }) - - await vi.advanceTimersByTimeAsync(10) - expect(queryFn).toHaveBeenCalledTimes(1) - expect(query.status()).toBe('success') - - filter.set('') - await vi.advanceTimersByTimeAsync(10) - expect(queryFn).toHaveBeenCalledTimes(1) - expect(query.isFetching()).toBe(false) - - filter.set('b') - await vi.advanceTimersByTimeAsync(10) - expect(queryFn).toHaveBeenCalledTimes(2) - }) - - it('should properly execute dependent queries', async () => { - const key1 = createKey() - const key2 = createKey() - - const query1 = TestBed.runInInjectionContext(() => { - return injectQuery(() => ({ - queryKey: key1, - queryFn: () => sleep(10).then(() => 'Some data'), - })) - }) - - const dependentQueryFn = vi.fn<() => Promise>(() => - sleep(1000).then(() => 'Some data'), - ) - - const query2 = TestBed.runInInjectionContext(() => { - return injectQuery( - computed(() => ({ - queryKey: key2, - queryFn: dependentQueryFn, - enabled: !!query1.data(), - })), - ) - }) - - expect(query1.data()).toBeUndefined() - expect(query2.fetchStatus()).toBe('idle') - expect(dependentQueryFn).not.toHaveBeenCalled() - await vi.advanceTimersByTimeAsync(11) - expect(query1.data()).toBe('Some data') - expect(query2.fetchStatus()).toBe('fetching') - await vi.advanceTimersByTimeAsync(1002) - expect(query2.fetchStatus()).toBe('idle') - expect(query2.status()).toBe('success') - expect(dependentQueryFn).toHaveBeenCalledTimes(1) - expect(dependentQueryFn).toHaveBeenCalledWith( - expect.objectContaining({ queryKey: key2 }), - ) - }) - - it('should use the current value for the queryKey when refetch is called', async () => { - const key = createKey() - const queryFn = vi.fn<() => Promise>(() => - sleep(10).then(() => 'Some data'), - ) - const keySignal = signal('key11') - - const query = TestBed.runInInjectionContext(() => { - return injectQuery(() => ({ - queryKey: [...key, keySignal()], - queryFn, - enabled: false, - })) - }) - - expect(queryFn).not.toHaveBeenCalled() - - void query.refetch() - await vi.advanceTimersByTimeAsync(10) - expect(queryFn).toHaveBeenCalledTimes(1) - expect(queryFn).toHaveBeenNthCalledWith( - 1, - expect.objectContaining({ - queryKey: [...key, 'key11'], - }), - ) - - keySignal.set('key12') - - void query.refetch() - await vi.advanceTimersByTimeAsync(10) - expect(queryFn).toHaveBeenCalledTimes(2) - expect(queryFn).toHaveBeenNthCalledWith( - 2, - expect.objectContaining({ - queryKey: [...key, 'key12'], - }), - ) - expect(query.data()).toBe('Some data') - }) - - it('should keep initialData visible alongside the error when a refetch fails', async () => { - const key = createKey() - - @Component({ - template: ` -
data: {{ query.data() }}
-
isError: {{ query.isError() }}
- `, - }) - class Page { - readonly query = injectQuery(() => ({ - queryKey: key, - queryFn: () => - sleep(10).then(() => Promise.reject(new Error('Some error'))), - initialData: 'initial', - retry: false, - })) - } - - const rendered = await render(Page) - - expect(rendered.getByText('data: initial')).toBeInTheDocument() - expect(rendered.getByText('isError: false')).toBeInTheDocument() - await vi.advanceTimersByTimeAsync(11) - rendered.fixture.detectChanges() - expect(rendered.getByText('data: initial')).toBeInTheDocument() - expect(rendered.getByText('isError: true')).toBeInTheDocument() - }) - - describe('throwOnError', () => { - it('should evaluate throwOnError when query is expected to throw', async () => { - const key = createKey() - const throwOnError = vi.fn<(error: Error, query: Query) => boolean>() - TestBed.runInInjectionContext(() => { - return injectQuery(() => ({ - queryKey: key, - queryFn: () => - sleep(10).then(() => Promise.reject(new Error('Some error'))), - retry: false, - throwOnError, - })) - }) - - await vi.advanceTimersByTimeAsync(11) - expect(throwOnError).toHaveBeenCalledTimes(1) - expect(throwOnError).toHaveBeenCalledWith( - Error('Some error'), - expect.objectContaining({ - state: expect.objectContaining({ status: 'error' }), - }), - ) - }) - - it('should throw when throwOnError is true', async () => { - const key = createKey() - TestBed.runInInjectionContext(() => { - return injectQuery(() => ({ - queryKey: key, - queryFn: () => - sleep(0).then(() => Promise.reject(new Error('Some error'))), - throwOnError: true, - })) - }) - - await expect(vi.runAllTimersAsync()).rejects.toThrow('Some error') - }) - - it('should throw when throwOnError function returns true', async () => { - const key = createKey() - TestBed.runInInjectionContext(() => { - return injectQuery(() => ({ - queryKey: key, - queryFn: () => - sleep(0).then(() => Promise.reject(new Error('Some error'))), - throwOnError: () => true, - })) - }) - - await expect(vi.runAllTimersAsync()).rejects.toThrow('Some error') - }) - }) - - it('should render with required signal inputs', async () => { - @Component({ - selector: 'app-fake', - template: `{{ query.data() }}`, - }) - class FakeComponent { - name = input.required() - - query = injectQuery(() => ({ - queryKey: ['fake', this.name()], - queryFn: () => this.name(), - })) - } - - const fixture = TestBed.createComponent(FakeComponent) - setSignalInputs(fixture.componentInstance, { - name: 'signal-input-required-test', - }) - - fixture.detectChanges() - await vi.advanceTimersByTimeAsync(0) - expect(fixture.componentInstance.query.data()).toBe( - 'signal-input-required-test', - ) - }) - - describe('isRestoring', () => { - it('should not fetch for the duration of the restoring period when isRestoring is true', async () => { - const key = createKey() - const queryFn = vi.fn<() => Promise>(() => - sleep(10).then(() => 'data'), - ) - - TestBed.configureTestingModule({ - providers: [provideIsRestoring(signal(true).asReadonly())], - }) - - const query = TestBed.runInInjectionContext(() => - injectQuery(() => ({ - queryKey: key, - queryFn, - })), - ) - - await vi.advanceTimersByTimeAsync(0) - expect(query.status()).toBe('pending') - expect(query.fetchStatus()).toBe('idle') - expect(query.data()).toBeUndefined() - expect(queryFn).toHaveBeenCalledTimes(0) - await vi.advanceTimersByTimeAsync(10) - expect(query.status()).toBe('pending') - expect(query.fetchStatus()).toBe('idle') - expect(query.data()).toBeUndefined() - expect(queryFn).toHaveBeenCalledTimes(0) - }) - }) - - describe('injection context', () => { - it('should throw NG0203 with descriptive error outside injection context', () => { - const key = createKey() - expect(() => { - injectQuery(() => ({ - queryKey: key, - queryFn: () => sleep(0).then(() => 'Some data'), - })) - }).toThrow(/NG0203(.*?)injectQuery/) - }) - - it('should be usable outside injection context when passing an injector', () => { - const key = createKey() - const query = injectQuery( - () => ({ - queryKey: key, - queryFn: () => sleep(0).then(() => 'Some data'), - }), - { - injector: TestBed.inject(Injector), - }, - ) - - expect(query.status()).toBe('pending') - }) - - it('should complete queries before whenStable() resolves', async () => { - const key = createKey() - const app = TestBed.inject(ApplicationRef) - - const query = TestBed.runInInjectionContext(() => - injectQuery(() => ({ - queryKey: key, - queryFn: () => sleep(50).then(() => 'test data'), - })), - ) - - expect(query.status()).toBe('pending') - expect(query.data()).toBeUndefined() - - const stablePromise = app.whenStable() - await vi.advanceTimersByTimeAsync(60) - await stablePromise - expect(query.status()).toBe('success') - expect(query.data()).toBe('test data') - }) - - it('should complete HttpClient-based queries before whenStable() resolves', async () => { - TestBed.configureTestingModule({ - providers: [provideHttpClient(), provideHttpClientTesting()], - }) - - const app = TestBed.inject(ApplicationRef) - const httpClient = TestBed.inject(HttpClient) - const httpTestingController = TestBed.inject(HttpTestingController) - - // Create a query using HttpClient - const key = createKey() - const query = TestBed.runInInjectionContext(() => - injectQuery(() => ({ - queryKey: key, - queryFn: () => - lastValueFrom(httpClient.get<{ message: string }>('/api/test')), - })), - ) - - // Schedule the HTTP response - setTimeout(() => { - const req = httpTestingController.expectOne('/api/test') - req.flush({ message: 'http test data' }) - }, 10) - - // Initial state - expect(query.status()).toBe('pending') - - // Advance timers and wait for Angular to be "stable" - const stablePromise = app.whenStable() - await vi.advanceTimersByTimeAsync(20) - await stablePromise - - // Query should be complete after whenStable() thanks to PendingTasks integration - expect(query.status()).toBe('success') - expect(query.data()).toStrictEqual({ message: 'http test data' }) - - httpTestingController.verify() - }) - - it('should handle synchronous queryFn with staleTime', async () => { - const app = TestBed.inject(ApplicationRef) - let callCount = 0 - - const key = createKey() - const query = TestBed.runInInjectionContext(() => - injectQuery(() => ({ - queryKey: key, - staleTime: 1000, - queryFn: () => { - callCount++ - return `sync-data-${callCount}` - }, - })), - ) - - // Synchronize pending effects - TestBed.tick() - - const stablePromise = app.whenStable() - await stablePromise - expect(query.status()).toBe('success') - expect(query.data()).toBe('sync-data-1') - expect(callCount).toBe(1) - - await query.refetch() - await Promise.resolve() - await vi.runAllTimersAsync() - await app.whenStable() - expect(query.status()).toBe('success') - expect(query.data()).toBe('sync-data-2') - expect(callCount).toBe(2) - }) - - it('should handle enabled/disabled transitions with synchronous queryFn', async () => { - const app = TestBed.inject(ApplicationRef) - const enabledSignal = signal(false) - let callCount = 0 - - const key = createKey() - const query = TestBed.runInInjectionContext(() => - injectQuery(() => ({ - queryKey: key, - enabled: enabledSignal(), - queryFn: () => { - callCount++ - return `sync-data-${callCount}` - }, - })), - ) - - // Initially disabled - TestBed.tick() - await app.whenStable() - expect(query.status()).toBe('pending') - expect(query.data()).toBeUndefined() - expect(callCount).toBe(0) - - // Enable the query - enabledSignal.set(true) - TestBed.tick() - await app.whenStable() - expect(query.status()).toBe('success') - expect(query.data()).toBe('sync-data-1') - expect(callCount).toBe(1) - }) - - it('should handle query invalidation with synchronous data', async () => { - const app = TestBed.inject(ApplicationRef) - const testKey = createKey() - let callCount = 0 - - const query = TestBed.runInInjectionContext(() => - injectQuery(() => ({ - queryKey: testKey, - queryFn: () => { - callCount++ - return `sync-data-${callCount}` - }, - })), - ) - - // Synchronize pending effects - TestBed.tick() - await app.whenStable() - expect(query.status()).toBe('success') - expect(query.data()).toBe('sync-data-1') - expect(callCount).toBe(1) - - // Invalidate the query - queryClient.invalidateQueries({ queryKey: testKey }) - TestBed.tick() - - // Wait for the invalidation to trigger a refetch - await Promise.resolve() - await vi.advanceTimersByTimeAsync(10) - TestBed.tick() - await app.whenStable() - expect(query.status()).toBe('success') - expect(query.data()).toBe('sync-data-2') - expect(callCount).toBe(2) - }) - }) -}) diff --git a/packages/angular-query-experimental/src/__tests__/provide-query-client.test.ts b/packages/angular-query-experimental/src/__tests__/provide-query-client.test.ts deleted file mode 100644 index 5253274de34..00000000000 --- a/packages/angular-query-experimental/src/__tests__/provide-query-client.test.ts +++ /dev/null @@ -1,38 +0,0 @@ -import { TestBed } from '@angular/core/testing' -import { describe, expect, it } from 'vitest' -import { InjectionToken, provideZonelessChangeDetection } from '@angular/core' -import { QueryClient } from '@tanstack/query-core' -import { provideQueryClient } from '../providers' - -describe('provideQueryClient', () => { - it('should provide a QueryClient instance directly', () => { - const queryClient = new QueryClient() - - TestBed.configureTestingModule({ - providers: [ - provideZonelessChangeDetection(), - provideQueryClient(queryClient), - ], - }) - - const providedQueryClient = TestBed.inject(QueryClient) - expect(providedQueryClient).toBe(queryClient) - }) - - it('should provide a QueryClient instance using an InjectionToken', () => { - const queryClient = new QueryClient() - const CUSTOM_QUERY_CLIENT = new InjectionToken('', { - factory: () => queryClient, - }) - - TestBed.configureTestingModule({ - providers: [ - provideZonelessChangeDetection(), - provideQueryClient(CUSTOM_QUERY_CLIENT), - ], - }) - - const providedQueryClient = TestBed.inject(QueryClient) - expect(providedQueryClient).toBe(queryClient) - }) -}) diff --git a/packages/angular-query-experimental/src/__tests__/provide-tanstack-query.test.ts b/packages/angular-query-experimental/src/__tests__/provide-tanstack-query.test.ts deleted file mode 100644 index ff1cf4324fc..00000000000 --- a/packages/angular-query-experimental/src/__tests__/provide-tanstack-query.test.ts +++ /dev/null @@ -1,38 +0,0 @@ -import { TestBed } from '@angular/core/testing' -import { describe, expect, it } from 'vitest' -import { InjectionToken, provideZonelessChangeDetection } from '@angular/core' -import { QueryClient } from '@tanstack/query-core' -import { provideTanStackQuery } from '../providers' - -describe('provideTanStackQuery', () => { - it('should provide a QueryClient instance directly', () => { - const queryClient = new QueryClient() - - TestBed.configureTestingModule({ - providers: [ - provideZonelessChangeDetection(), - provideTanStackQuery(queryClient), - ], - }) - - const providedQueryClient = TestBed.inject(QueryClient) - expect(providedQueryClient).toBe(queryClient) - }) - - it('should provide a QueryClient instance using an InjectionToken', () => { - const queryClient = new QueryClient() - const CUSTOM_QUERY_CLIENT = new InjectionToken('', { - factory: () => queryClient, - }) - - TestBed.configureTestingModule({ - providers: [ - provideZonelessChangeDetection(), - provideTanStackQuery(CUSTOM_QUERY_CLIENT), - ], - }) - - const providedQueryClient = TestBed.inject(QueryClient) - expect(providedQueryClient).toBe(queryClient) - }) -}) diff --git a/packages/angular-query-experimental/src/__tests__/signal-proxy.test.ts b/packages/angular-query-experimental/src/__tests__/signal-proxy.test.ts deleted file mode 100644 index 7ea80dca78b..00000000000 --- a/packages/angular-query-experimental/src/__tests__/signal-proxy.test.ts +++ /dev/null @@ -1,27 +0,0 @@ -import { isSignal, signal } from '@angular/core' -import { describe, expect, it } from 'vitest' -import { signalProxy } from '../signal-proxy' - -describe('signalProxy', () => { - const inputSignal = signal({ fn: () => 'bar', baz: 'qux' }) - const proxy = signalProxy(inputSignal) - - it('should have computed fields', () => { - expect(proxy.baz()).toBe('qux') - expect(isSignal(proxy.baz)).toBe(true) - }) - - it('should pass through functions as-is', () => { - expect(proxy.fn()).toBe('bar') - expect(isSignal(proxy.fn)).toBe(false) - }) - - it('should support "in" operator', () => { - expect('baz' in proxy).toBe(true) - expect('foo' in proxy).toBe(false) - }) - - it('should support "Object.keys"', () => { - expect(Object.keys(proxy)).toStrictEqual(['fn', 'baz']) - }) -}) diff --git a/packages/angular-query-experimental/src/__tests__/test-utils.ts b/packages/angular-query-experimental/src/__tests__/test-utils.ts deleted file mode 100644 index 33ded6b2eea..00000000000 --- a/packages/angular-query-experimental/src/__tests__/test-utils.ts +++ /dev/null @@ -1,77 +0,0 @@ -import { isSignal, untracked } from '@angular/core' -import { SIGNAL, signalSetFn } from '@angular/core/primitives/signals' -import { expect } from 'vitest' -import type { InputSignal, Signal } from '@angular/core' -import type { ComponentFixture } from '@angular/core/testing' - -// Evaluate all signals on an object and return the result -function evaluateSignals>( - obj: T, -): { [K in keyof T]: ReturnType } { - const result: Partial<{ [K in keyof T]: ReturnType }> = {} - - untracked(() => { - for (const key in obj) { - if ( - Object.prototype.hasOwnProperty.call(obj, key) && - // Only evaluate signals, not normal functions - isSignal(obj[key]) - ) { - const func = obj[key] - result[key] = func() - } - } - }) - - return result as { [K in keyof T]: ReturnType } -} - -export const expectSignals = >( - obj: T, - expected: Partial<{ - [K in keyof T]: T[K] extends Signal ? ReturnType : never - }>, -): void => { - expect(evaluateSignals(obj)).toMatchObject(expected) -} - -type ToSignalInputUpdatableMap = { - [ - K in keyof T as T[K] extends InputSignal ? K : never - ]: T[K] extends InputSignal ? Value : never -} - -function componentHasSignalInputProperty( - component: object, - property: TProperty, -): component is { [key in TProperty]: InputSignal } { - return ( - component.hasOwnProperty(property) && (component as any)[property][SIGNAL] - ) -} - -/** - * Set required signal input value to component fixture - * @see https://github.com/angular/angular/issues/54013 - */ -export function setSignalInputs>( - component: T, - inputs: ToSignalInputUpdatableMap, -) { - for (const inputKey in inputs) { - if (componentHasSignalInputProperty(component, inputKey)) { - signalSetFn(component[inputKey][SIGNAL], inputs[inputKey]) - } - } -} - -export function setFixtureSignalInputs>( - componentFixture: ComponentFixture, - inputs: ToSignalInputUpdatableMap, - options: { detectChanges: boolean } = { detectChanges: true }, -) { - setSignalInputs(componentFixture.componentInstance, inputs) - if (options.detectChanges) { - componentFixture.detectChanges() - } -} diff --git a/packages/angular-query-experimental/src/create-base-query.ts b/packages/angular-query-experimental/src/create-base-query.ts deleted file mode 100644 index f6ca3c12b91..00000000000 --- a/packages/angular-query-experimental/src/create-base-query.ts +++ /dev/null @@ -1,179 +0,0 @@ -import { - NgZone, - VERSION, - computed, - effect, - inject, - signal, - untracked, -} from '@angular/core' -import { - QueryClient, - notifyManager, - shouldThrowError, -} from '@tanstack/query-core' -import { signalProxy } from './signal-proxy' -import { injectIsRestoring } from './inject-is-restoring' -import { PENDING_TASKS } from './pending-tasks-compat' -import type { PendingTaskRef } from './pending-tasks-compat' -import type { - QueryKey, - QueryObserver, - QueryObserverResult, -} from '@tanstack/query-core' -import type { CreateBaseQueryOptions } from './types' - -/** - * Base implementation for `injectQuery` and `injectInfiniteQuery`. - * @param optionsFn - A function that returns the query options. It is re-run when the signals it - * reads change. - * @param Observer - The observer class from query-core (`QueryObserver` or `InfiniteQueryObserver`). - * @returns The query result, with each value field exposed as a computed signal. Functions such as - * `refetch` stay callable functions. - */ -export function createBaseQuery< - TQueryFnData, - TError, - TData, - TQueryData, - TQueryKey extends QueryKey, ->( - optionsFn: () => CreateBaseQueryOptions< - TQueryFnData, - TError, - TData, - TQueryData, - TQueryKey - >, - Observer: typeof QueryObserver, -) { - const ngZone = inject(NgZone) - const pendingTasks = inject(PENDING_TASKS) - const queryClient = inject(QueryClient) - const isRestoring = injectIsRestoring() - - /** - * Signal that has the default options from query client applied - * computed() is used so signals can be inserted into the options - * making it reactive. Wrapping options in a function ensures embedded expressions - * are preserved and can keep being applied after signal changes - */ - const defaultedOptionsSignal = computed(() => { - const defaultedOptions = queryClient.defaultQueryOptions(optionsFn()) - defaultedOptions._optimisticResults = isRestoring() - ? 'isRestoring' - : 'optimistic' - return defaultedOptions - }) - - const observerSignal = (() => { - let instance: QueryObserver< - TQueryFnData, - TError, - TData, - TQueryData, - TQueryKey - > | null = null - - return computed(() => { - return (instance ||= new Observer(queryClient, defaultedOptionsSignal())) - }) - })() - - const optimisticResultSignal = computed(() => - observerSignal().getOptimisticResult(defaultedOptionsSignal()), - ) - - const resultFromSubscriberSignal = signal | null>(null) - - effect( - (onCleanup) => { - const observer = observerSignal() - const defaultedOptions = defaultedOptionsSignal() - - untracked(() => { - observer.setOptions(defaultedOptions) - }) - onCleanup(() => { - ngZone.run(() => resultFromSubscriberSignal.set(null)) - }) - }, - { - // Set allowSignalWrites to support Angular < v19 - // Set to undefined to avoid warning on newer versions - allowSignalWrites: VERSION.major < '19' || undefined, - }, - ) - - effect((onCleanup) => { - // observer.trackResult is not used as this optimization is not needed for Angular - const observer = observerSignal() - let pendingTaskRef: PendingTaskRef | null = null - - const unsubscribe = isRestoring() - ? () => undefined - : untracked(() => - ngZone.runOutsideAngular(() => { - return observer.subscribe( - notifyManager.batchCalls((state) => { - ngZone.run(() => { - if (state.fetchStatus === 'fetching' && !pendingTaskRef) { - pendingTaskRef = pendingTasks.add() - } - - if (state.fetchStatus === 'idle' && pendingTaskRef) { - pendingTaskRef() - pendingTaskRef = null - } - - if ( - state.isError && - !state.isFetching && - shouldThrowError(observer.options.throwOnError, [ - state.error, - observer.getCurrentQuery(), - ]) - ) { - ngZone.onError.emit(state.error) - throw state.error - } - resultFromSubscriberSignal.set(state) - }) - }), - ) - }), - ) - - onCleanup(() => { - if (pendingTaskRef) { - pendingTaskRef() - pendingTaskRef = null - } - unsubscribe() - }) - }) - - return signalProxy( - computed(() => { - const subscriberResult = resultFromSubscriberSignal() - const optimisticResult = optimisticResultSignal() - const result = subscriberResult ?? optimisticResult - - // Wrap methods to ensure observer has latest options before execution - const observer = observerSignal() - - const originalRefetch = result.refetch - return { - ...result, - // oxlint-disable-next-line typescript/no-unnecessary-type-assertion -- keeps the declared 'refetch' type, which the wrapper would widen to 'RefetchOptions | undefined' - refetch: ((...args: Parameters) => { - observer.setOptions(defaultedOptionsSignal()) - return originalRefetch(...args) - }) as typeof originalRefetch, - } - }), - ) -} diff --git a/packages/angular-query-experimental/src/devtools-panel/inject-devtools-panel.ts b/packages/angular-query-experimental/src/devtools-panel/inject-devtools-panel.ts deleted file mode 100644 index 1440ef9f18d..00000000000 --- a/packages/angular-query-experimental/src/devtools-panel/inject-devtools-panel.ts +++ /dev/null @@ -1,115 +0,0 @@ -import { - DestroyRef, - Injector, - PLATFORM_ID, - assertInInjectionContext, - computed, - effect, - inject, - runInInjectionContext, - untracked, -} from '@angular/core' -import { QueryClient, onlineManager } from '@tanstack/query-core' -import { isPlatformBrowser } from '@angular/common' -import type { TanstackQueryDevtoolsPanel } from '@tanstack/query-devtools' -import type { - DevtoolsPanelOptions, - InjectDevtoolsPanel, - InjectDevtoolsPanelOptions, -} from './types' - -/** - * Inject a TanStack Query devtools panel and render it in the DOM. - * - * Devtools panel allows programmatic control over the devtools, for example if you want to render - * the devtools as part of your own devtools. - * - * Consider `withDevtools` instead if you don't need this. - * @param injectDevtoolsPanelFn - A function that returns devtools panel options. - * @param options - Additional configuration - * @returns DevtoolsPanelRef - * @see https://tanstack.com/query/v5/docs/framework/angular/devtools - */ -export const injectDevtoolsPanel: InjectDevtoolsPanel = ( - injectDevtoolsPanelFn: () => DevtoolsPanelOptions, - options?: InjectDevtoolsPanelOptions, -) => { - !options?.injector && assertInInjectionContext(injectDevtoolsPanel) - const currentInjector = options?.injector ?? inject(Injector) - - return runInInjectionContext(currentInjector, () => { - const destroyRef = inject(DestroyRef) - const isBrowser = isPlatformBrowser(inject(PLATFORM_ID)) - const injectedClient = inject(QueryClient, { optional: true }) - - const queryOptions = computed(injectDevtoolsPanelFn) - let devtools: TanstackQueryDevtoolsPanel | null = null - - const destroy = () => { - devtools?.unmount() - devtools = null - } - - if (!isBrowser) - return { - destroy, - } - - effect(() => { - const { - client = injectedClient, - errorTypes = [], - styleNonce, - shadowDOMTarget, - hideDisabledQueries, - theme, - onClose, - hostElement, - } = queryOptions() - - untracked(() => { - if (!client) throw new Error('No QueryClient found') - if (!devtools && hostElement) { - import('@tanstack/query-devtools') - .then((queryDevtools) => { - devtools = new queryDevtools.TanstackQueryDevtoolsPanel({ - client, - queryFlavor: 'Angular Query', - version: '5', - buttonPosition: 'bottom-left', - position: 'bottom', - initialIsOpen: true, - errorTypes, - styleNonce, - shadowDOMTarget, - hideDisabledQueries, - theme, - onClose, - onlineManager, - }) - devtools.mount(hostElement.nativeElement) - }) - .catch((error) => { - console.error( - 'Install @tanstack/query-devtools or reinstall without --omit=optional.', - error, - ) - }) - } else if (devtools && hostElement) { - devtools.setClient(client) - devtools.setErrorTypes(errorTypes) - devtools.setTheme(theme) - onClose && devtools.setOnClose(onClose) - } else if (devtools && !hostElement) { - destroy() - } - }) - }) - - destroyRef.onDestroy(destroy) - - return { - destroy, - } - }) -} diff --git a/packages/angular-query-experimental/src/devtools-panel/production/index.ts b/packages/angular-query-experimental/src/devtools-panel/production/index.ts deleted file mode 100644 index 546becea7f8..00000000000 --- a/packages/angular-query-experimental/src/devtools-panel/production/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from '..' diff --git a/packages/angular-query-experimental/src/devtools/index.ts b/packages/angular-query-experimental/src/devtools/index.ts deleted file mode 100644 index d4f7e9238f7..00000000000 --- a/packages/angular-query-experimental/src/devtools/index.ts +++ /dev/null @@ -1,8 +0,0 @@ -export type { - DevtoolsOptions, - WithDevtools, - WithDevtoolsFn, - WithDevtoolsOptions, -} from './types' - -export { withDevtools } from './with-devtools' diff --git a/packages/angular-query-experimental/src/devtools/production/index.ts b/packages/angular-query-experimental/src/devtools/production/index.ts deleted file mode 100644 index 546becea7f8..00000000000 --- a/packages/angular-query-experimental/src/devtools/production/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from '..' diff --git a/packages/angular-query-experimental/src/devtools/stub.ts b/packages/angular-query-experimental/src/devtools/stub.ts deleted file mode 100644 index 5b14ce44775..00000000000 --- a/packages/angular-query-experimental/src/devtools/stub.ts +++ /dev/null @@ -1,10 +0,0 @@ -import type { WithDevtools } from './types' - -/** - * Replaces `withDevtools` in production builds: returns the devtools feature with no providers. - * @returns A devtools feature that does nothing. - */ -export const withDevtools: WithDevtools = () => ({ - ɵkind: 'Devtools', - ɵproviders: [], -}) diff --git a/packages/angular-query-experimental/src/devtools/types.ts b/packages/angular-query-experimental/src/devtools/types.ts deleted file mode 100644 index 0efb5199a13..00000000000 --- a/packages/angular-query-experimental/src/devtools/types.ts +++ /dev/null @@ -1,123 +0,0 @@ -import type { QueryClient } from '@tanstack/query-core' -import type { - DevtoolsButtonPosition, - DevtoolsErrorType, - DevtoolsPosition, - Theme, -} from '@tanstack/query-devtools' -import type { DevtoolsFeature } from '../providers' - -/** - * Options for configuring withDevtools. - */ -export interface WithDevtoolsOptions { - /** - * An array of dependencies to be injected and passed to the `withDevtoolsFn` function. - * - * **Example** - * ```ts - * export const appConfig: ApplicationConfig = { - * providers: [ - * provideTanStackQuery( - * new QueryClient(), - * withDevtools( - * (devToolsOptionsManager: DevtoolsOptionsManager) => ({ - * loadDevtools: devToolsOptionsManager.loadDevtools(), - * }), - * { - * deps: [DevtoolsOptionsManager], - * }, - * ), - * ), - * ], - * } - * ``` - */ - deps?: Array -} - -/** - * Options for configuring the TanStack Query devtools. - */ -export interface DevtoolsOptions { - /** - * Set this true if you want the devtools to default to being open - */ - initialIsOpen?: boolean - /** - * The position of the TanStack logo to open and close the devtools panel. - * `top-left` | `top-right` | `bottom-left` | `bottom-right` | `relative` - * @defaultValue bottom-right - */ - buttonPosition?: DevtoolsButtonPosition - /** - * The position of the Angular Query devtools panel. - * `top` | `bottom` | `left` | `right` - * @defaultValue bottom - */ - position?: DevtoolsPosition - /** - * Custom instance of QueryClient - */ - client?: QueryClient - /** - * Use this so you can define custom errors that can be shown in the devtools. - */ - errorTypes?: Array - /** - * Use this to pass a nonce to the style tag that is added to the document head. This is useful if you are using a Content Security Policy (CSP) nonce to allow inline styles. - */ - styleNonce?: string - /** - * Use this to pass a shadow DOM target to the devtools so that the styles will be applied - * within the shadow DOM instead of within the head tag in the light DOM. - */ - shadowDOMTarget?: ShadowRoot - /** - * Set this to true to hide disabled queries from the devtools panel. - */ - hideDisabledQueries?: boolean - /** - * Set this to 'light', 'dark', or 'system' to change the theme of the devtools panel. - * This overrides the theme selected in the devtools Settings menu. When omitted, the - * selected theme is used, or `'system'` if none is selected. - */ - theme?: Theme - - /** - * Whether the developer tools should load. - * - `auto`- (Default) Lazily loads devtools when in development mode. Skips loading in production mode. - * - `true`- Always load the devtools, regardless of the environment. - * - `false`- Never load the devtools, regardless of the environment. - * - * You can use `true` and `false` to override loading developer tools from an environment file. - * For example, a test environment might run in production mode but you may want to load developer tools. - * - * Additionally, you can use a signal in the callback to dynamically load the devtools based on a condition. For example, - * a signal created from a RxJS observable that listens for a keyboard shortcut. - * - * **Example** - * ```ts - * withDevtools(() => ({ - * initialIsOpen: true, - * loadDevtools: inject(ExampleService).loadDevtools() - * })) - * ``` - */ - loadDevtools?: 'auto' | boolean -} - -/** - * A function that returns the devtools options. It receives the `deps` of - * {@link WithDevtoolsOptions} and runs inside a `computed`, so the devtools update when the signals - * it reads change. - */ -export type WithDevtoolsFn = (...deps: Array) => DevtoolsOptions - -/** - * The signature of `withDevtools`, which creates the devtools feature for `provideTanStackQuery`. - */ -export type WithDevtools = ( - withDevtoolsFn?: WithDevtoolsFn, - options?: WithDevtoolsOptions, -) => DevtoolsFeature diff --git a/packages/angular-query-experimental/src/devtools/with-devtools.ts b/packages/angular-query-experimental/src/devtools/with-devtools.ts deleted file mode 100644 index 204c186166c..00000000000 --- a/packages/angular-query-experimental/src/devtools/with-devtools.ts +++ /dev/null @@ -1,182 +0,0 @@ -import { isPlatformBrowser } from '@angular/common' -import { - DestroyRef, - ENVIRONMENT_INITIALIZER, - InjectionToken, - Injector, - PLATFORM_ID, - computed, - effect, - inject, - isDevMode, -} from '@angular/core' -import { QueryClient, noop, onlineManager } from '@tanstack/query-core' -import { queryFeature } from '../providers' -import type { Signal } from '@angular/core' -import type { - DevtoolsOptions, - WithDevtools, - WithDevtoolsFn, - WithDevtoolsOptions, -} from './types' -import type { TanstackQueryDevtools } from '@tanstack/query-devtools' - -/** - * Internal token used to prevent double providing of devtools in child injectors - */ -const DEVTOOLS_PROVIDED = new InjectionToken('', { - factory: () => ({ - isProvided: false, - }), -}) - -/** - * Internal token for providing devtools options - */ -const DEVTOOLS_OPTIONS_SIGNAL = new InjectionToken>('') - -/** - * Enables developer tools in Angular development builds. - * - * **Example** - * - * ```ts - * export const appConfig: ApplicationConfig = { - * providers: [ - * provideTanStackQuery(new QueryClient(), withDevtools()) - * ] - * } - * ``` - * The devtools will be rendered in ``. - * - * If you need more control over when devtools are loaded, you can use the `loadDevtools` option. - * - * If you need more control over where devtools are rendered, consider `injectDevtoolsPanel`. This allows rendering devtools inside your own devtools for example. - * @param withDevtoolsFn - A function that returns `DevtoolsOptions`. - * @param options - Additional options for configuring `withDevtools`. - * @returns A set of providers for use with `provideTanStackQuery`. - * @see {@link provideTanStackQuery} - * @see {@link DevtoolsOptions} - */ -export const withDevtools: WithDevtools = ( - withDevtoolsFn?: WithDevtoolsFn, - options: WithDevtoolsOptions = {}, -) => - queryFeature('Devtools', [ - { - provide: DEVTOOLS_OPTIONS_SIGNAL, - useFactory: (...deps: Array) => - computed(() => withDevtoolsFn?.(...deps) ?? {}), - deps: options.deps || [], - }, - { - // Do not use provideEnvironmentInitializer while Angular < v19 is supported - provide: ENVIRONMENT_INITIALIZER, - multi: true, - useFactory: () => { - const devtoolsProvided = inject(DEVTOOLS_PROVIDED) - if ( - !isPlatformBrowser(inject(PLATFORM_ID)) || - devtoolsProvided.isProvided - ) - return noop - - devtoolsProvided.isProvided = true - let injectorIsDestroyed = false - inject(DestroyRef).onDestroy(() => (injectorIsDestroyed = true)) - - return () => { - const injectedClient = inject(QueryClient, { - optional: true, - }) - const destroyRef = inject(DestroyRef) - const devtoolsOptions = inject(DEVTOOLS_OPTIONS_SIGNAL) - const injector = inject(Injector) - - let devtools: TanstackQueryDevtools | null = null - let el: HTMLElement | null = null - - const shouldLoadToolsSignal = computed(() => { - const { loadDevtools } = devtoolsOptions() - return typeof loadDevtools === 'boolean' - ? loadDevtools - : isDevMode() - }) - - const getResolvedQueryClient = () => { - const client = devtoolsOptions().client ?? injectedClient - if (!client) { - throw new Error('No QueryClient found') - } - return client - } - - const destroyDevtools = () => { - devtools?.unmount() - el?.remove() - devtools = null - } - - effect( - () => { - const shouldLoadTools = shouldLoadToolsSignal() - const { - client, - position, - errorTypes, - buttonPosition, - initialIsOpen, - theme, - } = devtoolsOptions() - - if (!shouldLoadTools) { - // Destroy or do nothing - devtools && destroyDevtools() - return - } - - if (devtools) { - // Update existing devtools config - client && devtools.setClient(client) - position && devtools.setPosition(position) - errorTypes && devtools.setErrorTypes(errorTypes) - buttonPosition && devtools.setButtonPosition(buttonPosition) - typeof initialIsOpen === 'boolean' && - devtools.setInitialIsOpen(initialIsOpen) - devtools.setTheme(theme) - return - } - - // Create devtools - import('@tanstack/query-devtools') - .then((queryDevtools) => { - // As this code runs async, the injector could have been destroyed - if (injectorIsDestroyed) return - - devtools = new queryDevtools.TanstackQueryDevtools({ - ...devtoolsOptions(), - client: getResolvedQueryClient(), - queryFlavor: 'Angular Query', - version: '5', - onlineManager, - }) - - el = document.body.appendChild(document.createElement('div')) - el.classList.add('tsqd-parent-container') - devtools.mount(el) - - destroyRef.onDestroy(destroyDevtools) - }) - .catch((error) => { - console.error( - 'Install @tanstack/query-devtools or reinstall without --omit=optional.', - error, - ) - }) - }, - { injector }, - ) - } - }, - }, - ]) diff --git a/packages/angular-query-experimental/src/inject-infinite-query.ts b/packages/angular-query-experimental/src/inject-infinite-query.ts deleted file mode 100644 index 7a6342dbf0f..00000000000 --- a/packages/angular-query-experimental/src/inject-infinite-query.ts +++ /dev/null @@ -1,295 +0,0 @@ -import { InfiniteQueryObserver } from '@tanstack/query-core' -import { - Injector, - assertInInjectionContext, - inject, - runInInjectionContext, -} from '@angular/core' -import { createBaseQuery } from './create-base-query' -import type { - DefaultError, - InfiniteData, - QueryKey, - QueryObserver, -} from '@tanstack/query-core' -import type { - CreateInfiniteQueryOptions, - CreateInfiniteQueryResult, - DefinedCreateInfiniteQueryResult, -} from './types' -import type { - DefinedInitialDataInfiniteOptions, - UndefinedInitialDataInfiniteOptions, -} from './infinite-query-options' - -/** - * Options for `injectInfiniteQuery`, passed after the function that returns the infinite - * query options. - */ -export interface InjectInfiniteQueryOptions { - /** - * The `Injector` in which to create the infinite query. - * - * If this is not provided, the current injection context will be used instead (via `inject`). - */ - injector?: Injector -} - -/** - * The options for `injectInfiniteQuery` are identical to `injectQuery`, with the addition of - * `initialPageParam`, `getNextPageParam`, `getPreviousPageParam`, and `maxPages`. Infinite queries can - * additively "load more" data onto an existing set of data, or "infinite scroll". - * - * This overload is selected when `initialData` is known to be defined on the options returned by - * `injectInfiniteQueryFn`, so the resulting `data` signal is never `undefined` (unless a `select` changes - * `TData` to include `undefined`). - * @param injectInfiniteQueryFn - A function returning the {@link DefinedInitialDataInfiniteOptions} to use — - * everything you can pass to `injectInfiniteQuery`, with `initialData` known to be defined. Similar to - * `computed` from Angular, this function runs in the reactive context, so signals read inside it drive the - * query. - * @param options - Additional configuration. - * @returns The same signals as `injectQuery`, with the addition of `fetchNextPage`, `fetchPreviousPage`, - * `hasNextPage`, `hasPreviousPage`, `isFetchingNextPage`, and `isFetchingPreviousPage`. `data().pages` and - * `data().pageParams` are also added, as long as a `select` doesn't change `TData` away from its default - * `InfiniteData` shape. - * @remarks Keep in mind that imperative fetch calls, such as `fetchNextPage`, may interfere with the default - * refetch behavior, resulting in outdated data. Make sure to call these functions only in response to user - * actions, or add conditions like `hasNextPage() && !isFetching()`. - * @see {@link infiniteQueryOptions} to share these options between `injectInfiniteQuery` and imperative APIs - * like `queryClient.fetchInfiniteQuery`. - * @example - * ```angular-ts - * @Component({ - * selector: 'projects', - * template: ` - * - *
    - * @for (page of projectsQuery.data().pages; track $index) { - * @for (project of page.projects; track project.id) { - *
  • {{ project.name }}
    • - * } - * } - *
- * `, - * }) - * export class Projects { - * readonly projectsQuery = injectInfiniteQuery(() => ({ - * queryKey: ['projects'], - * queryFn: ({ pageParam }) => fetchProjects(pageParam), - * initialPageParam: 0, - * getNextPageParam: (lastPage) => lastPage.nextId, - * initialData: { pages: [], pageParams: [] }, - * })) - * } - * ``` - */ -export function injectInfiniteQuery< - TQueryFnData, - TError = DefaultError, - TData = InfiniteData, - TQueryKey extends QueryKey = QueryKey, - TPageParam = unknown, ->( - injectInfiniteQueryFn: () => DefinedInitialDataInfiniteOptions< - TQueryFnData, - TError, - TData, - TQueryKey, - TPageParam - >, - options?: InjectInfiniteQueryOptions, -): DefinedCreateInfiniteQueryResult - -/** - * Injects an infinite query: a declarative dependency on an asynchronous source of data that is tied to a - * unique key. Infinite queries can additively "load more" data onto an existing set of data, or - * "infinite scroll". - * @param injectInfiniteQueryFn - A function returning the {@link UndefinedInitialDataInfiniteOptions} to use - * — everything you can pass to `injectInfiniteQuery`. Similar to `computed` from Angular, this function runs - * in the reactive context, so signals read inside it drive the query. - * @param options - Additional configuration. - * @returns The same signals as `injectQuery`, with the addition of `fetchNextPage`, `fetchPreviousPage`, - * `hasNextPage`, `hasPreviousPage`, `isFetchingNextPage`, and `isFetchingPreviousPage`. `data().pages` and - * `data().pageParams` are also added, as long as a `select` doesn't change `TData` away from its default - * `InfiniteData` shape. - * @remarks Keep in mind that imperative fetch calls, such as `fetchNextPage`, may interfere with the default - * refetch behavior, resulting in outdated data. Make sure to call these functions only in response to user - * actions, or add conditions like `hasNextPage() && !isFetching()`. This is the only overload that accepts - * `queryFn: skipToken`, shown below. - * @see {@link infiniteQueryOptions} to share these options between `injectInfiniteQuery` and imperative APIs - * like `queryClient.fetchInfiniteQuery`. - * @example - * Fetching the next page from a button click: - * ```angular-ts - * @Component({ - * selector: 'projects-list', - * template: ` - *
    - * @for (page of projectsQuery.data()?.pages; track $index) { - * @for (project of page.projects; track project.id) { - *
  • {{ project.name }}
    • - * } - * } - *
- * - * `, - * }) - * export class ProjectsList { - * readonly projectsQuery = injectInfiniteQuery(() => ({ - * queryKey: ['projects'], - * queryFn: ({ pageParam }) => fetchProjects(pageParam), - * initialPageParam: 0, - * getNextPageParam: (lastPage) => lastPage.nextId, - * })) - * } - * ``` - * @example - * Fetching the next page automatically as the user scrolls, using an `IntersectionObserver` on a sentinel - * element after the list: - * ```angular-ts - * @Component({ - * selector: 'projects-list', - * template: ` - *
    - * @for (page of projectsQuery.data()?.pages; track $index) { - * @for (project of page.projects; track project.id) { - *
  • {{ project.name }}
    • - * } - * } - *
- *
{{ projectsQuery.isFetchingNextPage() ? 'Loading more...' : '' }}
- * `, - * }) - * export class ProjectsList { - * readonly sentinel = viewChild>('sentinel') - * - * readonly projectsQuery = injectInfiniteQuery(() => ({ - * queryKey: ['projects'], - * queryFn: ({ pageParam }) => fetchProjects(pageParam), - * initialPageParam: 0, - * getNextPageParam: (lastPage) => lastPage.nextId, - * })) - * - * constructor() { - * effect((onCleanup) => { - * const sentinel = this.sentinel()?.nativeElement - * if ( - * sentinel == null || - * !this.projectsQuery.hasNextPage() || - * this.projectsQuery.isFetching() - * ) { - * return - * } - * - * const observer = new IntersectionObserver(([entry]) => { - * if (entry?.isIntersecting) this.projectsQuery.fetchNextPage() - * }) - * observer.observe(sentinel) - * - * onCleanup(() => observer.disconnect()) - * }) - * } - * } - * ``` - * @example - * A query that's disabled, type safe, until `postId` is set — pass `skipToken` as `queryFn` instead of - * setting `enabled: false`: - * ```angular-ts - * @Component({ - * selector: 'comments', - * template: ` - * @if (postId() == null) { - * Select a post - * } @else if (commentsQuery.isPending()) { - * Loading... - * } @else if (commentsQuery.isError()) { - * Error: {{ commentsQuery.error()?.message }} - * } @else { - *
    - * @for (page of commentsQuery.data().pages; track $index) { - * @for (comment of page.comments; track comment.id) { - *
  • {{ comment.text }}
    • - * } - * } - *
- * } - * `, - * }) - * export class Comments { - * readonly postId = signal(undefined) - * - * readonly commentsQuery = injectInfiniteQuery(() => ({ - * queryKey: ['post', this.postId(), 'comments'], - * queryFn: - * this.postId() != null - * ? ({ pageParam }) => fetchComments(this.postId()!, pageParam) - * : skipToken, - * initialPageParam: 0, - * getNextPageParam: (lastPage) => lastPage.nextId, - * })) - * } - * ``` - */ -export function injectInfiniteQuery< - TQueryFnData, - TError = DefaultError, - TData = InfiniteData, - TQueryKey extends QueryKey = QueryKey, - TPageParam = unknown, ->( - injectInfiniteQueryFn: () => UndefinedInitialDataInfiniteOptions< - TQueryFnData, - TError, - TData, - TQueryKey, - TPageParam - >, - options?: InjectInfiniteQueryOptions, -): CreateInfiniteQueryResult - -/** - * This overload accepts the general {@link CreateInfiniteQueryOptions} shape rather than the - * `initialData`-aware overloads above, so whether `data` is defined can't be inferred from the call site — - * useful when wrapping `injectInfiniteQuery` in your own helper function that forwards caller-provided - * options. - * @param injectInfiniteQueryFn - A function that returns infinite query options. Similar to `computed` from - * Angular, this function runs in the reactive context, so signals read inside it drive the query. - * @param options - Additional configuration. - * @returns The infinite query result. - */ -export function injectInfiniteQuery< - TQueryFnData, - TError = DefaultError, - TData = InfiniteData, - TQueryKey extends QueryKey = QueryKey, - TPageParam = unknown, ->( - injectInfiniteQueryFn: () => CreateInfiniteQueryOptions< - TQueryFnData, - TError, - TData, - TQueryKey, - TPageParam - >, - options?: InjectInfiniteQueryOptions, -): CreateInfiniteQueryResult - -export function injectInfiniteQuery( - injectInfiniteQueryFn: () => CreateInfiniteQueryOptions, - options?: InjectInfiniteQueryOptions, -) { - !options?.injector && assertInInjectionContext(injectInfiniteQuery) - const injector = options?.injector ?? inject(Injector) - return runInInjectionContext(injector, () => - createBaseQuery( - injectInfiniteQueryFn, - InfiniteQueryObserver as typeof QueryObserver, - ), - ) -} diff --git a/packages/angular-query-experimental/src/inject-is-fetching.ts b/packages/angular-query-experimental/src/inject-is-fetching.ts deleted file mode 100644 index cef5538374e..00000000000 --- a/packages/angular-query-experimental/src/inject-is-fetching.ts +++ /dev/null @@ -1,97 +0,0 @@ -import { - DestroyRef, - Injector, - NgZone, - assertInInjectionContext, - inject, - signal, -} from '@angular/core' -import { QueryClient, notifyManager } from '@tanstack/query-core' -import type { QueryFilters } from '@tanstack/query-core' -import type { Signal } from '@angular/core' - -/** - * Options for `injectIsFetching`, passed after the query filters. - */ -export interface InjectIsFetchingOptions { - /** - * The `Injector` in which to create the isFetching signal. - * - * If this is not provided, the current injection context will be used instead (via `inject`). - */ - injector?: Injector -} - -/** - * Injects a signal that tracks the number of queries that your application is loading or fetching in the - * background (useful for app-wide loading indicators). - * @param filters - The {@link QueryFilters} to narrow down the matched queries. - * @param options - Additional configuration - * @returns A `Signal` with the number of queries that your application is currently loading or fetching in - * the background. - * @example - * ```angular-ts - * @Component({ - * selector: 'posts-fetching-indicator', - * template: ` - * @if (isFetchingPosts()) { - * Refreshing posts... - * } - * `, - * }) - * export class PostsFetchingIndicator { - * // How many queries matching the posts prefix are fetching? - * readonly isFetchingPosts = injectIsFetching({ queryKey: ['posts'] }) - * } - * ``` - * @example - * A global loading indicator for any query fetching in the background, not just the ones on screen: - * ```angular-ts - * @Component({ - * selector: 'global-loading-indicator', - * template: ` - * @if (isFetching()) { - *
Queries are fetching in the background...
- * } - * `, - * }) - * export class GlobalLoadingIndicator { - * readonly isFetching = injectIsFetching() - * } - * ``` - */ -export function injectIsFetching( - filters?: Omit, - options?: InjectIsFetchingOptions, -): Signal { - !options?.injector && assertInInjectionContext(injectIsFetching) - const injector = options?.injector ?? inject(Injector) - const destroyRef = injector.get(DestroyRef) - const ngZone = injector.get(NgZone) - const queryClient = injector.get(QueryClient) - - const cache = queryClient.getQueryCache() - // isFetching is the prev value initialized on mount * - let isFetching = queryClient.isFetching(filters) - - const result = signal(isFetching) - - const unsubscribe = ngZone.runOutsideAngular(() => - cache.subscribe( - notifyManager.batchCalls(() => { - const newIsFetching = queryClient.isFetching(filters) - if (isFetching !== newIsFetching) { - // * and update with each change - isFetching = newIsFetching - ngZone.run(() => { - result.set(isFetching) - }) - } - }), - ), - ) - - destroyRef.onDestroy(unsubscribe) - - return result -} diff --git a/packages/angular-query-experimental/src/inject-is-mutating.ts b/packages/angular-query-experimental/src/inject-is-mutating.ts deleted file mode 100644 index ab59bc4523c..00000000000 --- a/packages/angular-query-experimental/src/inject-is-mutating.ts +++ /dev/null @@ -1,81 +0,0 @@ -import { - DestroyRef, - Injector, - NgZone, - assertInInjectionContext, - inject, - signal, -} from '@angular/core' -import { QueryClient, notifyManager } from '@tanstack/query-core' -import type { MutationFilters } from '@tanstack/query-core' -import type { Signal } from '@angular/core' - -/** - * Options for `injectIsMutating`, passed after the mutation filters. - */ -export interface InjectIsMutatingOptions { - /** - * The `Injector` in which to create the isMutating signal. - * - * If this is not provided, the current injection context will be used instead (via `inject`). - */ - injector?: Injector -} - -/** - * Injects a signal that tracks the number of mutations that your application currently has `pending` - * (useful for app-wide loading indicators). - * @param filters - The {@link MutationFilters} to narrow down the matched mutations. - * @param options - Additional configuration - * @returns A `Signal` with the number of mutations that your application currently has `pending`. - * @example - * ```angular-ts - * @Component({ - * selector: 'posts-mutating-indicator', - * template: ` - * @if (isMutatingPosts()) { - * Saving posts... - * } - * `, - * }) - * export class PostsMutatingIndicator { - * // How many mutations matching the posts prefix are in progress? - * readonly isMutatingPosts = injectIsMutating({ mutationKey: ['posts'] }) - * } - * ``` - */ -export function injectIsMutating( - filters?: Omit, - options?: InjectIsMutatingOptions, -): Signal { - !options?.injector && assertInInjectionContext(injectIsMutating) - const injector = options?.injector ?? inject(Injector) - const destroyRef = injector.get(DestroyRef) - const ngZone = injector.get(NgZone) - const queryClient = injector.get(QueryClient) - - const cache = queryClient.getMutationCache() - // isMutating is the prev value initialized on mount * - let isMutating = queryClient.isMutating(filters) - - const result = signal(isMutating) - - const unsubscribe = ngZone.runOutsideAngular(() => - cache.subscribe( - notifyManager.batchCalls(() => { - const newIsMutating = queryClient.isMutating(filters) - if (isMutating !== newIsMutating) { - // * and update with each change - isMutating = newIsMutating - ngZone.run(() => { - result.set(isMutating) - }) - } - }), - ), - ) - - destroyRef.onDestroy(unsubscribe) - - return result.asReadonly() -} diff --git a/packages/angular-query-experimental/src/inject-is-restoring.ts b/packages/angular-query-experimental/src/inject-is-restoring.ts deleted file mode 100644 index 901f5e55852..00000000000 --- a/packages/angular-query-experimental/src/inject-is-restoring.ts +++ /dev/null @@ -1,53 +0,0 @@ -import { - InjectionToken, - Injector, - assertInInjectionContext, - inject, - signal, -} from '@angular/core' -import type { Provider, Signal } from '@angular/core' - -/** - * Internal token used to track isRestoring state, accessible in public API through `injectIsRestoring` and set via `provideIsRestoring` - */ -const IS_RESTORING = new InjectionToken('', { - // Default value when not provided - factory: () => signal(false).asReadonly(), -}) - -interface InjectIsRestoringOptions { - /** - * The `Injector` to use to get the isRestoring signal. - * - * If this is not provided, the current injection context will be used instead (via `inject`). - */ - injector?: Injector -} - -/** - * Injects a signal that tracks whether a restore (e.g. from a persisted client, wired up via - * `provideIsRestoring`) is currently in progress. `injectQuery` and friends also check this internally to - * avoid race conditions between the restore and initializing queries. - * @param options - Additional configuration - * @returns A readonly `Signal` — `true` while a restore is in progress, `false` otherwise (the - * default when no `provideIsRestoring` provider is registered). - */ -export function injectIsRestoring(options?: InjectIsRestoringOptions) { - !options?.injector && assertInInjectionContext(injectIsRestoring) - const injector = options?.injector ?? inject(Injector) - return injector.get(IS_RESTORING) -} - -/** - * Registers a provider for the restore state read by `injectIsRestoring`. Wire this up wherever you drive a - * restore yourself — e.g. a persist-client integration — so `injectQuery` and friends can defer subscribing - * to their observer (avoiding a race with the restore) until the restore signal flips back to `false`. - * @param isRestoring - A readonly `Signal` that tracks the restore state. - * @returns A provider for the `isRestoring` signal. - */ -export function provideIsRestoring(isRestoring: Signal): Provider { - return { - provide: IS_RESTORING, - useValue: isRestoring, - } -} diff --git a/packages/angular-query-experimental/src/inject-mutation-state.ts b/packages/angular-query-experimental/src/inject-mutation-state.ts deleted file mode 100644 index 1396125281a..00000000000 --- a/packages/angular-query-experimental/src/inject-mutation-state.ts +++ /dev/null @@ -1,175 +0,0 @@ -import { - DestroyRef, - Injector, - NgZone, - assertInInjectionContext, - computed, - inject, - signal, -} from '@angular/core' -import { - QueryClient, - notifyManager, - replaceEqualDeep, -} from '@tanstack/query-core' -import type { Signal } from '@angular/core' -import type { - Mutation, - MutationCache, - MutationFilters, - MutationState, -} from '@tanstack/query-core' - -type MutationStateOptions = { - filters?: MutationFilters - select?: (mutation: Mutation) => TResult -} - -/** - * Collects the mutations in the cache that match `options.filters`, mapped with `options.select` - * (or to their state, by default). - * @param mutationCache - The mutation cache to read. - * @param options - The `filters` to match and the `select` function to map each mutation with. - * @returns The selected value of every matching mutation. - */ -function getResult( - mutationCache: MutationCache, - options: MutationStateOptions, -): Array { - return mutationCache - .findAll(options.filters) - .map( - (mutation): TResult => - (options.select ? options.select(mutation) : mutation.state) as TResult, - ) -} - -/** - * Options for `injectMutationState`, passed after the function that returns the mutation state - * options. - */ -export interface InjectMutationStateOptions { - /** - * The `Injector` in which to create the mutation state signal. - * - * If this is not provided, the current injection context will be used instead (via `inject`). - */ - injector?: Injector -} - -/** - * Injects a signal that gives you access to all mutations in the `MutationCache`. You can pass `filters` - * ({@link MutationFilters}) to narrow down your mutations, and `select` to transform the mutation state. - * @param injectMutationStateFn - A function returning the `filters` to narrow down matched mutations, and an - * optional `select` to transform the mutation state. Similar to `computed` from Angular, this function runs - * in the reactive context, so signals read inside it re-narrow the matched mutations. - * @param options - Additional configuration - * @returns A `Signal` with an Array of whatever `select` returns for each matching mutation. - * @example - * Get all variables of all running mutations: - * ```angular-ts - * @Component({ - * selector: 'pending-posts', - * template: `{{ pendingVariables().length }} posts saving...`, - * }) - * export class PendingPosts { - * readonly pendingVariables = injectMutationState(() => ({ - * filters: { status: 'pending' }, - * select: (mutation) => mutation.state.variables, - * })) - * } - * ``` - * @example - * Get all data for specific mutations via the `mutationKey`: - * ```angular-ts - * const mutationKey = ['posts'] - * - * @Component({ - * selector: 'posts', - * template: ` - * - * `, - * }) - * export class Posts { - * // Some mutation that we want to get the state for - * readonly createPostMutation = injectMutation(() => ({ - * mutationKey, - * mutationFn: createPosts, - * })) - * - * readonly savedPosts = injectMutationState(() => ({ - * // this mutation key needs to match the mutation key of the given mutation (see above) - * filters: { mutationKey, status: 'success' }, - * select: (mutation) => mutation.state.data, - * })) - * - * createPost() { - * this.createPostMutation.mutate(['New Post']) - * } - * } - * ``` - */ -export function injectMutationState( - injectMutationStateFn: () => MutationStateOptions = () => ({}), - options?: InjectMutationStateOptions, -): Signal> { - !options?.injector && assertInInjectionContext(injectMutationState) - const injector = options?.injector ?? inject(Injector) - const destroyRef = injector.get(DestroyRef) - const ngZone = injector.get(NgZone) - const queryClient = injector.get(QueryClient) - const mutationCache = queryClient.getMutationCache() - - /** - * Computed signal that gets result from mutation cache based on passed options - * First element is the result, second element is the time when the result was set - */ - const resultFromOptionsSignal = computed(() => { - return [ - getResult(mutationCache, injectMutationStateFn()), - performance.now(), - ] as const - }) - - /** - * Signal that contains result set by subscriber - * First element is the result, second element is the time when the result was set - */ - const resultFromSubscriberSignal = signal<[Array, number] | null>( - null, - ) - - /** - * Returns the last result by either subscriber or options - */ - const effectiveResultSignal = computed(() => { - const optionsResult = resultFromOptionsSignal() - const subscriberResult = resultFromSubscriberSignal() - return subscriberResult && subscriberResult[1] > optionsResult[1] - ? subscriberResult[0] - : optionsResult[0] - }) - - const unsubscribe = ngZone.runOutsideAngular(() => - mutationCache.subscribe( - notifyManager.batchCalls(() => { - const [lastResult] = effectiveResultSignal() - const nextResult = replaceEqualDeep( - lastResult, - getResult(mutationCache, injectMutationStateFn()), - ) - if (lastResult !== nextResult) { - ngZone.run(() => { - resultFromSubscriberSignal.set([nextResult, performance.now()]) - }) - } - }), - ), - ) - - destroyRef.onDestroy(unsubscribe) - - return effectiveResultSignal -} diff --git a/packages/angular-query-experimental/src/inject-mutation.ts b/packages/angular-query-experimental/src/inject-mutation.ts deleted file mode 100644 index 0557ec2c821..00000000000 --- a/packages/angular-query-experimental/src/inject-mutation.ts +++ /dev/null @@ -1,326 +0,0 @@ -import { - Injector, - NgZone, - assertInInjectionContext, - computed, - effect, - inject, - signal, - untracked, -} from '@angular/core' -import { - MutationObserver, - QueryClient, - noop, - notifyManager, - shouldThrowError, -} from '@tanstack/query-core' -import { signalProxy } from './signal-proxy' -import { PENDING_TASKS } from './pending-tasks-compat' -import type { PendingTaskRef } from './pending-tasks-compat' -import type { DefaultError, MutationObserverResult } from '@tanstack/query-core' -import type { - CreateMutateFunction, - CreateMutationOptions, - CreateMutationResult, -} from './types' - -/** - * Options for `injectMutation`, passed after the function that returns the mutation options. - */ -export interface InjectMutationOptions { - /** - * The `Injector` in which to create the mutation. - * - * If this is not provided, the current injection context will be used instead (via `inject`). - */ - injector?: Injector -} - -/** - * Unlike queries, mutations are typically used to create/update/delete data or perform server side-effects. - * `injectMutation` is the function for that. Unlike queries, mutations are not run automatically. - * @param injectMutationFn - A function that returns mutation options. Similar to `computed` from Angular, - * this function runs in the reactive context, so signals read inside it drive the mutation's options. - * @param options - Additional configuration - * @returns The mutation result. Value fields are exposed as a `Signal` — read `data`/`error` by calling them - * (e.g. `mutation.data()`) — while function fields (`mutate`, `mutateAsync`, `reset`) are called directly, - * unchanged. `isSuccess`/`isError`/`isPending`/`isIdle` are type-guard methods you can call to narrow whether - * `data` is defined. - * @remarks `mutate`/`mutateAsync` also accept per-call `onSuccess`/`onError`/`onSettled` callbacks as a - * second argument, useful for triggering call-site side effects (e.g. navigation) without coupling them to - * the shared mutation definition. Callbacks defined in `injectMutationFn` fire for every mutation; per-call - * callbacks fire only for the latest call you've made — `mutateAsync` gives you a promise per call instead, - * so you can await `Promise.all`/`Promise.allSettled` over several calls and see each one's outcome. - * @see {@link mutationOptions} to share these options across multiple `injectMutation` call sites, or to look - * the mutation up elsewhere via its `mutationKey` (e.g. with `injectMutationState`). - * @example - * ```angular-ts - * @Component({ - * selector: 'todos', - * template: ` - * @if (addMutation.isPending()) { - * Adding todo... - * } @else if (addMutation.isError()) { - *
An error occurred: {{ addMutation.error()?.message }}
- * } - * - * `, - * }) - * export class Todos { - * readonly #queryClient = inject(QueryClient) - * - * readonly addMutation = injectMutation(() => ({ - * mutationFn: addTodo, - * onSuccess: () => this.#queryClient.invalidateQueries({ queryKey: ['todos'] }), - * })) - * } - * ``` - * @example - * Optimistic update via `onMutate`, rolling back on `onError`: - * ```angular-ts - * @Component({ - * selector: 'todos', - * template: ``, - * }) - * export class Todos { - * readonly #queryClient = inject(QueryClient) - * - * readonly addMutation = injectMutation(() => ({ - * mutationFn: addTodo, - * onMutate: async (newTodo) => { - * await this.#queryClient.cancelQueries({ queryKey: ['todos'] }) - * const previousTodos = this.#queryClient.getQueryData>(['todos']) - * - * this.#queryClient.setQueryData>(['todos'], (old) => [ - * ...(old ?? []), - * newTodo, - * ]) - * - * // Passed to `onError` as `onMutateResult` if the mutation fails. - * return { previousTodos } - * }, - * onError: (_err, _newTodo, onMutateResult) => { - * this.#queryClient.setQueryData(['todos'], onMutateResult?.previousTodos) - * }, - * onSettled: () => { - * this.#queryClient.invalidateQueries({ queryKey: ['todos'] }) - * }, - * })) - * } - * ``` - * @example - * Callbacks passed per call to `mutate` only fire for the last call — `mutateAsync` gives you a promise per - * call instead, so you can wait for all of them when they succeed: - * ```angular-ts - * @Component({ - * selector: 'todos', - * template: ` - * - * `, - * }) - * export class Todos { - * readonly #queryClient = inject(QueryClient) - * - * readonly addMutation = injectMutation(() => ({ - * mutationFn: addTodo, - * onSuccess: () => this.#queryClient.invalidateQueries({ queryKey: ['todos'] }), - * })) - * - * async handleAddAll(todos: Array) { - * try { - * await Promise.all(todos.map((todo) => this.addMutation.mutateAsync(todo))) - * } catch (error) { - * console.error('Failed to add todos:', error) - * } - * } - * } - * ``` - * @example - * If some of the mutations above can fail independently of the others, and you want to know which ones did — - * rather than losing that information the moment the first one rejects — swap `Promise.all` for - * `Promise.allSettled`: - * ```angular-ts - * @Component({ - * selector: 'todos', - * template: ` - * - * `, - * }) - * export class Todos { - * readonly #queryClient = inject(QueryClient) - * - * readonly addMutation = injectMutation(() => ({ - * mutationFn: addTodo, - * onSuccess: () => this.#queryClient.invalidateQueries({ queryKey: ['todos'] }), - * })) - * - * async handleAddAll(todos: Array) { - * const addResults = await Promise.allSettled( - * todos.map((todo) => this.addMutation.mutateAsync(todo)), - * ) - * - * addResults.forEach((addResult, index) => { - * if (addResult.status === 'rejected') { - * console.error(`Failed to add "${todos[index]}":`, addResult.reason) - * } - * }) - * } - * } - * ``` - */ -export function injectMutation< - TData = unknown, - TError = DefaultError, - TVariables = void, - TOnMutateResult = unknown, ->( - injectMutationFn: () => CreateMutationOptions< - TData, - TError, - TVariables, - TOnMutateResult - >, - options?: InjectMutationOptions, -): CreateMutationResult { - !options?.injector && assertInInjectionContext(injectMutation) - const injector = options?.injector ?? inject(Injector) - const ngZone = injector.get(NgZone) - const pendingTasks = injector.get(PENDING_TASKS) - const queryClient = injector.get(QueryClient) - - /** - * computed() is used so signals can be inserted into the options - * making it reactive. Wrapping options in a function ensures embedded expressions - * are preserved and can keep being applied after signal changes - */ - const optionsSignal = computed(injectMutationFn) - - const observerSignal = (() => { - let instance: MutationObserver< - TData, - TError, - TVariables, - TOnMutateResult - > | null = null - - return computed(() => { - return (instance ||= new MutationObserver(queryClient, optionsSignal())) - }) - })() - - const mutateFnSignal = computed< - CreateMutateFunction - >(() => { - const observer = observerSignal() - return ( - ...args: Parameters< - CreateMutateFunction - > - ) => { - observer.mutate(args[0] as TVariables, args[1]).catch(noop) - } - }) - - /** - * Computed signal that gets result from mutation cache based on passed options - */ - const resultFromInitialOptionsSignal = computed(() => { - const observer = observerSignal() - return observer.getCurrentResult() - }) - - /** - * Signal that contains result set by subscriber - */ - const resultFromSubscriberSignal = signal | null>(null) - - effect( - () => { - const observer = observerSignal() - const observerOptions = optionsSignal() - - untracked(() => { - observer.setOptions(observerOptions) - }) - }, - { - injector, - }, - ) - - effect( - (onCleanup) => { - // observer.trackResult is not used as this optimization is not needed for Angular - const observer = observerSignal() - let pendingTaskRef: PendingTaskRef | null = null - - untracked(() => { - const unsubscribe = ngZone.runOutsideAngular(() => - observer.subscribe( - notifyManager.batchCalls((state) => { - ngZone.run(() => { - // Track pending task when mutation is pending - if (state.isPending && !pendingTaskRef) { - pendingTaskRef = pendingTasks.add() - } - - // Clear pending task when mutation is no longer pending - if (!state.isPending && pendingTaskRef) { - pendingTaskRef() - pendingTaskRef = null - } - - if ( - state.isError && - shouldThrowError(observer.options.throwOnError, [state.error]) - ) { - ngZone.onError.emit(state.error) - throw state.error - } - - resultFromSubscriberSignal.set(state) - }) - }), - ), - ) - onCleanup(() => { - // Clean up any pending task on destroy - if (pendingTaskRef) { - pendingTaskRef() - pendingTaskRef = null - } - unsubscribe() - }) - }) - }, - { - injector, - }, - ) - - const resultSignal = computed(() => { - const resultFromSubscriber = resultFromSubscriberSignal() - const resultFromInitialOptions = resultFromInitialOptionsSignal() - - const result = resultFromSubscriber ?? resultFromInitialOptions - - return { - ...result, - mutate: mutateFnSignal(), - mutateAsync: result.mutate, - } - }) - - return signalProxy(resultSignal) as CreateMutationResult< - TData, - TError, - TVariables, - TOnMutateResult - > -} diff --git a/packages/angular-query-experimental/src/inject-queries-experimental/index.ts b/packages/angular-query-experimental/src/inject-queries-experimental/index.ts deleted file mode 100644 index d300d7d2a55..00000000000 --- a/packages/angular-query-experimental/src/inject-queries-experimental/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from '../inject-queries' diff --git a/packages/angular-query-experimental/src/inject-queries.ts b/packages/angular-query-experimental/src/inject-queries.ts deleted file mode 100644 index 0a249251954..00000000000 --- a/packages/angular-query-experimental/src/inject-queries.ts +++ /dev/null @@ -1,484 +0,0 @@ -import { - QueriesObserver, - QueryClient, - notifyManager, -} from '@tanstack/query-core' -import { - DestroyRef, - Injector, - NgZone, - assertInInjectionContext, - computed, - effect, - inject, - runInInjectionContext, - signal, - untracked, -} from '@angular/core' -import { signalProxy } from './signal-proxy' -import { injectIsRestoring } from './inject-is-restoring' -import type { - DefaultError, - OmitKeyof, - QueriesObserverOptions, - QueriesPlaceholderDataFunction, - QueryFunction, - QueryKey, - QueryObserverOptions, - ThrowOnError, -} from '@tanstack/query-core' -import type { - CreateQueryOptions, - CreateQueryResult, - DefinedCreateQueryResult, -} from './types' -import type { Signal } from '@angular/core' - -// This defines the `CreateQueryOptions` that are accepted in `QueriesOptions` & `GetOptions`. -// `placeholderData` function always gets undefined passed -type QueryObserverOptionsForCreateQueries< - TQueryFnData = unknown, - TError = DefaultError, - TData = TQueryFnData, - TQueryKey extends QueryKey = QueryKey, -> = OmitKeyof< - CreateQueryOptions, - 'placeholderData' -> & { - placeholderData?: TQueryFnData | QueriesPlaceholderDataFunction -} - -// Avoid TS depth-limit error in case of large array literal -type MAXIMUM_DEPTH = 20 - -// Widen the type of the symbol to enable type inference even if skipToken is not immutable. -type SkipTokenForCreateQueries = symbol - -type GetCreateQueryOptionsForCreateQueries = - // Part 1: responsible for applying explicit type parameter to function arguments, if object { queryFnData: TQueryFnData, error: TError, data: TData } - T extends { - queryFnData: infer TQueryFnData - error?: infer TError - data: infer TData - } - ? QueryObserverOptionsForCreateQueries - : T extends { queryFnData: infer TQueryFnData; error?: infer TError } - ? QueryObserverOptionsForCreateQueries - : T extends { data: infer TData; error?: infer TError } - ? QueryObserverOptionsForCreateQueries - : // Part 2: responsible for applying explicit type parameter to function arguments, if tuple [TQueryFnData, TError, TData] - T extends [infer TQueryFnData, infer TError, infer TData] - ? QueryObserverOptionsForCreateQueries - : T extends [infer TQueryFnData, infer TError] - ? QueryObserverOptionsForCreateQueries - : T extends [infer TQueryFnData] - ? QueryObserverOptionsForCreateQueries - : // Part 3: responsible for inferring and enforcing type if no explicit parameter was provided - T extends { - queryFn?: - | QueryFunction - | SkipTokenForCreateQueries - select?: (data: any) => infer TData - throwOnError?: ThrowOnError - } - ? QueryObserverOptionsForCreateQueries< - TQueryFnData, - unknown extends TError ? DefaultError : TError, - unknown extends TData ? TQueryFnData : TData, - TQueryKey - > - : // Fallback - QueryObserverOptionsForCreateQueries - -// A defined initialData setting should return a DefinedCreateQueryResult rather than CreateQueryResult -type GetDefinedOrUndefinedQueryResult = T extends { - initialData?: infer TInitialData -} - ? unknown extends TInitialData - ? CreateQueryResult - : TInitialData extends TData - ? DefinedCreateQueryResult - : TInitialData extends () => infer TInitialDataResult - ? unknown extends TInitialDataResult - ? CreateQueryResult - : TInitialDataResult extends TData - ? DefinedCreateQueryResult - : CreateQueryResult - : CreateQueryResult - : CreateQueryResult - -type GetCreateQueryResult = - // Part 1: responsible for mapping explicit type parameter to function result, if object - T extends { queryFnData: any; error?: infer TError; data: infer TData } - ? GetDefinedOrUndefinedQueryResult - : T extends { queryFnData: infer TQueryFnData; error?: infer TError } - ? GetDefinedOrUndefinedQueryResult - : T extends { data: infer TData; error?: infer TError } - ? GetDefinedOrUndefinedQueryResult - : // Part 2: responsible for mapping explicit type parameter to function result, if tuple - T extends [any, infer TError, infer TData] - ? GetDefinedOrUndefinedQueryResult - : T extends [infer TQueryFnData, infer TError] - ? GetDefinedOrUndefinedQueryResult - : T extends [infer TQueryFnData] - ? GetDefinedOrUndefinedQueryResult - : // Part 3: responsible for mapping inferred type to results, if no explicit parameter was provided - T extends { - queryFn?: - | QueryFunction - | SkipTokenForCreateQueries - select?: (data: any) => infer TData - throwOnError?: ThrowOnError - } - ? GetDefinedOrUndefinedQueryResult< - T, - unknown extends TData ? TQueryFnData : TData, - unknown extends TError ? DefaultError : TError - > - : // Fallback - CreateQueryResult - -/** - * The `queries` array accepted by `injectQueries`. Recursively unwraps each tuple element so every entry's - * `queryFn`/`select`/`throwOnError` are inferred individually, up to 20 elements — past that, tuple - * recursion falls back to a single homogeneous options type. An opaque array (e.g. `unknown[]`) is returned - * as-is; a non-tuple array of a known element type is mapped to that element type instead, with no such - * limit. - * @template T - The type of the `queries` array as written at the call site. - * @template TResults - The internal accumulator that this type builds during recursion. It is not meant to - * be set explicitly. - * @template TDepth - The internal recursion-depth counter, checked against the 20-element limit. It is not - * meant to be set explicitly. - */ -export type QueriesOptions< - T extends Array, - TResults extends Array = [], - TDepth extends ReadonlyArray = [], -> = TDepth['length'] extends MAXIMUM_DEPTH - ? Array - : T extends [] - ? [] - : T extends [infer Head] - ? [...TResults, GetCreateQueryOptionsForCreateQueries] - : T extends [infer Head, ...infer Tails] - ? QueriesOptions< - [...Tails], - [...TResults, GetCreateQueryOptionsForCreateQueries], - [...TDepth, 1] - > - : ReadonlyArray extends T - ? T - : // If T is *some* array but we couldn't assign unknown[] to it, then it must hold some known/homogeneous type! - // use this to infer the param types in the case of Array.map() argument - T extends Array< - QueryObserverOptionsForCreateQueries< - infer TQueryFnData, - infer TError, - infer TData, - infer TQueryKey - > - > - ? Array< - QueryObserverOptionsForCreateQueries< - TQueryFnData, - TError, - TData, - TQueryKey - > - > - : // Fallback - Array - -/** - * The result type returned by `injectQueries`, when no `combine` is provided. Mirrors {@link QueriesOptions}: - * each tuple element's result type is inferred individually, up to 20 elements — past that, tuple recursion - * falls back to a single homogeneous {@link CreateQueryResult} type. A non-tuple array is mapped per-element - * instead, with no such limit — every entry keeps its individually inferred type regardless of array length. - * @template T - The type of the `queries` array, as inferred by {@link QueriesOptions}. - * @template TResults - The internal accumulator that this type builds during recursion. It is not meant to - * be set explicitly. - * @template TDepth - The internal recursion-depth counter, checked against the 20-element limit. It is not - * meant to be set explicitly. - */ -export type QueriesResults< - T extends Array, - TResults extends Array = [], - TDepth extends ReadonlyArray = [], -> = TDepth['length'] extends MAXIMUM_DEPTH - ? Array - : T extends [] - ? [] - : T extends [infer Head] - ? [...TResults, GetCreateQueryResult] - : T extends [infer Head, ...infer Tails] - ? QueriesResults< - [...Tails], - [...TResults, GetCreateQueryResult], - [...TDepth, 1] - > - : { [K in keyof T]: GetCreateQueryResult } - -/** - * The options for `injectQueries`: the `queries` to run, and an optional `combine` function that - * derives a single result from all the query results. - */ -export interface InjectQueriesOptions< - T extends Array, - TCombinedResult = QueriesResults, -> { - /** - * The array of query options to run, one query per element. - */ - queries: - | readonly [...QueriesOptions] - | readonly [ - ...{ [K in keyof T]: GetCreateQueryOptionsForCreateQueries }, - ] - /** - * Combines the results of all the queries into a single value, which `injectQueries` returns - * instead of the results array. - */ - combine?: (result: QueriesResults) => TCombinedResult -} - -/** - * Injects a signal to fetch a variable number of queries. - * - * The `queries` key accepts an array with query option objects mostly identical to `injectQuery`'s. Having - * the same query key more than once in the array of query objects may cause some data to be shared between - * queries. To avoid this, consider de-duplicating the queries and map the results back to the desired - * structure. - * - * The `combine` option can be used to combine the results of the queries into a single value. The result - * will be structurally shared to be as referentially stable as possible. - * @param optionsFn - A function returning the queries' options — an array of query option objects under - * `queries`, and an optional `combine`. Similar to `computed` from Angular, this function runs in the - * reactive context, so signals read inside it (e.g. to build the `queries` array) drive the queries. - * @param injector - The `Injector` in which to create the queries. If this is not provided, the current - * injection context will be used instead (via `inject`). - * @returns A `Signal` with the combined result. Without `combine`, this is an array with all the query - * results, in the same order as the input. When `combine` is provided, this is the value returned by - * `combine` instead. - * @remarks Unlike `injectQuery`, `injectQueries` cannot infer the `data` argument of an _inline_ `select` - * from its sibling `queryFn`. Because `injectQueries` infers the type of the whole `queries` array at once, - * the `select` parameter of a query object written inline cannot be contextually typed from that same - * object's `queryFn`, so it falls back to `unknown` — a - * [known TypeScript limitation](https://github.com/TanStack/query/issues/6556). Annotate the `select` - * parameter explicitly, or define the query with {@link queryOptions}, which resolves its types in a single - * object _before_ it reaches `injectQueries`, to work around this — see the example below. - * @example - * ```angular-ts - * @Component({ - * selector: 'posts', - * template: ` - *
    - * @for (query of postQueries(); track $index) { - * @if (query.isPending()) { - *
  • Loading...
    • - * } @else if (query.isError()) { - *
  • Error: {{ query.error()?.message }}
    • - * } @else { - *
  • {{ query.data().title }}
    • - * } - * } - *
- * `, - * }) - * export class Posts { - * readonly ids = signal([1, 2, 3]) - * - * readonly postQueries = injectQueries(() => ({ - * queries: this.ids().map((id) => ({ - * queryKey: ['post', id], - * queryFn: () => fetchPost(id), - * staleTime: Infinity, - * })), - * })) - * } - * ``` - * @example - * Combining results into a single value: - * ```angular-ts - * @Component({ - * selector: 'posts', - * template: ` - * @if (combined().isPending) { - * Loading... - * } @else if (combined().isError) { - * Error loading posts - * } @else { - *
    - * @for (post of combined().data; track post?.id) { - *
  • {{ post?.title }}
    • - * } - *
- * } - * `, - * }) - * export class Posts { - * readonly ids = signal([1, 2, 3]) - * - * readonly combined = injectQueries(() => ({ - * queries: this.ids().map((id) => ({ - * queryKey: ['post', id], - * queryFn: () => fetchPost(id), - * })), - * combine: (postQueries) => ({ - * data: postQueries.map((query) => query.data), - * isPending: postQueries.some((query) => query.isPending), - * isError: postQueries.some((query) => query.isError), - * }), - * })) - * } - * ``` - * @example - * Typing `select` via {@link queryOptions}. Note that spreading a `queryOptions` result and overriding - * `select` inline still falls back to `unknown` — wrap the spread in `queryOptions` again so the override is - * resolved before it reaches `injectQueries`: - * ```angular-ts - * const postOptions = (id: number) => - * queryOptions({ - * queryKey: ['post', id], - * queryFn: () => fetchPost(id), - * }) - * - * @Component({ - * selector: 'post-title', - * template: `

{{ fixed()[0].data() }}

`, - * }) - * export class PostTitle { - * readonly id = signal(1) - * - * readonly broken = injectQueries(() => ({ - * queries: [ - * { - * ...postOptions(this.id()), - * // ❌ `data` is `unknown` here - * select: (data) => data.title, - * }, - * ], - * })) - * - * readonly fixed = injectQueries(() => ({ - * queries: [ - * queryOptions({ - * ...postOptions(this.id()), - * // ✅ `data` is `Post` - * select: (data) => data.title, - * }), - * ], - * })) - * } - * ``` - */ -export function injectQueries< - T extends Array, - TCombinedResult = QueriesResults, ->( - optionsFn: () => InjectQueriesOptions, - injector?: Injector, -): Signal { - !injector && assertInInjectionContext(injectQueries) - return runInInjectionContext(injector ?? inject(Injector), () => { - const destroyRef = inject(DestroyRef) - const ngZone = inject(NgZone) - const queryClient = inject(QueryClient) - const isRestoring = injectIsRestoring() - - /** - * Signal that has the default options from query client applied - * computed() is used so signals can be inserted into the options - * making it reactive. Wrapping options in a function ensures embedded expressions - * are preserved and can keep being applied after signal changes - */ - const optionsSignal = computed(() => { - return optionsFn() - }) - - const defaultedQueries = computed(() => { - return optionsSignal().queries.map((opts) => { - const defaultedOptions = queryClient.defaultQueryOptions( - opts as QueryObserverOptions, - ) - // Make sure the results are already in fetching state before subscribing or updating options - defaultedOptions._optimisticResults = isRestoring() - ? 'isRestoring' - : 'optimistic' - - return defaultedOptions - }) - }) - - const observerSignal = (() => { - let instance: QueriesObserver | null = null - - return computed(() => { - return (instance ||= new QueriesObserver( - queryClient, - defaultedQueries(), - optionsSignal() as QueriesObserverOptions, - )) - }) - })() - - const optimisticResultSignal = computed(() => - observerSignal().getOptimisticResult( - defaultedQueries(), - (optionsSignal() as QueriesObserverOptions).combine, - ), - ) - - // Do not notify on updates because of changes in the options because - // these changes should already be reflected in the optimistic result. - effect(() => { - observerSignal().setQueries( - defaultedQueries(), - optionsSignal() as QueriesObserverOptions, - ) - }) - - const optimisticCombinedResultSignal = computed(() => { - const [_optimisticResult, getCombinedResult, trackResult] = - optimisticResultSignal() - return getCombinedResult(trackResult()) - }) - - const resultFromSubscriberSignal = signal(null) - - effect(() => { - const observer = observerSignal() - const [_optimisticResult, getCombinedResult] = optimisticResultSignal() - - untracked(() => { - const unsubscribe = isRestoring() - ? () => undefined - : ngZone.runOutsideAngular(() => - observer.subscribe( - notifyManager.batchCalls((state) => { - resultFromSubscriberSignal.set(getCombinedResult(state)) - }), - ), - ) - - destroyRef.onDestroy(unsubscribe) - }) - }) - - const resultSignal = computed(() => { - const subscriberResult = resultFromSubscriberSignal() - const optimisticResult = optimisticCombinedResultSignal() - return subscriberResult ?? optimisticResult - }) - - return computed(() => { - const result = resultSignal() - const { combine } = optionsSignal() - - return combine - ? result - : (result as QueriesResults).map((query) => - signalProxy(signal(query)), - ) - }) - }) as unknown as Signal -} diff --git a/packages/angular-query-experimental/src/inject-query-client.ts b/packages/angular-query-experimental/src/inject-query-client.ts deleted file mode 100644 index 7cd29e38508..00000000000 --- a/packages/angular-query-experimental/src/inject-query-client.ts +++ /dev/null @@ -1,22 +0,0 @@ -import { Injector, inject } from '@angular/core' -import { QueryClient } from '@tanstack/query-core' -import type { InjectOptions } from '@angular/core' - -/** - * Injects a `QueryClient` instance and allows passing a custom injector. - * @param injectOptions - Type of the options argument to inject and optionally a custom injector. - * @returns The `QueryClient` instance. - * @deprecated Use `inject(QueryClient)` instead. - * If you need to get a `QueryClient` from a custom injector, use `injector.get(QueryClient)`. - * - * - * **Example** - * ```ts - * const queryClient = injectQueryClient(); - * ``` - */ -export function injectQueryClient( - injectOptions: InjectOptions & { injector?: Injector } = {}, -) { - return (injectOptions.injector ?? inject(Injector)).get(QueryClient) -} diff --git a/packages/angular-query-experimental/src/pending-tasks-compat.ts b/packages/angular-query-experimental/src/pending-tasks-compat.ts deleted file mode 100644 index c4eca3992aa..00000000000 --- a/packages/angular-query-experimental/src/pending-tasks-compat.ts +++ /dev/null @@ -1,32 +0,0 @@ -import { InjectionToken, inject } from '@angular/core' -import * as ng from '@angular/core' -import { noop } from '@tanstack/query-core' - -type PendingTasksCompat = { add: () => PendingTaskRef } - -/** - * Removes a pending task registered with Angular's `PendingTasks`, so the app can become stable - * again. Without `PendingTasks` (Angular < 19), it does nothing. - */ -export type PendingTaskRef = () => void - -export const PENDING_TASKS = new InjectionToken( - 'PENDING_TASKS', - { - factory: (): PendingTasksCompat => { - // Access via Reflect so bundlers stay quiet when the token is absent (Angular < 19). - const token = Reflect.get(ng, 'PendingTasks') as unknown as - | Parameters[0] - | undefined - - const svc: PendingTasksCompat | null = token - ? (inject(token, { optional: true }) as PendingTasksCompat | null) - : null - - // Without PendingTasks we fall back to a stable no-op shim. - return { - add: svc ? () => svc.add() : () => noop, - } - }, - }, -) diff --git a/packages/angular-query-experimental/src/providers.ts b/packages/angular-query-experimental/src/providers.ts deleted file mode 100644 index 827f3153106..00000000000 --- a/packages/angular-query-experimental/src/providers.ts +++ /dev/null @@ -1,170 +0,0 @@ -import { DestroyRef, InjectionToken, inject } from '@angular/core' -import { QueryClient } from '@tanstack/query-core' -import type { Provider } from '@angular/core' - -/** - * Usually {@link provideTanStackQuery} is used once to set up TanStack Query and the - * [`QueryClient`](https://tanstack.com/query/latest/docs/reference/QueryClient) for the entire application — - * it calls `provideQueryClient` internally. Use `provideQueryClient` directly to provide a different - * `QueryClient` instance for part of the application, or for unit testing. - * @param queryClient - A `QueryClient` instance, or an `InjectionToken` which provides a `QueryClient`. - * @returns A provider object that can be used to provide the `QueryClient` instance. - * @example - * Providing a test-only `QueryClient` in a component test, without wiring up `provideTanStackQuery`'s other - * defaults: - * ```ts - * TestBed.configureTestingModule({ - * providers: [provideQueryClient(new QueryClient())], - * }) - * ``` - */ -export function provideQueryClient( - queryClient: QueryClient | InjectionToken, -): Provider { - return { - provide: QueryClient, - useFactory: () => { - const client = - queryClient instanceof InjectionToken - ? inject(queryClient) - : queryClient - // Unmount the query client on injector destroy - inject(DestroyRef).onDestroy(() => client.unmount()) - client.mount() - return client - }, - } -} - -/** - * Sets up providers necessary to enable TanStack Query functionality for Angular applications. Allows - * configuring a `QueryClient` and optional features such as developer tools. - * @param queryClient - A `QueryClient` instance, or an `InjectionToken` which provides a `QueryClient`. - * @param features - Optional features to configure additional Query functionality. - * @returns A set of providers to set up TanStack Query. - * @see https://tanstack.com/query/v5/docs/framework/angular/quick-start - * @see {@link withDevtools} - * @example - * ```ts - * import { provideTanStackQuery, QueryClient } from '@tanstack/angular-query-experimental' - * - * bootstrapApplication(AppComponent, { - * providers: [provideTanStackQuery(new QueryClient())], - * }) - * ``` - * @example - * The same, in an `NgModule`-based application: - * ```ts - * import { provideTanStackQuery, QueryClient } from '@tanstack/angular-query-experimental' - * - * @NgModule({ - * declarations: [AppComponent], - * imports: [BrowserModule], - * providers: [provideTanStackQuery(new QueryClient())], - * bootstrap: [AppComponent], - * }) - * export class AppModule {} - * ``` - * @example - * Enabling optional developer tools by adding `withDevtools` — by default, the tools are then loaded when - * your app is in development mode: - * ```ts - * import { - * provideTanStackQuery, - * withDevtools, - * QueryClient, - * } from '@tanstack/angular-query-experimental' - * - * bootstrapApplication(AppComponent, { - * providers: [provideTanStackQuery(new QueryClient(), withDevtools())], - * }) - * ``` - * @example - * Using an `InjectionToken` for the `QueryClient` — an advanced optimization that lets TanStack Query be - * absent from the main application bundle, useful for including it on lazy-loaded routes only while still - * sharing a `QueryClient`. This is a small optimization; for most applications it's preferable to provide - * the `QueryClient` in the main application config, as in the examples above: - * ```ts - * export const MY_QUERY_CLIENT = new InjectionToken('', { - * factory: () => new QueryClient(), - * }) - * - * // In a lazy loaded route or lazy loaded component's providers array: - * providers: [provideTanStackQuery(MY_QUERY_CLIENT)] - * ``` - */ -export function provideTanStackQuery( - queryClient: QueryClient | InjectionToken, - ...features: Array -): Array { - return [ - provideQueryClient(queryClient), - features.map((feature) => feature.ɵproviders), - ] -} - -/** - * Sets up providers necessary to enable TanStack Query functionality for Angular applications. - * - * Allows configuring a `QueryClient`. - * @param queryClient - A `QueryClient` instance. - * @returns A set of providers to set up TanStack Query. - * @see https://tanstack.com/query/v5/docs/framework/angular/quick-start - * @deprecated Use `provideTanStackQuery` instead. - */ -export function provideAngularQuery(queryClient: QueryClient): Array { - return provideTanStackQuery(queryClient) -} - -const queryFeatures = ['Devtools', 'PersistQueryClient'] as const - -type QueryFeatureKind = (typeof queryFeatures)[number] - -/** - * Helper type to represent a Query feature. - */ -export interface QueryFeature { - /** - * The kind of the feature, e.g. `'Devtools'` or `'PersistQueryClient'`. - */ - ɵkind: TFeatureKind - /** - * The providers that `provideTanStackQuery` registers for the feature. - */ - ɵproviders: Array -} - -/** - * Helper function to create an object that represents a Query feature. - * @param kind - The kind of feature, e.g. `'Devtools'`. - * @param providers - The Angular providers this feature contributes to `provideTanStackQuery`. - * @returns A Query feature. - */ -export function queryFeature( - kind: TFeatureKind, - providers: Array, -): QueryFeature { - return { ɵkind: kind, ɵproviders: providers } -} - -/** - * A type alias that represents a feature which enables developer tools. - * The type is used to describe the return value of the `withDevtools` function. - * @see {@link withDevtools} - */ -export type DevtoolsFeature = QueryFeature<'Devtools'> - -/** - * A type alias that represents a feature which enables persistence. - * The type is used to describe the return value of the `withPersistQueryClient` function. - */ -export type PersistQueryClientFeature = QueryFeature<'PersistQueryClient'> - -/** - * A type alias that represents all Query features available for use with `provideTanStackQuery`. - * Features can be enabled by adding special functions to the `provideTanStackQuery` call. - * See documentation for each symbol to find corresponding function name. See also `provideTanStackQuery` - * documentation on how to use those functions. - * @see {@link provideTanStackQuery} - */ -export type QueryFeatures = DevtoolsFeature | PersistQueryClientFeature diff --git a/packages/angular-query-experimental/src/signal-proxy.ts b/packages/angular-query-experimental/src/signal-proxy.ts deleted file mode 100644 index 8a4d34c128c..00000000000 --- a/packages/angular-query-experimental/src/signal-proxy.ts +++ /dev/null @@ -1,49 +0,0 @@ -import { computed, untracked } from '@angular/core' -import type { Signal } from '@angular/core' - -/** - * Maps each field of `T` to a `Signal` of its value. Functions are kept as they are. - */ -export type MapToSignals = { - [K in keyof T]: T[K] extends Function ? T[K] : Signal -} - -/** - * Exposes fields of an object passed via an Angular `Signal` as `Computed` signals. - * Functions on the object are passed through as-is. - * @param inputSignal - `Signal` that must return an object. - * @returns A proxy object with the same fields as the input object, but with each field wrapped in a `Computed` signal. - */ -export function signalProxy>( - inputSignal: Signal, -) { - const internalState = {} as MapToSignals - - return new Proxy>(internalState, { - get(target, prop) { - // first check if we have it in our internal state and return it - const computedField = target[prop] - if (computedField) return computedField - - // then, check if it's a function on the resultState and return it - const targetField = untracked(inputSignal)[prop] - if (typeof targetField === 'function') return targetField - - // finally, create a computed field, store it and return it - // @ts-expect-error - return (target[prop] = computed(() => inputSignal()[prop])) - }, - has(_, prop) { - return !!untracked(inputSignal)[prop] - }, - ownKeys() { - return Reflect.ownKeys(untracked(inputSignal)) - }, - getOwnPropertyDescriptor() { - return { - enumerable: true, - configurable: true, - } - }, - }) -} diff --git a/packages/angular-query-experimental/tsconfig.legacy.json b/packages/angular-query-experimental/tsconfig.legacy.json deleted file mode 100644 index d149e42f059..00000000000 --- a/packages/angular-query-experimental/tsconfig.legacy.json +++ /dev/null @@ -1,9 +0,0 @@ -{ - "extends": "./tsconfig.json", - "compilerOptions": { - "outDir": "./dist-ts/legacy" - }, - "include": ["src"], - "exclude": ["src/__tests__"], - "references": [{ "path": "../query-devtools" }] -} diff --git a/packages/angular-query-experimental/tsdown.config.ts b/packages/angular-query-experimental/tsdown.config.ts deleted file mode 100644 index b2ac75a1f1c..00000000000 --- a/packages/angular-query-experimental/tsdown.config.ts +++ /dev/null @@ -1,23 +0,0 @@ -import { defineConfig } from 'tsdown' - -export default defineConfig({ - entry: ['src/**/*.ts', '!src/__tests__/**'], - format: ['esm'], - target: ['chrome91', 'firefox90', 'edge91', 'safari15', 'ios15', 'opera77'], - // Rolldown lowers private fields for browser target arrays. Keep the - // transform target at ES2022 to match the syntax that tsup emitted. - inputOptions: { transform: { target: 'es2022' } }, - outDir: 'dist', - unbundle: true, - dts: true, - fixedExtension: true, - sourcemap: true, - clean: true, - publint: { - strict: true, - }, - attw: { - profile: 'esm-only', - level: 'error', - }, -}) diff --git a/packages/angular-query-experimental/vite.config.ts b/packages/angular-query-experimental/vite.config.ts deleted file mode 100644 index 12c787085c5..00000000000 --- a/packages/angular-query-experimental/vite.config.ts +++ /dev/null @@ -1,36 +0,0 @@ -import { defineConfig } from 'vitest/config' -import angular from '@analogjs/vite-plugin-angular' -import packageJson from './package.json' - -const config = defineConfig({ - plugins: [angular()], - // fix from https://github.com/vitest-dev/vitest/issues/6992#issuecomment-2509408660 - resolve: { - conditions: ['@tanstack/custom-condition'], - }, - environments: { - ssr: { - resolve: { - conditions: ['@tanstack/custom-condition'], - }, - }, - }, - test: { - name: packageJson.name, - dir: './src', - watch: false, - environment: 'jsdom', - setupFiles: ['test-setup.ts'], - coverage: { - enabled: !!process.env.CI, - provider: 'istanbul', - include: ['src/**/*'], - exclude: ['src/__tests__/**'], - }, - typecheck: { enabled: true }, - globals: true, - restoreMocks: true, - }, -}) - -export default config diff --git a/packages/angular-query-persist-client/CHANGELOG.md b/packages/angular-query-persist-client/CHANGELOG.md index 1bb5dce40d3..6af4d1bf249 100644 --- a/packages/angular-query-persist-client/CHANGELOG.md +++ b/packages/angular-query-persist-client/CHANGELOG.md @@ -1,563 +1,48 @@ # @tanstack/angular-query-persist-client -## 5.103.2 +## 5.0.0-rc.5 ### Patch Changes -- Updated dependencies []: - - @tanstack/angular-query-experimental@5.103.2 - - @tanstack/query-persist-client-core@5.103.2 - -## 5.103.1 - -### Patch Changes - -- Updated dependencies []: - - @tanstack/angular-query-experimental@5.103.1 - - @tanstack/query-persist-client-core@5.103.1 - -## 5.103.0 - -### Patch Changes - -- Updated dependencies [[`4c7cdbb`](https://github.com/TanStack/query/commit/4c7cdbb86d8196e646985cd8a3476d3ac8c12ff5)]: - - @tanstack/query-persist-client-core@5.103.0 - - @tanstack/angular-query-experimental@5.103.0 - -## 5.102.8 - -### Patch Changes - -- Updated dependencies []: - - @tanstack/angular-query-experimental@5.102.8 - - @tanstack/query-persist-client-core@5.102.8 - -## 5.102.7 - -### Patch Changes - -- Updated dependencies []: - - @tanstack/angular-query-experimental@5.102.7 - - @tanstack/query-persist-client-core@5.102.7 +- [#12054](https://github.com/TanStack/query/pull/12054) [`9464a5e`](https://github.com/TanStack/query/commit/9464a5e71f68c95cc12a07068ae30a2f1b13b0ea) - Update the Angular packages to the latest Query core and incorporate upstream adapter fixes, type coverage, and tooling updates. +- Updated dependencies [[`9464a5e`](https://github.com/TanStack/query/commit/9464a5e71f68c95cc12a07068ae30a2f1b13b0ea)]: + - @tanstack/angular-query@5.0.0-rc.5 -## 5.102.6 +## 5.0.0-rc.4 ### Patch Changes -- Updated dependencies []: - - @tanstack/angular-query-experimental@5.102.6 - - @tanstack/query-persist-client-core@5.102.6 - -## 5.102.5 - -### Patch Changes - -- Updated dependencies []: - - @tanstack/angular-query-experimental@5.102.5 - - @tanstack/query-persist-client-core@5.102.5 - -## 5.102.4 - -### Patch Changes - -- Updated dependencies []: - - @tanstack/angular-query-experimental@5.102.4 - - @tanstack/query-persist-client-core@5.102.4 +- Updated dependencies [[`46da583`](https://github.com/TanStack/query/commit/46da583fa3760715d9fb13677bbe022f901e0730), [`1a2f6b3`](https://github.com/TanStack/query/commit/1a2f6b38d534245b957c7ea87ac830cc1e06d7f1)]: + - @tanstack/angular-query@5.0.0-rc.4 -## 5.102.3 +## 5.0.0-rc.3 ### Patch Changes -- Updated dependencies []: - - @tanstack/angular-query-experimental@5.102.3 - - @tanstack/query-persist-client-core@5.102.3 +- Updated dependencies [[`d83eef6`](https://github.com/TanStack/query/commit/d83eef68ae3484ec8254a9c28582ed41af30035b)]: + - @tanstack/angular-query@5.0.0-rc.3 -## 5.102.2 +## 5.0.0-rc.2 ### Patch Changes - Updated dependencies []: - - @tanstack/angular-query-experimental@5.102.2 - - @tanstack/query-persist-client-core@5.102.2 + - @tanstack/angular-query@5.0.0-rc.2 -## 5.102.1 +## 5.0.0-rc.1 ### Patch Changes - Updated dependencies []: - - @tanstack/angular-query-experimental@5.102.1 - - @tanstack/query-persist-client-core@5.102.1 - -## 5.102.0 - -### Patch Changes - -- Updated dependencies [[`294d4e6`](https://github.com/TanStack/query/commit/294d4e62c4f7d674574a4903eef2a1bc3dd1413b), [`2215bb0`](https://github.com/TanStack/query/commit/2215bb031139cdc8a84751b37a485c38ca9d2b6e), [`1ef4208`](https://github.com/TanStack/query/commit/1ef42087c9a266c2137d2ef645cbcc662f60ac93)]: - - @tanstack/angular-query-experimental@5.102.0 - - @tanstack/query-persist-client-core@5.102.0 - -## 5.101.4 - -### Patch Changes - -- Updated dependencies []: - - @tanstack/angular-query-experimental@5.101.4 - - @tanstack/query-persist-client-core@5.101.4 - -## 5.101.3 - -### Patch Changes - -- Updated dependencies []: - - @tanstack/angular-query-experimental@5.101.3 - - @tanstack/query-persist-client-core@5.101.3 - -## 5.101.2 - -### Patch Changes - -- Updated dependencies []: - - @tanstack/angular-query-experimental@5.101.2 - - @tanstack/query-persist-client-core@5.101.2 - -## 5.101.1 - -### Patch Changes - -- Updated dependencies []: - - @tanstack/angular-query-experimental@5.101.1 - - @tanstack/query-persist-client-core@5.101.1 - -## 5.101.0 - -### Patch Changes - -- Updated dependencies []: - - @tanstack/angular-query-experimental@5.101.0 - - @tanstack/query-persist-client-core@5.101.0 - -## 5.100.14 - -### Patch Changes - -- Updated dependencies []: - - @tanstack/angular-query-experimental@5.100.14 - - @tanstack/query-persist-client-core@5.100.14 - -## 5.100.13 - -### Patch Changes - -- Updated dependencies []: - - @tanstack/angular-query-experimental@5.100.13 - - @tanstack/query-persist-client-core@5.100.13 - -## 5.100.12 - -### Patch Changes - -- Updated dependencies []: - - @tanstack/angular-query-experimental@5.100.12 - - @tanstack/query-persist-client-core@5.100.12 - -## 5.100.11 - -### Patch Changes + - @tanstack/angular-query@5.0.0-rc.1 -- Updated dependencies []: - - @tanstack/angular-query-experimental@5.100.11 - - @tanstack/query-persist-client-core@5.100.11 - -## 5.100.10 - -### Patch Changes - -- Updated dependencies []: - - @tanstack/angular-query-experimental@5.100.10 - - @tanstack/query-persist-client-core@5.100.10 - -## 5.100.9 - -### Patch Changes - -- Updated dependencies [[`bf902df`](https://github.com/TanStack/query/commit/bf902df59dcc3196cbc4a379c43ee55200c75a0a)]: - - @tanstack/angular-query-experimental@5.100.9 - - @tanstack/query-persist-client-core@5.100.9 - -## 5.100.8 - -### Patch Changes - -- Updated dependencies []: - - @tanstack/angular-query-experimental@5.100.8 - - @tanstack/query-persist-client-core@5.100.8 - -## 5.100.7 - -### Patch Changes - -- Updated dependencies [[`868577d`](https://github.com/TanStack/query/commit/868577d5daa6de7dc7698f8b41ad5cf225606d05)]: - - @tanstack/angular-query-experimental@5.100.7 - - @tanstack/query-persist-client-core@5.100.7 - -## 5.100.6 - -### Patch Changes - -- Updated dependencies []: - - @tanstack/angular-query-experimental@5.100.6 - - @tanstack/query-persist-client-core@5.100.6 - -## 5.100.5 - -### Patch Changes - -- Updated dependencies []: - - @tanstack/angular-query-experimental@5.100.5 - - @tanstack/query-persist-client-core@5.100.5 - -## 5.100.4 - -### Patch Changes - -- Updated dependencies [[`3d1a62e`](https://github.com/TanStack/query/commit/3d1a62e63bd864359e369bb21356fa80d043f2ba)]: - - @tanstack/angular-query-experimental@5.100.4 - - @tanstack/query-persist-client-core@5.100.4 - -## 5.100.3 - -### Patch Changes - -- Updated dependencies []: - - @tanstack/angular-query-experimental@5.100.3 - - @tanstack/query-persist-client-core@5.100.3 - -## 5.100.2 - -### Patch Changes - -- Updated dependencies []: - - @tanstack/angular-query-experimental@5.100.2 - - @tanstack/query-persist-client-core@5.100.2 - -## 5.100.1 - -### Patch Changes - -- Updated dependencies []: - - @tanstack/angular-query-experimental@5.100.1 - - @tanstack/query-persist-client-core@5.100.1 - -## 5.100.0 - -### Patch Changes - -- Updated dependencies []: - - @tanstack/angular-query-experimental@5.100.0 - - @tanstack/query-persist-client-core@5.100.0 - -## 5.99.2 - -### Patch Changes - -- Updated dependencies []: - - @tanstack/angular-query-experimental@5.99.2 - - @tanstack/query-persist-client-core@5.99.2 - -## 5.99.1 - -### Patch Changes - -- Updated dependencies []: - - @tanstack/angular-query-experimental@5.99.1 - - @tanstack/query-persist-client-core@5.99.1 - -## 5.99.0 - -### Patch Changes - -- Updated dependencies []: - - @tanstack/angular-query-experimental@5.99.0 - - @tanstack/query-persist-client-core@5.99.0 - -## 5.98.0 - -### Patch Changes - -- Updated dependencies []: - - @tanstack/angular-query-experimental@5.98.0 - - @tanstack/query-persist-client-core@5.98.0 - -## 5.97.0 - -### Patch Changes - -- Updated dependencies []: - - @tanstack/angular-query-experimental@5.97.0 - - @tanstack/query-persist-client-core@5.97.0 - -## 5.96.2 - -### Patch Changes - -- Updated dependencies []: - - @tanstack/angular-query-experimental@5.96.2 - - @tanstack/query-persist-client-core@5.96.2 - -## 5.96.1 - -### Patch Changes - -- Updated dependencies []: - - @tanstack/angular-query-experimental@5.96.1 - - @tanstack/query-persist-client-core@5.96.1 - -## 5.96.0 - -### Patch Changes - -- Updated dependencies []: - - @tanstack/angular-query-experimental@5.96.0 - - @tanstack/query-persist-client-core@5.96.0 - -## 5.95.2 - -### Patch Changes - -- Updated dependencies []: - - @tanstack/angular-query-experimental@5.95.2 - - @tanstack/query-persist-client-core@5.95.2 - -## 5.95.1 - -### Patch Changes - -- Updated dependencies []: - - @tanstack/angular-query-experimental@5.95.1 - - @tanstack/query-persist-client-core@5.95.1 - -## 5.95.0 - -### Patch Changes - -- Updated dependencies []: - - @tanstack/angular-query-experimental@5.95.0 - - @tanstack/query-persist-client-core@5.95.0 - -## 5.94.5 - -### Patch Changes - -- fix(\*): resolve issue about excluded build directory ([#10312](https://github.com/TanStack/query/pull/10312)) - -- Updated dependencies [[`4b6536d`](https://github.com/TanStack/query/commit/4b6536dfce99036f4e37f52943c6fed3ad0e0a18)]: - - @tanstack/angular-query-experimental@5.94.5 - - @tanstack/query-persist-client-core@5.94.5 - -## 5.94.4 - -### Patch Changes - -- chore: fixed version ([#10064](https://github.com/TanStack/query/pull/10064)) - -- Updated dependencies [[`4c75210`](https://github.com/TanStack/query/commit/4c75210ce8235fe3d39b67e1029eff11278927cc)]: - - @tanstack/angular-query-experimental@5.94.4 - - @tanstack/query-persist-client-core@5.94.4 - -## 5.62.32 - -### Patch Changes - -- fix(streamedQuery): maintain error state on reset refetch with initialData defined ([#10287](https://github.com/TanStack/query/pull/10287)) - -- Updated dependencies [[`248975e`](https://github.com/TanStack/query/commit/248975e896f585f6eaa505c796e73fcf7bfd1eec)]: - - @tanstack/angular-query-experimental@5.90.28 - - @tanstack/query-persist-client-core@5.92.4 - -## 5.62.31 - -### Patch Changes - -- Updated dependencies []: - - @tanstack/angular-query-experimental@5.90.27 - - @tanstack/query-persist-client-core@5.92.3 - -## 5.62.30 - -### Patch Changes - -- Updated dependencies []: - - @tanstack/angular-query-experimental@5.90.26 - - @tanstack/query-persist-client-core@5.92.2 - -## 5.62.29 - -### Patch Changes - -- Updated dependencies [[`e505568`](https://github.com/TanStack/query/commit/e505568f4d51c8281d38e9687091094b7d32a405)]: - - @tanstack/query-persist-client-core@5.92.1 - -## 5.62.28 - -### Patch Changes - -- Updated dependencies [[`978fc52`](https://github.com/TanStack/query/commit/978fc52728a8b9eb33f0a82f4ddf42a95815bd7f)]: - - @tanstack/query-persist-client-core@5.92.0 - -## 5.62.27 - -### Patch Changes - -- Updated dependencies []: - - @tanstack/angular-query-experimental@5.90.24 - - @tanstack/query-persist-client-core@5.91.19 - -## 5.62.26 - -### Patch Changes - -- Updated dependencies []: - - @tanstack/angular-query-experimental@5.90.23 - - @tanstack/query-persist-client-core@5.91.18 - -## 5.62.25 - -### Patch Changes - -- Updated dependencies []: - - @tanstack/angular-query-experimental@5.90.22 - - @tanstack/query-persist-client-core@5.91.17 - -## 5.62.24 - -### Patch Changes - -- Updated dependencies []: - - @tanstack/angular-query-experimental@5.90.21 - - @tanstack/query-persist-client-core@5.91.16 - -## 5.62.23 - -### Patch Changes - -- Updated dependencies []: - - @tanstack/angular-query-experimental@5.90.20 - - @tanstack/query-persist-client-core@5.91.15 - -## 5.62.22 - -### Patch Changes - -- Updated dependencies []: - - @tanstack/angular-query-experimental@5.90.19 - - @tanstack/query-persist-client-core@5.91.14 - -## 5.62.21 - -### Patch Changes - -- Updated dependencies []: - - @tanstack/angular-query-experimental@5.90.18 - - @tanstack/query-persist-client-core@5.91.13 - -## 5.62.20 - -### Patch Changes - -- Updated dependencies []: - - @tanstack/angular-query-experimental@5.90.17 - - @tanstack/query-persist-client-core@5.91.12 - -## 5.62.19 - -### Patch Changes - -- Updated dependencies []: - - @tanstack/angular-query-experimental@5.90.16 - - @tanstack/query-persist-client-core@5.91.11 - -## 5.62.18 - -### Patch Changes - -- Updated dependencies []: - - @tanstack/angular-query-experimental@5.90.15 - - @tanstack/query-persist-client-core@5.91.10 - -## 5.62.17 - -### Patch Changes - -- Updated dependencies []: - - @tanstack/angular-query-experimental@5.90.12 - - @tanstack/query-persist-client-core@5.91.9 - -## 5.62.16 - -### Patch Changes - -- Updated dependencies []: - - @tanstack/angular-query-experimental@5.90.11 - - @tanstack/query-persist-client-core@5.91.8 - -## 5.62.15 - -### Patch Changes - -- Updated dependencies []: - - @tanstack/angular-query-experimental@5.90.10 - - @tanstack/query-persist-client-core@5.91.7 - -## 5.62.14 - -### Patch Changes - -- Updated dependencies []: - - @tanstack/angular-query-experimental@5.90.9 - - @tanstack/query-persist-client-core@5.91.6 - -## 5.62.13 - -### Patch Changes - -- Updated dependencies []: - - @tanstack/angular-query-experimental@5.90.8 - - @tanstack/query-persist-client-core@5.91.5 - -## 5.62.12 - -### Patch Changes - -- Updated dependencies []: - - @tanstack/angular-query-experimental@5.90.5 - - @tanstack/query-persist-client-core@5.91.4 - -## 5.62.11 - -### Patch Changes - -- Updated dependencies []: - - @tanstack/angular-query-experimental@5.90.4 - - @tanstack/query-persist-client-core@5.91.3 - -## 5.62.10 - -### Patch Changes - -- Updated dependencies []: - - @tanstack/angular-query-experimental@5.90.3 - - @tanstack/query-persist-client-core@5.91.2 - -## 5.62.9 - -### Patch Changes +## 5.0.0-rc.0 -- Updated dependencies [[`846d53d`](https://github.com/TanStack/query/commit/846d53d98992d50606c40634efa43dea9965b787)]: - - @tanstack/query-persist-client-core@5.91.1 +### Major Changes -## 5.62.8 +- [#11516](https://github.com/TanStack/query/pull/11516) [`7da5a24`](https://github.com/TanStack/query/commit/7da5a24becd506c0d121c4c1d264251e62e53d96) - 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. ### Patch Changes -- Updated dependencies [[`5cd86c6`](https://github.com/TanStack/query/commit/5cd86c6ef1720b87b13e1ab70ee823616f1f029a)]: - - @tanstack/query-persist-client-core@5.91.0 +- Updated dependencies [[`7da5a24`](https://github.com/TanStack/query/commit/7da5a24becd506c0d121c4c1d264251e62e53d96)]: + - @tanstack/angular-query@5.0.0-rc.0 diff --git a/packages/angular-query-persist-client/README.md b/packages/angular-query-persist-client/README.md new file mode 100644 index 00000000000..940c4e20b5b --- /dev/null +++ b/packages/angular-query-persist-client/README.md @@ -0,0 +1,38 @@ +# @tanstack/angular-query-persist-client + +Persistence integration for `@tanstack/angular-query`. + +## Installation + +```sh +pnpm add @tanstack/angular-query-persist-client @tanstack/query-async-storage-persister +``` + +`@tanstack/query-async-storage-persister` provides the persister used below. Any +other persister works as well. + +## Usage + +```ts +import { QueryClient, provideTanStackQuery } from '@tanstack/angular-query' +import { withPersistQueryClient } from '@tanstack/angular-query-persist-client' +import { createAsyncStoragePersister } from '@tanstack/query-async-storage-persister' +import type { ApplicationConfig } from '@angular/core' + +export const appConfig: ApplicationConfig = { + providers: [ + provideTanStackQuery( + () => new QueryClient(), + withPersistQueryClient(() => ({ + persistOptions: { + persister: createAsyncStoragePersister({ storage: localStorage }), + }, + })), + ), + ], +} +``` + +The factory runs only in the browser and inside an Angular injection context. +This makes it safe to access browser-only storage and inject application +services without sharing persistence state between SSR requests. diff --git a/packages/angular-query-persist-client/package.json b/packages/angular-query-persist-client/package.json index 444961b9d90..23c39247a4e 100644 --- a/packages/angular-query-persist-client/package.json +++ b/packages/angular-query-persist-client/package.json @@ -1,7 +1,6 @@ { "name": "@tanstack/angular-query-persist-client", - "private": true, - "version": "5.103.2", + "version": "5.0.0-rc.5", "description": "Angular bindings to work with persisters in TanStack/angular-query", "author": "Omer Gronich", "license": "MIT", @@ -18,19 +17,14 @@ "scripts": { "clean": "premove ./build ./coverage ./dist-ts ./.cache/test-types", "compile": "tsc --project tsconfig.json", - "test:oxlint": "oxlint ./src", "test:types": "npm-run-all --serial test:types:*", - "test:types:ts57": "node ../../node_modules/typescript57/lib/tsc.js --project tsconfig.legacy.json --outDir .cache/test-types/ts57 --tsBuildInfoFile .cache/test-types/ts57.tsbuildinfo", - "test:types:ts58": "node ../../node_modules/typescript58/lib/tsc.js --project tsconfig.legacy.json --outDir .cache/test-types/ts58 --tsBuildInfoFile .cache/test-types/ts58.tsbuildinfo", - "test:types:ts59": "node ../../node_modules/typescript59/lib/tsc.js --project tsconfig.legacy.json --outDir .cache/test-types/ts59 --tsBuildInfoFile .cache/test-types/ts59.tsbuildinfo", "test:types:tscurrent": "tsc --project tsconfig.json --outDir .cache/test-types/tscurrent --tsBuildInfoFile .cache/test-types/tscurrent.tsbuildinfo", - "test:types:ts70": "node ../../node_modules/typescript70/lib/tsc.js --project tsconfig.legacy.json --outDir .cache/test-types/ts70 --tsBuildInfoFile .cache/test-types/ts70.tsbuildinfo", - "test:types:ts71": "node ../../node_modules/typescript71/lib/tsc.js --project tsconfig.legacy.json --outDir .cache/test-types/ts71 --tsBuildInfoFile .cache/test-types/ts71.tsbuildinfo", "test:lib": "vitest", "test:lib:dev": "pnpm run test:lib --watch", "test:build": "publint --strict && attw --pack", "build": "pnpm build:tsdown", - "build:tsdown": "tsdown --tsconfig tsconfig.prod.json" + "build:tsdown": "tsdown --tsconfig tsconfig.prod.json", + "test:oxlint": "oxlint ./src" }, "type": "module", "types": "build/index.d.ts", @@ -59,16 +53,19 @@ "@angular/compiler": "catalog:", "@angular/core": "catalog:", "@angular/platform-browser": "catalog:", + "@angular/router": "catalog:", "@oxc-project/runtime": "^0.151.0", - "@tanstack/angular-query-experimental": "workspace:*", + "@tanstack/angular-query": "workspace:*", "@tanstack/query-test-utils": "workspace:*", "@testing-library/angular": "catalog:", "@testing-library/dom": "^10.4.0", - "typescript": "catalog:" + "npm-run-all2": "^9.0.3", + "typescript": "catalog:", + "zone.js": "^0.16.0" }, "peerDependencies": { - "@angular/common": ">=16.0.0", - "@angular/core": ">=16.0.0", - "@tanstack/angular-query-experimental": "workspace:^" + "@angular/common": ">=20.1.0", + "@angular/core": ">=20.1.0", + "@tanstack/angular-query": "workspace:^" } } diff --git a/packages/angular-query-persist-client/src/__tests__/with-persist-query-client.test.ts b/packages/angular-query-persist-client/src/__tests__/with-persist-query-client.test.ts index 0a88718616f..975f9017813 100644 --- a/packages/angular-query-persist-client/src/__tests__/with-persist-query-client.test.ts +++ b/packages/angular-query-persist-client/src/__tests__/with-persist-query-client.test.ts @@ -1,23 +1,31 @@ import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest' import { QueryClient, + injectIsRestoring, + injectQueries, injectQuery, noop, provideTanStackQuery, -} from '@tanstack/angular-query-experimental' +} from '@tanstack/angular-query' import { persistQueryClientSave } from '@tanstack/query-persist-client-core' import { Component, + EnvironmentInjector, + InjectionToken, + PLATFORM_ID, + createEnvironmentInjector, effect, + inject, provideZonelessChangeDetection, } from '@angular/core' +import { TestBed } from '@angular/core/testing' import { render } from '@testing-library/angular' import { createKey, sleep } from '@tanstack/query-test-utils' +import * as persistClientCore from '@tanstack/query-persist-client-core' import { withPersistQueryClient } from '../with-persist-query-client' import type { PersistedClient, Persister, - Promisable, } from '@tanstack/query-persist-client-core' const createMockPersister = (): Persister => { @@ -64,7 +72,7 @@ describe('withPersistQueryClient', () => { vi.useRealTimers() }) - it('should restore cache from persister', async () => { + it('restores cache from persister', async () => { const key = createKey() const states: Array<{ status: string @@ -101,24 +109,21 @@ describe('withPersistQueryClient', () => { queryKey: key, queryFn: () => sleep(10).then(() => 'fetched'), })) - - constructor() { - effect(() => { - states.push({ - status: this.state.status(), - fetchStatus: this.state.fetchStatus(), - data: this.state.data(), - }) + _ = effect(() => { + states.push({ + status: this.state.status(), + fetchStatus: this.state.fetchStatus(), + data: this.state.data(), }) - } + }) } const rendered = await render(Page, { providers: [ provideZonelessChangeDetection(), provideTanStackQuery( - queryClient, - withPersistQueryClient({ persistOptions: { persister } }), + () => queryClient, + withPersistQueryClient(() => ({ persistOptions: { persister } })), ), ], }) @@ -152,9 +157,119 @@ describe('withPersistQueryClient', () => { }) }) - it.todo( - 'should transition injectQueries to an idle state (once injectQueries is functional)', - ) + it('restores cache for injectQueries and keeps it idle while restoring', async () => { + const key1 = createKey() + const key2 = createKey() + const states: Array< + Array<{ + status: string + fetchStatus: string + data: string | undefined + }> + > = [] + + const queryClient = new QueryClient() + void queryClient + .query({ + queryKey: key1, + queryFn: () => sleep(10).then(() => 'hydrated-1'), + }) + .catch(noop) + void queryClient + .query({ + queryKey: key2, + queryFn: () => sleep(10).then(() => 'hydrated-2'), + }) + .catch(noop) + await vi.advanceTimersByTimeAsync(10) + + const persister = createMockPersister() + persistQueryClientSave({ queryClient, persister }) + await vi.advanceTimersByTimeAsync(0) + queryClient.clear() + + @Component({ + template: ` +
+

{{ formattedData() }}

+

fetchStatus: {{ formattedFetchStatus() }}

+
+ `, + }) + class Page { + state = injectQueries(() => ({ + queries: [ + { + queryKey: key1, + queryFn: () => sleep(10).then(() => 'fetched-1'), + }, + { + queryKey: key2, + queryFn: () => sleep(10).then(() => 'fetched-2'), + }, + ], + })) + + _ = effect(() => { + states.push( + this.state().map((query) => ({ + status: query.status(), + fetchStatus: query.fetchStatus(), + data: query.data(), + })), + ) + }) + + formattedData() { + return this.state() + .map((query) => query.data() ?? 'null') + .join(',') + } + + formattedFetchStatus() { + return this.state() + .map((query) => query.fetchStatus()) + .join(',') + } + } + + const rendered = await render(Page, { + providers: [ + provideZonelessChangeDetection(), + provideTanStackQuery( + () => queryClient, + withPersistQueryClient(() => ({ persistOptions: { persister } })), + ), + ], + }) + + expect(rendered.getByText('fetchStatus: idle,idle')).toBeInTheDocument() + + await vi.advanceTimersByTimeAsync(10) + rendered.fixture.detectChanges() + expect(rendered.getByText('hydrated-1,hydrated-2')).toBeInTheDocument() + expect( + rendered.getByText('fetchStatus: fetching,fetching'), + ).toBeInTheDocument() + + await vi.advanceTimersByTimeAsync(11) + rendered.fixture.detectChanges() + expect(rendered.getByText('fetched-1,fetched-2')).toBeInTheDocument() + expect(rendered.getByText('fetchStatus: idle,idle')).toBeInTheDocument() + + expect(states[0]).toMatchObject([ + { status: 'pending', fetchStatus: 'idle', data: undefined }, + { status: 'pending', fetchStatus: 'idle', data: undefined }, + ]) + expect(states).toContainEqual([ + { status: 'success', fetchStatus: 'fetching', data: 'hydrated-1' }, + { status: 'success', fetchStatus: 'fetching', data: 'hydrated-2' }, + ]) + expect(states[states.length - 1]).toMatchObject([ + { status: 'success', fetchStatus: 'idle', data: 'fetched-1' }, + { status: 'success', fetchStatus: 'idle', data: 'fetched-2' }, + ]) + }) it('should show initialData while restoring', async () => { const key = createKey() @@ -197,24 +312,21 @@ describe('withPersistQueryClient', () => { // otherwise initialData would be newer and takes precedence initialDataUpdatedAt: 1, })) - - constructor() { - effect(() => { - states.push({ - status: this.state.status(), - fetchStatus: this.state.fetchStatus(), - data: this.state.data(), - }) + _ = effect(() => { + states.push({ + status: this.state.status(), + fetchStatus: this.state.fetchStatus(), + data: this.state.data(), }) - } + }) } const rendered = await render(Page, { providers: [ provideZonelessChangeDetection(), provideTanStackQuery( - queryClient, - withPersistQueryClient({ persistOptions: { persister } }), + () => queryClient, + withPersistQueryClient(() => ({ persistOptions: { persister } })), ), ], }) @@ -292,24 +404,21 @@ describe('withPersistQueryClient', () => { }), staleTime: Infinity, })) - - constructor() { - effect(() => { - states.push({ - status: this.state.status(), - fetchStatus: this.state.fetchStatus(), - data: this.state.data(), - }) + _ = effect(() => { + states.push({ + status: this.state.status(), + fetchStatus: this.state.fetchStatus(), + data: this.state.data(), }) - } + }) } const rendered = await render(Page, { providers: [ provideZonelessChangeDetection(), provideTanStackQuery( - queryClient, - withPersistQueryClient({ persistOptions: { persister } }), + () => queryClient, + withPersistQueryClient(() => ({ persistOptions: { persister } })), ), ], }) @@ -374,11 +483,11 @@ describe('withPersistQueryClient', () => { providers: [ provideZonelessChangeDetection(), provideTanStackQuery( - queryClient, - withPersistQueryClient({ + () => queryClient, + withPersistQueryClient(() => ({ persistOptions: { persister }, onSuccess, - }), + })), ), ], }) @@ -393,13 +502,86 @@ describe('withPersistQueryClient', () => { expect(rendered.getByText('fetched')).toBeInTheDocument() }) + it('should await onSuccess before refetching or subscribing', async () => { + const key = createKey() + const queryClient = new QueryClient() + void queryClient + .query({ + queryKey: key, + queryFn: () => sleep(10).then(() => 'hydrated'), + }) + .catch(noop) + await vi.advanceTimersByTimeAsync(10) + + const persister = createMockPersister() + persistQueryClientSave({ queryClient, persister }) + await vi.advanceTimersByTimeAsync(0) + + queryClient.clear() + + const fetchSpy = vi.fn<() => Promise>(() => + sleep(10).then(() => 'fetched'), + ) + const onSuccess = vi.fn<() => Promise>(async () => { + await sleep(20) + }) + + @Component({ + template: ` +
+

{{ state.data() ?? 'null' }}

+

fetchStatus: {{ state.fetchStatus() }}

+
+ `, + }) + class Page { + state = injectQuery(() => ({ + queryKey: key, + queryFn: fetchSpy, + })) + } + + const rendered = await render(Page, { + providers: [ + provideZonelessChangeDetection(), + provideTanStackQuery( + () => queryClient, + withPersistQueryClient(() => ({ + persistOptions: { persister }, + onSuccess, + })), + ), + ], + }) + + await vi.advanceTimersByTimeAsync(10) + rendered.fixture.detectChanges() + expect(onSuccess).toHaveBeenCalledTimes(1) + expect(fetchSpy).toHaveBeenCalledTimes(0) + expect(rendered.getByText('fetchStatus: idle')).toBeInTheDocument() + + await vi.advanceTimersByTimeAsync(19) + rendered.fixture.detectChanges() + expect(fetchSpy).toHaveBeenCalledTimes(0) + + await vi.advanceTimersByTimeAsync(1) + rendered.fixture.detectChanges() + expect(fetchSpy).toHaveBeenCalledTimes(1) + expect(rendered.getByText('hydrated')).toBeInTheDocument() + expect(rendered.getByText('fetchStatus: fetching')).toBeInTheDocument() + + await vi.advanceTimersByTimeAsync(11) + rendered.fixture.detectChanges() + expect(rendered.getByText('fetched')).toBeInTheDocument() + }) + it('should remove cache after non-successful restoring', async () => { const key = createKey() const consoleErrorMock = vi .spyOn(console, 'error') .mockReturnValue(undefined) const queryClient = new QueryClient() - const removeClient = vi.fn<() => Promisable>() + const removeClient = vi.fn() const [error, persister] = createMockErrorPersister(removeClient) const onSuccess = vi.fn<() => void>() const onError = vi.fn<() => void>() @@ -423,12 +605,12 @@ describe('withPersistQueryClient', () => { providers: [ provideZonelessChangeDetection(), provideTanStackQuery( - queryClient, - withPersistQueryClient({ + () => queryClient, + withPersistQueryClient(() => ({ persistOptions: { persister }, onSuccess, onError, - }), + })), ), ], }) @@ -444,5 +626,261 @@ describe('withPersistQueryClient', () => { expect(consoleErrorMock).toHaveBeenCalledTimes(1) expect(consoleErrorMock).toHaveBeenNthCalledWith(1, error) + consoleErrorMock.mockRestore() + }) + + it('should await onError before starting queries after restore failure', async () => { + const key = createKey() + const onErrorMock = vi.spyOn(console, 'error').mockReturnValue(undefined) + const queryClient = new QueryClient() + const removeClient = vi.fn<() => void>() + const [, persister] = createMockErrorPersister(removeClient) + const fetchSpy = vi.fn<() => Promise>(() => + sleep(10).then(() => 'fetched'), + ) + const onError = vi.fn<() => Promise>(async () => { + await sleep(20) + }) + + @Component({ + template: ` +
+

{{ state.data() ?? 'null' }}

+

fetchStatus: {{ state.fetchStatus() }}

+
+ `, + }) + class Page { + state = injectQuery(() => ({ + queryKey: key, + queryFn: fetchSpy, + })) + } + + const rendered = await render(Page, { + providers: [ + provideZonelessChangeDetection(), + provideTanStackQuery( + () => queryClient, + withPersistQueryClient(() => ({ + persistOptions: { persister }, + onError, + })), + ), + ], + }) + + await vi.advanceTimersByTimeAsync(10) + rendered.fixture.detectChanges() + expect(onError).toHaveBeenCalledTimes(1) + expect(fetchSpy).toHaveBeenCalledTimes(0) + expect(rendered.getByText('fetchStatus: idle')).toBeInTheDocument() + + await vi.advanceTimersByTimeAsync(19) + rendered.fixture.detectChanges() + expect(fetchSpy).toHaveBeenCalledTimes(0) + + await vi.advanceTimersByTimeAsync(1) + rendered.fixture.detectChanges() + expect(fetchSpy).toHaveBeenCalledTimes(1) + expect(rendered.getByText('fetchStatus: fetching')).toBeInTheDocument() + + await vi.advanceTimersByTimeAsync(11) + rendered.fixture.detectChanges() + expect(rendered.getByText('fetched')).toBeInTheDocument() + + onErrorMock.mockRestore() + }) + + it('factory form can inject a token and restores cache', async () => { + const key = createKey() + const holder = { persister: createMockPersister() } + const HOLDER = new InjectionToken<{ persister: Persister }>( + 'persist-test-holder', + ) + + const queryClient = new QueryClient() + void queryClient + .query({ + queryKey: key, + queryFn: () => sleep(10).then(() => 'hydrated'), + }) + .catch(noop) + await vi.advanceTimersByTimeAsync(10) + + persistQueryClientSave({ queryClient, persister: holder.persister }) + await vi.advanceTimersByTimeAsync(0) + + queryClient.clear() + + @Component({ + template: ` +
+

{{ state.data() }}

+
+ `, + }) + class Page { + state = injectQuery(() => ({ + queryKey: key, + queryFn: () => sleep(10).then(() => 'fetched'), + })) + } + + const rendered = await render(Page, { + providers: [ + provideZonelessChangeDetection(), + { provide: HOLDER, useValue: holder }, + provideTanStackQuery( + () => queryClient, + withPersistQueryClient(() => ({ + persistOptions: { persister: inject(HOLDER).persister }, + })), + ), + ], + }) + + await vi.advanceTimersByTimeAsync(10) + rendered.fixture.detectChanges() + expect(rendered.getByText('hydrated')).toBeInTheDocument() + }) + + it('factory callback runs only in browser mode', async () => { + const factory = vi.fn< + () => { persistOptions: { persister: persistClientCore.Persister } } + >(() => ({ + persistOptions: { + persister: createMockPersister(), + }, + })) + + @Component({ + template: `{{ isRestoring() }}`, + }) + class Page { + isRestoring = injectIsRestoring() + } + + const rendered = await render(Page, { + providers: [ + provideZonelessChangeDetection(), + { provide: PLATFORM_ID, useValue: 'server' }, + provideTanStackQuery( + () => new QueryClient(), + withPersistQueryClient(factory), + ), + ], + }) + + rendered.fixture.detectChanges() + + expect(factory).not.toHaveBeenCalled() + expect(rendered.fixture.nativeElement.textContent.trim()).toBe('false') + }) + + it('cleanup subscription runs on injector destroy', async () => { + const key = createKey() + const queryClient = new QueryClient() + const persister = createMockPersister() + const cleanup = vi.fn<() => void>() + const subscribeSpy = vi + .spyOn(persistClientCore, 'persistQueryClientSubscribe') + .mockReturnValue(cleanup) + + void queryClient + .query({ + queryKey: key, + queryFn: () => sleep(10).then(() => 'hydrated'), + }) + .catch(noop) + await vi.advanceTimersByTimeAsync(10) + persistQueryClientSave({ queryClient, persister }) + await vi.advanceTimersByTimeAsync(0) + queryClient.clear() + TestBed.configureTestingModule({ + providers: [provideZonelessChangeDetection()], + }) + + const injector = createEnvironmentInjector( + [ + provideTanStackQuery( + () => queryClient, + withPersistQueryClient(() => ({ persistOptions: { persister } })), + ), + ], + TestBed.inject(EnvironmentInjector), + ) + + await vi.advanceTimersByTimeAsync(10) + injector.destroy() + + expect(subscribeSpy).toHaveBeenCalledTimes(1) + expect(cleanup).toHaveBeenCalledTimes(1) + }) + + it('does not subscribe when the injector is destroyed during restore', async () => { + const subscribeSpy = vi.spyOn( + persistClientCore, + 'persistQueryClientSubscribe', + ) + + TestBed.configureTestingModule({ + providers: [provideZonelessChangeDetection()], + }) + + const injector = createEnvironmentInjector( + [ + provideTanStackQuery( + () => new QueryClient(), + withPersistQueryClient(() => ({ + persistOptions: { persister: createMockPersister() }, + })), + ), + ], + TestBed.inject(EnvironmentInjector), + ) + + injector.destroy() + await vi.advanceTimersByTimeAsync(10) + + expect(subscribeSpy).not.toHaveBeenCalled() + }) + + it('keeps restoration state independent when a provider configuration is reused', async () => { + TestBed.configureTestingModule({ + providers: [provideZonelessChangeDetection()], + }) + const resolutions: Array<(value: undefined) => void> = [] + const providers = provideTanStackQuery( + () => new QueryClient(), + withPersistQueryClient(() => ({ + persistOptions: { + persister: { + restoreClient: () => + new Promise((resolve) => resolutions.push(resolve)), + persistClient: () => {}, + removeClient: () => {}, + }, + }, + })), + ) + const parent = TestBed.inject(EnvironmentInjector) + const first = createEnvironmentInjector([providers], parent) + const second = createEnvironmentInjector([providers], parent) + const firstState = first.runInContext(() => injectIsRestoring()) + const secondState = second.runInContext(() => injectIsRestoring()) + expect(firstState).not.toBe(secondState) + expect(firstState()).toBe(true) + expect(secondState()).toBe(true) + resolutions[0]!(undefined) + await vi.advanceTimersByTimeAsync(0) + expect(firstState()).toBe(false) + expect(secondState()).toBe(true) + first.destroy() + expect(secondState()).toBe(true) + resolutions[1]!(undefined) + await vi.advanceTimersByTimeAsync(0) + expect(secondState()).toBe(false) + second.destroy() }) }) diff --git a/packages/angular-query-persist-client/src/with-persist-query-client.ts b/packages/angular-query-persist-client/src/with-persist-query-client.ts index 43f562450a1..d49e378fd0d 100644 --- a/packages/angular-query-persist-client/src/with-persist-query-client.ts +++ b/packages/angular-query-persist-client/src/with-persist-query-client.ts @@ -1,88 +1,83 @@ -import { - QueryClient, - provideIsRestoring, - queryFeature, -} from '@tanstack/angular-query-experimental' +import { QueryClient } from '@tanstack/angular-query' import { DestroyRef, - ENVIRONMENT_INITIALIZER, + InjectionToken, PLATFORM_ID, inject, + makeEnvironmentProviders, + provideEnvironmentInitializer, signal, } from '@angular/core' +import { + provideIsRestoring, + queryFeature, +} from '@tanstack/angular-query/internal' import { isPlatformBrowser } from '@angular/common' import { persistQueryClientRestore, persistQueryClientSubscribe, } from '@tanstack/query-persist-client-core' -import type { PersistQueryClientOptions as PersistQueryClientOptionsCore } from '@tanstack/query-persist-client-core' -import type { PersistQueryClientFeature } from '@tanstack/angular-query-experimental' +import type { WritableSignal } from '@angular/core' +import type { QueryFeature } from '@tanstack/angular-query' +import type { WithPersistQueryClientFn } from './with-persist-query-client.types' -type PersistQueryClientOptions = { - persistOptions: Omit - onSuccess?: () => Promise | unknown - onError?: () => Promise | unknown -} +const RESTORING_STATE = new InjectionToken>( + 'Query restoration state', +) + +export type { + PersistQueryClientUserOptions, + WithPersistQueryClientFn, +} from './with-persist-query-client.types' /** - * Enables persistence. - * - * **Example** + * Enables persistence. The options factory runs once per injector, only in the + * browser, in an Angular injection context. It can call `inject()` and use + * browser APIs such as `localStorage`. * * ```ts - * const localStoragePersister = createAsyncStoragePersister({ - * storage: window.localStorage, - * }) - * - * export const appConfig: ApplicationConfig = { - * providers: [ - * provideTanStackQuery( - * new QueryClient(), - * withPersistQueryClient({ - * persistOptions: { - * persister: localStoragePersister, - * }, - * onSuccess: () => console.log('Restoration completed successfully.'), - * }) - * ), - * ], - * }; + * withPersistQueryClient(() => ({ + * persistOptions: { + * persister: createAsyncStoragePersister({ storage: localStorage }), + * }, + * })) * ``` - * @param persistQueryClientOptions - persistence options and optional onSuccess and onError callbacks which get called when the restoration process is complete. + * @param optionsFactory - Creates the persistence options in the browser. * @returns A set of providers for use with `provideTanStackQuery`. * @public */ export function withPersistQueryClient( - persistQueryClientOptions: PersistQueryClientOptions, -): PersistQueryClientFeature { - const isRestoring = signal(true) - const providers = [ - provideIsRestoring(isRestoring.asReadonly()), - { - // Do not use provideEnvironmentInitializer while Angular < v19 is supported - provide: ENVIRONMENT_INITIALIZER, - multi: true, - useValue: () => { - if (!isPlatformBrowser(inject(PLATFORM_ID))) return + optionsFactory: WithPersistQueryClientFn, +): QueryFeature { + return queryFeature( + makeEnvironmentProviders([ + { provide: RESTORING_STATE, useFactory: () => signal(true) }, + provideIsRestoring(() => inject(RESTORING_STATE).asReadonly()), + provideEnvironmentInitializer(() => { + const isRestoring = inject(RESTORING_STATE) + if (!isPlatformBrowser(inject(PLATFORM_ID))) { + isRestoring.set(false) + return + } const destroyRef = inject(DestroyRef) const queryClient = inject(QueryClient) - const { onSuccess, onError, persistOptions } = persistQueryClientOptions + const { onSuccess, onError, persistOptions } = optionsFactory() const options = { queryClient, ...persistOptions } - persistQueryClientRestore(options) + void persistQueryClientRestore(options) .then(() => { - onSuccess?.() + return onSuccess?.() }) .catch(() => { - onError?.() + return onError?.() }) .finally(() => { + if (destroyRef.destroyed) return isRestoring.set(false) const cleanup = persistQueryClientSubscribe(options) destroyRef.onDestroy(cleanup) }) - }, - }, - ] - return queryFeature('PersistQueryClient', providers) + }), + ]), + ) } diff --git a/packages/angular-query-persist-client/src/with-persist-query-client.types.ts b/packages/angular-query-persist-client/src/with-persist-query-client.types.ts new file mode 100644 index 00000000000..6c265880b35 --- /dev/null +++ b/packages/angular-query-persist-client/src/with-persist-query-client.types.ts @@ -0,0 +1,21 @@ +import type { PersistQueryClientOptions as PersistQueryClientOptionsCore } from '@tanstack/query-persist-client-core' + +/** + * Configures cache persistence and callbacks for completion of the initial restoration. + */ +export type PersistQueryClientUserOptions = { + /** + * Persistence storage and lifecycle settings; the client is supplied by the Query provider. + */ + persistOptions: Omit + /** Called after restoration succeeds. A returned promise is awaited. */ + onSuccess?: () => unknown + /** Called if restoration fails. A returned promise is awaited. */ + onError?: () => unknown +} + +/** + * Returns persistence options. The function runs once in an Angular injection + * context in the browser, so it can call `inject()` and touch browser APIs. + */ +export type WithPersistQueryClientFn = () => PersistQueryClientUserOptions diff --git a/packages/angular-query-persist-client/tsconfig.json b/packages/angular-query-persist-client/tsconfig.json index 781c1a1517b..e9cb04ee5b3 100644 --- a/packages/angular-query-persist-client/tsconfig.json +++ b/packages/angular-query-persist-client/tsconfig.json @@ -16,7 +16,7 @@ "package.json" ], "references": [ - { "path": "../angular-query-experimental" }, + { "path": "../angular-query" }, { "path": "../query-persist-client-core" } ] } diff --git a/packages/angular-query-persist-client/tsconfig.legacy.json b/packages/angular-query-persist-client/tsconfig.legacy.json deleted file mode 100644 index d4ce3935f80..00000000000 --- a/packages/angular-query-persist-client/tsconfig.legacy.json +++ /dev/null @@ -1,12 +0,0 @@ -{ - "extends": "./tsconfig.json", - "compilerOptions": { - "outDir": "./dist-ts/legacy" - }, - "include": ["src"], - "exclude": ["src/__tests__"], - "references": [ - { "path": "../angular-query-experimental" }, - { "path": "../query-persist-client-core" } - ] -} diff --git a/packages/angular-query-persist-client/vite.config.ts b/packages/angular-query-persist-client/vite.config.ts index e1500466702..69e54595b58 100644 --- a/packages/angular-query-persist-client/vite.config.ts +++ b/packages/angular-query-persist-client/vite.config.ts @@ -1,13 +1,26 @@ +import path from 'node:path' +import { fileURLToPath } from 'node:url' import { defineConfig } from 'vitest/config' import angular from '@analogjs/vite-plugin-angular' import packageJson from './package.json' +const packageDir = path.dirname(fileURLToPath(import.meta.url)) +const angularQueryEntry = path.join(packageDir, '../angular-query/src/index.ts') +const angularQueryInternalEntry = path.join( + packageDir, + '../angular-query/src/internal.ts', +) + export default defineConfig({ plugins: [angular()], // fix from https://github.com/vitest-dev/vitest/issues/6992#issuecomment-2509408660 resolve: { conditions: ['@tanstack/custom-condition'], + alias: { + '@tanstack/angular-query/internal': angularQueryInternalEntry, + '@tanstack/angular-query': angularQueryEntry, + }, }, environments: { ssr: { diff --git a/packages/angular-query-experimental/.attw.json b/packages/angular-query/.attw.json similarity index 100% rename from packages/angular-query-experimental/.attw.json rename to packages/angular-query/.attw.json diff --git a/packages/angular-query/CHANGELOG.md b/packages/angular-query/CHANGELOG.md new file mode 100644 index 00000000000..ccb1ac46d1c --- /dev/null +++ b/packages/angular-query/CHANGELOG.md @@ -0,0 +1,37 @@ +# @tanstack/angular-query + +## 5.0.0-rc.5 + +### Patch Changes + +- [#12054](https://github.com/TanStack/query/pull/12054) [`9464a5e`](https://github.com/TanStack/query/commit/9464a5e71f68c95cc12a07068ae30a2f1b13b0ea) - Update the Angular packages to the latest Query core and incorporate upstream adapter fixes, type coverage, and tooling updates. + +- [#12054](https://github.com/TanStack/query/pull/12054) [`9464a5e`](https://github.com/TanStack/query/commit/9464a5e71f68c95cc12a07068ae30a2f1b13b0ea) - Build the Angular packages with Vite 8 while preserving their module entry points and external dependencies. + +## 5.0.0-rc.4 + +### Patch Changes + +- [#12033](https://github.com/TanStack/query/pull/12033) [`46da583`](https://github.com/TanStack/query/commit/46da583fa3760715d9fb13677bbe022f901e0730) - Fix the `migrate-from-experimental` schematic aborting with `Path "…" is a file.` when a project source imports a package subpath that names a file, such as `@noble/hashes/sha3.js`. + +- [#12027](https://github.com/TanStack/query/pull/12027) [`1a2f6b3`](https://github.com/TanStack/query/commit/1a2f6b38d534245b957c7ea87ac830cc1e06d7f1) - Improve Angular migration and typing: + - Replace experimental npm aliases for query and devtools packages and preserve exact dependency pins, including opted-in query-core migrations. + - Discover application and test sources across Angular, Nx, manually configured runners, and standalone libraries, including project references. Respect explicit test configurations and TypeScript exclusions after merging project declarations. + - Fix status-helper calls on heterogeneous `injectQueries` results while preserving signal typing and status-based narrowing. Keep optional initial data undefined-capable. + - Document gradual migration, shared ngneat clients, import restrictions, and asynchronous testing patterns. Run Zone.js regression tests alongside zoneless library tests by default. + +## 5.0.0-rc.3 + +### Minor Changes + +- [#11787](https://github.com/TanStack/query/pull/11787) [`d83eef6`](https://github.com/TanStack/query/commit/d83eef68ae3484ec8254a9c28582ed41af30035b) - Bundle an Angular 20.1-compatible migrate-from-experimental schematic that updates imports, migrates Angular and Nx workspace dependencies, and reports remaining API changes. Include opt-in migrations for ambiguous client references and query-core imports, with optional peer dependencies for schematic tooling. + +## 5.0.0-rc.2 + +## 5.0.0-rc.1 + +## 5.0.0-rc.0 + +### Major Changes + +- [#11516](https://github.com/TanStack/query/pull/11516) [`7da5a24`](https://github.com/TanStack/query/commit/7da5a24becd506c0d121c4c1d264251e62e53d96) - 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. diff --git a/packages/angular-query-experimental/README.md b/packages/angular-query/README.md similarity index 62% rename from packages/angular-query-experimental/README.md rename to packages/angular-query/README.md index 53fea66deba..073022cc684 100644 --- a/packages/angular-query-experimental/README.md +++ b/packages/angular-query/README.md @@ -14,15 +14,13 @@ /> -[![npm version](https://img.shields.io/npm/v/@tanstack/angular-query-experimental)](https://www.npmjs.com/package/@tanstack/angular-query-experimental) -[![npm license](https://img.shields.io/npm/l/@tanstack/angular-query-experimental)](https://github.com/TanStack/query/blob/main/LICENSE) -[![bundle size](https://img.shields.io/bundlephobia/minzip/@tanstack/angular-query-experimental)](https://bundlephobia.com/package/@tanstack/angular-query-experimental) -[![npm](https://img.shields.io/npm/dm/@tanstack/angular-query-experimental)](https://www.npmjs.com/package/@tanstack/angular-query-experimental) +[![npm version](https://img.shields.io/npm/v/@tanstack/angular-query)](https://www.npmjs.com/package/@tanstack/angular-query) +[![npm license](https://img.shields.io/npm/l/@tanstack/angular-query)](https://github.com/TanStack/query/blob/main/LICENSE) +[![bundle size](https://img.shields.io/bundlephobia/minzip/@tanstack/angular-query)](https://bundlephobia.com/package/@tanstack/angular-query) +[![npm](https://img.shields.io/npm/dm/@tanstack/angular-query)](https://www.npmjs.com/package/@tanstack/angular-query) # Angular Query -> IMPORTANT: This library is currently in an experimental stage. This means that breaking changes may 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. - Functions for fetching, caching and updating asynchronous data in Angular # Documentation @@ -43,64 +41,48 @@ Visit https://tanstack.com/query/latest/docs/framework/angular/overview # Quick Start -> The Angular adapter for TanStack Query requires Angular 16 or higher. +> The Angular adapter for TanStack Query requires Angular 20.1 or higher. 1. Install `angular-query` ```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 ``` 2. Initialize **TanStack Query** by adding **provideTanStackQuery** to your application +Pass a factory; Angular runs it once per injector and in an injection context. + ```ts -import { provideTanStackQuery } from '@tanstack/angular-query-experimental' -import { QueryClient } from '@tanstack/angular-query-experimental' +import { provideTanStackQuery, QueryClient } from '@tanstack/angular-query' bootstrapApplication(AppComponent, { - providers: [provideTanStackQuery(new QueryClient())], -}) -``` - -or in a NgModule-based app - -```ts -import { provideHttpClient } from '@angular/common/http' -import { - provideTanStackQuery, - QueryClient, -} from '@tanstack/angular-query-experimental' - -@NgModule({ - declarations: [AppComponent], - imports: [BrowserModule], - providers: [provideTanStackQuery(new QueryClient())], - bootstrap: [AppComponent], + providers: [provideTanStackQuery(() => new QueryClient())], }) ``` 3. Inject query ```ts -import { injectQuery } from '@tanstack/angular-query-experimental' +import { injectQuery } from '@tanstack/angular-query' import { Component } from '@angular/core' @Component({...}) @@ -145,5 +127,3 @@ export interface Post { body: string } ``` - - diff --git a/packages/angular-query-experimental/oxlint.config.ts b/packages/angular-query/oxlint.config.ts similarity index 100% rename from packages/angular-query-experimental/oxlint.config.ts rename to packages/angular-query/oxlint.config.ts diff --git a/packages/angular-query/package.json b/packages/angular-query/package.json new file mode 100644 index 00000000000..d67f0d0c5ce --- /dev/null +++ b/packages/angular-query/package.json @@ -0,0 +1,117 @@ +{ + "name": "@tanstack/angular-query", + "version": "5.0.0-rc.5", + "description": "Signals for managing, caching and syncing asynchronous and remote data in Angular", + "author": "Arnoud de Vries", + "license": "MIT", + "repository": { + "type": "git", + "url": "git+https://github.com/TanStack/query.git", + "directory": "packages/angular-query" + }, + "homepage": "https://tanstack.com/query", + "funding": { + "type": "github", + "url": "https://github.com/sponsors/tannerlinsley" + }, + "keywords": [ + "angular query", + "angular", + "cache", + "performance", + "reactive", + "signals", + "state management", + "state", + "tanstack" + ], + "scripts": { + "clean": "premove ./dist ./coverage ./dist-ts ./.cache/test-types", + "compile": "tsc --project tsconfig.json", + "test:types": "npm-run-all --serial test:types:*", + "test:types:tscurrent": "tsc --project tsconfig.json --outDir .cache/test-types/tscurrent --tsBuildInfoFile .cache/test-types/tscurrent.tsbuildinfo", + "test:lib": "pnpm run test:lib:both", + "test:lib:zoneless": "vitest run", + "test:lib:zoneful": "vitest run --config vitest.zoneful.config.ts", + "test:lib:both": "pnpm run test:lib:zoneless && pnpm run test:lib:zoneful", + "test:lib:dev": "vitest --watch", + "test:build": "pnpm run prepack && pnpm run test:schematics && publint --strict && attw ./dist --pack", + "test:schematics": "vitest run --config vitest.schematics.config.ts", + "build": "vite build && tsc -p tsconfig.schematics.json && node scripts/inject-schematic-package-info.js", + "prepack": "node scripts/prepack.js", + "test:oxlint": "oxlint ./src ./schematics ./schematics-build" + }, + "type": "module", + "schematics": "./schematics/collection.json", + "ng-add": { + "save": "dependencies" + }, + "types": "dist/index.d.ts", + "module": "dist/index.mjs", + "exports": { + ".": { + "@tanstack/custom-condition": "./src/index.ts", + "types": "./dist/index.d.ts", + "default": "./dist/index.mjs" + }, + "./internal": { + "@tanstack/custom-condition": "./src/internal.ts", + "types": "./dist/internal.d.ts", + "default": "./dist/internal.mjs" + }, + "./package.json": "./package.json" + }, + "sideEffects": false, + "files": [ + "**/*.d.ts", + "**/*.mjs", + "**/*.mjs.map" + ], + "dependencies": { + "@tanstack/query-core": "workspace:*" + }, + "devDependencies": { + "@analogjs/vite-plugin-angular": "catalog:", + "@angular-devkit/schematics": "^22.0.0", + "@angular/build": "catalog:", + "@angular/common": "catalog:", + "@angular/compiler": "catalog:", + "@angular/compiler-cli": "catalog:", + "@angular/core": "catalog:", + "@angular/platform-browser": "catalog:", + "@angular/platform-server": "catalog:", + "@angular/router": "catalog:", + "@schematics/angular": "^22.0.0", + "@tanstack/query-test-utils": "workspace:*", + "@testing-library/angular": "catalog:", + "npm-run-all2": "^9.0.3", + "rxjs": "^7.8.2", + "typescript": "catalog:", + "vite-plugin-dts": "4.2.3", + "vite-tsconfig-paths": "^5.1.4", + "zone.js": "^0.16.0", + "vite": "^8.3.5" + }, + "peerDependencies": { + "@angular/common": ">=20.1.0", + "@angular/core": ">=20.1.0", + "@angular-devkit/schematics": ">=20.1.0", + "@schematics/angular": ">=20.1.0", + "typescript": "^5.8.0 || ^6.0.0" + }, + "peerDependenciesMeta": { + "@angular-devkit/schematics": { + "optional": true + }, + "@schematics/angular": { + "optional": true + }, + "typescript": { + "optional": true + } + }, + "publishConfig": { + "directory": "dist", + "linkDirectory": false + } +} diff --git a/packages/angular-query/root.oxlint.config.ts b/packages/angular-query/root.oxlint.config.ts new file mode 120000 index 00000000000..56565c65534 --- /dev/null +++ b/packages/angular-query/root.oxlint.config.ts @@ -0,0 +1 @@ +../../oxlint.config.ts \ No newline at end of file diff --git a/packages/angular-query/schematics-build/migrate-from-experimental.test.ts b/packages/angular-query/schematics-build/migrate-from-experimental.test.ts new file mode 100644 index 00000000000..397bb1f3918 --- /dev/null +++ b/packages/angular-query/schematics-build/migrate-from-experimental.test.ts @@ -0,0 +1,1673 @@ +import { describe, expect, it } from 'vitest' +import packageJson from '../package.json' with { type: 'json' } +import { + SchematicTestRunner, + Tree, + devtoolsPackage, + queryCollection, +} from './test-utils' + +// cspell:ignore packagr analogjs + +function setup(source: string) { + const runner = new SchematicTestRunner(packageJson.name, queryCollection) + const tree = Tree.empty() + tree.create('/src/app.ts', source) + tree.create( + '/package.json', + JSON.stringify({ + dependencies: { '@tanstack/angular-query-experimental': '^5.0.0' }, + }), + ) + const warnings: Array = [] + const messages: Array = [] + runner.logger.subscribe((entry) => { + if (entry.level === 'warn') warnings.push(entry.message) + if (entry.level === 'info') messages.push(entry.message) + }) + return { runner, tree, warnings, messages } +} + +describe('migrate-from-experimental', () => { + it('migrates aliases, factories, spreads, filters, helpers and dependencies; is idempotent', async () => { + const { runner, tree } = + setup(`import { QueryClient as Client, provideAngularQuery as provide, injectQueryClient as client, injectIsFetching } from '@tanstack/angular-query-experimental'; +import { withDevtools } from '@tanstack/angular-query-experimental/devtools/production'; +const providers = [...provide(new Client(), withDevtools())]; +const qc = client(); +const count = injectIsFetching({ queryKey: ['todos'] }); +function unrelated(provide: any, client: any) { provide(new Client()); client(); } +`) + const result = await runner.runSchematic( + 'migrate-from-experimental', + {}, + tree, + ) + const output = result.readContent('/src/app.ts') + expect(output).toContain('provideTanStackQuery as provide') + expect(output).toContain( + 'providers = [provide(() => new Client(), withDevtools())]', + ) + expect(output).toContain('inject(Client)') + expect(output).toContain("import { inject } from '@angular/core'") + expect(output).not.toContain('migrationCore') + expect(output).not.toContain('injectQueryClient') + expect(output).toContain( + "injectIsFetching(() => ({ queryKey: ['todos'] }))", + ) + expect(output).toContain('provide(new Client()); client();') + expect(output).toContain(`${devtoolsPackage.name}/production`) + expect( + JSON.parse(result.readContent('/package.json')).dependencies, + ).toStrictEqual({ + [packageJson.name]: `^${packageJson.version}`, + [devtoolsPackage.name]: `^${devtoolsPackage.version}`, + }) + expect(runner.tasks).toHaveLength(1) + const again = await runner.runSchematic( + 'migrate-from-experimental', + {}, + result, + ) + expect(again.readContent('/src/app.ts')).toBe(output) + expect(runner.tasks).toHaveLength(0) + }) + + it('handles namespaces without touching shadowed bindings or existing factories', async () => { + const { runner, tree } = + setup(`import * as query from '@tanstack/angular-query-experimental'; +query.provideAngularQuery(new query.QueryClient()); +query.provideTanStackQuery(() => new query.QueryClient()); +query.injectQueryClient(); +function other(query: any) { query.provideAngularQuery(new query.QueryClient()); } +`) + const result = await runner.runSchematic( + 'migrate-from-experimental', + { skipInstall: true }, + tree, + ) + const output = result.readContent('/src/app.ts') + expect( + output.match( + /query.provideTanStackQuery\(\(\) => new query.QueryClient\(\)\)/g, + ), + ).toHaveLength(2) + expect(output).toContain( + 'function other(query: any) { query.provideAngularQuery(new query.QueryClient()); }', + ) + expect(runner.tasks).toHaveLength(0) + }) + + it('generates ordinary named imports when neither API is imported', async () => { + const { runner, tree } = + setup(`import { injectQueryClient } from '@tanstack/angular-query-experimental'; +const client = injectQueryClient();`) + const result = await runner.runSchematic( + 'migrate-from-experimental', + {}, + tree, + ) + const output = result.readContent('/src/app.ts') + expect(output).toContain("import { inject } from '@angular/core';") + expect(output).toContain( + `import { QueryClient } from '${packageJson.name}';`, + ) + expect(output).toContain('const client = inject(QueryClient);') + expect(output).not.toContain('import { }') + }) + + it('reuses existing aliased and namespace imports', async () => { + const { runner, tree } = + setup(`import { inject as angularInject } from '@angular/core'; +import * as query from '@tanstack/angular-query-experimental'; +const client = query.injectQueryClient();`) + const result = await runner.runSchematic( + 'migrate-from-experimental', + {}, + tree, + ) + const output = result.readContent('/src/app.ts') + expect(output).toContain('const client = angularInject(query.QueryClient);') + expect(output.match(/import /g)).toHaveLength(2) + }) + + it('adds readable aliases when existing imports are shadowed', async () => { + const { runner, tree } = setup(`import { inject } from '@angular/core'; +import { QueryClient, injectQueryClient } from '@tanstack/angular-query-experimental'; +function example(inject: unknown, QueryClient: unknown) { return injectQueryClient(); } +const client = injectQueryClient();`) + const result = await runner.runSchematic( + 'migrate-from-experimental', + {}, + tree, + ) + const output = result.readContent('/src/app.ts') + expect(output).toContain( + "import { inject as angularInject } from '@angular/core';", + ) + expect(output).toContain( + `import { QueryClient as TanStackQueryClient } from '${packageJson.name}';`, + ) + expect(output).toContain('return angularInject(TanStackQueryClient)') + expect(output).toContain('const client = inject(QueryClient);') + expect(output).not.toContain('import { }') + const again = await runner.runSchematic( + 'migrate-from-experimental', + {}, + result, + ) + expect(again.readContent('/src/app.ts')).toBe(output) + }) + + it('does not use type-only imports as runtime values and avoids alias collisions', async () => { + const { runner, tree } = + setup(`import type { QueryClient } from '@tanstack/angular-query-experimental'; +import { injectQueryClient } from '@tanstack/angular-query-experimental'; +const TanStackQueryClient = 'occupied'; +const client = injectQueryClient();`) + const result = await runner.runSchematic( + 'migrate-from-experimental', + {}, + tree, + ) + const output = result.readContent('/src/app.ts') + expect(output).toContain( + `import { QueryClient as TanStackQueryClient2 } from '${packageJson.name}';`, + ) + expect(output).toContain('const client = inject(TanStackQueryClient2);') + }) + + it('reports ambiguous changes and preserves imperative error options', async () => { + const { runner, tree, warnings } = + setup(`import { provideTanStackQuery, injectQueries, injectIsMutating } from '@tanstack/angular-query-experimental'; +provideTanStackQuery(client); +injectQueries(options, injector); +injectIsMutating(filters); +query.refetch({ throwOnError: true }); +`) + const result = await runner.runSchematic( + 'migrate-from-experimental', + {}, + tree, + ) + expect(result.readContent('/src/app.ts')).toContain( + 'provideTanStackQuery(client)', + ) + expect(result.readContent('/src/app.ts')).toContain( + 'query.refetch({ throwOnError: true })', + ) + expect(warnings.join('\n')).toContain('Client reference') + expect(warnings.join('\n')).toContain('runInInjectionContext') + expect(warnings.join('\n')).toContain('activity filter') + }) + + it.each([false, true])( + 'wraps ambiguous client references only when unsafe wrapping is %s and warns about each conversion', + async (unsafeWrapClientReferences) => { + const { runner, tree, warnings } = + setup(`import { provideAngularQuery as provide, QueryClient } from '@tanstack/angular-query-experimental'; +import * as query from '@tanstack/angular-query-experimental'; +provide(client); +query.provideTanStackQuery(clients.current); +provide(CLIENT_TOKEN); +provide(createClient); +provide((() => client)); +provide(new QueryClient()); +function other(provide: any) { provide(client); }`) + const result = await runner.runSchematic( + 'migrate-from-experimental', + { unsafeWrapClientReferences, skipInstall: true }, + tree, + ) + const output = result.readContent('/src/app.ts') + for (const argument of [ + 'client', + 'clients.current', + 'CLIENT_TOKEN', + 'createClient', + ]) + expect(output).toContain( + `(${unsafeWrapClientReferences ? '() => ' : ''}${argument})`, + ) + expect(output).toContain('provide((() => client))') + expect(output).toContain('provide(() => new QueryClient())') + expect(output).toContain( + 'function other(provide: any) { provide(client); }', + ) + expect( + warnings.filter((message) => message.includes('Unsafe conversion')), + ).toHaveLength(unsafeWrapClientReferences ? 4 : 0) + expect( + warnings + .filter((message) => message.includes('Unsafe conversion')) + .every((message) => message.includes('injection tokens need')), + ).toBe(true) + const again = await runner.runSchematic( + 'migrate-from-experimental', + { unsafeWrapClientReferences, skipInstall: true }, + result, + ) + expect(again.readContent('/src/app.ts')).toBe(output) + }, + ) + + it.each([false, true])( + 'consolidates core imports and dependencies only when requested: %s', + async (migrateQueryCoreImports) => { + const { runner, tree } = + setup(`import { QueryClient as Client, type QueryKey } from '@tanstack/query-core'; +import * as core from '@tanstack/query-core'; +export { QueryCache } from '@tanstack/query-core'; +import { provideTanStackQuery } from '@tanstack/angular-query'; +provideTanStackQuery(new Client()); +provideTanStackQuery(new core.QueryClient()); +// @tanstack/query-core is re-exported by the Angular package.`) + tree.overwrite( + '/package.json', + JSON.stringify({ + dependencies: { + '@tanstack/query-core': '^5', + [packageJson.name]: '^5.1.0', + }, + devDependencies: { '@tanstack/query-core': '^5' }, + }), + ) + const result = await runner.runSchematic( + 'migrate-from-experimental', + { migrateQueryCoreImports }, + tree, + ) + const output = result.readContent('/src/app.ts') + const target = migrateQueryCoreImports + ? packageJson.name + : '@tanstack/query-core' + const quote = migrateQueryCoreImports ? '"' : "'" + expect(output).toContain( + `import { QueryClient as Client, type QueryKey } from ${quote}${target}${quote}`, + ) + expect(output).toContain( + `import * as core from ${quote}${target}${quote}`, + ) + expect(output).toContain( + `export { QueryCache } from ${quote}${target}${quote}`, + ) + expect(output).toContain( + `${migrateQueryCoreImports ? '() => ' : ''}new Client()`, + ) + const manifest = JSON.parse(result.readContent('/package.json')) + expect(manifest.dependencies[packageJson.name]).toBe('^5.1.0') + expect(manifest.dependencies['@tanstack/query-core']).toBe( + migrateQueryCoreImports ? undefined : '^5', + ) + expect(manifest.devDependencies?.['@tanstack/query-core']).toBe( + migrateQueryCoreImports ? undefined : '^5', + ) + expect(runner.tasks).toHaveLength(migrateQueryCoreImports ? 1 : 0) + const again = await runner.runSchematic( + 'migrate-from-experimental', + { migrateQueryCoreImports }, + result, + ) + expect(again.readContent('/src/app.ts')).toBe(output) + expect(runner.tasks).toHaveLength(0) + }, + ) + + it('adds Angular Query when replacing a dependency used only through core imports', async () => { + const { runner, tree } = setup( + `import type { QueryKey } from '@tanstack/query-core';`, + ) + tree.overwrite( + '/package.json', + JSON.stringify({ dependencies: { '@tanstack/query-core': '^5' } }), + ) + const result = await runner.runSchematic( + 'migrate-from-experimental', + { migrateQueryCoreImports: true }, + tree, + ) + expect( + JSON.parse(result.readContent('/package.json')).dependencies, + ).toStrictEqual({ [packageJson.name]: `^${packageJson.version}` }) + }) + + it.each([ + ['src/legacy.ts', `const core = import('@tanstack/query-core')`], + ['src/runtime.cjs', `const core = require('@tanstack/query-core')`], + [ + 'src/wrapper.d.ts', + `export type { QueryKey } from '@tanstack/query-core'`, + ], + ['src/subpath.ts', `import '@tanstack/query-core/unsupported'`], + ['src/dynamic.ts', 'const core = import(`@tanstack/query-core/${entry}`)'], + ])( + 'retains core dependencies for remaining references in %s', + async (path, source) => { + const { runner, tree, warnings } = setup( + `import { QueryClient } from '@tanstack/query-core';`, + ) + tree.create(`/${path}`, source) + tree.overwrite( + '/package.json', + JSON.stringify({ dependencies: { '@tanstack/query-core': '^5' } }), + ) + const result = await runner.runSchematic( + 'migrate-from-experimental', + { migrateQueryCoreImports: true }, + tree, + ) + expect(result.readContent('/src/app.ts')).toContain(packageJson.name) + expect(result.readContent(`/${path}`)).toBe(source) + expect( + JSON.parse(result.readContent('/package.json')).dependencies, + ).toStrictEqual({ + '@tanstack/query-core': '^5', + [packageJson.name]: `^${packageJson.version}`, + }) + expect(warnings.join('\n')).toContain(`Keeping @tanstack/query-core`) + expect(warnings.join('\n')).toContain(`/${path}`) + }, + ) + + describe('removed injector arguments', () => { + const helpers = [ + 'injectQuery', + 'injectInfiniteQuery', + 'injectMutation', + 'injectMutationState', + 'injectIsFetching', + 'injectIsMutating', + 'injectIsRestoring', + 'injectQueries', + ] + + it.each(helpers)( + 'warns for named, aliased and namespace calls to %s', + async (helper) => { + const args = + helper === 'injectIsRestoring' + ? '{ injector }' + : helper === 'injectQueries' + ? 'options, injector' + : 'options, { injector }' + const { runner, tree, warnings } = + setup(`import { ${helper}, ${helper} as helper } from '@tanstack/angular-query-experimental'; +import * as query from '@tanstack/angular-query-experimental'; +${helper}(${args}); +helper(${args}); +query.${helper}(${args});`) + const result = await runner.runSchematic( + 'migrate-from-experimental', + {}, + tree, + ) + const injectorWarnings = warnings.filter((warning) => + warning.includes('no longer accepts'), + ) + expect(injectorWarnings).toHaveLength(3) + expect( + injectorWarnings.every( + (warning) => + warning.includes(helper) && + warning.includes('runInInjectionContext'), + ), + ).toBe(true) + expect(injectorWarnings[0]).toContain('/src/app.ts:3:') + expect(injectorWarnings[0]).toContain( + helper === 'injectQueries' + ? 'old injector argument' + : 'old options.injector', + ) + expect(result.readContent('/src/app.ts')).toContain(`helper(${args})`) + }, + ) + + it.each(helpers)( + 'does not warn for current signatures or shadowed %s', + async (helper) => { + const args = helper === 'injectIsRestoring' ? '' : '() => ({})' + const { runner, tree, warnings } = + setup(`import { ${helper} } from '@tanstack/angular-query-experimental'; +${helper}(${args}); +function unrelated(${helper}: any) { ${helper}(options, { injector }); }`) + await runner.runSchematic('migrate-from-experimental', {}, tree) + expect(warnings).toStrictEqual([]) + }, + ) + + it('reports undefined options, optional injector objects and spread arguments', async () => { + const { runner, tree, warnings } = + setup(`import { injectQuery, injectMutation, injectIsRestoring } from '@tanstack/angular-query-experimental'; +injectQuery(options, undefined); +injectMutation(options, {}); +injectIsRestoring(injectionOptions); +injectQuery(...args);`) + await runner.runSchematic('migrate-from-experimental', {}, tree) + expect(warnings).toHaveLength(4) + expect(warnings[0]).toContain( + 'If it is undefined or contains no injector', + ) + expect(warnings[3]).toContain('Review spread arguments to injectQuery') + }) + + it.each(['injectIsFetching', 'injectIsMutating'])( + 'still wraps filters while warning about %s injector options', + async (helper) => { + const { runner, tree, warnings } = + setup(`import { ${helper} } from '@tanstack/angular-query-experimental'; +${helper}({}, { injector });`) + const result = await runner.runSchematic( + 'migrate-from-experimental', + {}, + tree, + ) + expect(result.readContent('/src/app.ts')).toContain( + `${helper}(() => ({}), { injector })`, + ) + expect(warnings).toHaveLength(1) + expect(warnings[0]).toContain('old options.injector') + }, + ) + + it.each([ + 'InjectQueryOptions', + 'InjectInfiniteQueryOptions', + 'InjectMutationOptions', + 'InjectMutationStateOptions', + 'InjectIsFetchingOptions', + 'InjectIsMutatingOptions', + ])('flags removed %s types used by wrappers', async (name) => { + const { runner, tree, warnings } = + setup(`import type { ${name} as Options } from '@tanstack/angular-query-experimental'; +import type * as query from '@tanstack/angular-query-experimental'; +let options: Options; +let other: query.${name};`) + await runner.runSchematic('migrate-from-experimental', {}, tree) + expect( + warnings.filter((warning) => warning.includes(`${name} was removed`)), + ).toHaveLength(2) + }) + }) + + it('preserves existing stable dependency versions and skips generated files', async () => { + const { runner, tree } = setup( + `export { injectQueries } from '@tanstack/angular-query-experimental/inject-queries-experimental';`, + ) + const ignored = `import { injectQuery } from '@tanstack/angular-query-experimental';` + tree.create('/node_modules/example/index.ts', ignored) + tree.create('/dist/app.ts', ignored) + tree.create('/.angular/cache/app.ts', ignored) + tree.create('/.nx/cache/app.ts', ignored) + tree.overwrite( + '/package.json', + JSON.stringify({ + dependencies: { + [packageJson.name]: '~99.0.0', + '@tanstack/angular-query-experimental': '^5', + }, + }), + ) + const result = await runner.runSchematic( + 'migrate-from-experimental', + {}, + tree, + ) + expect(result.readContent('/src/app.ts')).toContain( + `from "${packageJson.name}"`, + ) + expect(result.readContent('/node_modules/example/index.ts')).toBe(ignored) + expect(result.readContent('/dist/app.ts')).toBe(ignored) + expect(result.readContent('/.angular/cache/app.ts')).toBe(ignored) + expect(result.readContent('/.nx/cache/app.ts')).toBe(ignored) + expect( + JSON.parse(result.readContent('/package.json')).dependencies[ + packageJson.name + ], + ).toBe('~99.0.0') + }) +}) + +// These exercise the published collection, including dependency edits and diagnostics. +describe('migration regression coverage', () => { + it.each([ + ['devtools', ''], + ['devtools/production', '/production'], + ['devtools-panel', '/devtools-panel'], + ['devtools-panel/production', '/devtools-panel/production'], + ])( + 'moves the %s entrypoint and installs devtools', + async (oldPath, newPath) => { + const { runner, tree } = + setup(`import * as tools from '@tanstack/angular-query-experimental/${oldPath}'; +export * from '@tanstack/angular-query-experimental/${oldPath}';`) + const result = await runner.runSchematic( + 'migrate-from-experimental', + {}, + tree, + ) + expect(result.readContent('/src/app.ts')).not.toContain( + '@tanstack/angular-query-experimental', + ) + expect( + result + .readContent('/src/app.ts') + .match(new RegExp(`${devtoolsPackage.name}${newPath}`, 'g')), + ).toHaveLength(2) + expect( + JSON.parse(result.readContent('/package.json')).dependencies[ + devtoolsPackage.name + ], + ).toBe(`^${devtoolsPackage.version}`) + expect(runner.tasks).toHaveLength(1) + }, + ) + + it('reports unknown entrypoints instead of inventing an export', async () => { + const { runner, tree, warnings } = setup( + `import * as tools from '@tanstack/angular-query-experimental/devtools/panel';`, + ) + const result = await runner.runSchematic( + 'migrate-from-experimental', + {}, + tree, + ) + expect(result.readContent('/src/app.ts')).toContain('/devtools/panel') + expect(warnings.join('\n')).toContain( + 'Unrecognized experimental entrypoint', + ) + expect( + JSON.parse(result.readContent('/package.json')).dependencies[ + devtoolsPackage.name + ], + ).toBeUndefined() + }) + + it('renames provider references and reports indirect helper uses without touching shadowed namespaces', async () => { + const { runner, tree, warnings } = + setup(`import * as query from '@tanstack/angular-query-experimental'; +import { provideAngularQuery as provide, injectIsFetching } from '@tanstack/angular-query-experimental'; +const provider = query.provideAngularQuery; +const otherProvider = query.provideQueryClient; +const client = query.injectQueryClient; +const aliased = provide; +const count = injectIsFetching; +function unrelated(query: any) { return query.provideAngularQuery; }`) + const result = await runner.runSchematic( + 'migrate-from-experimental', + {}, + tree, + ) + const output = result.readContent('/src/app.ts') + expect(output).toContain('const provider = query.provideTanStackQuery') + expect(output).toContain('const otherProvider = query.provideTanStackQuery') + expect(output).toContain('const client = query.injectQueryClient') + expect(output).toContain( + 'function unrelated(query: any) { return query.provideAngularQuery; }', + ) + expect( + warnings.filter((message) => message.includes('provider reference')), + ).toHaveLength(3) + expect(warnings.join('\n')).toContain( + 'Replace this indirect reference with a function that calls inject(QueryClient)', + ) + expect(warnings.join('\n')).toContain('callback-based filters') + }) + + it.each([ + ['provideIsRestoring', 'withPersistQueryClient'], + ['queryFeature', 'supported with* features'], + ['QueryFeatures', 'non-generic QueryFeature'], + ['DevtoolsFeature', 'non-generic QueryFeature'], + ['PersistQueryClientFeature', 'non-generic QueryFeature'], + ['CreateBaseQueryOptions', 'CreateQueryOptions'], + ])( + 'reports removed %s imports, namespace references and re-exports', + async (name, guidance) => { + const { runner, tree, warnings } = + setup(`import { ${name} as legacy } from '@tanstack/angular-query-experimental'; +import * as query from '@tanstack/angular-query-experimental'; +export { ${name} } from '@tanstack/angular-query-experimental'; +type Used = typeof query.${name};`) + await runner.runSchematic('migrate-from-experimental', {}, tree) + const removed = warnings.filter((message) => + message.includes(`${name} was removed`), + ) + expect(removed).toHaveLength(3) + expect(removed.every((message) => message.includes(guidance))).toBe(true) + }, + ) + + it('reports generic QueryFeature references through aliases and namespaces', async () => { + const { runner, tree, warnings } = + setup(`import type { QueryFeature as Feature } from '@tanstack/angular-query-experimental'; +import type * as query from '@tanstack/angular-query-experimental'; +let named: Feature<'Devtools'>; +let namespace: query.QueryFeature<'PersistQueryClient'>; +let supported: Feature;`) + await runner.runSchematic('migrate-from-experimental', {}, tree) + expect(warnings).toHaveLength(2) + expect( + warnings.every((message) => + message.includes('QueryFeature is no longer generic'), + ), + ).toBe(true) + }) + + it('preserves type-only provider specifiers when renaming imports', async () => { + const { runner, tree } = + setup(`import { type provideAngularQuery } from '@tanstack/angular-query-experimental'; +type Provider = typeof provideAngularQuery;`) + const result = await runner.runSchematic( + 'migrate-from-experimental', + {}, + tree, + ) + expect(result.readContent('/src/app.ts')).toContain( + 'type provideTanStackQuery as provideAngularQuery', + ) + }) + + it('limits option diagnostics to observer options, client defaults and devtools injection dependencies', async () => { + const { runner, tree, warnings } = + setup(`import { injectQuery as query, mutationOptions, QueryClient } from '@tanstack/angular-query-experimental'; +import { withDevtools as tools } from '@tanstack/angular-query-experimental/devtools'; +query(() => ({ throwOnError: true, meta: { throwOnError: true } })); +mutationOptions({ throwOnError: true }); +new QueryClient({ defaultOptions: { queries: { throwOnError: true }, mutations: { throwOnError: true } } }); +tools(() => ({}), { deps: [Manager] }); +result.refetch({ throwOnError: true }); +result.fetchNextPage({ throwOnError: true }); +const unrelated = { deps: [], throwOnError: true }; +function shadowed(query: any, tools: any) { query(() => ({ throwOnError: true })); tools(() => ({}), { deps: [] }); }`) + const result = await runner.runSchematic( + 'migrate-from-experimental', + {}, + tree, + ) + expect( + warnings.filter((message) => message.includes('Observer throwOnError')), + ).toHaveLength(4) + expect( + warnings.filter((message) => + message.includes('withDevtools no longer accepts deps'), + ), + ).toHaveLength(1) + expect(warnings).toHaveLength(5) + expect(result.readContent('/src/app.ts')).toContain( + 'result.refetch({ throwOnError: true })', + ) + expect(result.readContent('/src/app.ts')).toContain( + 'const unrelated = { deps: [], throwOnError: true }', + ) + }) + + it('finds returned observer options without treating nested functions as option factories', async () => { + const { runner, tree, warnings } = + setup(`import { injectInfiniteQuery, injectMutation } from '@tanstack/angular-query-experimental'; +injectInfiniteQuery(() => { const unrelated = () => ({ throwOnError: true }); return { throwOnError: true }; }); +injectMutation(() => condition ? { throwOnError: true } : ({ throwOnError: true } as any));`) + await runner.runSchematic('migrate-from-experimental', {}, tree) + expect(warnings).toHaveLength(3) + expect( + warnings.every((message) => message.includes('Observer throwOnError')), + ).toBe(true) + }) + + it('replaces peer and optional dependencies while preserving existing ranges and unrelated manifest formatting', async () => { + const { runner, tree, warnings } = setup( + `import { injectQuery } from '@tanstack/angular-query-experimental';`, + ) + tree.overwrite( + '/package.json', + '{\r\n "name": "library",\r\n "peerDependencies": {\r\n "@tanstack/angular-query-experimental": "^5",\r\n "@tanstack/angular-query": "~99.0.0"\r\n },\r\n "optionalDependencies": { "@tanstack/angular-query-experimental": "^5" },\r\n "peerDependenciesMeta": { "@tanstack/angular-query-experimental": { "optional": true } }\r\n}\r\n', + ) + const result = await runner.runSchematic( + 'migrate-from-experimental', + {}, + tree, + ) + const text = result.readContent('/package.json') + const pkg = JSON.parse(text) + expect(text).toContain(' "name": "library",\r\n') + expect(pkg.peerDependencies).toStrictEqual({ + [packageJson.name]: '~99.0.0', + }) + expect(pkg.optionalDependencies).toStrictEqual({ + [packageJson.name]: `^${packageJson.version}`, + }) + expect(warnings.join('\n')).toContain('Rename peerDependenciesMeta') + expect(runner.tasks).toHaveLength(1) + }) + + it('uses inherited build/test configurations, follows local imports, and updates library manifests', async () => { + const legacy = `import { injectQuery } from '@tanstack/angular-query-experimental';` + const { runner, tree } = setup(legacy) + tree.create( + '/angular.json', + JSON.stringify({ + version: 1, + projects: { + app: { + projectType: 'application', + root: '', + sourceRoot: 'src', + architect: { + build: { + builder: '@angular/build:application', + options: { tsConfig: 'tsconfig.app.json' }, + configurations: { + production: { tsConfig: 'tsconfig.production.json' }, + }, + }, + test: { + builder: '@angular/build:unit-test', + options: { tsConfig: 'tsconfig.spec.json' }, + }, + }, + }, + lib: { + projectType: 'library', + root: 'projects/lib', + sourceRoot: 'projects/lib/src', + architect: { + build: { + builder: '@angular/build:ng-packagr', + options: { tsConfig: 'projects/lib/tsconfig.lib.json' }, + }, + }, + }, + }, + }), + ) + tree.create( + '/tsconfig.json', + JSON.stringify({ compilerOptions: { moduleResolution: 'node' } }), + ) + tree.create( + '/tsconfig.app.json', + JSON.stringify({ + extends: './tsconfig.json', + files: ['src/main.ts'], + include: [], + }), + ) + tree.create( + '/tsconfig.spec.json', + JSON.stringify({ + extends: './tsconfig.json', + include: ['src/**/*.spec.ts'], + exclude: ['src/ignored.spec.ts'], + }), + ) + tree.create( + '/tsconfig.production.json', + JSON.stringify({ files: ['production/app.ts'] }), + ) + tree.create('/src/main.ts', `import './app'; import '../shared/query';`) + tree.create('/shared/query.ts', legacy) + tree.create('/src/app.spec.ts', legacy) + tree.create('/src/ignored.spec.ts', legacy) + tree.create('/src/orphan.ts', legacy) + tree.create('/production/app.ts', legacy) + tree.create( + '/projects/lib/tsconfig.lib.json', + JSON.stringify({ + extends: '../../tsconfig.json', + include: ['src/**/*.ts'], + }), + ) + tree.create( + '/projects/lib/src/lib.ts', + `export { injectDevtoolsPanel } from '@tanstack/angular-query-experimental/devtools-panel';`, + ) + tree.create( + '/projects/lib/package.json', + JSON.stringify({ + peerDependencies: { '@tanstack/angular-query-experimental': '^5' }, + }), + ) + const result = await runner.runSchematic( + 'migrate-from-experimental', + {}, + tree, + ) + for (const path of [ + '/src/app.ts', + '/shared/query.ts', + '/src/app.spec.ts', + '/production/app.ts', + ]) + expect(result.readContent(path)).toContain(packageJson.name) + expect(result.readContent('/src/ignored.spec.ts')).toBe(legacy) + expect(result.readContent('/src/orphan.ts')).toBe(legacy) + expect(result.readContent('/projects/lib/src/lib.ts')).toContain( + `${devtoolsPackage.name}/devtools-panel`, + ) + expect( + JSON.parse(result.readContent('/projects/lib/package.json')) + .peerDependencies, + ).toStrictEqual({ + [packageJson.name]: `^${packageJson.version}`, + [devtoolsPackage.name]: `^${devtoolsPackage.version}`, + }) + expect( + JSON.parse(result.readContent('/package.json')).dependencies[ + devtoolsPackage.name + ], + ).toBeUndefined() + expect(runner.tasks).toHaveLength(1) + const again = await runner.runSchematic( + 'migrate-from-experimental', + {}, + result, + ) + expect(again.readContent('/projects/lib/src/lib.ts')).toBe( + result.readContent('/projects/lib/src/lib.ts'), + ) + expect(runner.tasks).toHaveLength(0) + }) + + it.each([false, true])( + 'discovers Nx libraries from project.json alongside an Angular workspace: %s', + async (angularWorkspace) => { + const legacy = `import { QueryClient } from '@tanstack/angular-query-experimental';` + const { runner, tree, warnings } = setup(legacy) + tree.create('/nx.json', '{}') + // oxlint-disable-next-line vitest-js/no-conditional-in-test -- The parameter selects setup/actions; every case runs the assertions. + if (angularWorkspace) + tree.create( + '/angular.json', + JSON.stringify({ + version: 1, + projects: { + app: { projectType: 'application', root: '', sourceRoot: 'src' }, + }, + }), + ) + else + tree.create('/src/project.json', JSON.stringify({ sourceRoot: 'src' })) + tree.create( + '/libs/data/project.json', + JSON.stringify({ + sourceRoot: 'libs/data/src', + targets: { + build: { + executor: '@nx/angular:ng-packagr-lite', + options: { tsConfig: 'libs/data/tsconfig.lib.json' }, + }, + }, + }), + ) + tree.create( + '/libs/data/tsconfig.lib.json', + JSON.stringify({ + include: ['src/**/*.ts'], + exclude: ['src/ignored.ts'], + }), + ) + tree.create( + '/libs/data/src/index.ts', + `export { injectDevtoolsPanel } from '@tanstack/angular-query-experimental/devtools-panel'; +export type { QueryKey } from '@tanstack/query-core';`, + ) + tree.create('/libs/data/src/ignored.ts', legacy) + tree.create( + '/libs/data/package.json', + JSON.stringify({ + peerDependencies: { + '@tanstack/angular-query-experimental': '^5', + '@tanstack/query-core': '^5', + [packageJson.name]: '^5.1.0', + }, + peerDependenciesMeta: { '@tanstack/query-core': { optional: true } }, + }), + ) + tree.create('/node_modules/ignored/project.json', 'invalid') + tree.create('/dist/ignored/project.json', 'invalid') + const result = await runner.runSchematic( + 'migrate-from-experimental', + { migrateQueryCoreImports: true }, + tree, + ) + expect(result.readContent('/src/app.ts')).toContain(packageJson.name) + expect(result.readContent('/libs/data/src/index.ts')).toContain( + `${devtoolsPackage.name}/devtools-panel`, + ) + expect(result.readContent('/libs/data/src/index.ts')).not.toContain( + '@tanstack/query-core', + ) + expect(result.readContent('/libs/data/src/ignored.ts')).toBe(legacy) + expect( + JSON.parse(result.readContent('/libs/data/package.json')) + .peerDependencies, + ).toStrictEqual({ + [packageJson.name]: '^5.1.0', + [devtoolsPackage.name]: `^${devtoolsPackage.version}`, + }) + expect(warnings.join('\n')).toContain( + 'peerDependenciesMeta["@tanstack/query-core"]', + ) + const again = await runner.runSchematic( + 'migrate-from-experimental', + { migrateQueryCoreImports: true }, + result, + ) + expect(again.readContent('/libs/data/src/index.ts')).toBe( + result.readContent('/libs/data/src/index.ts'), + ) + expect(runner.tasks).toHaveLength(0) + }, + ) + + it('resolves imports of package subpaths that name a file', async () => { + // TypeScript probes `directoryExists` with candidate paths that are files, like + // `/node_modules/@noble/hashes/sha3.js`; that must not abort the migration. + const { runner, tree } = setup( + `import { QueryClient } from '@tanstack/angular-query-experimental'; +import { sha3_256 } from '@noble/hashes/sha3.js';`, + ) + tree.create( + '/angular.json', + JSON.stringify({ + version: 1, + projects: { + app: { + root: '', + sourceRoot: 'src', + architect: { build: { options: { tsConfig: 'tsconfig.json' } } }, + }, + }, + }), + ) + tree.create( + '/tsconfig.json', + JSON.stringify({ + compilerOptions: { module: 'ES2022', moduleResolution: 'bundler' }, + files: ['src/app.ts'], + }), + ) + tree.create( + '/node_modules/@noble/hashes/package.json', + JSON.stringify({ + name: '@noble/hashes', + type: 'module', + exports: { './sha3.js': './sha3.js' }, + }), + ) + tree.create('/node_modules/@noble/hashes/sha3.js', 'export {}') + tree.create( + '/node_modules/@noble/hashes/sha3.d.ts', + 'export declare const sha3_256: unknown', + ) + const result = await runner.runSchematic( + 'migrate-from-experimental', + {}, + tree, + ) + expect(result.readContent('/src/app.ts')).not.toContain( + '@tanstack/angular-query-experimental', + ) + expect(result.readContent('/src/app.ts')).toContain(packageJson.name) + }) + + it('discovers package-based Nx libraries and respects their tsconfigs', async () => { + const legacy = `import { QueryClient } from '@tanstack/angular-query-experimental';` + const { runner, tree } = setup(legacy) + tree.create('/nx.json', '{}') + tree.create('/src/project.json', JSON.stringify({ sourceRoot: 'src' })) + tree.create( + '/packages/shared/package.json', + JSON.stringify({ + name: 'shared', + nx: { + targets: { + build: { + options: { tsConfig: 'packages/shared/tsconfig.lib.json' }, + }, + }, + }, + peerDependencies: { '@tanstack/angular-query-experimental': '^5' }, + }), + ) + tree.create( + '/packages/shared/tsconfig.lib.json', + JSON.stringify({ include: ['src/**/*.ts'], exclude: ['src/ignored.ts'] }), + ) + tree.create('/packages/shared/src/index.ts', legacy) + tree.create('/packages/shared/src/ignored.ts', legacy) + const result = await runner.runSchematic( + 'migrate-from-experimental', + {}, + tree, + ) + expect(result.readContent('/packages/shared/src/index.ts')).toContain( + packageJson.name, + ) + expect(result.readContent('/packages/shared/src/ignored.ts')).toBe(legacy) + expect( + JSON.parse(result.readContent('/packages/shared/package.json')) + .peerDependencies, + ).toStrictEqual({ [packageJson.name]: `^${packageJson.version}` }) + }) + + it('keeps a root core dependency used by an excluded nested library source', async () => { + const { runner, tree, warnings } = setup( + `import { QueryClient } from '@tanstack/query-core';`, + ) + tree.overwrite( + '/package.json', + JSON.stringify({ + nx: { sourceRoot: 'src' }, + dependencies: { '@tanstack/query-core': '^5' }, + }), + ) + tree.create('/nx.json', '{}') + tree.create( + '/libs/shared/project.json', + JSON.stringify({ sourceRoot: 'libs/shared/src' }), + ) + tree.create('/libs/shared/package.json', JSON.stringify({ name: 'shared' })) + tree.create( + '/libs/shared/src/legacy.cjs', + `const core = require('@tanstack/query-core');`, + ) + const result = await runner.runSchematic( + 'migrate-from-experimental', + { migrateQueryCoreImports: true }, + tree, + ) + expect( + JSON.parse(result.readContent('/package.json')).dependencies, + ).toStrictEqual({ + '@tanstack/query-core': '^5', + [packageJson.name]: `^${packageJson.version}`, + }) + expect(warnings.join('\n')).toContain( + '/package.json: Keeping @tanstack/query-core', + ) + }) + + it('summarizes prepared changes, links to the guide, and explains skipped installation', async () => { + const { runner, tree, messages } = setup( + `import { injectQuery } from '@tanstack/angular-query-experimental';`, + ) + await runner.runSchematic( + 'migrate-from-experimental', + { skipInstall: true }, + tree, + ) + expect(messages.join('\n')).toContain( + '1 source file(s) changed, 2 dependency change(s), 0 item(s) requiring manual review', + ) + expect(messages.join('\n')).toContain( + 'Dependency installation was skipped. Run your package manager install command', + ) + expect(messages.join('\n')).toContain( + 'run your application build, tests, linting, and formatting checks', + ) + expect(messages.join('\n')).toContain( + 'https://tanstack.com/query/latest/docs/framework/angular/guides/migrating-from-experimental', + ) + expect(runner.tasks).toHaveLength(0) + }) + + it('reports panel injector arguments and the removed panel options type', async () => { + const { runner, tree, warnings } = + setup(`import { injectDevtoolsPanel as panel, type InjectDevtoolsPanelOptions } from '@tanstack/angular-query-experimental/devtools-panel'; +panel(() => ({}), { injector });`) + await runner.runSchematic('migrate-from-experimental', {}, tree) + expect(warnings).toHaveLength(2) + expect(warnings.join('\n')).toContain( + 'InjectDevtoolsPanelOptions was removed', + ) + expect(warnings.join('\n')).toContain('old options.injector') + }) +}) + +describe('migration dependency specifiers', () => { + it.each( + [ + 'dependencies', + 'devDependencies', + 'optionalDependencies', + 'peerDependencies', + ].flatMap((type) => + [true, false].map((versioned) => ({ type, versioned })), + ), + )( + 'replaces experimental aliases in $type (versioned=$versioned) and remains idempotent', + async ({ type, versioned }) => { + const { runner, tree } = setup( + `import { provideAngularQuery, QueryClient } from '@tanstack/angular-query'; +provideAngularQuery(new QueryClient());`, + ) + tree.overwrite( + '/package.json', + JSON.stringify({ + [type]: { + [packageJson.name]: `npm:@tanstack/angular-query-experimental${versioned ? '@~5.90.25' : ''}`, + [devtoolsPackage.name]: `npm:@tanstack/angular-query-experimental${versioned ? '@5.90.25' : ''}`, + }, + }), + ) + const result = await runner.runSchematic( + 'migrate-from-experimental', + {}, + tree, + ) + expect( + JSON.parse(result.readContent('/package.json'))[type], + ).toStrictEqual({ + [packageJson.name]: `^${packageJson.version}`, + [devtoolsPackage.name]: `${versioned ? '' : '^'}${devtoolsPackage.version}`, + }) + expect(result.readContent('/src/app.ts')).toContain( + 'provideTanStackQuery as provideAngularQuery', + ) + expect(result.readContent('/src/app.ts')).toContain( + 'provideAngularQuery(() => new QueryClient())', + ) + expect(runner.tasks).toHaveLength(1) + const again = await runner.runSchematic( + 'migrate-from-experimental', + {}, + result, + ) + expect(again.readContent('/package.json')).toBe( + result.readContent('/package.json'), + ) + expect(runner.tasks).toHaveLength(0) + }, + ) + + it('replaces an alias alongside the original dependency and respects skipInstall', async () => { + const { runner, tree } = setup( + `import { QueryClient } from '@tanstack/angular-query-experimental';`, + ) + tree.overwrite( + '/package.json', + JSON.stringify({ + dependencies: { + '@tanstack/angular-query-experimental': '^5.90.25', + [packageJson.name]: + 'npm:@tanstack/angular-query-experimental@5.90.25', + }, + }), + ) + const result = await runner.runSchematic( + 'migrate-from-experimental', + { skipInstall: true }, + tree, + ) + expect( + JSON.parse(result.readContent('/package.json')).dependencies, + ).toStrictEqual({ [packageJson.name]: packageJson.version }) + expect(runner.tasks).toHaveLength(0) + }) + + it('preserves unrelated npm aliases', async () => { + const { runner, tree } = setup( + `import { QueryClient } from '@tanstack/angular-query';`, + ) + tree.overwrite( + '/package.json', + JSON.stringify({ + dependencies: { + [packageJson.name]: 'npm:another-query-adapter@1.2.3', + [devtoolsPackage.name]: 'npm:another-query-devtools@1.2.3', + }, + }), + ) + const result = await runner.runSchematic( + 'migrate-from-experimental', + {}, + tree, + ) + expect(result.readContent('/package.json')).toBe( + tree.readText('/package.json'), + ) + expect(runner.tasks).toHaveLength(0) + }) + + it.each([ + ['5.90.25', true], + ['v5.90.25', true], + ['=5.90.25', true], + [' 5.90.25 ', true], + ['= v5.90.25', true], + ['5.90.25-beta.1', true], + ['5.90.25+build.1', true], + ['^5.90.25', false], + ['~5.90.25', false], + ['>=5.90.25', false], + ['*', false], + ['latest', false], + ])('preserves pin policy when replacing %s', async (previous, exact) => { + const { runner, tree } = setup( + `import { withDevtools } from '@tanstack/angular-query-experimental/devtools';`, + ) + tree.overwrite( + '/package.json', + JSON.stringify({ + dependencies: { '@tanstack/angular-query-experimental': previous }, + }), + ) + const result = await runner.runSchematic( + 'migrate-from-experimental', + {}, + tree, + ) + expect( + JSON.parse(result.readContent('/package.json')).dependencies, + ).toStrictEqual({ + [packageJson.name]: `${exact ? '' : '^'}${packageJson.version}`, + [devtoolsPackage.name]: `${exact ? '' : '^'}${devtoolsPackage.version}`, + }) + }) + + it.each(['v5.90.25', '=5.90.25', ' 5.90.25 ', '= v5.90.25'])( + 'preserves an exact alias pin written as %s', + async (previous) => { + const { runner, tree } = setup( + "import { QueryClient } from '@tanstack/angular-query';", + ) + tree.overwrite( + '/package.json', + JSON.stringify({ + dependencies: { + [packageJson.name]: `npm:@tanstack/angular-query-experimental@${previous}`, + [devtoolsPackage.name]: `npm:@tanstack/angular-query-experimental@${previous}`, + }, + }), + ) + const result = await runner.runSchematic( + 'migrate-from-experimental', + {}, + tree, + ) + expect( + JSON.parse(result.readContent('/package.json')).dependencies, + ).toStrictEqual({ + [packageJson.name]: packageJson.version, + [devtoolsPackage.name]: devtoolsPackage.version, + }) + }, + ) + + it('preserves a development dependency pin when adding devtools', async () => { + const { runner, tree } = setup( + "import { withDevtools } from '@tanstack/angular-query-experimental/devtools'", + ) + tree.overwrite( + '/package.json', + JSON.stringify({ + devDependencies: { '@tanstack/angular-query-experimental': '5.90.25' }, + }), + ) + const result = await runner.runSchematic( + 'migrate-from-experimental', + { skipInstall: true }, + tree, + ) + const manifest = JSON.parse(result.readContent('/package.json')) + expect(manifest.devDependencies[packageJson.name]).toBe(packageJson.version) + expect(manifest.dependencies[devtoolsPackage.name]).toBe( + devtoolsPackage.version, + ) + }) + + it('preserves exact core pins when opting into core migration', async () => { + const { runner, tree } = setup( + `import { QueryClient } from '@tanstack/query-core';`, + ) + tree.overwrite( + '/package.json', + JSON.stringify({ + devDependencies: { '@tanstack/query-core': '5.90.25' }, + }), + ) + const result = await runner.runSchematic( + 'migrate-from-experimental', + { migrateQueryCoreImports: true }, + tree, + ) + expect( + JSON.parse(result.readContent('/package.json')).devDependencies, + ).toStrictEqual({ [packageJson.name]: packageJson.version }) + }) + + it('keeps existing stable and devtools version specifiers', async () => { + const { runner, tree } = setup( + `import { withDevtools } from '@tanstack/angular-query-experimental/devtools';`, + ) + tree.overwrite( + '/package.json', + JSON.stringify({ + dependencies: { + '@tanstack/angular-query-experimental': '5.90.25', + [packageJson.name]: '~99.0.0', + [devtoolsPackage.name]: '99.0.0', + }, + }), + ) + const result = await runner.runSchematic( + 'migrate-from-experimental', + {}, + tree, + ) + expect( + JSON.parse(result.readContent('/package.json')).dependencies, + ).toStrictEqual({ + [packageJson.name]: '~99.0.0', + [devtoolsPackage.name]: '99.0.0', + }) + }) +}) + +describe('project-local test configurations', () => { + it.each(['', 'projects/app'])( + 'discovers the default spec config under %s', + async (root) => { + const { runner, tree } = setup( + `import { QueryClient } from '@tanstack/angular-query-experimental';`, + ) + const prefix = root ? `/${root}` : '' + const legacy = `import { QueryClient } from '@tanstack/angular-query-experimental';` + tree.create( + '/angular.json', + JSON.stringify({ + version: 1, + projects: { + app: { + projectType: 'application', + root, + sourceRoot: `${root ? `${root}/` : ''}src`, + architect: { + build: { + builder: '@angular/build:application', + options: { + tsConfig: `${root ? `${root}/` : ''}tsconfig.app.json`, + }, + }, + test: { builder: '@angular/build:unit-test' }, + }, + }, + }, + }), + ) + tree.create( + `${prefix}/tsconfig.app.json`, + JSON.stringify({ files: ['src/main.ts'] }), + ) + tree.create(`${prefix}/src/main.ts`, '') + tree.create(`${prefix}/src/app.spec.ts`, legacy) + tree.create(`${prefix}/src/excluded.spec.ts`, legacy) + tree.create( + `${prefix}/tsconfig.spec.json`, + JSON.stringify({ + include: ['src/**/*.spec.ts'], + exclude: ['src/excluded.spec.ts'], + }), + ) + const result = await runner.runSchematic( + 'migrate-from-experimental', + {}, + tree, + ) + expect(result.readContent(`${prefix}/src/app.spec.ts`)).toContain( + packageJson.name, + ) + expect(result.readContent(`${prefix}/src/excluded.spec.ts`)).toBe(legacy) + }, + ) + + it.each([ + ['Analog', { executor: '@analogjs/vitest-angular:test' }], + ['manual Vitest', { command: 'vitest run' }], + ['package script', undefined], + ])( + 'discovers test configs for %s alongside a library build', + async (_runner, test) => { + const { runner, tree } = setup( + "import { QueryClient } from '@tanstack/angular-query-experimental';", + ) + const legacy = tree.readText('/src/app.ts') + tree.create('/nx.json', '{}') + tree.overwrite( + '/package.json', + JSON.stringify({ + dependencies: { '@tanstack/angular-query-experimental': '5.90.25' }, + scripts: { test: 'vitest run' }, + nx: { + targets: { + build: { options: { tsConfig: 'tsconfig.lib.json' } }, + ...(test ? { test } : {}), + }, + }, + }), + ) + tree.create( + '/tsconfig.lib.json', + JSON.stringify({ files: ['src/app.ts'] }), + ) + tree.create( + '/tsconfig.test.json', + JSON.stringify({ + include: ['src/**/*.spec.ts'], + exclude: ['src/excluded.spec.ts'], + }), + ) + tree.create('/src/app.spec.ts', legacy) + tree.create('/src/excluded.spec.ts', legacy) + const result = await runner.runSchematic( + 'migrate-from-experimental', + {}, + tree, + ) + expect(result.readContent('/src/app.ts')).not.toContain( + 'angular-query-experimental', + ) + expect(result.readContent('/src/app.spec.ts')).not.toContain( + 'angular-query-experimental', + ) + expect(result.readContent('/src/excluded.spec.ts')).toBe(legacy) + }, + ) + + it('respects library and test configs in a standalone package without targets', async () => { + const { runner, tree } = setup( + "import { QueryClient } from '@tanstack/angular-query-experimental';", + ) + const legacy = tree.readText('/src/app.ts') + tree.create('/tsconfig.lib.json', JSON.stringify({ files: ['src/app.ts'] })) + tree.create( + '/tsconfig.spec.json', + JSON.stringify({ + include: ['src/**/*.spec.ts'], + exclude: ['src/excluded.spec.ts'], + }), + ) + tree.create('/src/app.spec.ts', legacy) + tree.create('/src/excluded.spec.ts', legacy) + tree.create('/src/outside.ts', legacy) + const result = await runner.runSchematic( + 'migrate-from-experimental', + {}, + tree, + ) + expect(result.readContent('/src/app.ts')).not.toContain( + 'angular-query-experimental', + ) + expect(result.readContent('/src/app.spec.ts')).not.toContain( + 'angular-query-experimental', + ) + expect(result.readContent('/src/excluded.spec.ts')).toBe(legacy) + expect(result.readContent('/src/outside.ts')).toBe(legacy) + }) + + it.each([false, true])( + 'keeps application sources with a standalone spec config (solution=%s)', + async (solution) => { + const { runner, tree } = setup( + "import { QueryClient } from '@tanstack/angular-query-experimental';", + ) + const legacy = tree.readText('/src/app.ts') + tree.create( + '/tsconfig.spec.json', + JSON.stringify({ + include: ['src/**/*.spec.ts'], + exclude: ['src/excluded.spec.ts'], + }), + ) + // oxlint-disable-next-line vitest-js/no-conditional-in-test -- The parameter selects setup/actions; every case runs the assertions. + if (solution) { + tree.create( + '/tsconfig.json', + JSON.stringify({ + files: [], + references: [ + { path: './tsconfig.build.json' }, + { path: './tsconfig.spec.json' }, + ], + }), + ) + tree.create( + '/tsconfig.build.json', + JSON.stringify({ files: ['src/app.ts'] }), + ) + } + tree.create('/src/app.spec.ts', legacy) + tree.create('/src/excluded.spec.ts', legacy) + const result = await runner.runSchematic( + 'migrate-from-experimental', + {}, + tree, + ) + expect(result.readContent('/src/app.ts')).not.toContain( + 'angular-query-experimental', + ) + expect(result.readContent('/src/app.spec.ts')).not.toContain( + 'angular-query-experimental', + ) + expect(result.readContent('/src/excluded.spec.ts')).toBe(legacy) + }, + ) + + it.each([false, true])( + 'keeps an explicit test config across merged Nx declarations (metadata first=%s)', + async (metadataFirst) => { + const { runner, tree } = setup( + "import { QueryClient } from '@tanstack/angular-query-experimental';", + ) + const legacy = tree.readText('/src/app.ts') + tree.create('/nx.json', '{}') + // Put metadata at the root or nested root to exercise both traversal orders. + const root = metadataFirst ? '' : 'projects/lib' + const prefix = root ? `/${root}` : '' + const manifest = JSON.stringify({ nx: { tags: ['scope:lib'] } }) + // oxlint-disable-next-line vitest-js/no-conditional-in-test -- The parameter selects setup/actions; every case runs the assertions. + if (metadataFirst) tree.overwrite('/package.json', manifest) + tree.create( + `${prefix}/project.json`, + JSON.stringify({ + root, + targets: { + build: { + options: { + tsConfig: `${root ? root + '/' : ''}tsconfig.lib.json`, + }, + }, + test: { + options: { + tsConfig: `${root ? root + '/' : ''}tsconfig.custom.json`, + }, + }, + }, + }), + ) + // oxlint-disable-next-line vitest-js/no-conditional-in-test -- The parameter selects setup/actions; every case runs the assertions. + if (!metadataFirst) tree.create(`${prefix}/package.json`, manifest) + tree.create( + `${prefix}/tsconfig.lib.json`, + JSON.stringify({ files: ['src/main.ts'] }), + ) + tree.create( + `${prefix}/tsconfig.custom.json`, + JSON.stringify({ files: ['src/custom.spec.ts'] }), + ) + tree.create( + `${prefix}/tsconfig.spec.json`, + JSON.stringify({ files: ['src/default.spec.ts'] }), + ) + tree.create(`${prefix}/src/main.ts`, legacy) + tree.create(`${prefix}/src/custom.spec.ts`, legacy) + tree.create(`${prefix}/src/default.spec.ts`, legacy) + const result = await runner.runSchematic( + 'migrate-from-experimental', + {}, + tree, + ) + expect(result.readContent(`${prefix}/src/main.ts`)).not.toContain( + 'angular-query-experimental', + ) + expect(result.readContent(`${prefix}/src/custom.spec.ts`)).not.toContain( + 'angular-query-experimental', + ) + expect(result.readContent(`${prefix}/src/default.spec.ts`)).toBe(legacy) + }, + ) + + it('uses an explicit test config instead of the default spec config', async () => { + const { runner, tree } = setup( + `import { QueryClient } from '@tanstack/angular-query-experimental';`, + ) + const legacy = tree.readText('/src/app.ts') + tree.create( + '/angular.json', + JSON.stringify({ + version: 1, + projects: { + app: { + projectType: 'application', + root: '', + architect: { + build: { + builder: '@angular/build:application', + options: { tsConfig: 'tsconfig.app.json' }, + }, + test: { + builder: '@angular/build:unit-test', + options: { tsConfig: 'tsconfig.custom.json' }, + configurations: { ci: {} }, + }, + }, + }, + }, + }), + ) + tree.create( + '/tsconfig.app.json', + JSON.stringify({ files: ['src/main.ts'] }), + ) + tree.create('/src/main.ts', '') + tree.create( + '/tsconfig.spec.json', + JSON.stringify({ files: ['src/default.spec.ts'] }), + ) + tree.create( + '/tsconfig.custom.json', + JSON.stringify({ files: ['src/custom.spec.ts'] }), + ) + tree.create('/src/default.spec.ts', legacy) + tree.create('/src/custom.spec.ts', legacy) + const result = await runner.runSchematic( + 'migrate-from-experimental', + {}, + tree, + ) + expect(result.readContent('/src/default.spec.ts')).toBe(legacy) + expect(result.readContent('/src/custom.spec.ts')).toContain( + packageJson.name, + ) + }) +}) diff --git a/packages/angular-query/schematics-build/ng-add.test.ts b/packages/angular-query/schematics-build/ng-add.test.ts new file mode 100644 index 00000000000..a4285e407c7 --- /dev/null +++ b/packages/angular-query/schematics-build/ng-add.test.ts @@ -0,0 +1,115 @@ +import { describe, expect, it } from 'vitest' +import angularQueryPackage from '../package.json' with { type: 'json' } +import { + SchematicTestRunner, + angularCollection, + devtoolsPackage, + queryCollection, +} from './test-utils' + +const angularRunner = new SchematicTestRunner( + '@schematics/angular', + angularCollection, +) +const queryRunner = new SchematicTestRunner( + angularQueryPackage.name, + queryCollection, +) + +async function createAngularApplication(standalone = true) { + let tree = await angularRunner.runSchematic('workspace', { + name: 'workspace', + version: '20.0.0', + newProjectRoot: 'projects', + }) + + tree = await angularRunner.runSchematic( + 'application', + { + name: 'test-app', + standalone, + routing: false, + style: 'css', + skipInstall: true, + }, + tree, + ) + + return tree +} + +describe('ng-add schematic', () => { + it('configures Angular Query and devtools', async () => { + const tree = await createAngularApplication() + const result = await queryRunner.runSchematic( + 'ng-add', + { project: 'test-app' }, + tree, + ) + const packageJson = JSON.parse(result.readContent('/package.json')) as { + dependencies: Record + } + const devtoolsPackageName = Object.keys(packageJson.dependencies).find( + (packageName) => packageName.endsWith('/angular-query-devtools'), + ) + const appConfig = result.readContent( + '/projects/test-app/src/app/app.config.ts', + ) + + expect(devtoolsPackageName).toBeDefined() + expect(appConfig).toContain(`from '${angularQueryPackage.name}'`) + expect(appConfig).toContain(`from '${devtoolsPackageName}'`) + expect(appConfig).toContain( + 'provideTanStackQuery(() => new QueryClient(), withDevtools())', + ) + expect(queryRunner.tasks).toStrictEqual([ + expect.objectContaining({ name: 'node-package' }), + ]) + }) + + it('adds the devtools with a caret range so they update with Angular Query', async () => { + const tree = await createAngularApplication() + const result = await queryRunner.runSchematic( + 'ng-add', + { project: 'test-app' }, + tree, + ) + const packageJson = JSON.parse(result.readContent('/package.json')) as { + dependencies: Record + } + + expect(packageJson.dependencies[devtoolsPackage.name]).toBe( + `^${devtoolsPackage.version}`, + ) + }) + + it.each([ + { applicationType: 'standalone', standalone: true }, + { applicationType: 'NgModule', standalone: false }, + ])( + 'does not duplicate configuration in a $applicationType application', + async ({ standalone }) => { + const tree = await createAngularApplication(standalone) + const firstResult = await queryRunner.runSchematic( + 'ng-add', + { project: 'test-app' }, + tree, + ) + const secondResult = await queryRunner.runSchematic( + 'ng-add', + { project: 'test-app' }, + firstResult, + ) + const applicationSources = secondResult.files + .filter((filePath) => filePath.endsWith('.ts')) + .map((filePath) => secondResult.readContent(filePath)) + .join('\n') + + expect(applicationSources.match(/provideTanStackQuery\(/g)).toHaveLength( + 1, + ) + expect(applicationSources.match(/withDevtools\(\)/g)).toHaveLength(1) + expect(queryRunner.tasks).toHaveLength(0) + }, + ) +}) diff --git a/packages/angular-query/schematics-build/test-utils.ts b/packages/angular-query/schematics-build/test-utils.ts new file mode 100644 index 00000000000..f04a87d5a91 --- /dev/null +++ b/packages/angular-query/schematics-build/test-utils.ts @@ -0,0 +1,34 @@ +import { createRequire } from 'node:module' +import { readFileSync } from 'node:fs' +import { dirname, resolve } from 'node:path' +import type * as Schematics from '@angular-devkit/schematics' +import type * as Testing from '@angular-devkit/schematics/testing' + +// Point to an isolated installed Angular workspace to exercise the same tests +// against its DevKit, utilities, and TypeScript instead of the monorepo versions. +const compatibilityRoot = process.env.ANGULAR_SCHEMATICS_TEST_ROOT +const loadModule = createRequire( + compatibilityRoot + ? resolve(compatibilityRoot, 'package.json') + : import.meta.url, +) + +export const { Tree } = loadModule( + '@angular-devkit/schematics', +) as typeof Schematics +export const { SchematicTestRunner } = loadModule( + '@angular-devkit/schematics/testing', +) as typeof Testing +export const devtoolsPackage = JSON.parse( + readFileSync(resolve('../angular-query-devtools/package.json'), 'utf8'), +) as { name: string; version: string } +export const queryCollection = compatibilityRoot + ? resolve( + compatibilityRoot, + 'node_modules/@tanstack/angular-query/schematics/collection.json', + ) + : resolve('dist/schematics/collection.json') +export const angularCollection = resolve( + dirname(loadModule.resolve('@schematics/angular/package.json')), + 'collection.json', +) diff --git a/packages/angular-query/schematics/collection.json b/packages/angular-query/schematics/collection.json new file mode 100644 index 00000000000..6ecc4f306ac --- /dev/null +++ b/packages/angular-query/schematics/collection.json @@ -0,0 +1,15 @@ +{ + "$schema": "../../../node_modules/@angular-devkit/schematics/collection-schema.json", + "schematics": { + "ng-add": { + "description": "Configure TanStack Query in an Angular application.", + "factory": "./ng-add/index#ngAdd", + "schema": "./ng-add/schema.json" + }, + "migrate-from-experimental": { + "description": "Migrate Angular Query experimental imports and unambiguous API calls to the stable package.", + "factory": "./migrate-from-experimental/index#migrate", + "schema": "./migrate-from-experimental/schema.json" + } + } +} diff --git a/packages/angular-query/schematics/migrate-from-experimental/imports.ts b/packages/angular-query/schematics/migrate-from-experimental/imports.ts new file mode 100644 index 00000000000..f73f7196a41 --- /dev/null +++ b/packages/angular-query/schematics/migrate-from-experimental/imports.ts @@ -0,0 +1,96 @@ +import ts from 'typescript' + +/** Reuse visible value imports; add ordinary named imports only when needed. */ +export class MigrationImports { + private readonly usedNames = new Set() + private readonly additions: Array<{ + name: string + local: string + module: string + }> = [] + private readonly existing: Array<{ + name?: string + local: ts.Identifier + module: string + }> = [] + + constructor( + source: ts.SourceFile, + private readonly checker: ts.TypeChecker, + normalizeModule: (module: string) => string, + ) { + const collectNames = (node: ts.Node) => { + if (ts.isIdentifier(node)) this.usedNames.add(node.text) + ts.forEachChild(node, collectNames) + } + collectNames(source) + for (const statement of source.statements) { + if ( + !ts.isImportDeclaration(statement) || + !ts.isStringLiteral(statement.moduleSpecifier) || + statement.importClause?.isTypeOnly + ) + continue + const bindings = statement.importClause?.namedBindings + const module = normalizeModule(statement.moduleSpecifier.text) + if (bindings && ts.isNamespaceImport(bindings)) { + this.existing.push({ local: bindings.name, module }) + } else if (bindings) { + for (const element of bindings.elements) { + if (!element.isTypeOnly) + this.existing.push({ + name: (element.propertyName ?? element.name).text, + local: element.name, + module, + }) + } + } + } + } + + reference(name: string, module: string, location: ts.Node): string { + for (const imported of this.existing) { + if ( + imported.module !== module || + (imported.name && imported.name !== name) + ) + continue + const visible = this.checker.resolveName( + imported.local.text, + location, + ts.SymbolFlags.Value | ts.SymbolFlags.Alias, + false, + ) + if (visible === this.checker.getSymbolAtLocation(imported.local)) { + return imported.name + ? imported.local.text + : `${imported.local.text}.${name}` + } + } + const added = this.additions.find( + (entry) => entry.name === name && entry.module === module, + ) + if (added) return added.local + + // Check all scopes so the new import cannot be shadowed at another call site. + let local = name + if (this.usedNames.has(local)) { + const base = name === 'inject' ? 'angularInject' : 'TanStackQueryClient' + local = base + let suffix = 2 + while (this.usedNames.has(local)) local = `${base}${suffix++}` + } + this.usedNames.add(local) + this.additions.push({ name, local, module }) + return local + } + + render(): string { + return this.additions + .map( + ({ name, local, module }) => + `import { ${name === local ? name : `${name} as ${local}`} } from '${module}';\n`, + ) + .join('') + } +} diff --git a/packages/angular-query/schematics/migrate-from-experimental/index.ts b/packages/angular-query/schematics/migrate-from-experimental/index.ts new file mode 100644 index 00000000000..becc20f218b --- /dev/null +++ b/packages/angular-query/schematics/migrate-from-experimental/index.ts @@ -0,0 +1,230 @@ +import { + NodeDependencyType, + addPackageJsonDependency, + removePackageJsonDependency, +} from '@schematics/angular/utility/dependencies' +import { NodePackageInstallTask } from '@angular-devkit/schematics/tasks' +import { CORE_PACKAGE, OLD_PACKAGE, migrateSource } from './source' +import { + migrationWorkspace, + packageReferenceFiles, + sourceManifest, +} from './workspace' +import type { Schema } from './schema' +import type { Rule, Tree } from '@angular-devkit/schematics' + +const PACKAGE_NAME = '__ANGULAR_QUERY_PACKAGE_NAME__' +const PACKAGE_VERSION = '__ANGULAR_QUERY_PACKAGE_VERSION__' +const DEVTOOLS_PACKAGE_NAME = '__ANGULAR_QUERY_DEVTOOLS_PACKAGE_NAME__' +const DEVTOOLS_PACKAGE_VERSION = '__ANGULAR_QUERY_DEVTOOLS_PACKAGE_VERSION__' +const MIGRATION_GUIDE = + 'https://tanstack.com/query/latest/docs/framework/angular/guides/migrating-from-experimental' +const dependencyTypes = [ + NodeDependencyType.Default, + NodeDependencyType.Dev, + NodeDependencyType.Optional, + NodeDependencyType.Peer, +] + +// TODO: Ideally remove migrate-from-experimental one year after Angular Query's +// first stable release, along with its collection entry, tests, and packaging references. + +/** Migrates syntactically unambiguous uses; reports cases requiring human review. */ +export function migrate(options: Schema): Rule { + return async (tree, context) => { + const workspace = await migrationWorkspace(tree) + const devtoolsManifests = new Set() + let changedFiles = 0 + let reviewItems = 0 + const report = (message: string) => { + reviewItems++ + context.logger.warn(message) + } + for (const path of workspace.files) { + const text = tree.readText(path) + if ( + !text.includes(OLD_PACKAGE) && + !text.includes(PACKAGE_NAME) && + !(options.migrateQueryCoreImports && text.includes(CORE_PACKAGE)) + ) + continue + const result = migrateSource( + text, + path, + PACKAGE_NAME, + DEVTOOLS_PACKAGE_NAME, + report, + options, + ) + if (result.needsDevtools) { + const manifest = sourceManifest(path, workspace.manifests) + if (manifest) devtoolsManifests.add(manifest) + else + report( + `${path}: Add ${DEVTOOLS_PACKAGE_NAME} to the package manifest manually.`, + ) + } + if (result.text !== text) { + tree.overwrite(path, result.text) + changedFiles++ + } + } + const remainingCoreReferences = new Map() + if (options.migrateQueryCoreImports) + for (const path of packageReferenceFiles(tree, CORE_PACKAGE)) { + for (const manifest of workspace.manifests) + if (sourceManifest(path, [manifest])) + remainingCoreReferences.set(manifest, path) + } + let packageChanges = 0 + for (const manifest of workspace.manifests) + packageChanges += migrateDependencies( + tree, + manifest, + devtoolsManifests.has(manifest), + report, + options.migrateQueryCoreImports ?? false, + remainingCoreReferences.get(manifest), + ) + if (packageChanges && !options.skipInstall) + context.addTask(new NodePackageInstallTask()) + + context.logger.info( + `Angular Query migration prepared: ${changedFiles} source file(s) changed, ${packageChanges} dependency change(s), ${reviewItems} item(s) requiring manual review.`, + ) + if (packageChanges) + context.logger.info( + options.skipInstall + ? 'Dependency installation was skipped. Run your package manager install command after applying the migration.' + : 'Dependency installation is scheduled after the migration is applied.', + ) + context.logger.info( + 'Address the warnings, then run your application build, tests, linting, and formatting checks. Review SSR hydration, error handling, persistence factories, and tests waiting for stability. Angular >=20.1 is required.', + ) + context.logger.info(`Migration guide: ${MIGRATION_GUIDE}`) + return tree + } +} + +function migrateDependencies( + tree: Tree, + manifest: string, + needsDevtools: boolean, + report: (message: string) => void, + migrateCore: boolean, + remainingCoreReference?: string, +) { + const pkg = tree.readJson(manifest) as Partial< + Record> + > + let changes = 0 + for (const type of dependencyTypes) { + const dependencies = pkg[type] + if (!dependencies) continue + const experimental = dependencies[OLD_PACKAGE] + const core = migrateCore ? dependencies[CORE_PACKAGE] : undefined + const queryAlias = experimentalAlias(dependencies[PACKAGE_NAME]) + const devtoolsAlias = experimentalAlias(dependencies[DEVTOOLS_PACKAGE_NAME]) + if (experimental) changes++ + if (core && !remainingCoreReference) changes++ + if ( + queryAlias !== undefined || + ((experimental || core) && !dependencies[PACKAGE_NAME]) + ) { + addPackageJsonDependency( + tree, + { + type, + name: PACKAGE_NAME, + version: replacementVersion( + queryAlias ?? experimental ?? core, + PACKAGE_VERSION, + ), + overwrite: queryAlias !== undefined, + }, + manifest, + ) + changes++ + } + if (devtoolsAlias !== undefined) { + addPackageJsonDependency( + tree, + { + type, + name: DEVTOOLS_PACKAGE_NAME, + version: replacementVersion(devtoolsAlias, DEVTOOLS_PACKAGE_VERSION), + overwrite: true, + }, + manifest, + ) + changes++ + } + } + if (dependencyTypes.some((type) => pkg[type]?.[OLD_PACKAGE])) + removePackageJsonDependency(tree, OLD_PACKAGE, manifest) + const hasCoreDependency = dependencyTypes.some( + (type) => pkg[type]?.[CORE_PACKAGE], + ) + if (migrateCore && hasCoreDependency) { + if (remainingCoreReference) + report( + `${manifest}: Keeping ${CORE_PACKAGE} because ${remainingCoreReference} still references it. Migrate remaining imports or references manually before removing the dependency.`, + ) + else removePackageJsonDependency(tree, CORE_PACKAGE, manifest) + } + const current = tree.readJson(manifest) as typeof pkg + if ( + needsDevtools && + !dependencyTypes.some((type) => pkg[type]?.[DEVTOOLS_PACKAGE_NAME]) + ) { + const type = current.peerDependencies?.[PACKAGE_NAME] + ? NodeDependencyType.Peer + : NodeDependencyType.Default + addPackageJsonDependency( + tree, + { + type, + name: DEVTOOLS_PACKAGE_NAME, + version: replacementVersion( + experimentalAlias(pkg[type]?.[PACKAGE_NAME]) ?? + pkg[type]?.[OLD_PACKAGE] ?? + current[type]?.[PACKAGE_NAME] ?? + dependencyTypes + .map((group) => current[group]?.[PACKAGE_NAME]) + .find(Boolean), + DEVTOOLS_PACKAGE_VERSION, + ), + overwrite: false, + }, + manifest, + ) + changes++ + } + const metadata = tree.readJson(manifest) as { + peerDependenciesMeta?: Record + } + for (const name of [ + OLD_PACKAGE, + ...(migrateCore && !remainingCoreReference ? [CORE_PACKAGE] : []), + ]) + if (metadata.peerDependenciesMeta?.[name]) + report( + `${manifest}: Rename peerDependenciesMeta["${name}"] to "${PACKAGE_NAME}" and review the optional peer configuration.`, + ) + return changes +} + +function experimentalAlias(version: string | undefined) { + if (version === `npm:${OLD_PACKAGE}`) return '*' + const prefix = `npm:${OLD_PACKAGE}@` + return version?.startsWith(prefix) ? version.slice(prefix.length) : undefined +} + +/** Preserve exact pins; retain the existing caret policy for other specifiers. */ +function replacementVersion(previous: string | undefined, version: string) { + const normalized = previous?.trim().replace(/^(?:=\s*)?v?/, '') + return normalized && + /^\d+\.\d+\.\d+(?:-[\dA-Za-z.-]+)?(?:\+[\dA-Za-z.-]+)?$/.test(normalized) + ? version + : `^${version}` +} diff --git a/packages/angular-query/schematics/migrate-from-experimental/schema.json b/packages/angular-query/schematics/migrate-from-experimental/schema.json new file mode 100644 index 00000000000..bcab312464f --- /dev/null +++ b/packages/angular-query/schematics/migrate-from-experimental/schema.json @@ -0,0 +1,23 @@ +{ + "$schema": "http://json-schema.org/draft-07/schema", + "title": "Migrate experimental Angular Query", + "type": "object", + "properties": { + "unsafeWrapClientReferences": { + "type": "boolean", + "default": false, + "description": "Unsafe: wrap client references in factories. References may be injection tokens or existing factories; review every conversion." + }, + "migrateQueryCoreImports": { + "type": "boolean", + "default": false, + "description": "Replace @tanstack/query-core imports with @tanstack/angular-query and remove direct core dependencies when no references remain." + }, + "skipInstall": { + "type": "boolean", + "default": false, + "description": "Skip installing changed package dependencies." + } + }, + "additionalProperties": false +} diff --git a/packages/angular-query/schematics/migrate-from-experimental/schema.ts b/packages/angular-query/schematics/migrate-from-experimental/schema.ts new file mode 100644 index 00000000000..02002a9ebe1 --- /dev/null +++ b/packages/angular-query/schematics/migrate-from-experimental/schema.ts @@ -0,0 +1,5 @@ +export interface Schema { + skipInstall?: boolean + unsafeWrapClientReferences?: boolean + migrateQueryCoreImports?: boolean +} diff --git a/packages/angular-query/schematics/migrate-from-experimental/source.ts b/packages/angular-query/schematics/migrate-from-experimental/source.ts new file mode 100644 index 00000000000..6edcc37eb33 --- /dev/null +++ b/packages/angular-query/schematics/migrate-from-experimental/source.ts @@ -0,0 +1,518 @@ +import ts from 'typescript' +import { MigrationImports } from './imports' +import type { Schema } from './schema' + +export const OLD_PACKAGE = '@tanstack/angular-query-experimental' +export const CORE_PACKAGE = '@tanstack/query-core' + +// The experimental helpers used two different injector argument shapes. +const injectorArguments: Record< + string, + { index: number; kind: 'injector' | 'options' } | undefined +> = { + injectQueries: { index: 1, kind: 'injector' }, + injectQuery: { index: 1, kind: 'options' }, + injectInfiniteQuery: { index: 1, kind: 'options' }, + injectMutation: { index: 1, kind: 'options' }, + injectMutationState: { index: 1, kind: 'options' }, + injectIsFetching: { index: 1, kind: 'options' }, + injectIsMutating: { index: 1, kind: 'options' }, + injectIsRestoring: { index: 0, kind: 'options' }, + injectDevtoolsPanel: { index: 1, kind: 'options' }, +} +const removedInjectorOptions = new Set([ + 'InjectQueryOptions', + 'InjectInfiniteQueryOptions', + 'InjectMutationOptions', + 'InjectMutationStateOptions', + 'InjectIsFetchingOptions', + 'InjectIsMutatingOptions', + 'InjectDevtoolsPanelOptions', +]) +const removedApis: Record = { + provideIsRestoring: + 'Restoration is managed by withPersistQueryClient. Review custom restoration providers.', + queryFeature: + 'Custom feature construction is no longer public. Use the supported with* features.', + QueryFeatures: 'Use the non-generic QueryFeature type.', + DevtoolsFeature: 'Use the non-generic QueryFeature type.', + PersistQueryClientFeature: 'Use the non-generic QueryFeature type.', + CreateBaseQueryOptions: 'Use CreateQueryOptions and review typed wrappers.', +} + +/** Source edits preserve untouched formatting; symbols protect shadowed local names. */ +export function migrateSource( + text: string, + path: string, + packageName: string, + devtoolsPackageName: string, + report: (message: string) => void, + options: Schema = {}, +) { + const result = { needsDevtools: false } + const source = ts.createSourceFile(path, text, ts.ScriptTarget.Latest, true) + // Binding symbols distinguish imports from identically named local parameters. + const host = ts.createCompilerHost({ noLib: true }) + host.getSourceFile = (name) => (name === path ? source : undefined) + const checker = ts + .createProgram([path], { noLib: true, noResolve: true }, host) + .getTypeChecker() + const bindings = new Map() + const namespaces = new Set() + const edits: Array<{ start: number; end: number; text: string }> = [] + const replace = (node: ts.Node, value: string) => { + const start = node.getStart(source) + // A whole-import removal supersedes its earlier module-specifier edit. + for (let index = edits.length - 1; index >= 0; index--) { + if (edits[index]!.start >= start && edits[index]!.end <= node.end) + edits.splice(index, 1) + } + edits.push({ start, end: node.end, text: value }) + } + const warn = (node: ts.Node, message: string) => + report( + `${path}:${source.getLineAndCharacterOfPosition(node.getStart(source)).line + 1}: ${message}`, + ) + const renames: Record = { + provideAngularQuery: 'provideTanStackQuery', + provideQueryClient: 'provideTanStackQuery', + } + const imports = new MigrationImports(source, checker, (module) => + module === OLD_PACKAGE || + module === `${OLD_PACKAGE}/inject-queries-experimental` || + (options.migrateQueryCoreImports && module === CORE_PACKAGE) + ? packageName + : module, + ) + + function migrateImports() { + for (const statement of source.statements) { + if ( + (!ts.isImportDeclaration(statement) && + !ts.isExportDeclaration(statement)) || + !statement.moduleSpecifier || + !ts.isStringLiteral(statement.moduleSpecifier) + ) + continue + const module = statement.moduleSpecifier.text + const isCore = options.migrateQueryCoreImports && module === CORE_PACKAGE + const targets: Record = { + [OLD_PACKAGE]: packageName, + [`${OLD_PACKAGE}/inject-queries-experimental`]: packageName, + [`${OLD_PACKAGE}/devtools`]: devtoolsPackageName, + [`${OLD_PACKAGE}/devtools/production`]: `${devtoolsPackageName}/production`, + [`${OLD_PACKAGE}/devtools-panel`]: `${devtoolsPackageName}/devtools-panel`, + [`${OLD_PACKAGE}/devtools-panel/production`]: `${devtoolsPackageName}/devtools-panel/production`, + } + if (isCore) targets[CORE_PACKAGE] = packageName + const target = targets[module] + const isDevtools = + target?.startsWith(devtoolsPackageName) || + module === devtoolsPackageName || + module.startsWith(`${devtoolsPackageName}/`) + if (isDevtools) result.needsDevtools = true + if (target) replace(statement.moduleSpecifier, JSON.stringify(target)) + else if (module.startsWith(`${OLD_PACKAGE}/`)) + warn( + statement, + 'Unrecognized experimental entrypoint. Update this package reference manually.', + ) + if ( + module !== OLD_PACKAGE && + module !== packageName && + module !== `${OLD_PACKAGE}/inject-queries-experimental` && + !isCore && + !isDevtools + ) + continue + if (ts.isExportDeclaration(statement)) { + warn( + statement, + 'Review re-exported APIs and migrate their consumers manually.', + ) + if ( + statement.exportClause && + ts.isNamedExports(statement.exportClause) + ) { + for (const element of statement.exportClause.elements) + warnRemovedApi(element, (element.propertyName ?? element.name).text) + } + continue + } + const named = statement.importClause?.namedBindings + if (!named) continue + if (ts.isNamespaceImport(named)) { + const symbol = checker.getSymbolAtLocation(named.name) + if (symbol) namespaces.add(symbol) + } else { + const specifiers: Array = [] + for (const element of named.elements) { + const name = (element.propertyName ?? element.name).text + const symbol = checker.getSymbolAtLocation(element.name) + if (symbol) bindings.set(symbol, name) + warnRemovedApi(element, name) + const removable = + name === 'injectQueryClient' && canRemoveHelperImport(element) + if (!removable) + specifiers.push( + !isDevtools && renames[name] + ? `${element.isTypeOnly ? 'type ' : ''}${renames[name]} as ${element.name.text}` + : element.getText(source), + ) + if (name === 'injectQueryClient' && !removable) + warn( + element, + 'Review non-call references or arguments to removed injectQueryClient; its import requires manual removal.', + ) + } + if ( + specifiers.join(', ') !== + named.elements.map((element) => element.getText(source)).join(', ') + ) { + if (specifiers.length === 0 && !statement.importClause.name) + replace(statement, '') + else replace(named, `{ ${specifiers.join(', ')} }`) + } + } + } + } + + function warnRemovedApi(node: ts.Node, name: string) { + if (removedInjectorOptions.has(name)) + warn( + node, + `${name} was removed. Review typed wrappers and move injector handling to runInInjectionContext.`, + ) + else if (removedApis[name]) + warn(node, `${name} was removed. ${removedApis[name]}`) + } + + function canRemoveHelperImport(element: ts.ImportSpecifier) { + const symbol = checker.getSymbolAtLocation(element.name) + if (!symbol) return false + function hasUnsupportedReference(node: ts.Node): boolean { + if ( + ts.isIdentifier(node) && + checker.getSymbolAtLocation(node) === symbol && + node !== element.name && + node !== element.propertyName + ) { + return ( + !ts.isCallExpression(node.parent) || + node.parent.expression !== node || + node.parent.arguments.length !== 0 + ) + } + return ts.forEachChild(node, hasUnsupportedReference) ?? false + } + return !hasUnsupportedReference(source) + } + + const apiName = ( + expression: ts.Expression | ts.EntityName, + ): string | undefined => { + if (ts.isIdentifier(expression)) { + const symbol = checker.getSymbolAtLocation(expression) + return symbol && bindings.get(symbol) + } + if (ts.isPropertyAccessExpression(expression)) { + const symbol = checker.getSymbolAtLocation(expression.expression) + if (symbol && namespaces.has(symbol)) return expression.name.text + } + if (ts.isQualifiedName(expression)) { + const symbol = checker.getSymbolAtLocation(expression.left) + if (symbol && namespaces.has(symbol)) return expression.right.text + } + return undefined + } + function migrateCall(node: ts.CallExpression) { + const name = apiName(node.expression) + if (name) warnAboutInjectorArgument(node, name) + switch (name) { + case 'provideTanStackQuery': + case 'provideAngularQuery': + case 'provideQueryClient': + migrateProvider(node) + break + case 'injectQueryClient': + migrateClientInjection(node) + break + case 'injectIsFetching': + case 'injectIsMutating': + migrateActivityFilter(node) + break + } + if ( + name && + [ + 'injectQuery', + 'injectInfiniteQuery', + 'injectMutation', + 'queryOptions', + 'infiniteQueryOptions', + 'mutationOptions', + ].includes(name) + ) + warnAboutObserverOptions(node.arguments[0]) + if (name === 'withDevtools') { + warnAboutOption( + node.arguments[1], + 'deps', + 'withDevtools no longer accepts deps. Call inject() inside the devtools options callback and remove deps.', + ) + } + } + + function warnAboutInjectorArgument(node: ts.CallExpression, name: string) { + const argument = injectorArguments[name] + if (!argument) return + if (node.arguments.some(ts.isSpreadElement)) { + warn( + node, + `Review spread arguments to ${name}; the stable helper no longer accepts an injector argument or injector options.`, + ) + return + } + if (node.arguments.length <= argument.index) return + const guidance = + argument.kind === 'injector' + ? 'Pass the old injector argument to runInInjectionContext' + : 'Pass the old options.injector to runInInjectionContext (not the options object itself)' + warn( + node, + `${name} no longer accepts ${argument.kind === 'injector' ? 'an injector argument' : 'injector options'}. ${guidance}, call ${name} inside its callback, and remove the old argument. If it is undefined or contains no injector, remove it and ensure the call is in an injection context.`, + ) + } + + function migrateProvider(node: ts.CallExpression) { + const first = node.arguments[0] + const expression = first && unwrap(first) + if ( + first && + expression && + ts.isNewExpression(expression) && + apiName(expression.expression) === 'QueryClient' + ) { + edits.push({ + start: first.getStart(source), + end: first.getStart(source), + text: '() => ', + }) + } else if ( + first && + expression && + !ts.isArrowFunction(expression) && + !ts.isFunctionExpression(expression) + ) { + if ( + options.unsafeWrapClientReferences && + (ts.isIdentifier(expression) || + ts.isPropertyAccessExpression(expression) || + ts.isElementAccessExpression(expression)) + ) { + edits.push({ + start: first.getStart(source), + end: first.getStart(source), + text: '() => ', + }) + warn( + first, + 'Unsafe conversion: wrapped this client reference in a factory. Verify it returns a QueryClient; existing factories must not be wrapped, and injection tokens need () => inject(token).', + ) + } else + warn( + first, + 'Client reference may be an instance, token, or factory; provide a client factory manually. Use --unsafe-wrap-client-references only after checking the argument is a QueryClient instance.', + ) + } + if (ts.isSpreadElement(node.parent)) + edits.push({ + start: node.parent.getStart(source), + end: node.getStart(source), + text: '', + }) + warn( + node, + 'Verify this provider is in an environment injector; review default SSR hydration and PendingTasks behavior.', + ) + } + + function unwrap(node: ts.Expression): ts.Expression { + return ts.isParenthesizedExpression(node) || + ts.isAsExpression(node) || + ts.isSatisfiesExpression(node) || + ts.isNonNullExpression(node) + ? unwrap(node.expression) + : node + } + + function property(node: ts.Expression | undefined, name: string) { + if (!node) return undefined + node = unwrap(node) + if (!ts.isObjectLiteralExpression(node)) return undefined + return node.properties.find( + ( + entry, + ): entry is ts.PropertyAssignment | ts.ShorthandPropertyAssignment => + (ts.isPropertyAssignment(entry) || + ts.isShorthandPropertyAssignment(entry)) && + (ts.isIdentifier(entry.name) || ts.isStringLiteral(entry.name)) && + entry.name.text === name, + ) + } + + function propertyValue(node: ts.Expression | undefined, name: string) { + const entry = property(node, name) + return ( + entry && (ts.isPropertyAssignment(entry) ? entry.initializer : entry.name) + ) + } + + function warnAboutOption( + node: ts.Expression | undefined, + name: string, + message: string, + ) { + const entry = property(node, name) + if (entry) warn(entry, message) + } + + function warnAboutObserverOptions(node: ts.Expression | undefined) { + if (!node) return + node = unwrap(node) + if (ts.isArrowFunction(node) || ts.isFunctionExpression(node)) { + if (ts.isBlock(node.body)) { + const returns = (child: ts.Node) => { + if (ts.isReturnStatement(child)) + warnAboutObserverOptions(child.expression) + else if (!ts.isFunctionLike(child)) ts.forEachChild(child, returns) + } + ts.forEachChild(node.body, returns) + } else warnAboutObserverOptions(node.body) + } else if (ts.isConditionalExpression(node)) { + warnAboutObserverOptions(node.whenTrue) + warnAboutObserverOptions(node.whenFalse) + } else + warnAboutOption( + node, + 'throwOnError', + 'Observer throwOnError was removed. Read the error signal or configure an ErrorHandler through cache callbacks. Imperative refetch throwOnError remains supported.', + ) + } + + function warnAboutIndirectReference(node: ts.Expression, name: string) { + if (ts.isCallExpression(node.parent) && node.parent.expression === node) + return + if (name === 'injectQueryClient') + warn( + node, + 'injectQueryClient was removed. Replace this indirect reference with a function that calls inject(QueryClient), and review its consumers.', + ) + else if (name === 'provideTanStackQuery' || renames[name]) + warn( + node, + 'Review consumers of this provider reference: provideTanStackQuery expects a QueryClient factory and returns one EnvironmentProviders value.', + ) + else if (injectorArguments[name]) + warn( + node, + `Review consumers of this ${name} reference for removed injector arguments${name === 'injectIsFetching' || name === 'injectIsMutating' ? ' and callback-based filters' : ''}.`, + ) + } + + function migrateClientInjection(node: ts.CallExpression) { + if (node.arguments.length !== 0) { + warn( + node, + 'Migrate injectQueryClient arguments manually using Angular inject or runInInjectionContext.', + ) + return + } + const inject = imports.reference('inject', '@angular/core', node) + const client = imports.reference('QueryClient', packageName, node) + replace(node, `${inject}(${client})`) + } + + function migrateActivityFilter(node: ts.CallExpression) { + const first = node.arguments[0] + if (!first) return + if (ts.isObjectLiteralExpression(first)) { + edits.push( + { + start: first.getStart(source), + end: first.getStart(source), + text: '() => (', + }, + { start: first.end, end: first.end, text: ')' }, + ) + } else if (!ts.isArrowFunction(first) && !ts.isFunctionExpression(first)) + warn(first, 'Review activity filter: the stable API expects a callback.') + } + + function visit(node: ts.Node) { + if ( + ts.isStringLiteral(node) && + (node.text.startsWith(OLD_PACKAGE) || + (options.migrateQueryCoreImports && + node.text.startsWith(CORE_PACKAGE))) && + !ts.isImportDeclaration(node.parent) && + !ts.isExportDeclaration(node.parent) + ) { + warn( + node, + 'Review this package reference manually (for example, a dynamic import or require).', + ) + } + if (ts.isCallExpression(node)) migrateCall(node) + if (ts.isPropertyAccessExpression(node) || ts.isQualifiedName(node)) { + const name = apiName(node) + if (name) { + warnRemovedApi(node, name) + if (ts.isPropertyAccessExpression(node)) { + if (renames[name]) replace(node.name, renames[name]) + warnAboutIndirectReference(node, name) + } + } + } + if ( + ts.isIdentifier(node) && + !ts.isImportSpecifier(node.parent) && + !ts.isPropertyAccessExpression(node.parent) && + !ts.isQualifiedName(node.parent) && + !ts.isTypeReferenceNode(node.parent) + ) { + const name = apiName(node) + if (name) warnAboutIndirectReference(node, name) + } + if ( + ts.isTypeReferenceNode(node) && + apiName(node.typeName) === 'QueryFeature' && + node.typeArguments?.length + ) + warn( + node, + 'QueryFeature is no longer generic. Remove its type arguments and use features returned by the supported with* functions.', + ) + if ( + ts.isNewExpression(node) && + apiName(node.expression) === 'QueryClient' + ) { + const defaults = propertyValue(node.arguments?.[0], 'defaultOptions') + warnAboutObserverOptions(propertyValue(defaults, 'queries')) + warnAboutObserverOptions(propertyValue(defaults, 'mutations')) + } + ts.forEachChild(node, visit) + } + migrateImports() + visit(source) + const newImports = imports.render() + if (newImports) { + // Insert after existing statements' leading comments (and a possible shebang). + const position = source.statements[0]?.getStart(source) ?? text.length + edits.push({ start: position, end: position, text: newImports }) + } + let output = text + for (const edit of edits.sort((a, b) => b.start - a.start || b.end - a.end)) + output = output.slice(0, edit.start) + edit.text + output.slice(edit.end) + return { text: output, needsDevtools: result.needsDevtools } +} diff --git a/packages/angular-query/schematics/migrate-from-experimental/workspace.ts b/packages/angular-query/schematics/migrate-from-experimental/workspace.ts new file mode 100644 index 00000000000..b70fba06ea7 --- /dev/null +++ b/packages/angular-query/schematics/migrate-from-experimental/workspace.ts @@ -0,0 +1,297 @@ +import { posix } from 'node:path' +import { getWorkspace } from '@schematics/angular/utility/workspace' +import { SchematicsException } from '@angular-devkit/schematics' +import ts from 'typescript' +import type { Tree } from '@angular-devkit/schematics' + +// cspell:ignore subdirs + +const ignoredDirectories = new Set([ + 'node_modules', + 'dist', + 'build', + '.git', + '.angular', + '.nx', + '.cache', + 'coverage', +]) + +function isSource(path: string) { + return /\.[cm]?tsx?$/.test(path) && !/\.d\.[cm]?ts$/.test(path) +} + +/** Visit files without descending into dependencies or generated output. */ +function filesUnder(tree: Tree, root: string): Array { + const files: Array = [] + const visit = (path: string) => { + const directory = tree.getDir(path) + for (const name of directory.subfiles) { + const file = posix.join(path, name) + files.push(file) + } + for (const name of directory.subdirs) { + if (!ignoredDirectories.has(name)) visit(posix.join(path, name)) + } + } + visit(root) + return files +} + +function sourcesUnder(tree: Tree, root: string) { + return filesUnder(tree, root).filter(isSource) +} + +/** Include declarations, JavaScript, and component files when checking dependency references. */ +export function packageReferenceFiles(tree: Tree, packageName: string) { + return filesUnder(tree, '/').filter((path) => { + const isComponent = /\.(vue|svelte|astro)$/.test(path) + if (!isComponent && !/\.[cm]?[jt]sx?$/.test(path)) return false + const text = tree.readText(path) + if (!text.includes(packageName)) return false + if (isComponent) return true + const containsReference = (node: ts.Node): boolean => { + if (ts.isStringLiteralLike(node) || ts.isTemplateHead(node)) + return ( + node.text === packageName || node.text.startsWith(`${packageName}/`) + ) + return ts.forEachChild(node, containsReference) ?? false + } + return containsReference( + ts.createSourceFile(path, text, ts.ScriptTarget.Latest, true), + ) + }) +} + +/** TypeScript config patterns support *, ? and **; a bare directory includes its descendants. */ +function configPattern(root: string, pattern: string): RegExp { + let path = posix.resolve(root, pattern) + if (!/[?*]/.test(path) && !posix.extname(path)) path += '/**/*' + const segments = path.split('/') + const expression = segments + .map((segment, index) => { + if (segment === '**') + return index === segments.length - 1 ? '.*' : '(?:[^/]+/)*' + const value = segment + .split('') + .map((character) => { + if (character === '*') return '[^/]*' + if (character === '?') return '[^/]' + return character.replace(/[\\^$.*+?()[\]{}|]/g, '\\$&') + }) + .join('') + return value + (index < segments.length - 1 ? '/' : '') + }) + .join('') + return new RegExp(`^${expression}$`) +} + +function configuredSources( + tree: Tree, + configPath: string, + visited = new Set(), +): Array { + if (visited.has(configPath)) return [] + visited.add(configPath) + const readFile = (path: string) => + tree.exists(path) ? tree.readText(path) : undefined + const config = ts.getParsedCommandLineOfConfigFile( + configPath, + { noLib: true }, + { + useCaseSensitiveFileNames: true, + getCurrentDirectory: () => '/', + fileExists: (path) => tree.exists(path), + readFile, + readDirectory: (root, extensions, excludes, includes) => { + const patterns = includes + const roots = new Set([root]) + for (const pattern of patterns) { + const prefix = posix.resolve(root, pattern).split(/[?*]/)[0]! + roots.add(prefix.endsWith('/') ? prefix : posix.dirname(prefix)) + } + const candidates = new Set( + [...roots].flatMap((path) => sourcesUnder(tree, path)), + ) + return [...candidates].filter( + (path) => + extensions.some((extension) => path.endsWith(extension)) && + patterns.some((pattern) => + configPattern(root, pattern).test(path), + ) && + !(excludes ?? []).some((pattern) => + configPattern(root, pattern).test(path), + ), + ) + }, + onUnRecoverableConfigFileDiagnostic: (diagnostic) => { + throw new SchematicsException( + ts.flattenDiagnosticMessageText(diagnostic.messageText, '\n'), + ) + }, + }, + ) + if (!config) return [] + const host = ts.createCompilerHost(config.options) + host.getCurrentDirectory = () => '/' + host.fileExists = (path) => tree.exists(path) + host.readFile = readFile + host.realpath = (path) => path + host.directoryExists = (path) => { + // TypeScript also probes file paths here; `getDir` throws on those. + if (tree.exists(path)) return false + const directory = tree.getDir(path) + return directory.subfiles.length > 0 || directory.subdirs.length > 0 + } + host.getSourceFile = (path) => { + if (path.split('/').some((part) => ignoredDirectories.has(part))) + return undefined + const text = readFile(path) + return text === undefined + ? undefined + : ts.createSourceFile(path, text, ts.ScriptTarget.Latest, true) + } + const sources = ts + .createProgram(config.fileNames, config.options, host) + .getSourceFiles() + .map((source) => source.fileName) + .filter(isSource) + return [ + ...sources, + ...(config.projectReferences ?? []).flatMap((reference) => + configuredSources( + tree, + ts.resolveProjectReferencePath(reference), + visited, + ), + ), + ] +} + +type Target = { + options?: Record + configurations?: Record | undefined> +} +type ProjectConfig = { + root?: string + sourceRoot?: string + targets?: Record +} + +/** Use Angular/Nx projects and their declared configs, including inherited configs and local imports. */ +export async function migrationWorkspace(tree: Tree) { + const manifests = new Set() + if (tree.exists('/package.json')) manifests.add('/package.json') + const projects = new Map< + string, + { + sourceRoot?: string + configs: Set + hasExplicitTestConfig: boolean + } + >() + const addProject = ( + root: string, + sourceRoot: string | undefined, + targets: Iterable<[string, Target]>, + ) => { + root = posix.resolve('/', root) + const project = projects.get(root) ?? { + sourceRoot, + configs: new Set(), + hasExplicitTestConfig: false, + } + project.sourceRoot ??= sourceRoot + projects.set(root, project) + const manifest = posix.join(root, 'package.json') + if (tree.exists(manifest)) manifests.add(manifest) + for (const [name, target] of targets) { + for (const options of [ + target.options, + ...Object.values(target.configurations ?? {}), + ]) { + const tsConfig = options?.tsConfig + if (typeof tsConfig !== 'string') continue + if (name === 'test' || name.startsWith('test:')) + project.hasExplicitTestConfig = true + const config = posix.resolve('/', tsConfig) + if (tree.exists(config)) project.configs.add(config) + } + } + } + if (tree.exists('/angular.json') || tree.exists('/.angular.json')) { + const workspace = await getWorkspace( + tree, + tree.exists('/angular.json') ? '/angular.json' : '/.angular.json', + ) + for (const project of workspace.projects.values()) + addProject(project.root, project.sourceRoot, project.targets.entries()) + } + if (tree.exists('/nx.json')) { + for (const path of filesUnder(tree, '/')) { + if (posix.basename(path) === 'project.json') { + const project = tree.readJson(path) as ProjectConfig + addProject( + project.root ?? posix.dirname(path), + project.sourceRoot, + Object.entries(project.targets ?? {}), + ) + } else if (posix.basename(path) === 'package.json') { + const pkg = tree.readJson(path) as { nx?: ProjectConfig } + if (pkg.nx) + addProject( + posix.dirname(path), + pkg.nx.sourceRoot, + Object.entries(pkg.nx.targets ?? {}), + ) + } + } + } + if (!projects.size) addProject('/', undefined, []) + const files = new Set() + for (const [root, project] of projects) { + // Infer defaults only after Angular and Nx declarations have been merged. + if (!project.configs.size) { + for (const name of [ + 'tsconfig.json', + 'tsconfig.app.json', + 'tsconfig.lib.json', + ]) { + const config = posix.join(root, name) + if (tree.exists(config)) project.configs.add(config) + } + } + const testConfigs = project.hasExplicitTestConfig + ? [] + : ['tsconfig.spec.json', 'tsconfig.test.json'] + .map((name) => posix.join(root, name)) + .filter((path) => tree.exists(path)) + + const sources = project.configs.size + ? [...project.configs].flatMap((path) => configuredSources(tree, path)) + : sourcesUnder( + tree, + posix.resolve('/', project.sourceRoot ?? root), + ).filter( + (path) => + !testConfigs.length || !/\.(spec|test)\.[cm]?tsx?$/.test(path), + ) + for (const path of [ + ...sources, + ...testConfigs.flatMap((configPath) => + configuredSources(tree, configPath), + ), + ]) + files.add(path) + } + return { files: [...files], manifests: [...manifests] } +} + +/** Associate each source with its closest declared workspace package. */ +export function sourceManifest(path: string, manifests: Array) { + return [...manifests] + .sort((a, b) => b.length - a.length) + .find((manifest) => + path.startsWith(`${posix.dirname(manifest).replace(/\/$/, '')}/`), + ) +} diff --git a/packages/angular-query/schematics/ng-add/index.ts b/packages/angular-query/schematics/ng-add/index.ts new file mode 100644 index 00000000000..2c531bd97c8 --- /dev/null +++ b/packages/angular-query/schematics/ng-add/index.ts @@ -0,0 +1,144 @@ +import { addRootProvider } from '@schematics/angular/utility' +import { + NodeDependencyType, + addPackageJsonDependency, +} from '@schematics/angular/utility/dependencies' +import { + getAppModulePath, + isStandaloneApp, +} from '@schematics/angular/utility/ng-ast-utils' +import { findAppConfig } from '@schematics/angular/utility/standalone/app_config' +import { + findBootstrapApplicationCall, + getMainFilePath, +} from '@schematics/angular/utility/standalone/util' +import { NodePackageInstallTask } from '@angular-devkit/schematics/tasks' +import { chain } from '@angular-devkit/schematics' +import ts from 'typescript' +import type { Rule, Tree } from '@angular-devkit/schematics' +import type { Schema } from './schema' + +// Replaced with package metadata by scripts/inject-schematic-package-info.js. +// The published schematic contains literal values and does not read package.json. +const PACKAGE_NAME = '__ANGULAR_QUERY_PACKAGE_NAME__' +const DEVTOOLS_PACKAGE_NAME = '__ANGULAR_QUERY_DEVTOOLS_PACKAGE_NAME__' +const DEVTOOLS_PACKAGE_VERSION = '__ANGULAR_QUERY_DEVTOOLS_PACKAGE_VERSION__' + +function hasPackageDependency(tree: Tree, name: string) { + const packageJsonPath = tree.exists('/package.json') + ? '/package.json' + : 'package.json' + const packageJson = JSON.parse(tree.readText(packageJsonPath)) as Record< + string, + Record | undefined + > + + return ['dependencies', 'devDependencies', 'optionalDependencies'].some( + (dependencyType) => packageJson[dependencyType]?.[name] !== undefined, + ) +} + +function addDevtoolsDependency(): Rule { + return (tree, context) => { + if (hasPackageDependency(tree, DEVTOOLS_PACKAGE_NAME)) return tree + + // A caret range lets the devtools update together with the query package. + addPackageJsonDependency(tree, { + type: NodeDependencyType.Default, + name: DEVTOOLS_PACKAGE_NAME, + version: `^${DEVTOOLS_PACKAGE_VERSION}`, + overwrite: false, + }) + context.addTask(new NodePackageInstallTask()) + return tree + } +} + +function hasProviderCall(tree: Tree, sourcePath: string) { + const source = ts.createSourceFile( + sourcePath, + tree.readText(sourcePath), + ts.ScriptTarget.Latest, + true, + ) + const localProviderNames = new Set() + + for (const statement of source.statements) { + if ( + !ts.isImportDeclaration(statement) || + !ts.isStringLiteral(statement.moduleSpecifier) || + statement.moduleSpecifier.text !== PACKAGE_NAME || + !statement.importClause?.namedBindings || + !ts.isNamedImports(statement.importClause.namedBindings) + ) { + continue + } + + for (const element of statement.importClause.namedBindings.elements) { + if ( + (element.propertyName ?? element.name).text === 'provideTanStackQuery' + ) { + localProviderNames.add(element.name.text) + } + } + } + + if (localProviderNames.size === 0) return false + + let found = false + const visit = (node: ts.Node) => { + if ( + ts.isCallExpression(node) && + ts.isIdentifier(node.expression) && + localProviderNames.has(node.expression.text) + ) { + found = true + return + } + + if (!found) ts.forEachChild(node, visit) + } + visit(source) + return found +} + +async function hasRootQueryProvider(tree: Tree, projectName: string) { + const mainFilePath = await getMainFilePath(tree, projectName) + const rootFilePath = isStandaloneApp(tree, mainFilePath) + ? (findAppConfig( + findBootstrapApplicationCall(tree, mainFilePath), + tree, + mainFilePath, + )?.filePath ?? mainFilePath) + : getAppModulePath(tree, mainFilePath) + + return hasProviderCall(tree, rootFilePath) +} + +function addQueryProvider(project: string): Rule { + return async (tree) => { + if (await hasRootQueryProvider(tree, project)) return tree + + return addRootProvider( + project, + ({ code, external }) => + code`${external( + 'provideTanStackQuery', + PACKAGE_NAME, + )}(() => new ${external( + 'QueryClient', + PACKAGE_NAME, + )}(), ${external('withDevtools', DEVTOOLS_PACKAGE_NAME)}())`, + ) + } +} + +/** + * Configures TanStack Query at the application root. + * + * The QueryClient factory is resolved by each root injector, preventing query + * caches from being shared between SSR requests. + */ +export function ngAdd(options: Schema): Rule { + return chain([addDevtoolsDependency(), addQueryProvider(options.project)]) +} diff --git a/packages/angular-query/schematics/ng-add/schema.json b/packages/angular-query/schematics/ng-add/schema.json new file mode 100644 index 00000000000..0585b15541e --- /dev/null +++ b/packages/angular-query/schematics/ng-add/schema.json @@ -0,0 +1,17 @@ +{ + "$schema": "http://json-schema.org/schema", + "$id": "TanStackAngularQueryNgAdd", + "title": "TanStack Angular Query ng-add options", + "type": "object", + "properties": { + "project": { + "type": "string", + "description": "The Angular project to configure.", + "$default": { + "$source": "projectName" + } + } + }, + "required": ["project"], + "additionalProperties": false +} diff --git a/packages/angular-query/schematics/ng-add/schema.ts b/packages/angular-query/schematics/ng-add/schema.ts new file mode 100644 index 00000000000..748d4572c17 --- /dev/null +++ b/packages/angular-query/schematics/ng-add/schema.ts @@ -0,0 +1,3 @@ +export interface Schema { + project: string +} diff --git a/packages/angular-query/schematics/package.json b/packages/angular-query/schematics/package.json new file mode 100644 index 00000000000..5bbefffbabe --- /dev/null +++ b/packages/angular-query/schematics/package.json @@ -0,0 +1,3 @@ +{ + "type": "commonjs" +} diff --git a/packages/angular-query/scripts/inject-schematic-package-info.js b/packages/angular-query/scripts/inject-schematic-package-info.js new file mode 100644 index 00000000000..506976e36a7 --- /dev/null +++ b/packages/angular-query/scripts/inject-schematic-package-info.js @@ -0,0 +1,48 @@ +import fs from 'node:fs' +import path from 'node:path' +import { fileURLToPath } from 'node:url' + +const packageDir = path.resolve( + path.dirname(fileURLToPath(import.meta.url)), + '..', +) +const queryPackage = readPackageJson(path.join(packageDir, 'package.json')) +const devtoolsPackage = readPackageJson( + path.resolve(packageDir, '../angular-query-devtools/package.json'), +) + +const replacements = new Map([ + ['__ANGULAR_QUERY_PACKAGE_NAME__', queryPackage.name], + ['__ANGULAR_QUERY_PACKAGE_VERSION__', queryPackage.version], + ['__ANGULAR_QUERY_DEVTOOLS_PACKAGE_NAME__', devtoolsPackage.name], + ['__ANGULAR_QUERY_DEVTOOLS_PACKAGE_VERSION__', devtoolsPackage.version], +]) + +for (const schematic of ['ng-add', 'migrate-from-experimental']) { + const outputPath = path.join( + packageDir, + `dist/schematics/${schematic}/index.js`, + ) + let output = fs.readFileSync(outputPath, 'utf8') + for (const [placeholder, value] of replacements) { + output = output.replaceAll(placeholder, value) + } + if (output.includes('__ANGULAR_QUERY_')) { + throw new Error(`Unresolved package metadata in ${outputPath}.`) + } + fs.writeFileSync(outputPath, output) +} + +/** + * @param {string} packageJsonPath + * @returns {{ name: string; version: string }} + */ +function readPackageJson(packageJsonPath) { + const value = JSON.parse(fs.readFileSync(packageJsonPath, 'utf8')) + + if (typeof value.name !== 'string' || typeof value.version !== 'string') { + throw new Error(`Invalid package metadata in ${packageJsonPath}.`) + } + + return value +} diff --git a/packages/angular-query/scripts/prepack.js b/packages/angular-query/scripts/prepack.js new file mode 100644 index 00000000000..3a76cc65d0b --- /dev/null +++ b/packages/angular-query/scripts/prepack.js @@ -0,0 +1,117 @@ +import fs from 'node:fs' +import path from 'node:path' +import './inject-schematic-package-info.js' + +/** + * Prepack script that prepares the package for publishing by: + * 1. Creating a modified package.json without dev dependencies, publishConfig and build scripts + * 2. Updating file paths to remove 'dist/' prefixes (since files will be at root in published package) + * 3. Writing this modified package.json to the `dist` directory + * 4. Copying additional files like README.md to the dist directory + * + * Type declarations need to be in the package root or corresponding sub-path to support + * sub-path exports in applications still using `moduleResolution: node`. + */ + +console.log('Running prepack script') + +/** + * Files to copy to the dist directory + * @type {string[]} + */ +const FILES_TO_COPY = [ + 'README.md', + 'schematics/collection.json', + 'schematics/package.json', + 'schematics/ng-add/schema.json', + 'schematics/migrate-from-experimental/schema.json', +] + +/** + * Fields to remove from the package.json copy + * @type {string[]} + */ +const FIELDS_TO_REMOVE = [ + 'devDependencies', + 'files', + 'publishConfig', + 'scripts', +] + +/** + * Replaces 'dist/' or './dist/' prefix from a file path with './' + * Only matches at the start of the path to avoid false matches + * @param {string} filePath - The file path to process + * @returns {string} The path without dist prefix + */ +function replaceDist(filePath) { + // Only match dist/ at the beginning of the path, followed by a filename + // This prevents matching strings like "distributed/file.js" or "some/dist/path" + return filePath.replace(/^(?:\.\/)?dist\/(?=.+)/, './') +} + +/** + * Recursively processes package.json `exports` to remove dist prefixes + * @param {Record} exports - The exports object to process + * @returns {Record} The processed exports object + */ +function processExports(exports) { + return Object.fromEntries( + Object.entries(exports) + .filter(([key]) => key !== '@tanstack/custom-condition') + .map(([key, value]) => [ + key, + typeof value === 'string' + ? replaceDist(value) + : typeof value === 'object' && value !== null + ? processExports(value) + : value, + ]), + ) +} + +console.log('Copying modified package.json') + +/** @type {Record} */ +const packageJson = JSON.parse(fs.readFileSync('package.json', 'utf8')) + +const modifiedPackageJson = { ...packageJson } + +if (modifiedPackageJson.types) { + modifiedPackageJson.types = replaceDist(modifiedPackageJson.types) +} + +if (modifiedPackageJson.module) { + modifiedPackageJson.module = replaceDist(modifiedPackageJson.module) +} + +if (modifiedPackageJson.exports) { + modifiedPackageJson.exports = processExports(modifiedPackageJson.exports) +} + +for (const field of FIELDS_TO_REMOVE) { + delete modifiedPackageJson[field] +} + +if (!fs.existsSync('dist')) { + fs.mkdirSync('dist', { recursive: true }) +} + +fs.writeFileSync( + path.join('dist', 'package.json'), + JSON.stringify(modifiedPackageJson, null, 2), +) + +console.log('Copying other files') +for (const file of FILES_TO_COPY) { + if (fs.existsSync(file)) { + const destination = path.join('dist', file) + fs.mkdirSync(path.dirname(destination), { recursive: true }) + fs.copyFileSync(file, destination) + console.log(`${file}`) + } else { + console.log(`${file} not found, skipping`) + } +} + +console.log('prepack complete') diff --git a/packages/angular-query-experimental/src/__tests__/infinite-query-options.test-d.ts b/packages/angular-query/src/__tests__/infinite-query-options.test-d.ts similarity index 100% rename from packages/angular-query-experimental/src/__tests__/infinite-query-options.test-d.ts rename to packages/angular-query/src/__tests__/infinite-query-options.test-d.ts diff --git a/packages/angular-query-experimental/src/__tests__/infinite-query-options.test.ts b/packages/angular-query/src/__tests__/infinite-query-options.test.ts similarity index 100% rename from packages/angular-query-experimental/src/__tests__/infinite-query-options.test.ts rename to packages/angular-query/src/__tests__/infinite-query-options.test.ts diff --git a/packages/angular-query/src/__tests__/inject-infinite-query.test-d.ts b/packages/angular-query/src/__tests__/inject-infinite-query.test-d.ts new file mode 100644 index 00000000000..a2b673d5114 --- /dev/null +++ b/packages/angular-query/src/__tests__/inject-infinite-query.test-d.ts @@ -0,0 +1,186 @@ +import { describe, expectTypeOf, it } from 'vitest' +import { injectInfiniteQuery, skipToken, toResource } from '..' +import type { CreateInfiniteQueryOptions, CreateInfiniteQueryResult } from '..' +import type { Signal } from '@angular/core' +import type { InfiniteData } from '@tanstack/query-core' + +describe('injectInfiniteQuery', () => { + it('supports reading data from a generic result type', () => { + const readPages = >( + query: CreateInfiniteQueryResult, + ) => query.data()?.pages + + expectTypeOf(readPages).toBeCallableWith( + {} as CreateInfiniteQueryResult>, + ) + }) + + it('should expose status predicates as Angular signals', () => { + const query = injectInfiniteQuery(() => ({ + queryKey: ['infiniteQuery'], + queryFn: ({ pageParam }) => Promise.resolve('data on page ' + pageParam), + initialPageParam: 0, + getNextPageParam: () => 12, + })) + + expectTypeOf(query.isSuccess).toExtend>() + expectTypeOf(query.isError).toExtend>() + expectTypeOf(query.isPending).toExtend>() + }) + + describe('initialData', () => { + it('should narrow a defined result after an isError check', () => { + const query = injectInfiniteQuery(() => ({ + queryKey: ['infiniteQuery'], + queryFn: ({ pageParam }) => + Promise.resolve('data on page ' + pageParam), + initialData: { pages: ['initial data'], pageParams: [0] }, + initialPageParam: 0, + getNextPageParam: () => 12, + })) + + if (query.isError()) { + expectTypeOf(query.error).toEqualTypeOf>() + } + + expectTypeOf(toResource(query).value).toEqualTypeOf< + Signal> + >() + + // @ts-expect-error Resources are created explicitly with toResource. + query.resource + }) + + it('should keep data possibly undefined when initialData is undefined', () => { + const query = injectInfiniteQuery(() => ({ + queryKey: ['infiniteQuery'], + queryFn: ({ pageParam }) => + Promise.resolve('data on page ' + pageParam), + initialData: undefined, + initialPageParam: 0, + getNextPageParam: () => 12, + })) + + expectTypeOf(query.data).toEqualTypeOf< + Signal | Signal> + >() + }) + }) + + describe('Discriminated union return type', () => { + it('data should be possibly undefined by default', () => { + const query = injectInfiniteQuery(() => ({ + queryKey: ['infiniteQuery'], + queryFn: ({ pageParam }) => + Promise.resolve('data on page ' + pageParam), + initialPageParam: 0, + getNextPageParam: () => 12, + })) + + expectTypeOf(query.data).toEqualTypeOf< + Signal | Signal> + >() + }) + + it('data should be defined when query is success', () => { + const query = injectInfiniteQuery(() => ({ + queryKey: ['infiniteQuery'], + queryFn: ({ pageParam }) => + Promise.resolve('data on page ' + pageParam), + initialPageParam: 0, + getNextPageParam: () => 12, + })) + + if (query.isSuccess()) { + expectTypeOf(query.data).toEqualTypeOf< + Signal> + >() + expectTypeOf(toResource(query).value).toEqualTypeOf< + Signal> + >() + } + }) + + it('error should be null when query is success', () => { + const query = injectInfiniteQuery(() => ({ + queryKey: ['infiniteQuery'], + queryFn: ({ pageParam }) => + Promise.resolve('data on page ' + pageParam), + initialPageParam: 0, + getNextPageParam: () => 12, + })) + + if (query.isSuccess()) { + expectTypeOf(query.error).toEqualTypeOf>() + } + }) + + it('data should be undefined when query is pending', () => { + const query = injectInfiniteQuery(() => ({ + queryKey: ['infiniteQuery'], + queryFn: ({ pageParam }) => + Promise.resolve('data on page ' + pageParam), + initialPageParam: 0, + getNextPageParam: () => 12, + })) + + if (query.isPending()) { + expectTypeOf(query.data).toEqualTypeOf>() + } + }) + + it('error should be defined when query is error', () => { + const query = injectInfiniteQuery(() => ({ + queryKey: ['infiniteQuery'], + queryFn: ({ pageParam }) => + Promise.resolve('data on page ' + pageParam), + initialPageParam: 0, + getNextPageParam: () => 12, + })) + + if (query.isError()) { + expectTypeOf(query.error).toEqualTypeOf>() + } + }) + }) + + it('should provide the correct types to the select function', () => { + const query = injectInfiniteQuery(() => ({ + queryKey: ['infiniteQuery'], + queryFn: ({ pageParam }) => Promise.resolve('data on page ' + pageParam), + initialPageParam: 0, + getNextPageParam: () => 12, + select: (data) => { + expectTypeOf(data).toEqualTypeOf>() + return data + }, + })) + + expectTypeOf(query.data).toEqualTypeOf< + Signal | Signal> + >() + }) + + it('should work when queryFn is skipToken', () => { + const query = injectInfiniteQuery(() => ({ + queryKey: ['infiniteQuery'], + queryFn: skipToken, + initialPageParam: 0, + getNextPageParam: () => 1, + })) + + // TPageParam falls back to `unknown` here (unlike `infiniteQueryOptions`, which infers + // `number` for the same options) because there's no skipToken-specific overload to carry it. + expectTypeOf(query.data()).toEqualTypeOf< + InfiniteData | undefined + >() + }) +}) + +describe('injectInfiniteQuery options', () => { + it('omits observer error reporting options', () => { + expectTypeOf().not.toHaveProperty( + 'throwOnError', + ) + }) +}) diff --git a/packages/angular-query/src/__tests__/inject-infinite-query.test.ts b/packages/angular-query/src/__tests__/inject-infinite-query.test.ts new file mode 100644 index 00000000000..e7f79cb8a8a --- /dev/null +++ b/packages/angular-query/src/__tests__/inject-infinite-query.test.ts @@ -0,0 +1,190 @@ +import { TestBed } from '@angular/core/testing' +import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest' +import { ChangeDetectionStrategy, Component, signal } from '@angular/core' +import { sleep } from '@tanstack/query-test-utils' +import { QueryClient, injectInfiniteQuery, skipToken } from '..' +import { expectSignals, setupTanStackQueryTestBed } from './test-utils' + +describe('injectInfiniteQuery', () => { + let queryClient: QueryClient + + beforeEach(() => { + queryClient = new QueryClient() + vi.useFakeTimers() + setupTanStackQueryTestBed(queryClient) + }) + + afterEach(() => { + vi.useRealTimers() + }) + + it.each(['refetch', 'fetchNextPage', 'fetchPreviousPage'] as const)( + 'applies current infinite-query options before %s', + async (method) => { + vi.useRealTimers() + const version = signal('old') + const query = TestBed.runInInjectionContext(() => + injectInfiniteQuery(() => { + const current = version() + return { + queryKey: ['infinite'], + enabled: false, + initialPageParam: 0, + initialData: { pages: ['initial'], pageParams: [0] }, + getNextPageParam: () => 1, + getPreviousPageParam: () => -1, + queryFn: async () => current, + } + }), + ) + query.data() + const execute = query[method] + version.set('new') + const result = await execute() + expect(result.data?.pages).toContain('new') + expect(result.data?.pages).not.toContain('old') + }, + ) + + it('should properly execute infinite query', async () => { + @Component({ + selector: 'app-test', + template: '', + changeDetection: ChangeDetectionStrategy.OnPush, + }) + class TestComponent { + query = injectInfiniteQuery(() => ({ + queryKey: ['infiniteQuery'], + queryFn: ({ pageParam }) => + sleep(10).then(() => 'data on page ' + pageParam), + initialPageParam: 0, + getNextPageParam: () => 12, + })) + } + + const fixture = TestBed.createComponent(TestComponent) + fixture.detectChanges() + const query = fixture.componentInstance.query + + expectSignals(query, { + data: undefined, + status: 'pending', + }) + + await vi.advanceTimersByTimeAsync(11) + + expectSignals(query, { + data: { + pageParams: [0], + pages: ['data on page 0'], + }, + status: 'success', + }) + + void query.fetchNextPage() + + await vi.advanceTimersByTimeAsync(11) + + expectSignals(query, { + data: { + pageParams: [0, 12], + pages: ['data on page 0', 'data on page 12'], + }, + status: 'success', + }) + }) + + it('should keep initialData visible alongside the error when a refetch fails', async () => { + @Component({ + selector: 'app-test', + template: '', + changeDetection: ChangeDetectionStrategy.OnPush, + }) + class TestComponent { + query = injectInfiniteQuery(() => ({ + queryKey: ['infiniteInitialDataError'], + queryFn: () => + sleep(10).then(() => Promise.reject(new Error('Some error'))), + initialData: { pages: [1], pageParams: [1] }, + getNextPageParam: (lastPage: number) => lastPage + 1, + initialPageParam: 0, + retry: false, + })) + } + + const fixture = TestBed.createComponent(TestComponent) + fixture.detectChanges() + const query = fixture.componentInstance.query + + expect(query.data()?.pages).toStrictEqual([1]) + expect(query.isError()).toBe(false) + expect(query.status()).toBe('success') + + await vi.advanceTimersByTimeAsync(11) + fixture.detectChanges() + + expect(query.data()?.pages).toStrictEqual([1]) + expect(query.isError()).toBe(true) + expect(query.status()).toBe('error') + }) + + it('should not fetch when queryFn is skipToken, and fetch once it is replaced', async () => { + const queryFn = vi.fn< + ({ pageParam }: { pageParam: number }) => Promise + >(({ pageParam }: { pageParam: number }) => + sleep(10).then(() => `comments for 1 page ${pageParam}`), + ) + const postId = signal(undefined) + + @Component({ + selector: 'app-test', + template: '', + changeDetection: ChangeDetectionStrategy.OnPush, + }) + class TestComponent { + query = injectInfiniteQuery(() => ({ + queryKey: ['skipTokenInfinite'], + queryFn: postId() != null ? queryFn : skipToken, + initialPageParam: 0, + getNextPageParam: () => 12, + })) + } + + const fixture = TestBed.createComponent(TestComponent) + fixture.detectChanges() + const query = fixture.componentInstance.query + + expect(query.status()).toBe('pending') + expect(query.isFetching()).toBe(false) + + await vi.advanceTimersByTimeAsync(11) + fixture.detectChanges() + expect(queryFn).not.toHaveBeenCalled() + expect(query.status()).toBe('pending') + expect(query.isFetching()).toBe(false) + + postId.set('1') + fixture.detectChanges() + expect(query.isFetching()).toBe(true) + + await vi.advanceTimersByTimeAsync(11) + fixture.detectChanges() + expect(queryFn).toHaveBeenCalledTimes(1) + expect(query.status()).toBe('success') + expect(query.data()?.pages).toStrictEqual(['comments for 1 page 0']) + }) + + describe('injection context', () => { + it('throws NG0203 with descriptive error outside injection context', () => { + expect(() => { + injectInfiniteQuery(() => ({ + queryKey: ['injectionContextError'], + queryFn: ({ pageParam }) => + sleep(0).then(() => 'data on page ' + pageParam), + initialPageParam: 0, + getNextPageParam: () => 12, + })) + }).toThrow(/NG0203(.*?)injectInfiniteQuery/) + }) + }) +}) diff --git a/packages/angular-query-experimental/src/__tests__/inject-is-fetching.test-d.ts b/packages/angular-query/src/__tests__/inject-is-fetching.test-d.ts similarity index 50% rename from packages/angular-query-experimental/src/__tests__/inject-is-fetching.test-d.ts rename to packages/angular-query/src/__tests__/inject-is-fetching.test-d.ts index c2093445889..42cc3c3d07c 100644 --- a/packages/angular-query-experimental/src/__tests__/inject-is-fetching.test-d.ts +++ b/packages/angular-query/src/__tests__/inject-is-fetching.test-d.ts @@ -5,14 +5,13 @@ describe('injectIsFetching', () => { it('should accept filters without fetchStatus', () => { expectTypeOf(injectIsFetching()()).toEqualTypeOf() expectTypeOf( - injectIsFetching({ queryKey: ['key'], exact: true })(), + injectIsFetching(() => ({ queryKey: ['key'], exact: true }))(), ).toEqualTypeOf() }) - it('should reject a fetchStatus filter', () => { - expectTypeOf( - // @ts-expect-error injectIsFetching always filters by fetchStatus: 'fetching' - injectIsFetching({ queryKey: ['key'], fetchStatus: 'paused' })(), - ).toEqualTypeOf() + it('should omit fetchStatus from the filter type', () => { + expectTypeOf< + ReturnType[0]>> + >().not.toHaveProperty('fetchStatus') }) }) diff --git a/packages/angular-query-experimental/src/__tests__/inject-is-fetching.test.ts b/packages/angular-query/src/__tests__/inject-is-fetching.test.ts similarity index 64% rename from packages/angular-query-experimental/src/__tests__/inject-is-fetching.test.ts rename to packages/angular-query/src/__tests__/inject-is-fetching.test.ts index 63d4798fa30..4a0b35f1692 100644 --- a/packages/angular-query-experimental/src/__tests__/inject-is-fetching.test.ts +++ b/packages/angular-query/src/__tests__/inject-is-fetching.test.ts @@ -1,10 +1,6 @@ import { TestBed } from '@angular/core/testing' import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest' -import { - Component, - Injector, - provideZonelessChangeDetection, -} from '@angular/core' +import { Component, input, inputBinding, signal } from '@angular/core' import { render } from '@testing-library/angular' import { createKey, sleep } from '@tanstack/query-test-utils' import { @@ -13,6 +9,7 @@ import { injectQuery, provideTanStackQuery, } from '..' +import { provideAngularQueryChangeDetection } from './test-utils' describe('injectIsFetching', () => { let queryClient: QueryClient @@ -23,8 +20,8 @@ describe('injectIsFetching', () => { TestBed.configureTestingModule({ providers: [ - provideZonelessChangeDetection(), - provideTanStackQuery(queryClient), + provideAngularQueryChangeDetection(), + provideTanStackQuery(() => queryClient), ], }) }) @@ -49,15 +46,18 @@ describe('injectIsFetching', () => { const rendered = await render(Page) - expect(rendered.getByText('fetching: 0')).toBeInTheDocument() - await vi.advanceTimersByTimeAsync(0) - rendered.fixture.detectChanges() expect(rendered.getByText('fetching: 1')).toBeInTheDocument() await vi.advanceTimersByTimeAsync(101) rendered.fixture.detectChanges() expect(rendered.getByText('fetching: 0')).toBeInTheDocument() }) + it('should return a read-only signal', () => { + const isFetching = TestBed.runInInjectionContext(() => injectIsFetching()) + + expect(isFetching).not.toHaveProperty('set') + }) + it('should be able to filter by queryKey', async () => { const key1 = createKey() const key2 = createKey() @@ -74,7 +74,7 @@ describe('injectIsFetching', () => { queryKey: key2, queryFn: () => sleep(100).then(() => 'test2'), })) - readonly isFetching = injectIsFetching({ queryKey: key1 }) + readonly isFetching = injectIsFetching(() => ({ queryKey: key1 })) } const rendered = await render(Page) @@ -87,19 +87,43 @@ describe('injectIsFetching', () => { expect(rendered.getByText('fetching: 0')).toBeInTheDocument() }) + it('should support signal reads in filter predicates', async () => { + const key = createKey() + + void queryClient.query({ + queryKey: key, + queryFn: () => sleep(100).then(() => 'data'), + }) + + @Component({ + template: `
fetching: {{ isFetching() }}
`, + }) + class Page { + readonly includeQuery = input.required() + readonly isFetching = injectIsFetching(() => ({ + predicate: () => this.includeQuery(), + })) + } + + const subscribe = vi.spyOn(queryClient.getQueryCache(), 'subscribe') + const includeQuery = signal(true) + const rendered = await render(Page, { + bindings: [inputBinding('includeQuery', includeQuery)], + }) + + expect(rendered.getByText('fetching: 1')).toBeInTheDocument() + + includeQuery.set(false) + rendered.fixture.detectChanges() + expect(subscribe).toHaveBeenCalledTimes(1) + expect(rendered.getByText('fetching: 0')).toBeInTheDocument() + }) + describe('injection context', () => { it('should throw NG0203 with descriptive error outside injection context', () => { expect(() => { injectIsFetching() }).toThrow(/NG0203(.*?)injectIsFetching/) }) - - it('should be usable outside injection context when passing an injector', () => { - expect( - injectIsFetching(undefined, { - injector: TestBed.inject(Injector), - }), - ).not.toThrow() - }) }) }) diff --git a/packages/angular-query-experimental/src/__tests__/inject-is-mutating.test.ts b/packages/angular-query/src/__tests__/inject-is-mutating.test.ts similarity index 67% rename from packages/angular-query-experimental/src/__tests__/inject-is-mutating.test.ts rename to packages/angular-query/src/__tests__/inject-is-mutating.test.ts index 1988c971a56..74da551ee8f 100644 --- a/packages/angular-query-experimental/src/__tests__/inject-is-mutating.test.ts +++ b/packages/angular-query/src/__tests__/inject-is-mutating.test.ts @@ -1,10 +1,6 @@ import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest' import { TestBed } from '@angular/core/testing' -import { - Component, - Injector, - provideZonelessChangeDetection, -} from '@angular/core' +import { Component, input, inputBinding, signal } from '@angular/core' import { render } from '@testing-library/angular' import { createKey, sleep } from '@tanstack/query-test-utils' import { @@ -13,6 +9,7 @@ import { injectMutation, provideTanStackQuery, } from '..' +import { provideAngularQueryChangeDetection } from './test-utils' describe('injectIsMutating', () => { let queryClient: QueryClient @@ -23,8 +20,8 @@ describe('injectIsMutating', () => { TestBed.configureTestingModule({ providers: [ - provideZonelessChangeDetection(), - provideTanStackQuery(queryClient), + provideAngularQueryChangeDetection(), + provideTanStackQuery(() => queryClient), ], }) }) @@ -76,7 +73,7 @@ describe('injectIsMutating', () => { mutationKey: key2, mutationFn: () => sleep(100).then(() => 'data2'), })) - readonly isMutating = injectIsMutating({ mutationKey: key1 }) + readonly isMutating = injectIsMutating(() => ({ mutationKey: key1 })) } const rendered = await render(Page) @@ -91,19 +88,41 @@ describe('injectIsMutating', () => { expect(rendered.getByText('mutating: 0')).toBeInTheDocument() }) + it('should support signal reads in filter predicates', async () => { + const mutation = queryClient.getMutationCache().build(queryClient, { + mutationFn: () => sleep(100).then(() => 'data'), + }) + void mutation.execute(undefined) + + @Component({ + template: `
mutating: {{ isMutating() }}
`, + }) + class Page { + readonly includeMutation = input.required() + readonly isMutating = injectIsMutating(() => ({ + predicate: () => this.includeMutation(), + })) + } + + const subscribe = vi.spyOn(queryClient.getMutationCache(), 'subscribe') + const includeMutation = signal(true) + const rendered = await render(Page, { + bindings: [inputBinding('includeMutation', includeMutation)], + }) + + expect(rendered.getByText('mutating: 1')).toBeInTheDocument() + + includeMutation.set(false) + rendered.fixture.detectChanges() + expect(subscribe).toHaveBeenCalledTimes(1) + expect(rendered.getByText('mutating: 0')).toBeInTheDocument() + }) + describe('injection context', () => { it('should throw NG0203 with descriptive error outside injection context', () => { expect(() => { injectIsMutating() }).toThrow(/NG0203(.*?)injectIsMutating/) }) - - it('should be usable outside injection context when passing an injector', () => { - expect( - injectIsMutating(undefined, { - injector: TestBed.inject(Injector), - }), - ).not.toThrow() - }) }) }) diff --git a/packages/angular-query/src/__tests__/inject-is-restoring.test.ts b/packages/angular-query/src/__tests__/inject-is-restoring.test.ts new file mode 100644 index 00000000000..ca55f78a03e --- /dev/null +++ b/packages/angular-query/src/__tests__/inject-is-restoring.test.ts @@ -0,0 +1,51 @@ +import { TestBed } from '@angular/core/testing' +import { describe, expect, it } from 'vitest' +import { InjectionToken, inject, signal } from '@angular/core' +import { provideIsRestoring } from '../internal' +import { QueryClient, injectIsRestoring, provideTanStackQuery } from '..' +import { provideAngularQueryChangeDetection } from './test-utils' + +describe('injectIsRestoring', () => { + let queryClient: QueryClient + + it('returns false by default when provideIsRestoring is not used', () => { + queryClient = new QueryClient() + + TestBed.configureTestingModule({ + providers: [ + provideAngularQueryChangeDetection(), + provideTanStackQuery(() => queryClient), + ], + }) + + const isRestoring = TestBed.runInInjectionContext(() => { + return injectIsRestoring() + }) + + expect(isRestoring()).toBe(false) + }) + + it('resolves a restoration signal factory in the injection context', () => { + const state = signal(true) + const token = new InjectionToken('restoration state') + TestBed.configureTestingModule({ + providers: [ + provideAngularQueryChangeDetection(), + { provide: token, useValue: state }, + provideIsRestoring(() => inject(token).asReadonly()), + ], + }) + + const isRestoring = TestBed.runInInjectionContext(injectIsRestoring) + expect(isRestoring()).toBe(true) + state.set(false) + expect(isRestoring()).toBe(false) + expect(TestBed.runInInjectionContext(injectIsRestoring)).toBe(isRestoring) + }) + + it('throws NG0203 with descriptive error outside injection context', () => { + expect(() => { + injectIsRestoring() + }).toThrow(/NG0203(.*?)injectIsRestoring/) + }) +}) diff --git a/packages/angular-query-experimental/src/__tests__/inject-mutation-state.test-d.ts b/packages/angular-query/src/__tests__/inject-mutation-state.test-d.ts similarity index 54% rename from packages/angular-query-experimental/src/__tests__/inject-mutation-state.test-d.ts rename to packages/angular-query/src/__tests__/inject-mutation-state.test-d.ts index 0fbd5d8f652..7fbf73c47ac 100644 --- a/packages/angular-query-experimental/src/__tests__/inject-mutation-state.test-d.ts +++ b/packages/angular-query/src/__tests__/inject-mutation-state.test-d.ts @@ -1,6 +1,6 @@ import { describe, expectTypeOf, it } from 'vitest' import { injectMutationState } from '..' -import type { MutationState, MutationStatus } from '..' +import type { Mutation, MutationState, MutationStatus } from '..' describe('injectMutationState', () => { it('should default to QueryState', () => { @@ -19,4 +19,22 @@ describe('injectMutationState', () => { expectTypeOf(result()).toEqualTypeOf>() }) + + it('should infer the mutation type from a mutation-state result', () => { + type Result = MutationState< + string, + Error, + { id: number }, + { previous: string } + > + + injectMutationState(() => ({ + select: (mutation) => { + expectTypeOf(mutation).toEqualTypeOf< + Mutation + >() + return mutation.state + }, + })) + }) }) diff --git a/packages/angular-query-experimental/src/__tests__/inject-mutation-state.test.ts b/packages/angular-query/src/__tests__/inject-mutation-state.test.ts similarity index 56% rename from packages/angular-query-experimental/src/__tests__/inject-mutation-state.test.ts rename to packages/angular-query/src/__tests__/inject-mutation-state.test.ts index 6e42c2d8891..30598603c80 100644 --- a/packages/angular-query-experimental/src/__tests__/inject-mutation-state.test.ts +++ b/packages/angular-query/src/__tests__/inject-mutation-state.test.ts @@ -1,21 +1,21 @@ import { + ChangeDetectionStrategy, Component, - Injector, input, - provideZonelessChangeDetection, + inputBinding, signal, } from '@angular/core' import { TestBed } from '@angular/core/testing' +import { render } from '@testing-library/angular' import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest' -import { By } from '@angular/platform-browser' -import { createKey, sleep } from '@tanstack/query-test-utils' +import { sleep } from '@tanstack/query-test-utils' import { QueryClient, injectMutation, injectMutationState, provideTanStackQuery, } from '..' -import { setFixtureSignalInputs } from './test-utils' +import { provideAngularQueryChangeDetection } from './test-utils' describe('injectMutationState', () => { let queryClient: QueryClient @@ -25,8 +25,8 @@ describe('injectMutationState', () => { vi.useFakeTimers() TestBed.configureTestingModule({ providers: [ - provideZonelessChangeDetection(), - provideTanStackQuery(queryClient), + provideAngularQueryChangeDetection(), + provideTanStackQuery(() => queryClient), ], }) }) @@ -35,9 +35,50 @@ describe('injectMutationState', () => { vi.useRealTimers() }) + it('publishes selected mutation values unchanged and compares snapshot entries by identity', () => { + const version = signal('before') + queryClient.getMutationCache().build(queryClient, { mutationKey: ['a'] }) + queryClient.getMutationCache().build(queryClient, { mutationKey: ['b'] }) + let selected: Array<{ value: string }> = [] + const states = TestBed.runInInjectionContext(() => + injectMutationState(() => { + selected = [] + return { + select: (m) => { + const value = { + value: + m.options.mutationKey![0] === 'a' ? version() : 'unchanged', + } + selected.push(value) + return value + }, + } + }), + ) + const before = states() + version.set('after') + const after = states() + expect(after[0]).toBe(selected[0]) + expect(after[1]).toBe(selected[1]) + expect(after[1]).not.toBe(before[1]) + // Stable entries avoid array-only updates, without deep comparison. + const filter = signal('a') + const selectedValue = { value: 'same' } + const filtered = TestBed.runInInjectionContext(() => + injectMutationState(() => ({ + filters: { mutationKey: [filter()] }, + select: () => selectedValue, + })), + ) + const initial = filtered() + filter.set('b') + expect(filtered()).toBe(initial) + expect(filtered()[0]).toBe(selectedValue) + }) + describe('injectMutationState', () => { it('should return variables after calling mutate 1', () => { - const mutationKey = createKey() + const mutationKey = ['mutation'] const variables = 'foo123' const mutation = TestBed.runInInjectionContext(() => { @@ -59,9 +100,9 @@ describe('injectMutationState', () => { expect(mutationState()).toStrictEqual([variables]) }) - it('should update injectMutationState when reactive options change', () => { - const mutationKey1 = createKey() - const mutationKey2 = createKey() + it('reactive options should update injectMutationState', () => { + const mutationKey1 = ['mutation1'] + const mutationKey2 = ['mutation2'] const variables1 = 'foo123' const variables2 = 'bar234' @@ -96,9 +137,28 @@ describe('injectMutationState', () => { expect(mutationState()).toStrictEqual([variables2]) }) + it('preserves result identity when an unrelated mutation changes', () => { + const mutationState = TestBed.runInInjectionContext(() => + injectMutationState(() => ({ + filters: { mutationKey: ['matching'] }, + })), + ) + const unrelatedMutation = TestBed.runInInjectionContext(() => + injectMutation(() => ({ + mutationKey: ['unrelated'], + mutationFn: () => Promise.resolve(), + })), + ) + const initialResult = mutationState() + + unrelatedMutation.mutate() + + expect(mutationState()).toBe(initialResult) + }) + it('should return variables after calling mutate 2', () => { queryClient.clear() - const mutationKey = createKey() + const mutationKey = ['mutation'] const variables = 'bar234' const mutation = TestBed.runInInjectionContext(() => { @@ -145,6 +205,7 @@ describe('injectMutationState', () => { {{ mutation.status }} } `, + changeDetection: ChangeDetectionStrategy.OnPush, }) class FakeComponent { name = input.required() @@ -157,38 +218,35 @@ describe('injectMutationState', () => { })) } - const fixture = TestBed.createComponent(FakeComponent) - const { debugElement } = fixture - setFixtureSignalInputs(fixture, { name: fakeName }) + TestBed.resetTestingModule() + const name = signal(fakeName) + const rendered = await render(FakeComponent, { + providers: [ + provideAngularQueryChangeDetection(), + provideTanStackQuery(() => queryClient), + ], + bindings: [inputBinding('name', name.asReadonly())], + detectChangesOnRender: false, + }) + rendered.fixture.detectChanges() await vi.advanceTimersByTimeAsync(0) - let spans = debugElement - .queryAll(By.css('span')) - .map((span) => span.nativeNode.textContent) - expect(spans).toStrictEqual(['pending', 'pending']) + + expect(rendered.getAllByText('pending')).toHaveLength(2) + await vi.advanceTimersByTimeAsync(11) - fixture.detectChanges() - spans = debugElement - .queryAll(By.css('span')) - .map((span) => span.nativeNode.textContent) - expect(spans).toStrictEqual(['success', 'error']) + rendered.fixture.detectChanges() + + expect(rendered.getByText('success')).toBeInTheDocument() + expect(rendered.getByText('error')).toBeInTheDocument() }) describe('injection context', () => { - it('should throw NG0203 with descriptive error outside injection context', () => { + it('throws NG0203 with descriptive error outside injection context', () => { expect(() => { injectMutationState() }).toThrow(/NG0203(.*?)injectMutationState/) }) - - it('should be usable outside injection context when passing an injector', () => { - const injector = TestBed.inject(Injector) - expect( - injectMutationState(undefined, { - injector, - }), - ).not.toThrow() - }) }) }) }) diff --git a/packages/angular-query-experimental/src/__tests__/inject-mutation.test-d.ts b/packages/angular-query/src/__tests__/inject-mutation.test-d.ts similarity index 90% rename from packages/angular-query-experimental/src/__tests__/inject-mutation.test-d.ts rename to packages/angular-query/src/__tests__/inject-mutation.test-d.ts index a2c8e098994..df8eea97871 100644 --- a/packages/angular-query-experimental/src/__tests__/inject-mutation.test-d.ts +++ b/packages/angular-query/src/__tests__/inject-mutation.test-d.ts @@ -1,6 +1,7 @@ import { describe, expectTypeOf, it } from 'vitest' import { sleep } from '@tanstack/query-test-utils' import { injectMutation } from '..' +import type { CreateMutationOptions, CreateMutationResult } from '..' import type { Signal } from '@angular/core' import type { MutationFunctionContext, @@ -9,6 +10,16 @@ import type { } from '@tanstack/query-core' describe('injectMutation', () => { + it('supports reading data from a generic result type', () => { + const readId = ( + mutation: CreateMutationResult, + ) => mutation.data()?.id + + expectTypeOf(readId).toBeCallableWith( + {} as CreateMutationResult<{ id: number }>, + ) + }) + describe('Discriminated union return type', () => { it('should have possibly undefined data by default', () => { const mutation = injectMutation(() => ({ @@ -156,3 +167,9 @@ describe('injectMutation', () => { })) }) }) + +describe('injectMutation options', () => { + it('omits observer error reporting options', () => { + expectTypeOf().not.toHaveProperty('throwOnError') + }) +}) diff --git a/packages/angular-query-experimental/src/__tests__/inject-mutation.test.ts b/packages/angular-query/src/__tests__/inject-mutation.test.ts similarity index 65% rename from packages/angular-query-experimental/src/__tests__/inject-mutation.test.ts rename to packages/angular-query/src/__tests__/inject-mutation.test.ts index 3b587150064..e0eecb8ba3d 100644 --- a/packages/angular-query-experimental/src/__tests__/inject-mutation.test.ts +++ b/packages/angular-query/src/__tests__/inject-mutation.test.ts @@ -1,19 +1,27 @@ import { ApplicationRef, + ChangeDetectionStrategy, Component, - Injector, + ErrorHandler, + effect, input, - provideZonelessChangeDetection, + inputBinding, signal, } from '@angular/core' import { TestBed } from '@angular/core/testing' -import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest' -import { By } from '@angular/platform-browser' import { render } from '@testing-library/angular' import { createKey, sleep } from '@tanstack/query-test-utils' -import { noop } from '@tanstack/query-core' -import { QueryClient, injectMutation, provideTanStackQuery } from '..' -import { expectSignals, setFixtureSignalInputs } from './test-utils' +import { firstValueFrom } from 'rxjs' +import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest' +import { + QueryClient, + injectIsMutating, + injectMutation, + injectMutationState, + injectQuery, + provideTanStackQuery, +} from '..' +import { expectSignals, provideAngularQueryChangeDetection } from './test-utils' import type { MutationFunctionContext } from '@tanstack/query-core' describe('injectMutation', () => { @@ -24,8 +32,8 @@ describe('injectMutation', () => { vi.useFakeTimers() TestBed.configureTestingModule({ providers: [ - provideZonelessChangeDetection(), - provideTanStackQuery(queryClient), + provideAngularQueryChangeDetection(), + provideTanStackQuery(() => queryClient), ], }) }) @@ -34,6 +42,39 @@ describe('injectMutation', () => { vi.useRealTimers() }) + it('publishes mutation failures to observers and cache signals without global reporting', async () => { + vi.useRealTimers() + queryClient.setDefaultOptions({ mutations: { throwOnError: true } }) + const cacheReport = vi.fn<(error: Error) => void>() + queryClient.getMutationCache().config.onError = cacheReport + const report = vi.spyOn(TestBed.inject(ErrorHandler), 'handleError') + const error = new Error('mutation failed') + const mutation = TestBed.runInInjectionContext(() => + injectMutation(() => ({ + mutationFn: async () => { + throw error + }, + })), + ) + const count = TestBed.runInInjectionContext(() => injectIsMutating()) + const states = TestBed.runInInjectionContext(() => injectMutationState()) + await TestBed.inject(ApplicationRef).whenStable() + const promise = mutation.mutateAsync() + expect(mutation.status()).toBe('pending') + expect(count()).toBe(1) + expect(states()[0]?.status).toBe('pending') + await expect(promise).rejects.toBe(error) + expect(mutation.error()).toBe(error) + expect(mutation.status()).toBe('error') + expect(count()).toBe(0) + expect(states()[0]?.status).toBe('error') + expect(cacheReport).toHaveBeenCalledTimes(1) + expect(report).not.toHaveBeenCalled() + mutation.mutate() + await TestBed.inject(ApplicationRef).whenStable() + expect(mutation.error()).toBe(error) + }) + it('should be in idle state initially', () => { const mutation = TestBed.runInInjectionContext(() => { return injectMutation(() => ({ @@ -52,105 +93,76 @@ describe('injectMutation', () => { it('should change state after invoking mutate', async () => { const result = 'Mock data' - @Component({ - template: ` -
isIdle: {{ mutation.isIdle() }}
-
isPending: {{ mutation.isPending() }}
-
isError: {{ mutation.isError() }}
-
isSuccess: {{ mutation.isSuccess() }}
-
data: {{ mutation.data() ?? 'none' }}
-
error: {{ mutation.error()?.message ?? 'none' }}
- `, - }) - class Page { - readonly mutation = injectMutation(() => ({ + const mutation = TestBed.runInInjectionContext(() => { + return injectMutation(() => ({ mutationFn: (params: string) => sleep(10).then(() => params), })) - } + }) - const rendered = await render(Page) + TestBed.tick() - rendered.fixture.componentInstance.mutation.mutate(result) + mutation.mutate(result) await vi.advanceTimersByTimeAsync(0) - rendered.fixture.detectChanges() - expect(rendered.getByText('isIdle: false')).toBeInTheDocument() - expect(rendered.getByText('isPending: true')).toBeInTheDocument() - expect(rendered.getByText('isError: false')).toBeInTheDocument() - expect(rendered.getByText('isSuccess: false')).toBeInTheDocument() - expect(rendered.getByText('data: none')).toBeInTheDocument() - expect(rendered.getByText('error: none')).toBeInTheDocument() + + expectSignals(mutation, { + isIdle: false, + isPending: true, + isError: false, + isSuccess: false, + data: undefined, + error: null, + }) }) it('should return error when request fails', async () => { - @Component({ - template: ` -
isIdle: {{ mutation.isIdle() }}
-
isPending: {{ mutation.isPending() }}
-
isError: {{ mutation.isError() }}
-
isSuccess: {{ mutation.isSuccess() }}
-
data: {{ mutation.data() ?? 'none' }}
-
error: {{ mutation.error()?.message ?? 'none' }}
- `, - }) - class Page { - readonly mutation = injectMutation(() => ({ + const mutation = TestBed.runInInjectionContext(() => { + return injectMutation(() => ({ mutationFn: () => sleep(10).then(() => Promise.reject(new Error('Some error'))), })) - } + }) - const rendered = await render(Page) + mutation.mutate() - rendered.fixture.componentInstance.mutation.mutate() await vi.advanceTimersByTimeAsync(11) - rendered.fixture.detectChanges() - expect(rendered.getByText('isIdle: false')).toBeInTheDocument() - expect(rendered.getByText('isPending: false')).toBeInTheDocument() - expect(rendered.getByText('isError: true')).toBeInTheDocument() - expect(rendered.getByText('isSuccess: false')).toBeInTheDocument() - expect(rendered.getByText('data: none')).toBeInTheDocument() - expect(rendered.getByText('error: Some error')).toBeInTheDocument() + + expectSignals(mutation, { + isIdle: false, + isPending: false, + isError: true, + isSuccess: false, + data: undefined, + error: Error('Some error'), + }) }) it('should return data when request succeeds', async () => { const result = 'Mock data' - - @Component({ - template: ` -
isIdle: {{ mutation.isIdle() }}
-
isPending: {{ mutation.isPending() }}
-
isError: {{ mutation.isError() }}
-
isSuccess: {{ mutation.isSuccess() }}
-
data: {{ mutation.data() ?? 'none' }}
-
error: {{ mutation.error()?.message ?? 'none' }}
- `, - }) - class Page { - readonly mutation = injectMutation(() => ({ + const mutation = TestBed.runInInjectionContext(() => { + return injectMutation(() => ({ mutationFn: (params: string) => sleep(10).then(() => params), })) - } + }) - const rendered = await render(Page) + mutation.mutate(result) - rendered.fixture.componentInstance.mutation.mutate(result) await vi.advanceTimersByTimeAsync(11) - rendered.fixture.detectChanges() - expect(rendered.getByText('isIdle: false')).toBeInTheDocument() - expect(rendered.getByText('isPending: false')).toBeInTheDocument() - expect(rendered.getByText('isError: false')).toBeInTheDocument() - expect(rendered.getByText('isSuccess: true')).toBeInTheDocument() - expect(rendered.getByText(`data: ${result}`)).toBeInTheDocument() - expect(rendered.getByText('error: none')).toBeInTheDocument() + + expectSignals(mutation, { + isIdle: false, + isPending: false, + isError: false, + isSuccess: true, + data: result, + error: null, + }) }) - it('should update mutation when reactive options change', () => { + it('reactive options should update mutation', () => { const mutationCache = queryClient.getMutationCache() // Signal will be updated before the mutation is called // this test confirms that the mutation uses the updated value - const key1 = createKey() - const key2 = createKey() - const mutationKey = signal(key1) + const mutationKey = signal(['1']) const mutation = TestBed.runInInjectionContext(() => { return injectMutation(() => ({ mutationKey: mutationKey(), @@ -158,50 +170,125 @@ describe('injectMutation', () => { })) }) - mutationKey.set(key2) + mutationKey.set(['2']) mutation.mutate('xyz') - const mutations = mutationCache.find({ mutationKey: key2 }) + const mutations = mutationCache.find({ mutationKey: ['2'] }) - expect(mutations?.options.mutationKey).toStrictEqual(key2) + expect(mutations?.options.mutationKey).toStrictEqual(['2']) }) - it('should reset state after invoking mutation.reset', async () => { - @Component({ - template: ` -
isIdle: {{ mutation.isIdle() }}
-
isPending: {{ mutation.isPending() }}
-
isError: {{ mutation.isError() }}
-
isSuccess: {{ mutation.isSuccess() }}
-
data: {{ mutation.data() ?? 'none' }}
-
error: {{ mutation.error()?.message ?? 'none' }}
- `, - }) - class Page { + it('reflects a mutation started in ngOnInit', async () => { + const statusesInsideOnMutate: Array = [] + + @Component({ template: '' }) + class TestComponent { readonly mutation = injectMutation(() => ({ + mutationFn: () => sleep(10).then(() => 'done'), + onMutate: () => { + statusesInsideOnMutate.push(this.mutation.status()) + }, + })) + + ngOnInit() { + this.mutation.mutate() + } + } + + const fixture = TestBed.createComponent(TestComponent) + fixture.detectChanges() + + expect(statusesInsideOnMutate).toStrictEqual(['pending']) + expect(fixture.componentInstance.mutation.status()).toBe('pending') + + await vi.advanceTimersByTimeAsync(11) + TestBed.tick() + expect(fixture.componentInstance.mutation.status()).toBe('success') + }) + + it('allows cache listeners to read the result while options update', () => { + const mutationKey = signal('one') + const mutation = TestBed.runInInjectionContext(() => + injectMutation(() => ({ + mutationKey: ['reentrant-options', mutationKey()], + mutationFn: () => Promise.resolve(), + })), + ) + + mutation.status() + TestBed.tick() + + const readResult = vi.fn<() => 'error' | 'idle' | 'pending' | 'success'>( + () => mutation.status(), + ) + const unsubscribe = queryClient.getMutationCache().subscribe((event) => { + // setOptions emits synchronously; this read must not re-enter the signal + // computation that caused the options update. + if (event.type === 'observerOptionsUpdated') readResult() + }) + + mutationKey.set('two') + + expect(() => TestBed.tick()).not.toThrow() + expect(readResult).toHaveBeenCalledWith() + + unsubscribe() + }) + + it('does not track mutation state when mutating from a reactive context', async () => { + const trigger = signal(false) + const runs = vi.fn<() => void>() + const mutation = TestBed.runInInjectionContext(() => + injectMutation(() => ({ + mutationFn: () => sleep(10), + })), + ) + + TestBed.runInInjectionContext(() => + effect(() => { + runs() + if (trigger()) mutation.mutate() + }), + ) + TestBed.tick() + expect(runs).toHaveBeenCalledTimes(1) + + trigger.set(true) + TestBed.tick() + expect(runs).toHaveBeenCalledTimes(2) + + await vi.advanceTimersByTimeAsync(11) + TestBed.tick() + expect(runs).toHaveBeenCalledTimes(2) + }) + + it('should reset state after invoking mutation.reset', async () => { + const mutation = TestBed.runInInjectionContext(() => { + return injectMutation(() => ({ mutationFn: () => sleep(10).then(() => Promise.reject(new Error('Some error'))), })) - } + }) - const rendered = await render(Page) + mutation.mutate() - rendered.fixture.componentInstance.mutation.mutate() await vi.advanceTimersByTimeAsync(11) - rendered.fixture.detectChanges() - expect(rendered.getByText('isError: true')).toBeInTheDocument() - expect(rendered.getByText('error: Some error')).toBeInTheDocument() - rendered.fixture.componentInstance.mutation.reset() + expect(mutation.isError()).toBe(true) + + mutation.reset() + await vi.advanceTimersByTimeAsync(0) - rendered.fixture.detectChanges() - expect(rendered.getByText('isIdle: true')).toBeInTheDocument() - expect(rendered.getByText('isPending: false')).toBeInTheDocument() - expect(rendered.getByText('isError: false')).toBeInTheDocument() - expect(rendered.getByText('isSuccess: false')).toBeInTheDocument() - expect(rendered.getByText('data: none')).toBeInTheDocument() - expect(rendered.getByText('error: none')).toBeInTheDocument() + + expectSignals(mutation, { + isIdle: true, + isPending: false, + isError: false, + isSuccess: false, + data: undefined, + error: null, + }) }) describe('side effects', () => { @@ -357,128 +444,6 @@ describe('injectMutation', () => { expect(onSettled).toHaveBeenCalledTimes(1) }) - it('should call onSuccess and onSettled when passed as arguments of mutate function', async () => { - const callbacks: Array = [] - const mutation = TestBed.runInInjectionContext(() => { - return injectMutation(() => ({ - mutationFn: (params: string) => sleep(10).then(() => params), - })) - }) - - mutation.mutate('', { - onSuccess: () => callbacks.push('mutate.onSuccess'), - onSettled: () => callbacks.push('mutate.onSettled'), - }) - await vi.advanceTimersByTimeAsync(10) - expect(callbacks).toStrictEqual(['mutate.onSuccess', 'mutate.onSettled']) - }) - - it('should call onError and onSettled when passed as arguments of mutate function', async () => { - const callbacks: Array = [] - const mutation = TestBed.runInInjectionContext(() => { - return injectMutation(() => ({ - mutationFn: (_params: string) => - sleep(10).then(() => Promise.reject(new Error('Some error'))), - })) - }) - - mutation.mutate('', { - onError: () => callbacks.push('mutate.onError'), - onSettled: () => callbacks.push('mutate.onSettled'), - }) - await vi.advanceTimersByTimeAsync(10) - expect(callbacks).toStrictEqual(['mutate.onError', 'mutate.onSettled']) - }) - - it('should call onSuccess and onSettled when passed as arguments of mutateAsync function', async () => { - const callbacks: Array = [] - const mutation = TestBed.runInInjectionContext(() => { - return injectMutation(() => ({ - mutationFn: (params: string) => sleep(10).then(() => params), - })) - }) - - mutation.mutateAsync('', { - onSuccess: () => callbacks.push('mutateAsync.onSuccess'), - onSettled: () => callbacks.push('mutateAsync.onSettled'), - }) - await vi.advanceTimersByTimeAsync(10) - expect(callbacks).toStrictEqual([ - 'mutateAsync.onSuccess', - 'mutateAsync.onSettled', - ]) - }) - - it('should call onError and onSettled when passed as arguments of mutateAsync function', async () => { - const callbacks: Array = [] - const mutation = TestBed.runInInjectionContext(() => { - return injectMutation(() => ({ - mutationFn: (_params: string) => - sleep(10).then(() => Promise.reject(new Error('Some error'))), - })) - }) - - mutation - .mutateAsync('', { - onError: () => callbacks.push('mutateAsync.onError'), - onSettled: () => callbacks.push('mutateAsync.onSettled'), - }) - .catch(noop) - await vi.advanceTimersByTimeAsync(10) - expect(callbacks).toStrictEqual([ - 'mutateAsync.onError', - 'mutateAsync.onSettled', - ]) - }) - - it('should call onSuccess when passed as an argument of mutateAsync function', async () => { - const callbacks: Array = [] - const mutation = TestBed.runInInjectionContext(() => { - return injectMutation(() => ({ - mutationFn: (params: string) => sleep(10).then(() => params), - })) - }) - - mutation.mutateAsync('', { - onSuccess: () => callbacks.push('mutateAsync.onSuccess'), - }) - await vi.advanceTimersByTimeAsync(10) - expect(callbacks).toStrictEqual(['mutateAsync.onSuccess']) - }) - - it('should call onError when passed as an argument of mutateAsync function', async () => { - const callbacks: Array = [] - const mutation = TestBed.runInInjectionContext(() => { - return injectMutation(() => ({ - mutationFn: (_params: string) => - sleep(10).then(() => Promise.reject(new Error('Some error'))), - })) - }) - - mutation - .mutateAsync('', { - onError: () => callbacks.push('mutateAsync.onError'), - }) - .catch(noop) - await vi.advanceTimersByTimeAsync(10) - expect(callbacks).toStrictEqual(['mutateAsync.onError']) - }) - - it('should call onSettled when passed as an argument of mutateAsync function', async () => { - const callbacks: Array = [] - const mutation = TestBed.runInInjectionContext(() => { - return injectMutation(() => ({ - mutationFn: (params: string) => sleep(10).then(() => params), - })) - }) - - mutation.mutateAsync('', { - onSettled: () => callbacks.push('mutateAsync.onSettled'), - }) - await vi.advanceTimersByTimeAsync(10) - expect(callbacks).toStrictEqual(['mutateAsync.onSettled']) - }) - it('should fire both onSettled functions', async () => { const onSettled = vi.fn< @@ -519,7 +484,7 @@ describe('injectMutation', () => { ( data: string, variables: string, - onMutateResult: { startedWith: string }, + onMutateResult: unknown, context: MutationFunctionContext, ) => void >() @@ -648,6 +613,7 @@ describe('injectMutation', () => { {{ mutation.data() }} `, + changeDetection: ChangeDetectionStrategy.OnPush, }) class FakeComponent { name = input.required() @@ -662,19 +628,24 @@ describe('injectMutation', () => { } } - const fixture = TestBed.createComponent(FakeComponent) - const { debugElement } = fixture - setFixtureSignalInputs(fixture, { name: 'value' }) + const name = signal('value') + const rendered = await render(FakeComponent, { + bindings: [inputBinding('name', name.asReadonly())], + detectChangesOnRender: false, + }) + rendered.fixture.detectChanges() + + rendered.getByRole('button').click() - const button = debugElement.query(By.css('button')) - button.triggerEventHandler('click') await vi.advanceTimersByTimeAsync(11) - fixture.detectChanges() + rendered.fixture.detectChanges() - const text = debugElement.query(By.css('span')).nativeElement.textContent - expect(text).toBe('value') - const mutation = mutationCache.find({ mutationKey: ['fake', 'value'] }) - expect(mutation?.options.mutationKey).toStrictEqual(['fake', 'value']) + expect(rendered.getByText('value')).toBeInTheDocument() + const mutation = mutationCache.find({ + mutationKey: ['fake', 'value'], + }) + expect(mutation).toBeDefined() + expect(mutation!.options.mutationKey).toStrictEqual(['fake', 'value']) }) it('should update options on required signal input change', async () => { @@ -686,6 +657,7 @@ describe('injectMutation', () => { {{ mutation.data() }} `, + changeDetection: ChangeDetectionStrategy.OnPush, }) class FakeComponent { name = input.required() @@ -700,24 +672,27 @@ describe('injectMutation', () => { } } - const fixture = TestBed.createComponent(FakeComponent) - const { debugElement } = fixture - setFixtureSignalInputs(fixture, { name: 'value' }) - - const button = debugElement.query(By.css('button')) - const span = debugElement.query(By.css('span')) + const name = signal('value') + const rendered = await render(FakeComponent, { + bindings: [inputBinding('name', name.asReadonly())], + detectChangesOnRender: false, + }) + rendered.fixture.detectChanges() - button.triggerEventHandler('click') + rendered.getByRole('button').click() await vi.advanceTimersByTimeAsync(11) - fixture.detectChanges() - expect(span.nativeElement.textContent).toBe('value') + rendered.fixture.detectChanges() - setFixtureSignalInputs(fixture, { name: 'updatedValue' }) + expect(rendered.getByText('value')).toBeInTheDocument() - button.triggerEventHandler('click') + name.set('updatedValue') + rendered.fixture.detectChanges() + + rendered.getByRole('button').click() await vi.advanceTimersByTimeAsync(11) - fixture.detectChanges() - expect(span.nativeElement.textContent).toBe('updatedValue') + rendered.fixture.detectChanges() + + expect(rendered.getByText('updatedValue')).toBeInTheDocument() const mutations = mutationCache.findAll() expect(mutations).toHaveLength(2) @@ -729,133 +704,24 @@ describe('injectMutation', () => { ]) }) - describe('throwOnError', () => { - it('should evaluate throwOnError when mutation is expected to throw', async () => { - const key = createKey() - const err = new Error('Expected mock error. All is well!') - const throwOnError = vi.fn<(error: Error) => boolean>() - const { mutate } = TestBed.runInInjectionContext(() => { - return injectMutation(() => ({ - mutationKey: key, - mutationFn: () => { - return Promise.reject(err) - }, - throwOnError, - })) - }) - - TestBed.tick() - - mutate() - await vi.advanceTimersByTimeAsync(0) - expect(throwOnError).toHaveBeenCalledTimes(1) - expect(throwOnError).toHaveBeenCalledWith(err) - }) - - it('should throw when throwOnError is true and mutate is used', async () => { - const key = createKey() - const { mutate } = TestBed.runInInjectionContext(() => { - return injectMutation(() => ({ - mutationKey: key, - mutationFn: () => { - return Promise.reject( - new Error('Expected mock error. All is well!'), - ) - }, - throwOnError: true, - })) - }) - - TestBed.tick() - - mutate() - await expect(vi.advanceTimersByTimeAsync(0)).rejects.toThrow( - 'Expected mock error. All is well!', - ) - }) - }) - - it('should throw when throwOnError is true', async () => { - const key = createKey() - const err = new Error('Expected mock error. All is well!') - const { mutateAsync } = TestBed.runInInjectionContext(() => { - return injectMutation(() => ({ - mutationKey: key, - mutationFn: () => { - return Promise.reject(err) - }, - throwOnError: true, - })) - }) - - await expect(() => mutateAsync()).rejects.toThrow(err) - }) - - it('should throw when throwOnError function returns true', async () => { - const key = createKey() - const err = new Error('Expected mock error. All is well!') - const { mutateAsync } = TestBed.runInInjectionContext(() => { - return injectMutation(() => ({ - mutationKey: key, - mutationFn: () => { - return Promise.reject(err) - }, - throwOnError: () => true, - })) - }) - - await expect(() => mutateAsync()).rejects.toThrow(err) - }) - - it('should resolve mutateAsync with the value returned from mutationFn', async () => { - const key = createKey() - const { mutateAsync } = TestBed.runInInjectionContext(() => { - return injectMutation(() => ({ - mutationKey: key, - mutationFn: (params: string) => sleep(10).then(() => params), - })) - }) - - const promise = mutateAsync('Mock data') - await vi.advanceTimersByTimeAsync(10) - await expect(promise).resolves.toBe('Mock data') - }) - describe('injection context', () => { - it('should throw NG0203 with descriptive error outside injection context', () => { - const key = createKey() + it('throws NG0203 with descriptive error outside injection context', () => { expect(() => { injectMutation(() => ({ - mutationKey: key, + mutationKey: ['injectionContextError'], mutationFn: () => Promise.resolve(), })) }).toThrow(/NG0203(.*?)injectMutation/) }) - it('should be usable outside injection context when passing an injector', () => { - const key = createKey() - expect(() => { - injectMutation( - () => ({ - mutationKey: key, - mutationFn: () => Promise.resolve(), - }), - { - injector: TestBed.inject(Injector), - }, - ) - }).not.toThrow() - }) - it('should complete mutation before whenStable() resolves', async () => { const app = TestBed.inject(ApplicationRef) let mutationStarted = false let mutationCompleted = false - const key = createKey() const mutation = TestBed.runInInjectionContext(() => injectMutation(() => ({ - mutationKey: key, + mutationKey: ['pendingTasksTest'], mutationFn: async (data: string) => { mutationStarted = true await sleep(50) @@ -865,11 +731,9 @@ describe('injectMutation', () => { })), ) - // Initial state expect(mutation.data()).toBeUndefined() expect(mutationStarted).toBe(false) - // Start mutation mutation.mutate('test') // Wait for mutation to start and Angular to be "stable" @@ -885,6 +749,14 @@ describe('injectMutation', () => { }) it('should handle synchronous mutation with retry', async () => { + TestBed.resetTestingModule() + TestBed.configureTestingModule({ + providers: [ + provideAngularQueryChangeDetection(), + provideTanStackQuery(() => queryClient), + ], + }) + const app = TestBed.inject(ApplicationRef) let attemptCount = 0 @@ -902,7 +774,6 @@ describe('injectMutation', () => { })), ) - // Start mutation mutation.mutate('retry-test') // Synchronize pending effects for each retry attempt @@ -924,14 +795,20 @@ describe('injectMutation', () => { }) it('should handle multiple synchronous mutations on same key', async () => { + TestBed.resetTestingModule() + TestBed.configureTestingModule({ + providers: [ + provideAngularQueryChangeDetection(), + provideTanStackQuery(() => queryClient), + ], + }) + const app = TestBed.inject(ApplicationRef) let callCount = 0 - const key = createKey() - const mutation1 = TestBed.runInInjectionContext(() => injectMutation(() => ({ - mutationKey: key, + mutationKey: ['sync-mutation-key'], mutationFn: async (data: string) => { callCount++ return `mutation1: ${data}` @@ -941,7 +818,7 @@ describe('injectMutation', () => { const mutation2 = TestBed.runInInjectionContext(() => injectMutation(() => ({ - mutationKey: key, + mutationKey: ['sync-mutation-key'], mutationFn: async (data: string) => { callCount++ return `mutation2: ${data}` @@ -949,7 +826,6 @@ describe('injectMutation', () => { })), ) - // Start both mutations mutation1.mutate('test1') mutation2.mutate('test2') @@ -969,22 +845,40 @@ describe('injectMutation', () => { }) it('should handle synchronous mutation with optimistic updates', async () => { + TestBed.resetTestingModule() + TestBed.configureTestingModule({ + providers: [ + provideAngularQueryChangeDetection(), + provideTanStackQuery(() => queryClient), + ], + }) + const app = TestBed.inject(ApplicationRef) - const testQueryKey = createKey() + const testQueryKey = ['sync-optimistic'] let onMutateCalled = false let onSuccessCalled = false + let queryDataInsideOnMutate: string | undefined - // Set initial data queryClient.setQueryData(testQueryKey, 'initial') + const query = TestBed.runInInjectionContext(() => + injectQuery(() => ({ + queryKey: testQueryKey, + queryFn: () => Promise.resolve('initial'), + staleTime: Infinity, + })), + ) + const mutation = TestBed.runInInjectionContext(() => injectMutation(() => ({ - mutationFn: async (data: string) => `final: ${data}`, // Synchronous resolution + mutationFn: async (data: string) => { + await sleep(50) + return `final: ${data}` + }, onMutate: async (variables) => { onMutateCalled = true - const previousData = queryClient.getQueryData(testQueryKey) queryClient.setQueryData(testQueryKey, `optimistic: ${variables}`) - return { previousData } + queryDataInsideOnMutate = query.data() }, onSuccess: (data) => { onSuccessCalled = true @@ -993,36 +887,84 @@ describe('injectMutation', () => { })), ) - // Start mutation - mutation.mutate('test') - - // Synchronize pending effects TestBed.tick() - const stablePromise = app.whenStable() + expect(queryClient.getQueryData(testQueryKey)).toBe('initial') + mutation.mutate('test') + // Flush microtasks to allow TanStack Query's scheduled notifications to process await Promise.resolve() - await vi.advanceTimersByTimeAsync(1) - await stablePromise + + // The observed query signal must be current inside the onMutate callback, + // immediately after the optimistic cache write. expect(onMutateCalled).toBe(true) + expect(queryClient.getQueryData(testQueryKey)).toBe('optimistic: test') + expect(queryDataInsideOnMutate).toBe('optimistic: test') + + // Check stability before the mutation completes, waiting for the next macro task + await vi.advanceTimersByTimeAsync(0) + expect(mutation.isPending()).toBe(true) + await expect(firstValueFrom(app.isStable)).resolves.toBe(false) + + // Wait for the mutation to complete + const stablePromise = app.whenStable() + await vi.advanceTimersByTimeAsync(60) + await stablePromise + expect(onSuccessCalled).toBe(true) expect(mutation.isSuccess()).toBe(true) expect(mutation.data()).toBe('final: test') expect(queryClient.getQueryData(testQueryKey)).toBe('final: test') }) + it('reads an optimistic update inside onMutate before the query signal or effects initialize', async () => { + const testQueryKey = ['unread-sync-optimistic'] + const seenInsideOnMutate: Array = [] + queryClient.setQueryData(testQueryKey, 'initial') + + const query = TestBed.runInInjectionContext(() => + injectQuery(() => ({ + queryKey: testQueryKey, + queryFn: () => Promise.resolve('initial'), + staleTime: Infinity, + })), + ) + const mutation = TestBed.runInInjectionContext(() => + injectMutation(() => ({ + mutationFn: async () => 'server', + onMutate: () => { + queryClient.setQueryData(testQueryKey, 'optimistic') + seenInsideOnMutate.push(query.data()) + }, + })), + ) + + // No signal read and no TestBed.tick() occurs before mutateAsync. The + // first query read must still pull the optimistic cache value; its + // observer subscription can be committed later. + await mutation.mutateAsync() + + expect(seenInsideOnMutate).toStrictEqual(['optimistic']) + }) + it('should handle synchronous mutation cancellation', async () => { + TestBed.resetTestingModule() + TestBed.configureTestingModule({ + providers: [ + provideAngularQueryChangeDetection(), + provideTanStackQuery(() => queryClient), + ], + }) + const app = TestBed.inject(ApplicationRef) - const key = createKey() const mutation = TestBed.runInInjectionContext(() => injectMutation(() => ({ - mutationKey: key, + mutationKey: ['cancel-sync'], mutationFn: async (data: string) => `processed: ${data}`, // Synchronous resolution })), ) - // Start mutation mutation.mutate('test') // Synchronize pending effects diff --git a/packages/angular-query/src/__tests__/inject-queries.test-d.ts b/packages/angular-query/src/__tests__/inject-queries.test-d.ts new file mode 100644 index 00000000000..5f602029522 --- /dev/null +++ b/packages/angular-query/src/__tests__/inject-queries.test-d.ts @@ -0,0 +1,359 @@ +import { describe, expectTypeOf, it } from 'vitest' +import { computed } from '@angular/core' +import { injectQueries, skipToken, toResource } from '..' +import { queryOptions } from '../query-options' +import type { CreateQueryOptions, CreateQueryResult, OmitKeyof } from '..' +import type { Resource, Signal } from '@angular/core' + +describe('InjectQueries config object overload', () => { + it('keeps optional initial data in service queryOptions results undefined-capable', () => { + const service = { + options: () => queryOptions({ queryKey: ['service'], queryFn: () => 1 }), + } + const results = injectQueries(() => ({ queries: [service.options()] })) + const result = results()[0] + + expectTypeOf(result).toEqualTypeOf>() + expectTypeOf(result.isPending()).toEqualTypeOf() + expectTypeOf(result.isError()).toEqualTypeOf() + expectTypeOf(result.isSuccess()).toEqualTypeOf() + expectTypeOf(result.isSuccess).toExtend>() + if (result.isSuccess()) { + expectTypeOf(result.data()).toEqualTypeOf() + } + if (result.isPending()) { + expectTypeOf(result.data()).toEqualTypeOf() + } + }) + + it('supports status helpers on heterogeneous dynamic results and tuple indices', () => { + const numberOptions = () => + queryOptions({ queryKey: ['number'], queryFn: () => 1 }) + const stringOptions = () => + queryOptions({ queryKey: ['string'], queryFn: () => 'one' }) + const results = injectQueries(() => ({ + queries: [numberOptions(), stringOptions()], + })) + const index = Number(0) + const result = results()[index] + expectTypeOf(result?.isPending()).toEqualTypeOf() + expectTypeOf(result?.isError()).toEqualTypeOf() + expectTypeOf(result?.isSuccess()).toEqualTypeOf() + if (result?.isSuccess()) { + expectTypeOf(result.data()).toEqualTypeOf() + } + + const dynamic = injectQueries(() => ({ + queries: [numberOptions(), stringOptions()].map((options) => options), + })) + const pending = computed(() => dynamic().some((query) => query.isPending())) + const failed = computed(() => dynamic().some((query) => query.isError())) + const succeeded = computed(() => + dynamic().every((query) => query.isSuccess()), + ) + expectTypeOf(pending()).toEqualTypeOf() + expectTypeOf(failed()).toEqualTypeOf() + expectTypeOf(succeeded()).toEqualTypeOf() + }) + + it('infers tagged custom errors in parallel queries and combine', () => { + class CustomError extends Error { + detail = 'detail' + } + const options = queryOptions({ + queryKey: ['tagged'], + queryFn: () => 1, + }) + const queries = injectQueries(() => ({ queries: [options] })) + expectTypeOf(queries()[0].error()).toEqualTypeOf() + expectTypeOf(queries()[0].data()).toEqualTypeOf() + const combined = injectQueries(() => ({ + queries: [options], + combine: (results) => results[0].error, + })) + expectTypeOf(combined()).toEqualTypeOf() + }) + + it('preserves custom errors from annotated options without a query-key tag', () => { + class CustomError extends Error { + detail = 'detail' + } + const options: CreateQueryOptions = { + queryKey: ['annotated'], + queryFn: () => 1, + } + const queries = injectQueries(() => ({ queries: [options] })) + expectTypeOf(queries()[0].error()).toEqualTypeOf() + expectTypeOf(queries()[0].data()).toEqualTypeOf() + const combined = injectQueries(() => ({ + queries: [options], + combine: (results) => results[0].error, + })) + expectTypeOf(combined()).toEqualTypeOf() + }) + + it('should expose Angular resource views', () => { + const queryResults = injectQueries(() => ({ + queries: [ + { + queryKey: ['key'], + queryFn: () => Promise.resolve('data'), + }, + ], + })) + + expectTypeOf(toResource(queryResults()[0])).toExtend< + Resource + >() + + // @ts-expect-error Resources are created explicitly with toResource. + queryResults()[0].resource + }) + + it('tData should always be defined when initialData is provided as an object', () => { + const query1 = { + queryKey: ['key1'], + queryFn: () => { + return { + wow: true, + } + }, + initialData: { + wow: false, + }, + } + + const query2 = { + queryKey: ['key2'], + queryFn: () => 'Query Data', + initialData: 'initial data', + } + + const query3 = { + queryKey: ['key2'], + queryFn: () => 'Query Data', + } + + const queryResults = injectQueries(() => ({ + queries: [query1, query2, query3], + })) + + const query1Data = queryResults()[0].data() + const query2Data = queryResults()[1].data() + const query3Data = queryResults()[2].data() + + expectTypeOf(query1Data).toEqualTypeOf<{ wow: boolean }>() + expectTypeOf(query2Data).toEqualTypeOf() + expectTypeOf(query3Data).toEqualTypeOf() + }) + + it('tData should be defined when passed through queryOptions', () => { + const options = queryOptions({ + queryKey: ['key'], + queryFn: () => { + return { + wow: true, + } + }, + initialData: { + wow: true, + }, + }) + const queryResults = injectQueries(() => ({ queries: [options] })) + + const data = queryResults()[0].data() + + expectTypeOf(data).toEqualTypeOf<{ wow: boolean }>() + }) + + it('should be possible to define a different TData than TQueryFnData using select with queryOptions spread into injectQuery', () => { + const query1 = queryOptions({ + queryKey: ['key'], + queryFn: () => Promise.resolve(1), + select: (data) => data > 1, + }) + + const query2 = { + queryKey: ['key'], + queryFn: () => Promise.resolve(1), + select: (data: number) => data > 1, + } + + const queryResults = injectQueries(() => ({ queries: [query1, query2] })) + const query1Data = queryResults()[0].data() + const query2Data = queryResults()[1].data() + + expectTypeOf(query1Data).toEqualTypeOf() + expectTypeOf(query2Data).toEqualTypeOf() + }) + + it('tData should have undefined in the union when initialData is provided as a function which can return undefined', () => { + const queryResults = injectQueries(() => ({ + queries: [ + { + queryKey: ['key'], + queryFn: () => { + return { + wow: true, + } + }, + initialData: () => undefined as { wow: boolean } | undefined, + }, + ], + })) + + const data = queryResults()[0].data() + + expectTypeOf(data).toEqualTypeOf<{ wow: boolean } | undefined>() + }) + + describe('custom injectable', () => { + it('should allow custom hooks using UseQueryOptions', () => { + type Data = string + + const injectCustomQueries = ( + options?: OmitKeyof, 'queryKey' | 'queryFn'>, + ) => { + return injectQueries(() => ({ + queries: [ + { + ...options, + queryKey: ['todos-key'], + queryFn: () => Promise.resolve('data'), + }, + ], + })) + } + + const queryResults = injectCustomQueries() + const data = queryResults()[0].data() + + expectTypeOf(data).toEqualTypeOf() + }) + }) + + it('tData should have correct type when conditional skipToken is passed', () => { + const queryResults = injectQueries(() => ({ + queries: [ + { + queryKey: ['withSkipToken'], + queryFn: Math.random() > 0.5 ? skipToken : () => Promise.resolve(5), + }, + ], + })) + + const firstResult = queryResults()[0] + + expectTypeOf(firstResult).toEqualTypeOf>() + expectTypeOf(firstResult.data()).toEqualTypeOf() + }) + + it('should return correct data for dynamic queries with mixed result types', () => { + const Queries1 = { + get: () => + queryOptions({ + queryKey: ['key1'], + queryFn: () => Promise.resolve(1), + }), + } + const Queries2 = { + get: () => + queryOptions({ + queryKey: ['key2'], + queryFn: () => Promise.resolve(true), + }), + } + + const queries1List = [1, 2, 3].map(() => ({ ...Queries1.get() })) + const result = injectQueries(() => ({ + queries: [...queries1List, { ...Queries2.get() }], + })) + + expectTypeOf(result).toBeFunction() + }) +}) + +describe('InjectQueries combine', () => { + it('should provide the correct type for the combine function', () => { + injectQueries(() => ({ + queries: [ + { + queryKey: ['key'], + queryFn: () => Promise.resolve(1), + }, + { + queryKey: ['key2'], + queryFn: () => Promise.resolve(true), + }, + ], + combine: (results) => { + expectTypeOf(results[0].data).toEqualTypeOf() + expectTypeOf(results[0].refetch).toBeCallableWith() + expectTypeOf(results[1].data).toEqualTypeOf() + expectTypeOf(results[1].refetch).toBeCallableWith() + }, + })) + }) + + it('should provide the correct types on the combined result with initial data', () => { + injectQueries(() => ({ + queries: [ + { + queryKey: ['key'], + queryFn: () => Promise.resolve(1), + initialData: 1, + }, + ], + combine: (results) => { + expectTypeOf(results[0].data).toEqualTypeOf() + expectTypeOf(results[0].refetch).toBeCallableWith() + }, + })) + }) + + it('should provide the correct result type', () => { + const queryResults = injectQueries(() => ({ + queries: [ + { + queryKey: ['key'], + queryFn: () => Promise.resolve(1), + }, + { + queryKey: ['key2'], + queryFn: () => Promise.resolve(true), + }, + ], + combine: (results) => ({ + data: { + 1: results[0].data, + 2: results[1].data, + }, + fn: () => {}, + }), + })) + + expectTypeOf(queryResults).branded.toEqualTypeOf< + Signal<{ + data: { + 1: number | undefined + 2: boolean | undefined + } + fn: () => void + }> + >() + }) + + it('should provide the correct types on the result with initial data', () => { + const queryResults = injectQueries(() => ({ + queries: [ + { + queryKey: ['key'], + queryFn: () => Promise.resolve(1), + initialData: 1, + }, + ], + })) + + expectTypeOf(queryResults()[0].data()).toEqualTypeOf() + }) +}) diff --git a/packages/angular-query/src/__tests__/inject-queries.test.ts b/packages/angular-query/src/__tests__/inject-queries.test.ts new file mode 100644 index 00000000000..7eb995dcfe0 --- /dev/null +++ b/packages/angular-query/src/__tests__/inject-queries.test.ts @@ -0,0 +1,1628 @@ +import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest' +import { render } from '@testing-library/angular' +import { + ApplicationRef, + ChangeDetectionStrategy, + Component, + ErrorHandler, + computed, + effect, + input, + inputBinding, + signal, +} from '@angular/core' +import { TestBed } from '@angular/core/testing' +import { createKey, sleep } from '@tanstack/query-test-utils' +import { provideIsRestoring } from '../internal' +import { QueryClient, onlineManager, provideTanStackQuery, skipToken } from '..' +import { injectQueries } from '../inject-queries' +import { + provideAngularQueryChangeDetection, + setupTanStackQueryTestBed, +} from './test-utils' + +// cspell:ignore ZONEFUL + +let queryClient: QueryClient + +describe('injectQueries', () => { + beforeEach(() => { + vi.useFakeTimers() + queryClient = new QueryClient() + vi.useFakeTimers({ shouldAdvanceTime: true }) + setupTanStackQueryTestBed(queryClient) + }) + + afterEach(() => { + onlineManager.setOnline(true) + vi.useRealTimers() + }) + + it.each([false, true])( + 'uses current options and slot identity for multi-query refetch (combine=%s)', + async (combine) => { + vi.useRealTimers() + const keys = signal(['a', 'b']) + const version = signal('old') + const queries = TestBed.runInInjectionContext(() => + injectQueries(() => { + const current = version() + return { + queries: keys().map((key) => ({ + queryKey: [key], + enabled: false, + queryFn: async () => `${key}:${current}`, + })), + combine: combine ? (results) => results : undefined, + } + }), + ) + const refetch = queries()[0]!.refetch + version.set('new') + expect((await refetch()).data).toBe('a:new') + keys.set(['b', 'a']) + expect((await refetch()).data).toBe('b:new') + keys.set([]) + expect(queries()).toHaveLength(0) + await expect(refetch()).rejects.toThrow('removed query at index 0') + keys.set(['a']) + const restoredRefetch = queries()[0]!.refetch + expect(restoredRefetch).not.toBe(refetch) + expect((await restoredRefetch()).data).toBe('a:new') + }, + ) + + it('should keep failed refetch state and cached data readable without global reporting', async () => { + vi.useRealTimers() + queryClient.setDefaultOptions({ + queries: { retry: false, throwOnError: true }, + }) + const report = vi.spyOn(TestBed.inject(ErrorHandler), 'handleError') + const error = new Error('query failed') + const options = { + queryKey: ['error'], + initialData: 'cached', + enabled: false, + queryFn: async (): Promise => { + throw error + }, + } + const query = TestBed.runInInjectionContext( + () => injectQueries(() => ({ queries: [options] }))()[0], + ) + await TestBed.inject(ApplicationRef).whenStable() + await expect(query.refetch()).resolves.toMatchObject({ + status: 'error', + error, + }) + expect(query.error()).toBe(error) + expect(query.data()).toBe('cached') + expect(query.isError()).toBe(true) + await expect(query.refetch({ throwOnError: true })).rejects.toBe(error) + expect(report).not.toHaveBeenCalled() + }) + + it('throws NG0203 with descriptive error outside injection context', () => { + expect(() => { + injectQueries(() => ({ + queries: [ + { + queryKey: ['injectionContextError'], + queryFn: () => Promise.resolve(1), + }, + ], + })) + }).toThrow(/NG0203(.*?)injectQueries/) + }) + + it('allows cache listeners to read a result while options update', () => { + const staleTime = signal(0) + const queries = TestBed.runInInjectionContext(() => + injectQueries(() => ({ + queries: [ + { + queryKey: ['reentrant-options'], + queryFn: () => 'data', + enabled: false, + staleTime: staleTime(), + }, + ], + })), + ) + + TestBed.tick() + const query = queries()[0] + const readResult = vi.fn<() => 'error' | 'pending' | 'success'>(() => + query.status(), + ) + const subscriptionEvents: Array = [] + const unsubscribe = queryClient.getQueryCache().subscribe((event) => { + // setQueries emits synchronously; this read must not re-enter the signal + // computation that caused the options update. + if (event.type === 'observerOptionsUpdated') readResult() + if (event.type === 'observerAdded' || event.type === 'observerRemoved') { + subscriptionEvents.push(event.type) + } + }) + + staleTime.set(1) + + expect(() => TestBed.tick()).not.toThrow() + expect(readResult).toHaveBeenCalledWith() + expect(subscriptionEvents).toStrictEqual([]) + + unsubscribe() + }) + + it('allows deferred cache-listener reads during restoration detach and reattach', async () => { + const isRestoring = signal(false) + setupTanStackQueryTestBed(queryClient, { + providers: [provideIsRestoring(() => isRestoring.asReadonly())], + }) + const queries = TestBed.runInInjectionContext(() => + injectQueries(() => ({ + queries: [ + { + queryKey: ['reentrant-restoration-subscription'], + queryFn: () => 'data', + enabled: false, + }, + ], + })), + ) + expect(queries()[0].status()).toBe('pending') + TestBed.tick() + + const nestedStatuses: Array = [] + const unsubscribe = queryClient.getQueryCache().subscribe((event) => { + if (event.type === 'observerAdded' || event.type === 'observerRemoved') { + void Promise.resolve().then(() => + nestedStatuses.push(queries()[0].status()), + ) + } + }) + + isRestoring.set(true) + expect(() => TestBed.tick()).not.toThrow() + isRestoring.set(false) + expect(() => TestBed.tick()).not.toThrow() + + await Promise.resolve() + expect(nestedStatuses).toStrictEqual(['pending', 'pending']) + unsubscribe() + }) + + it('allows deferred cache-listener reads while a list change creates a query', async () => { + const key = signal('old') + const queries = TestBed.runInInjectionContext(() => + injectQueries(() => ({ + queries: [ + { + queryKey: ['reentrant-query-added', key()], + queryFn: () => 'data', + enabled: false, + }, + ], + })), + ) + + expect(queries()[0].status()).toBe('pending') + TestBed.tick() + const nestedStatuses: Array = [] + const unsubscribe = queryClient.getQueryCache().subscribe((event) => { + if (event.type === 'added') + void Promise.resolve().then(() => + nestedStatuses.push(queries()[0].status()), + ) + }) + + key.set('new') + + expect(() => queries()[0].status()).not.toThrow() + expect(nestedStatuses).toStrictEqual([]) + expect(() => TestBed.tick()).not.toThrow() + await Promise.resolve() + expect(nestedStatuses).toStrictEqual(['pending']) + unsubscribe() + }) + + it('should return the correct states', async () => { + const key1 = createKey() + const key2 = createKey() + const results: Array>> = [] + + @Component({ + template: ` +
+
+ data1: {{ queries()[0].data() ?? 'null' }}, data2: + {{ queries()[1].data() ?? 'null' }} +
+
+ `, + changeDetection: ChangeDetectionStrategy.OnPush, + }) + class Page { + toString(val: any) { + return String(val) + } + queries = injectQueries(() => ({ + queries: [ + { + queryKey: key1, + queryFn: () => sleep(10).then(() => 1), + }, + { + queryKey: key2, + queryFn: () => sleep(100).then(() => 2), + }, + ], + })) + + _pushResults = effect(() => { + const snapshot = this.queries().map((q) => ({ data: q.data() })) + results.push(snapshot) + }) + } + + const rendered = await render(Page, { + providers: [ + provideAngularQueryChangeDetection(), + provideTanStackQuery(() => queryClient), + ], + }) + + await vi.advanceTimersByTimeAsync(10) + rendered.fixture.detectChanges() + + expect(results.some((snapshot) => snapshot[0]?.data === 1)).toBe(true) + + await vi.advanceTimersByTimeAsync(91) + rendered.fixture.detectChanges() + + expect(rendered.getByText('data1: 1, data2: 2')).toBeInTheDocument() + + expect( + results.some( + (snapshot) => + snapshot.length === 2 && + snapshot[0]?.data === undefined && + snapshot[1]?.data === undefined, + ), + ).toBe(true) + expect( + results.some( + (snapshot) => + snapshot.length === 2 && + snapshot[0]?.data === 1 && + snapshot[1]?.data === undefined, + ), + ).toBe(true) + expect( + results.some( + (snapshot) => + snapshot.length === 2 && + snapshot[0]?.data === 1 && + snapshot[1]?.data === 2, + ), + ).toBe(true) + }) + + it('should update a result field first read after an earlier update', async () => { + let count = 0 + + @Component({ + template: '', + changeDetection: ChangeDetectionStrategy.OnPush, + }) + class Page { + queries = injectQueries(() => ({ + queries: [ + { + queryKey: ['late-field-tracking'], + queryFn: async () => { + await sleep(10) + return ++count + }, + }, + ], + })) + } + + const rendered = await render(Page) + rendered.fixture.autoDetectChanges() + const query = rendered.fixture.componentInstance.queries()[0] + + // Only status is read before the first observer update. + expect(query.status()).toBe('pending') + + await vi.advanceTimersByTimeAsync(11) + expect(query.status()).toBe('success') + + // Data starts being observed after the result signal already contains a + // subscription update. It must still participate in future notifications. + expect(query.data()).toBe(1) + + const refetch = query.refetch() + await vi.advanceTimersByTimeAsync(11) + await refetch + + expect(query.data()).toBe(2) + }) + + it('should support combining results', async () => { + const key1 = createKey() + const key2 = createKey() + let count = 0 + + const results: Array<{ data: string; refetch: () => void }> = [] + + @Component({ + template: `
data: {{ queries().data }}
`, + changeDetection: ChangeDetectionStrategy.OnPush, + }) + class Page { + queries = injectQueries(() => ({ + queries: [ + { + queryKey: key1, + queryFn: async () => { + await new Promise((r) => setTimeout(r, 10)) + count++ + return count + }, + }, + { + queryKey: key2, + queryFn: async () => { + await new Promise((r) => setTimeout(r, 100)) + count++ + return count + }, + }, + ], + combine: (queryResults) => { + return { + refetch: () => queryResults.forEach((r) => r.refetch()), + data: queryResults.map((r) => r.data).join(','), + } + }, + })) + + _pushResults = effect(() => { + results.push(this.queries()) + }) + } + + const rendered = await render(Page) + const instance = rendered.fixture.componentInstance + await rendered.findByText('data: 1,2') + expect(instance.queries().data).toBe('1,2') + + instance.queries().refetch() + + await rendered.findByText('data: 3,4') + expect(instance.queries().data).toBe('3,4') + + const dataChanges = results.filter( + (result, index) => result.data !== results[index - 1]?.data, + ) + expect(dataChanges.map((result) => result.data)).toStrictEqual([ + ',', + '1,', + '1,2', + '3,2', + '3,4', + ]) + expect( + results.every((result) => typeof result.refetch === 'function'), + ).toBe(true) + }) + + it('updates the result shape when combine configuration changes', () => { + const shouldCombine = signal(false) + const queries = TestBed.runInInjectionContext(() => + injectQueries(() => ({ + queries: [ + { + queryKey: ['committed-combine'], + enabled: false, + }, + ], + combine: shouldCombine() + ? (results: Array) => ({ count: results.length }) + : undefined, + })), + ) + + expect(Array.isArray(queries())).toBe(true) + TestBed.tick() + + shouldCombine.set(true) + expect(queries()).toStrictEqual({ count: 1 }) + }) + + it('removes a combined result when combine configuration changes', () => { + const shouldCombine = signal(true) + const queries = TestBed.runInInjectionContext(() => + injectQueries(() => ({ + queries: [ + { + queryKey: ['committed-combine-removal'], + enabled: false, + }, + ], + combine: shouldCombine() + ? (results: Array) => ({ count: results.length }) + : undefined, + })), + ) + + expect(queries()).toStrictEqual({ count: 1 }) + TestBed.tick() + + shouldCombine.set(false) + expect(Array.isArray(queries())).toBe(true) + expect(queries()).toHaveLength(1) + }) + + it('combines fresh raw results when a signal changes what combine selects', () => { + const showData = signal(false) + const key = ['reactive-combine-selection'] + queryClient.setQueryData(key, 1) + const queries = TestBed.runInInjectionContext(() => + injectQueries(() => ({ + queries: [{ queryKey: key, enabled: false }], + combine: (results) => ({ value: showData() ? results[0].data : 0 }), + })), + ) + + expect(queries()).toStrictEqual({ value: 0 }) + TestBed.tick() + queryClient.setQueryData(key, 2) + const previous = queries() + queryClient.setQueryData(key, 3) + expect(queries()).toStrictEqual(previous) + expect(queries()).not.toBe(previous) + showData.set(true) + expect(queries()).toStrictEqual({ value: 3 }) + }) + + it('should handle mixed success and error query states', async () => { + @Component({ + template: '', + changeDetection: ChangeDetectionStrategy.OnPush, + }) + class Page { + queries = injectQueries(() => ({ + queries: [ + { + queryKey: ['mixed-error'], + retry: false, + queryFn: async () => { + await new Promise((resolve) => setTimeout(resolve, 10)) + throw new Error('mixed-error') + }, + }, + { + queryKey: ['mixed-success'], + queryFn: async () => { + await new Promise((resolve) => setTimeout(resolve, 20)) + return 'mixed-success' + }, + }, + ], + })) + } + + const rendered = await render(Page) + await vi.advanceTimersByTimeAsync(25) + await Promise.resolve() + + const [errorQuery, successQuery] = + rendered.fixture.componentInstance.queries() + expect(errorQuery.status()).toBe('error') + expect(errorQuery.error()?.message).toBe('mixed-error') + expect(successQuery.status()).toBe('success') + expect(successQuery.data()).toBe('mixed-success') + }) + + it('should cleanup pending tasks when component with active queries is destroyed', async () => { + @Component({ + template: '', + changeDetection: ChangeDetectionStrategy.OnPush, + }) + class Page { + queries = injectQueries(() => ({ + queries: [ + { + queryKey: ['destroy-query-1'], + queryFn: async () => { + await sleep(100) + return 'one' + }, + }, + { + queryKey: ['destroy-query-2'], + queryFn: async () => { + await sleep(100) + return 'two' + }, + }, + ], + })) + } + + // Use a fixture here on purpose: we need component teardown + whenStable() semantics. + const fixture = TestBed.createComponent(Page) + fixture.detectChanges() + expect(fixture.isStable()).toBe(false) + + fixture.destroy() + + const stablePromise = fixture.whenStable() + await vi.advanceTimersByTimeAsync(150) + await stablePromise + + expect(fixture.isStable()).toBe(true) + }) + + it('should react to enabled signal changes', async () => { + const enabled = signal(false) + const fetchSpy = vi.fn<() => Promise>(() => + sleep(10).then(() => 'enabled-data'), + ) + + @Component({ + template: '', + changeDetection: ChangeDetectionStrategy.OnPush, + }) + class Page { + enabled = enabled + fetchSpy = fetchSpy + + queries = injectQueries(() => ({ + queries: [ + { + queryKey: ['enabled', this.enabled()], + queryFn: this.fetchSpy, + enabled: this.enabled(), + }, + ], + })) + } + + const rendered = await render(Page) + const query = rendered.fixture.componentInstance.queries()[0] + + expect(fetchSpy).not.toHaveBeenCalled() + expect(query.status()).toBe('pending') + + enabled.set(true) + rendered.fixture.detectChanges() + await vi.advanceTimersByTimeAsync(11) + await Promise.resolve() + + expect(fetchSpy).toHaveBeenCalledTimes(1) + expect(query.status()).toBe('success') + expect(query.data()).toBe('enabled-data') + }) + + it('should not resubscribe or refetch unchanged stale queries when options change', async () => { + const multiplier = signal(1) + const fetchSpy = vi.fn<() => Promise>(() => sleep(10).then(() => 2)) + + @Component({ + template: '', + changeDetection: ChangeDetectionStrategy.OnPush, + }) + class Page { + queries = injectQueries(() => { + const currentMultiplier = multiplier() + + return { + queries: [ + { + queryKey: ['reactive-select'], + queryFn: fetchSpy, + select: (data: number) => data * currentMultiplier, + staleTime: 0, + }, + ], + } + }) + } + + const rendered = await render(Page) + await vi.advanceTimersByTimeAsync(11) + + const query = rendered.fixture.componentInstance.queries()[0] + const cachedQuery = queryClient + .getQueryCache() + .find({ queryKey: ['reactive-select'] })! + + expect(query.data()).toBe(2) + expect(fetchSpy).toHaveBeenCalledTimes(1) + expect(cachedQuery.getObserversCount()).toBe(1) + + multiplier.set(2) + rendered.fixture.detectChanges() + await vi.advanceTimersByTimeAsync(0) + + expect(query.data()).toBe(4) + expect(fetchSpy).toHaveBeenCalledTimes(1) + expect(cachedQuery.getObserversCount()).toBe(1) + + rendered.fixture.destroy() + expect(cachedQuery.getObserversCount()).toBe(0) + }) + + it('should refetch only changed keys when queries length stays the same', async () => { + const ids = signal<[string, string]>(['a', 'b']) + const firstSpy = vi.fn<(context: any) => Promise>((context: any) => + sleep(10).then(() => `first-${context.queryKey[1]}`), + ) + const secondSpy = vi.fn<(context: any) => Promise>((context: any) => + sleep(10).then(() => `second-${context.queryKey[1]}`), + ) + + @Component({ + template: '', + changeDetection: ChangeDetectionStrategy.OnPush, + }) + class Page { + ids = ids + firstSpy = firstSpy + secondSpy = secondSpy + + queries = injectQueries(() => ({ + queries: [ + { + staleTime: Number.POSITIVE_INFINITY, + queryKey: ['first', this.ids()[0]], + queryFn: this.firstSpy, + }, + { + staleTime: Number.POSITIVE_INFINITY, + queryKey: ['second', this.ids()[1]], + queryFn: this.secondSpy, + }, + ], + })) + } + + const rendered = await render(Page) + await vi.advanceTimersByTimeAsync(11) + await Promise.resolve() + + let [firstQuery, secondQuery] = rendered.fixture.componentInstance.queries() + expect(firstQuery.data()).toBe('first-a') + expect(secondQuery.data()).toBe('second-b') + expect(firstSpy).toHaveBeenCalledTimes(1) + expect(secondSpy).toHaveBeenCalledTimes(1) + + ids.set(['c', 'b']) + rendered.fixture.detectChanges() + await vi.advanceTimersByTimeAsync(11) + await Promise.resolve() + ;[firstQuery, secondQuery] = rendered.fixture.componentInstance.queries() + expect(firstQuery.data()).toBe('first-c') + expect(secondQuery.data()).toBe('second-b') + expect(firstSpy).toHaveBeenCalledTimes(2) + expect(secondSpy).toHaveBeenCalledTimes(1) + }) + + it('should retain result proxy and field signal identities across updates', async () => { + @Component({ + template: '', + changeDetection: ChangeDetectionStrategy.OnPush, + }) + class Page { + queries = injectQueries(() => ({ + queries: [ + { + queryKey: ['proxy-cache-update'], + queryFn: () => Promise.resolve('initial'), + }, + ], + })) + } + + const rendered = await render(Page) + await vi.advanceTimersByTimeAsync(0) + + const initialQuery = rendered.fixture.componentInstance.queries()[0] + const initialDataSignal = initialQuery.data + + queryClient.setQueryData(['proxy-cache-update'], 'updated') + await vi.advanceTimersByTimeAsync(0) + + const updatedQuery = rendered.fixture.componentInstance.queries()[0] + expect(updatedQuery).toBe(initialQuery) + expect(updatedQuery.data).toBe(initialDataSignal) + expect(updatedQuery.data()).toBe('updated') + }) + + it('should cache result proxies by index as the queries array changes', async () => { + const queryIds = signal(['a', 'b']) + + @Component({ + template: '', + changeDetection: ChangeDetectionStrategy.OnPush, + }) + class Page { + ids = queryIds + + queries = injectQueries(() => ({ + queries: this.ids().map((id) => ({ + queryKey: ['proxy-cache-list', id], + queryFn: () => Promise.resolve(id), + staleTime: Number.POSITIVE_INFINITY, + })), + })) + } + + const rendered = await render(Page) + await vi.advanceTimersByTimeAsync(0) + + const instance = rendered.fixture.componentInstance + const initialQueries = instance.queries() + const firstQuery = initialQueries[0] + const secondQuery = initialQueries[1] + + queryIds.set(['a', 'b', 'c']) + rendered.fixture.detectChanges() + await vi.advanceTimersByTimeAsync(0) + + const appendedQueries = instance.queries() + expect(appendedQueries).toHaveLength(3) + expect(appendedQueries[0]).toBe(firstQuery) + expect(appendedQueries[1]).toBe(secondQuery) + expect(appendedQueries[2]).not.toBe(firstQuery) + + queryIds.set(['a']) + rendered.fixture.detectChanges() + await vi.advanceTimersByTimeAsync(0) + + const removedQueries = instance.queries() + expect(removedQueries).toHaveLength(1) + expect(removedQueries[0]).toBe(firstQuery) + + queryIds.set(['a', 'd']) + rendered.fixture.detectChanges() + await vi.advanceTimersByTimeAsync(0) + + const queriesAfterAddingAgain = instance.queries() + expect(queriesAfterAddingAgain[0]).toBe(firstQuery) + expect(queriesAfterAddingAgain[1]).not.toBe(secondQuery) + + queryIds.set(['d', 'a']) + rendered.fixture.detectChanges() + await vi.advanceTimersByTimeAsync(0) + + const reorderedQueries = instance.queries() + expect(reorderedQueries[0]).toBe(firstQuery) + expect(reorderedQueries[1]).not.toBe(secondQuery) + expect(reorderedQueries[0]!.data()).toBe('d') + expect(reorderedQueries[1]!.data()).toBe('a') + }) + + it('should support changes on the queries array', async () => { + const results: Array>> = [] + + @Component({ + template: `
data: {{ mapped() }}
`, + changeDetection: ChangeDetectionStrategy.OnPush, + }) + class Page { + queries = injectQueries(() => ({ + queries: queries().map((q) => ({ + queryKey: ['query', q], + queryFn: async () => { + await new Promise((resolve) => setTimeout(resolve, 20 * q)) + return q + }, + })), + })) + + mapped = computed(() => { + const queryData = this.queries().map((q) => q.data()) + if (queryData.length === 0) return 'empty' + return queryData.join(',') + }) + + _pushResults = effect(() => { + const snapshot = this.queries().map((q) => ({ data: q.data() })) + results.push(snapshot) + }) + } + + const queries = signal([1, 2, 4]) + + const rendered = await render(Page) + rendered.fixture.autoDetectChanges() + const instance = rendered.fixture.componentInstance + + await vi.advanceTimersByTimeAsync(20) + rendered.fixture.detectChanges() + await vi.advanceTimersByTimeAsync(20) + rendered.fixture.detectChanges() + await vi.advanceTimersByTimeAsync(40) + rendered.fixture.detectChanges() + await rendered.findByText('data: 1,2,4') + expect(instance.mapped()).toBe('1,2,4') + + const hasSnapshot = (expected: Array): boolean => + results.some( + (snapshot) => + snapshot.length === expected.length && + expected.every((data, index) => snapshot[index]?.data === data), + ) + expect(hasSnapshot([undefined, undefined, undefined])).toBe(true) + expect(hasSnapshot([1, undefined, undefined])).toBe(true) + expect(hasSnapshot([1, 2, undefined])).toBe(true) + expect(hasSnapshot([1, 2, 4])).toBe(true) + + queries.set([3, 4]) + rendered.fixture.detectChanges() + expect(instance.queries()[0]!.data()).toBeUndefined() + expect(instance.queries()[1]!.data()).toBe(4) + expect(instance.mapped()).toBe(',4') + await rendered.findByText('data: 3,4') + expect(instance.mapped()).toBe('3,4') + + expect(results[results.length - 1]).toMatchObject([ + { data: 3 }, + { data: 4 }, + ]) + + queries.set([]) + await rendered.findByText('data: empty') + expect(instance.mapped()).toBe('empty') + + expect(results[results.length - 1]).toMatchObject([]) + }) + + it('should change the rendered component when the queries array changes', async () => { + const userIds = signal([1, 2]) + + @Component({ + template: ` +
    + @for (query of queries(); track $index) { + @if (query.data(); as data) { +
  • {{ data.value }}
    • + } + } +
+ `, + changeDetection: ChangeDetectionStrategy.OnPush, + }) + class Page { + userIds = userIds + + queries = injectQueries(() => ({ + queries: this.userIds().map((id) => ({ + queryKey: ['user', id], + queryFn: async () => { + await new Promise((resolve) => setTimeout(resolve, 20)) + return { value: String(id) } + }, + })), + })) + } + + const rendered = await render(Page) + + await rendered.findByText('1') + await rendered.findByText('2') + + userIds.set([3]) + rendered.fixture.detectChanges() + + await rendered.findByText('3') + expect(rendered.queryByText('1')).not.toBeInTheDocument() + expect(rendered.queryByText('2')).not.toBeInTheDocument() + }) + + it('should support required signal inputs', async () => { + @Component({ + selector: 'app-fake', + template: `{{ queries()[0].data() }}`, + changeDetection: ChangeDetectionStrategy.OnPush, + }) + class FakeComponent { + name = input.required() + + queries = injectQueries(() => ({ + queries: [ + { + queryKey: ['fake', this.name()], + queryFn: () => this.name(), + }, + ], + })) + } + + const name = signal('signal-input-required-test') + const rendered = await render(FakeComponent, { + bindings: [inputBinding('name', name.asReadonly())], + detectChangesOnRender: false, + }) + rendered.fixture.autoDetectChanges() + rendered.fixture.detectChanges() + await vi.advanceTimersByTimeAsync(0) + + const result = rendered.fixture.nativeElement.textContent + expect(result).toBe('signal-input-required-test') + }) + + it('should allow reading query state in ngOnInit with required signal inputs', async () => { + @Component({ + template: '', + changeDetection: ChangeDetectionStrategy.OnPush, + }) + class Page { + name = input.required() + initialStatus!: string + + queries = injectQueries(() => ({ + queries: [ + { + queryKey: ['queries-ng-on-init', this.name()], + queryFn: () => this.name(), + }, + ], + })) + + ngOnInit() { + this.initialStatus = this.queries()[0].status() + } + } + + const name = signal('queries-ng-on-init') + const rendered = await render(Page, { + bindings: [inputBinding('name', name.asReadonly())], + detectChangesOnRender: false, + }) + + rendered.fixture.detectChanges() + + expect(rendered.fixture.componentInstance.initialStatus).toBe('pending') + + await vi.advanceTimersByTimeAsync(0) + expect(rendered.fixture.componentInstance.queries()[0].data()).toBe( + 'queries-ng-on-init', + ) + }) + + describe('pending tasks', () => { + it('should handle synchronous success and error before whenStable resolves', async () => { + const app = TestBed.inject(ApplicationRef) + + @Component({ + template: '', + changeDetection: ChangeDetectionStrategy.OnPush, + }) + class Page { + queries = injectQueries(() => ({ + queries: [ + { + queryKey: ['queries-sync-success'], + queryFn: () => 'instant-data', + }, + { + queryKey: ['queries-sync-error'], + queryFn: () => { + throw new Error('instant-error') + }, + retry: false, + }, + ], + })) + } + + const fixture = TestBed.createComponent(Page) + fixture.detectChanges() + const [successQuery, errorQuery] = fixture.componentInstance.queries() + + expect(successQuery.status()).toBe('pending') + expect(errorQuery.status()).toBe('pending') + + const stablePromise = app.whenStable() + await Promise.resolve() + await vi.advanceTimersByTimeAsync(10) + await stablePromise + + expect(successQuery.status()).toBe('success') + expect(successQuery.data()).toBe('instant-data') + expect(errorQuery.status()).toBe('error') + expect(errorQuery.error()).toStrictEqual(new Error('instant-error')) + }) + + it('tracks invalidation even when combine returns an unchanged value', async () => { + vi.useRealTimers() + const key = ['combined-pending-invalidation'] + let complete!: (value: number) => void + let calls = 0 + const queries = TestBed.runInInjectionContext(() => + injectQueries(() => ({ + queries: [ + { + queryKey: key, + queryFn: () => + ++calls === 1 + ? 1 + : new Promise((resolve) => { + complete = resolve + }), + }, + ], + combine: () => 'unchanged', + })), + ) + const app = TestBed.inject(ApplicationRef) + await app.whenStable() + expect(queries()).toBe('unchanged') + let isStable = false + const subscription = app.isStable.subscribe((value) => { + isStable = value + }) + expect(isStable).toBe(true) + + const invalidation = queryClient.invalidateQueries({ queryKey: key }) + expect(isStable).toBe(false) + complete(2) + await invalidation + await app.whenStable() + expect(isStable).toBe(true) + expect(queries()).toBe('unchanged') + subscription.unsubscribe() + }) + + it('should not register pending tasks for disabled queries', async () => { + const queryFn = vi.fn<() => Promise>(() => + Promise.resolve('disabled-data'), + ) + + @Component({ + template: '', + changeDetection: ChangeDetectionStrategy.OnPush, + }) + class Page { + queries = injectQueries(() => ({ + queries: [ + { + queryKey: ['queries-disabled-enabled'], + queryFn, + enabled: false, + }, + { + queryKey: ['queries-disabled-skip-token'], + queryFn: skipToken, + }, + ], + })) + } + + const fixture = TestBed.createComponent(Page) + fixture.detectChanges() + await Promise.resolve() + + const [disabledQuery, skippedQuery] = fixture.componentInstance.queries() + expect(disabledQuery.fetchStatus()).toBe('idle') + expect(skippedQuery.fetchStatus()).toBe('idle') + expect(queryFn).not.toHaveBeenCalled() + expect(fixture.isStable()).toBe(true) + }) + + it('should stay pending while queries are paused offline', async () => { + const app = TestBed.inject(ApplicationRef) + onlineManager.setOnline(false) + + @Component({ + template: '', + changeDetection: ChangeDetectionStrategy.OnPush, + }) + class Page { + queries = injectQueries(() => ({ + queries: [ + { + queryKey: ['queries-start-offline'], + queryFn: () => sleep(10).then(() => 'online-data'), + }, + ], + })) + } + + const fixture = TestBed.createComponent(Page) + fixture.detectChanges() + await Promise.resolve() + + const query = fixture.componentInstance.queries()[0] + expect(query.fetchStatus()).toBe('paused') + + let stableResolved = false + const stablePromise = app.whenStable().then(() => { + stableResolved = true + }) + await Promise.resolve() + expect(stableResolved).toBe(false) + + onlineManager.setOnline(true) + await vi.advanceTimersByTimeAsync(20) + await stablePromise + + expect(query.status()).toBe('success') + expect(query.data()).toBe('online-data') + }) + + it('should handle rapid refetches without leaking a pending task', async () => { + const app = TestBed.inject(ApplicationRef) + let count = 0 + + @Component({ + template: '', + changeDetection: ChangeDetectionStrategy.OnPush, + }) + class Page { + queries = injectQueries(() => ({ + queries: [ + { + queryKey: ['queries-rapid-refetch'], + queryFn: async () => { + await sleep(10) + return ++count + }, + }, + ], + })) + } + + const fixture = TestBed.createComponent(Page) + fixture.detectChanges() + const query = fixture.componentInstance.queries()[0] + + query.refetch() + query.refetch() + query.refetch() + + const stablePromise = app.whenStable() + await vi.advanceTimersByTimeAsync(20) + await stablePromise + + expect(query.status()).toBe('success') + expect(query.data()).toBeGreaterThan(0) + expect(fixture.isStable()).toBe(true) + }) + + it('should release the pending task when a query is cancelled', async () => { + const app = TestBed.inject(ApplicationRef) + + @Component({ + template: '', + changeDetection: ChangeDetectionStrategy.OnPush, + }) + class Page { + queries = injectQueries(() => ({ + queries: [ + { + queryKey: ['queries-cancel'], + queryFn: () => sleep(100).then(() => 'data'), + }, + ], + })) + } + + const fixture = TestBed.createComponent(Page) + fixture.detectChanges() + const query = fixture.componentInstance.queries()[0] + + await vi.advanceTimersByTimeAsync(20) + await queryClient.cancelQueries({ queryKey: ['queries-cancel'] }) + await app.whenStable() + + expect(query.status()).toBe('pending') + expect(query.fetchStatus()).toBe('idle') + expect(fixture.isStable()).toBe(true) + }) + + it('should keep the pending task through retries', async () => { + const app = TestBed.inject(ApplicationRef) + let attemptCount = 0 + + @Component({ + template: '', + changeDetection: ChangeDetectionStrategy.OnPush, + }) + class Page { + queries = injectQueries(() => ({ + queries: [ + { + queryKey: ['queries-retry'], + retry: 2, + retryDelay: 10, + queryFn: () => { + attemptCount++ + if (attemptCount <= 2) { + throw new Error(`Attempt ${attemptCount} failed`) + } + return 'success-data' + }, + }, + ], + })) + } + + const fixture = TestBed.createComponent(Page) + fixture.detectChanges() + const query = fixture.componentInstance.queries()[0] + + const stablePromise = app.whenStable() + await vi.advanceTimersByTimeAsync(50) + await stablePromise + + expect(query.status()).toBe('success') + expect(query.data()).toBe('success-data') + expect(attemptCount).toBe(3) + }) + }) + + it('should pause fetching while restoring and fetch once restoring is disabled', async () => { + const isRestoring = signal(true) + const fetchSpy = vi.fn<() => Promise>(() => + sleep(10).then(() => 'restored-data'), + ) + setupTanStackQueryTestBed(queryClient, { + providers: [provideIsRestoring(() => isRestoring.asReadonly())], + }) + + @Component({ + template: '', + changeDetection: ChangeDetectionStrategy.OnPush, + }) + class Page { + queries = injectQueries(() => ({ + queries: [ + { + queryKey: ['restoring'], + queryFn: fetchSpy, + }, + ], + })) + } + + const fixture = TestBed.createComponent(Page) + fixture.detectChanges() + + expect(fetchSpy).not.toHaveBeenCalled() + expect(fixture.componentInstance.queries()[0].status()).toBe('pending') + + const stablePromise = fixture.whenStable() + await Promise.resolve() + await stablePromise + + isRestoring.set(false) + fixture.detectChanges() + + await vi.advanceTimersByTimeAsync(11) + await fixture.whenStable() + + const result = fixture.componentInstance.queries()[0] + expect(fetchSpy).toHaveBeenCalledTimes(1) + expect(result.status()).toBe('success') + expect(result.data()).toBe('restored-data') + + const cachedQuery = queryClient + .getQueryCache() + .find({ queryKey: ['restoring'] })! + expect(cachedQuery.getObserversCount()).toBe(1) + + isRestoring.set(true) + fixture.detectChanges() + expect(cachedQuery.getObserversCount()).toBe(0) + + isRestoring.set(false) + fixture.detectChanges() + expect(cachedQuery.getObserversCount()).toBe(1) + + fixture.destroy() + expect(cachedQuery.getObserversCount()).toBe(0) + }) + + it.each(['options-first', 'restoring-first'] as const)( + 'uses the latest query list when leaving restoration in the same turn (%s)', + async (writeOrder) => { + const isRestoring = signal(true) + const key = signal('old') + const queriedKeys: Array = [] + setupTanStackQueryTestBed(queryClient, { + providers: [provideIsRestoring(() => isRestoring.asReadonly())], + }) + + const queries = TestBed.runInInjectionContext(() => + injectQueries(() => ({ + queries: [ + { + queryKey: ['same-turn-restoration', key()], + queryFn: ({ queryKey: currentQueryKey }) => { + const currentKey = currentQueryKey[1] as string + queriedKeys.push(currentKey) + return Promise.resolve(currentKey) + }, + }, + ], + })), + ) + + expect(queries()[0].status()).toBe('pending') + expect(queriedKeys).toStrictEqual([]) + + // oxlint-disable-next-line vitest-js/no-conditional-in-test -- The parameter selects setup/actions; every case runs the assertions. + if (writeOrder === 'options-first') { + key.set('new') + isRestoring.set(false) + } else { + isRestoring.set(false) + key.set('new') + } + TestBed.tick() + await TestBed.inject(ApplicationRef).whenStable() + + expect(queriedKeys).toStrictEqual(['new']) + expect(queries()[0].data()).toBe('new') + expect( + queryClient + .getQueryCache() + .find({ queryKey: ['same-turn-restoration', 'old'] })?.state + .fetchStatus, + ).toBe('idle') + expect( + queryClient + .getQueryCache() + .find({ queryKey: ['same-turn-restoration', 'new'] }) + ?.getObserversCount(), + ).toBe(1) + }, + ) + + it('allows a cache listener to read a result during restoration-boundary configuration', () => { + const isRestoring = signal(true) + const staleTime = signal(0) + setupTanStackQueryTestBed(queryClient, { + providers: [provideIsRestoring(() => isRestoring.asReadonly())], + }) + + const queries = TestBed.runInInjectionContext(() => + injectQueries(() => ({ + queries: [ + { + queryKey: ['restoration-reentrant'], + queryFn: () => 'data', + enabled: false, + staleTime: staleTime(), + }, + ], + })), + ) + + expect(queries()[0].status()).toBe('pending') + TestBed.tick() + + const boundaryRead = vi.fn<() => 'error' | 'pending' | 'success'>(() => + queries()[0].status(), + ) + let appliedStaleTime: number | undefined + const unsubscribe = queryClient.getQueryCache().subscribe((event) => { + if (event.type === 'observerOptionsUpdated') { + appliedStaleTime = event.observer.options.staleTime as number + boundaryRead() + } + }) + + staleTime.set(1) + isRestoring.set(false) + + expect(() => TestBed.tick()).not.toThrow() + expect(boundaryRead).toHaveBeenCalledWith() + expect(appliedStaleTime).toBe(1) + expect( + queryClient + .getQueryCache() + .find({ queryKey: ['restoration-reentrant'] }) + ?.getObserversCount(), + ).toBe(1) + + unsubscribe() + }) + + it('converges to the current query list after an early restoration read', () => { + const isRestoring = signal(true) + const key = signal('old') + const oldQueryKey = ['early-restoration-read', 'old'] as const + const newQueryKey = ['early-restoration-read', 'new'] as const + setupTanStackQueryTestBed(queryClient, { + providers: [provideIsRestoring(() => isRestoring.asReadonly())], + }) + + const queries = TestBed.runInInjectionContext(() => + injectQueries(() => ({ + queries: [ + { + queryKey: ['early-restoration-read', key()], + queryFn: () => 'unused', + enabled: false, + }, + ], + })), + ) + + expect(queries()[0].status()).toBe('pending') + TestBed.tick() + const oldQuery = queryClient + .getQueryCache() + .find({ queryKey: oldQueryKey })! + expect(oldQuery.getObserversCount()).toBe(0) + + key.set('new') + isRestoring.set(false) + + expect(queries()[0].status()).toBe('pending') + expect( + queryClient.getQueryCache().find({ queryKey: newQueryKey }), + ).toBeDefined() + + queryClient.setQueryData(newQueryKey, 'early data') + const newQuery = queryClient + .getQueryCache() + .find({ queryKey: newQueryKey })! + expect(newQuery.getObserversCount()).toBe(0) + TestBed.tick() + + expect(oldQuery.getObserversCount()).toBe(0) + expect(newQuery.getObserversCount()).toBe(1) + expect(queries()[0].data()).toBe('early data') + }) + + it('reads the optimistic query list before moving subscriptions on the next tick', () => { + const key = signal('old') + const oldQueryKey = ['early-options-read', 'old'] as const + const newQueryKey = ['early-options-read', 'new'] as const + const queries = TestBed.runInInjectionContext(() => + injectQueries(() => ({ + queries: [ + { + queryKey: ['early-options-read', key()], + queryFn: () => 'unused', + enabled: false, + }, + ], + })), + ) + + expect(queries()[0].status()).toBe('pending') + TestBed.tick() + const oldQuery = queryClient + .getQueryCache() + .find({ queryKey: oldQueryKey })! + expect(oldQuery.getObserversCount()).toBe(1) + + key.set('new') + + expect(queries()[0].status()).toBe('pending') + // The existing observer list stays attached until the configuration effect + // can move it atomically. + expect(oldQuery.getObserversCount()).toBe(1) + expect( + queryClient.getQueryCache().find({ queryKey: newQueryKey }), + ).toBeDefined() + + queryClient.setQueryData(newQueryKey, 'early data') + const newQuery = queryClient + .getQueryCache() + .find({ queryKey: newQueryKey })! + expect(newQuery.getObserversCount()).toBe(0) + TestBed.tick() + + expect(oldQuery.getObserversCount()).toBe(0) + expect(newQuery.getObserversCount()).toBe(1) + expect(queries()[0].data()).toBe('early data') + }) + + it('should complete queries before whenStable resolves', async () => { + const app = TestBed.inject(ApplicationRef) + + @Component({ + template: '', + changeDetection: ChangeDetectionStrategy.OnPush, + }) + class Page { + queries = injectQueries(() => ({ + queries: [ + { + queryKey: ['query-1'], + queryFn: async () => { + await new Promise((resolve) => setTimeout(resolve, 10)) + return 1 + }, + }, + { + queryKey: ['query-2'], + queryFn: async () => { + await new Promise((resolve) => setTimeout(resolve, 20)) + return 2 + }, + }, + ], + })) + } + + const fixture = TestBed.createComponent(Page) + fixture.detectChanges() + + const stablePromise = app.whenStable() + let stableResolved = false + void stablePromise.then(() => { + stableResolved = true + }) + + await Promise.resolve() + expect(stableResolved).toBe(false) + + await vi.advanceTimersByTimeAsync(25) + await stablePromise + + const result = fixture.componentInstance.queries() + expect(result[0].status()).toBe('success') + expect(result[1].status()).toBe('success') + expect(result[0].data()).toBe(1) + expect(result[1].data()).toBe(2) + }) + + it('should use latest query key for aliased refetch function', async () => { + const key = signal('one') + const fetchSpy = vi.fn<(context: any) => Promise>( + async (context: any) => { + await new Promise((resolve) => setTimeout(resolve, 10)) + return context.queryKey[1] + }, + ) + + @Component({ + template: '', + changeDetection: ChangeDetectionStrategy.OnPush, + }) + class Page { + key = key + fetchSpy = fetchSpy + + queries = injectQueries(() => ({ + queries: [ + { + queryKey: ['query', this.key()], + queryFn: this.fetchSpy, + enabled: false, + }, + ], + })) + } + + const rendered = await render(Page) + const query = rendered.fixture.componentInstance.queries()[0] + const refetch = query.refetch + + key.set('two') + rendered.fixture.detectChanges() + + const refetchPromise = refetch() + await vi.advanceTimersByTimeAsync(15) + await refetchPromise + + expect(fetchSpy).toHaveBeenCalledTimes(1) + expect(fetchSpy).toHaveBeenCalledWith( + expect.objectContaining({ + queryKey: ['query', 'two'], + }), + ) + }) +}) diff --git a/packages/angular-query/src/__tests__/inject-query-lifecycle.test.ts b/packages/angular-query/src/__tests__/inject-query-lifecycle.test.ts new file mode 100644 index 00000000000..9f29ebafac7 --- /dev/null +++ b/packages/angular-query/src/__tests__/inject-query-lifecycle.test.ts @@ -0,0 +1,85 @@ +import { + DestroyRef, + NgZone, + PendingTasks, + runInInjectionContext, +} from '@angular/core' +import { describe, expect, it, vi } from 'vitest' +import { injectPendingTasksLifecycle } from '../utils/inject-pending-tasks-lifecycle' + +function setupLifecycle() { + const destroyCallbacks: Array<() => void> = [] + const taskCleanups: Array> = [] + const pendingTasks = { + add: vi.fn<() => () => void>(() => { + const cleanup = vi.fn<() => void>() + taskCleanups.push(cleanup) + return cleanup + }), + } + const destroyRef: { + destroyed: boolean + onDestroy: ReturnType + } = { + destroyed: false, + onDestroy: vi.fn<(callback: () => void) => () => void>( + (callback: () => void) => { + destroyCallbacks.push(callback) + return () => { + const index = destroyCallbacks.indexOf(callback) + if (index !== -1) destroyCallbacks.splice(index, 1) + } + }, + ), + } + const injector = { + get(token: unknown) { + if (token === NgZone) return { run: (callback: () => void) => callback() } + if (token === PendingTasks) return pendingTasks + if (token === DestroyRef) return destroyRef + throw new Error(`Unexpected token: ${String(token)}`) + }, + } + + return { + lifecycle: runInInjectionContext(injector, () => + injectPendingTasksLifecycle(), + ), + pendingTasks, + taskCleanups, + destroy: () => { + destroyRef.destroyed = true + for (const callback of [...destroyCallbacks]) callback() + }, + } +} + +describe('QueryLifecycle', () => { + it('tracks pending state without registering duplicate tasks', () => { + const { lifecycle, pendingTasks, taskCleanups } = setupLifecycle() + + lifecycle.setPending(true) + lifecycle.setPending(true) + + expect(pendingTasks.add).toHaveBeenCalledTimes(1) + + lifecycle.setPending(false) + expect(taskCleanups[0]).toHaveBeenCalledTimes(1) + + lifecycle.setPending(true) + expect(pendingTasks.add).toHaveBeenCalledTimes(2) + }) + + it('tracks destruction, releases its task, and cannot restart', () => { + const { lifecycle, pendingTasks, taskCleanups, destroy } = setupLifecycle() + + lifecycle.setPending(true) + destroy() + + expect(lifecycle.destroyed).toBe(true) + expect(taskCleanups[0]).toHaveBeenCalledTimes(1) + + lifecycle.setPending(true) + expect(pendingTasks.add).toHaveBeenCalledTimes(1) + }) +}) diff --git a/packages/angular-query/src/__tests__/inject-query.test-d.ts b/packages/angular-query/src/__tests__/inject-query.test-d.ts new file mode 100644 index 00000000000..1bdb715a751 --- /dev/null +++ b/packages/angular-query/src/__tests__/inject-query.test-d.ts @@ -0,0 +1,275 @@ +import { signal } from '@angular/core' +import { describe, expectTypeOf, it } from 'vitest' +import { sleep } from '@tanstack/query-test-utils' +import { injectQuery, queryOptions, skipToken, toResource } from '..' +import type { CreateQueryOptions, CreateQueryResult } from '..' +import type { Resource, Signal } from '@angular/core' + +describe('initialData', () => { + describe('Config object overload', () => { + it('tData should always be defined when initialData is provided as an object', () => { + const query = injectQuery(() => ({ + queryKey: ['key'], + queryFn: () => ({ wow: true }), + initialData: { wow: true }, + })) + const resource = toResource(query) + + expectTypeOf(query.data).toEqualTypeOf>() + expectTypeOf(resource.value).toEqualTypeOf>() + }) + + it('tData should be defined when passed through queryOptions', () => { + const options = () => + queryOptions({ + queryKey: ['key'], + queryFn: () => { + return { + wow: true, + } + }, + initialData: { + wow: true, + }, + }) + const { data } = injectQuery(options) + + expectTypeOf(data).toEqualTypeOf>() + }) + + it('should support selection function with select', () => { + const options = injectQuery(() => ({ + queryKey: ['key'], + queryFn: () => '1', + select: (data) => { + expectTypeOf(data).toEqualTypeOf() + return parseInt(data) + }, + })) + expectTypeOf(options.data).toEqualTypeOf>() + }) + + it('should be possible to define a different TData than TQueryFnData using select with queryOptions spread into useQuery', () => { + const options = queryOptions({ + queryKey: ['key'], + queryFn: () => Promise.resolve(1), + }) + + const query = injectQuery(() => ({ + ...options, + select: (data) => data > 1, + })) + + expectTypeOf(query.data).toEqualTypeOf>() + }) + + it('tData should always be defined when initialData is provided as a function which ALWAYS returns the data', () => { + const { data } = injectQuery(() => ({ + queryKey: ['key'], + queryFn: () => { + return { + wow: true, + } + }, + initialData: () => ({ + wow: true, + }), + })) + + expectTypeOf(data).toEqualTypeOf>() + }) + + it('tData should have undefined in the union when initialData is NOT provided', () => { + const { data } = injectQuery(() => ({ + queryKey: ['key'], + queryFn: () => { + return { + wow: true, + } + }, + })) + + expectTypeOf(data).toEqualTypeOf>() + }) + + it('tData should have undefined in the union when initialData is provided as a function which can return undefined', () => { + const { data } = injectQuery(() => ({ + queryKey: ['key'], + queryFn: () => { + return { + wow: true, + } + }, + initialData: () => undefined as { wow: boolean } | undefined, + })) + + expectTypeOf(data).toEqualTypeOf>() + }) + + it('tData should be narrowed after an isSuccess check when initialData is provided as a function which can return undefined', () => { + const query = injectQuery(() => ({ + queryKey: ['key'], + queryFn: () => { + return { + wow: true, + } + }, + initialData: () => undefined as { wow: boolean } | undefined, + })) + + if (query.isSuccess()) { + expectTypeOf(query.data).toEqualTypeOf>() + } + }) + + it('should keep data defined after an isError check when initialData is provided', () => { + const query = injectQuery(() => ({ + queryKey: ['key'], + queryFn: () => Promise.resolve('Some data'), + initialData: 'initial data', + })) + + if (query.isError()) { + expectTypeOf(query.data).toEqualTypeOf>() + } + }) + + it('should make an isPending branch impossible when initialData is provided', () => { + const query = injectQuery(() => ({ + queryKey: ['key'], + queryFn: () => Promise.resolve('Some data'), + initialData: 'initial data', + })) + + if (query.isPending()) { + expectTypeOf(query).toEqualTypeOf() + } + }) + }) + + describe('structuralSharing', () => { + it('should be able to use structuralSharing with unknown types', () => { + // https://github.com/TanStack/query/issues/6525#issuecomment-1938411343 + injectQuery(() => ({ + queryKey: ['key'], + queryFn: () => 5, + structuralSharing: (oldData, newData) => { + expectTypeOf(oldData).toBeUnknown() + expectTypeOf(newData).toBeUnknown() + return newData + }, + })) + }) + }) + + it('supports reading data from a generic result type', () => { + const readId = (query: CreateQueryResult) => + query.data()?.id + + expectTypeOf(readId).toBeCallableWith( + {} as CreateQueryResult<{ id: number }>, + ) + }) +}) + +describe('Discriminated union return type', () => { + it('should expose status predicates as Angular signals', () => { + const query = injectQuery(() => ({ + queryKey: ['key'], + queryFn: () => sleep(0).then(() => 'Some data'), + })) + + expectTypeOf(query.isSuccess).toExtend>() + expectTypeOf(query.isError).toExtend>() + expectTypeOf(query.isPending).toExtend>() + }) + + it('should expose an Angular resource view', () => { + const query = injectQuery(() => ({ + queryKey: ['key'], + queryFn: () => sleep(0).then(() => 'Some data'), + })) + + const resource = toResource(query) + expectTypeOf(resource).toExtend>() + expectTypeOf(resource.reload).toBeCallableWith() + + // @ts-expect-error Resources are created explicitly with toResource. + query.resource + }) + + it('data should be possibly undefined by default', () => { + const query = injectQuery(() => ({ + queryKey: ['key'], + queryFn: () => sleep(0).then(() => 'Some data'), + })) + + expectTypeOf(query.data).toEqualTypeOf>() + }) + + it('data should be defined when query is success', () => { + const query = injectQuery(() => ({ + queryKey: ['key'], + queryFn: () => sleep(0).then(() => 'Some data'), + })) + + if (query.isSuccess()) { + expectTypeOf(query.data).toEqualTypeOf>() + expectTypeOf(toResource(query).value).toEqualTypeOf>() + } + }) + + it('error should be null when query is success', () => { + const query = injectQuery(() => ({ + queryKey: ['key'], + queryFn: () => sleep(0).then(() => 'Some data'), + })) + + if (query.isSuccess()) { + expectTypeOf(query.error).toEqualTypeOf>() + } + }) + + it('data should be undefined when query is pending', () => { + const query = injectQuery(() => ({ + queryKey: ['key'], + queryFn: () => sleep(0).then(() => 'Some data'), + })) + + if (query.isPending()) { + expectTypeOf(query.data).toEqualTypeOf>() + } + }) + + it('error should be defined when query is error', () => { + const query = injectQuery(() => ({ + queryKey: ['key'], + queryFn: () => sleep(0).then(() => 'Some data'), + })) + + if (query.isError()) { + expectTypeOf(query.error).toEqualTypeOf>() + } + }) +}) + +describe('injectQuery options', () => { + it('omits observer error reporting options', () => { + expectTypeOf().not.toHaveProperty('throwOnError') + }) +}) + +describe('skipToken', () => { + it('should narrow data to string | undefined for a conditional skipToken inside a whole-options getter', () => { + const postId = signal(undefined) + const query = injectQuery(() => ({ + queryKey: ['posts', postId()], + queryFn: + postId() != null + ? () => Promise.resolve(`post ${postId()}`) + : skipToken, + })) + + expectTypeOf(query.data).toEqualTypeOf>() + }) +}) diff --git a/packages/angular-query/src/__tests__/inject-query.test.ts b/packages/angular-query/src/__tests__/inject-query.test.ts new file mode 100644 index 00000000000..7924f90c7f3 --- /dev/null +++ b/packages/angular-query/src/__tests__/inject-query.test.ts @@ -0,0 +1,1665 @@ +import { + ApplicationRef, + ChangeDetectionStrategy, + Component, + ErrorHandler, + computed, + effect, + input, + inputBinding, + signal, +} from '@angular/core' +import { TestBed } from '@angular/core/testing' +import { HttpClient, provideHttpClient } from '@angular/common/http' +import { + HttpTestingController, + provideHttpClientTesting, +} from '@angular/common/http/testing' +import { + afterEach, + beforeEach, + describe, + expect, + expectTypeOf, + it, + vi, +} from 'vitest' +import { render } from '@testing-library/angular' +import { createKey, sleep } from '@tanstack/query-test-utils' +import { lastValueFrom } from 'rxjs' +import { provideIsRestoring } from '../internal' +import { + QueryCache, + QueryClient, + injectQuery, + provideTanStackQuery, + toResource, +} from '..' +import { provideAngularQueryChangeDetection } from './test-utils' +import type { CreateQueryOptions, OmitKeyof, QueryFunction } from '..' + +// cspell:ignore ZONEFUL + +describe('injectQuery', () => { + let queryCache: QueryCache + let queryClient: QueryClient + + beforeEach(() => { + vi.useFakeTimers() + queryCache = new QueryCache() + queryClient = new QueryClient({ queryCache }) + TestBed.configureTestingModule({ + providers: [ + provideAngularQueryChangeDetection(), + provideTanStackQuery(() => queryClient), + ], + }) + }) + + afterEach(() => { + vi.useRealTimers() + }) + + it('should keep failed refetch state and cached data readable without global reporting', async () => { + vi.useRealTimers() + queryClient.setDefaultOptions({ + queries: { retry: false, throwOnError: true }, + }) + const report = vi.spyOn(TestBed.inject(ErrorHandler), 'handleError') + const error = new Error('query failed') + const options = { + queryKey: ['error'], + initialData: 'cached', + enabled: false, + queryFn: async (): Promise => { + throw error + }, + } + const query = TestBed.runInInjectionContext(() => + injectQuery(() => options), + ) + const cacheReport = vi.fn<(error: Error) => void>() + queryCache.config.onError = cacheReport + const second = TestBed.runInInjectionContext(() => + injectQuery(() => options), + ) + await TestBed.inject(ApplicationRef).whenStable() + await expect(query.refetch()).resolves.toMatchObject({ + status: 'error', + error, + }) + expect(query.error()).toBe(error) + expect(second.error()).toBe(error) + expect(cacheReport).toHaveBeenCalledTimes(1) + expect(query.data()).toBe('cached') + expect(query.isError()).toBe(true) + await expect(query.refetch({ throwOnError: true })).rejects.toBe(error) + expect(report).not.toHaveBeenCalled() + }) + + it('should return the correct types', () => { + const key = createKey() + + @Component({ + selector: 'app-test', + template: '', + changeDetection: ChangeDetectionStrategy.OnPush, + }) + class TestComponent { + // unspecified query function should default to unknown + noQueryFn = injectQuery(() => ({ + queryKey: key, + })) + + // it should infer the result type from the query function + fromQueryFn = injectQuery(() => ({ + queryKey: key, + queryFn: () => 'test', + })) + + // it should be possible to specify the result type + withResult = injectQuery(() => ({ + queryKey: key, + queryFn: () => 'test', + })) + + // it should be possible to specify the error type + withError = injectQuery(() => ({ + queryKey: key, + queryFn: () => 'test', + })) + + // it should infer the result type from the configuration + withResultInfer = injectQuery(() => ({ + queryKey: key, + queryFn: () => true, + })) + + // it should be possible to specify a union type as result type + unionTypeSync = injectQuery(() => ({ + queryKey: key, + queryFn: () => (Math.random() > 0.5 ? ('a' as const) : ('b' as const)), + })) + + unionTypeAsync = injectQuery<'a' | 'b'>(() => ({ + queryKey: key, + queryFn: () => Promise.resolve(Math.random() > 0.5 ? 'a' : 'b'), + })) + + // it should infer the result type from a generic query function + fromGenericQueryFn = (() => { + function queryFn(): Promise { + return Promise.resolve({} as T) + } + return injectQuery(() => ({ + queryKey: key, + queryFn: () => queryFn(), + })) + })() + + // todo use query options? + fromGenericOptionsQueryFn = (() => { + function queryFn(): Promise { + return Promise.resolve({} as T) + } + return injectQuery(() => ({ + queryKey: key, + queryFn: () => queryFn(), + })) + })() + + fromMyDataArrayKeyQueryFn = (() => { + type MyData = number + type MyQueryKey = readonly ['my-data', number] + const getMyDataArrayKey: QueryFunction = ({ + queryKey: [, n], + }) => { + return n + 42 + } + return injectQuery(() => ({ + queryKey: ['my-data', 100] as const, + queryFn: getMyDataArrayKey, + })) + })() + + // it should handle query-functions that return Promise + fromPromiseAnyQueryFn = injectQuery(() => ({ + queryKey: key, + queryFn: () => fetch('return Promise').then((resp) => resp.json()), + })) + + fromGetMyDataStringKeyQueryFn = (() => { + type MyData = number + const getMyDataStringKey: QueryFunction = (context) => { + expectTypeOf(context.queryKey).toEqualTypeOf<['1']>() + return Number(context.queryKey[0]) + 42 + } + return injectQuery(() => ({ + queryKey: ['1'] as ['1'], + queryFn: getMyDataStringKey, + })) + })() + + // Wrapped queries + fromWrappedQuery = (() => { + const createWrappedQuery = < + TQueryKey extends [string, Record?], + TQueryFnData, + TError, + TData = TQueryFnData, + >( + qk: TQueryKey, + fetcher: (obj: TQueryKey[1], token: string) => Promise, + options?: OmitKeyof< + CreateQueryOptions, + 'queryKey' | 'queryFn' | 'initialData', + 'safely' + >, + ) => + injectQuery(() => ({ + queryKey: qk, + queryFn: () => fetcher(qk[1], 'token'), + ...options, + })) + return createWrappedQuery([''], () => Promise.resolve('1')) + })() + + fromWrappedFuncStyleQuery = (() => { + const createWrappedFuncStyleQuery = < + TQueryKey extends [string, Record?], + TQueryFnData, + TError, + TData = TQueryFnData, + >( + qk: TQueryKey, + fetcher: () => Promise, + options?: OmitKeyof< + CreateQueryOptions, + 'queryKey' | 'queryFn' | 'initialData', + 'safely' + >, + ) => injectQuery(() => ({ queryKey: qk, queryFn: fetcher, ...options })) + return createWrappedFuncStyleQuery([''], () => Promise.resolve(true)) + })() + } + + const fixture = TestBed.createComponent(TestComponent) + fixture.detectChanges() + const { + noQueryFn, + fromQueryFn, + withResult, + withError, + withResultInfer, + unionTypeSync, + unionTypeAsync, + fromGenericQueryFn, + fromGenericOptionsQueryFn, + fromMyDataArrayKeyQueryFn, + fromPromiseAnyQueryFn, + fromGetMyDataStringKeyQueryFn, + fromWrappedQuery, + fromWrappedFuncStyleQuery, + } = fixture.componentInstance + + expectTypeOf(noQueryFn.data()).toEqualTypeOf() + expectTypeOf(noQueryFn.error()).toEqualTypeOf() + + expectTypeOf(fromQueryFn.data()).toEqualTypeOf() + expectTypeOf(fromQueryFn.error()).toEqualTypeOf() + + expectTypeOf(withResult.data()).toEqualTypeOf() + expectTypeOf(withResult.error()).toEqualTypeOf() + + expectTypeOf(withError.data()).toEqualTypeOf() + expectTypeOf(withError.error()).toEqualTypeOf<{ message: string } | null>() + + expectTypeOf(withResultInfer.data()).toEqualTypeOf() + expectTypeOf(withResultInfer.error()).toEqualTypeOf() + + expectTypeOf(unionTypeSync.data()).toEqualTypeOf<'a' | 'b' | undefined>() + expectTypeOf(unionTypeAsync.data()).toEqualTypeOf<'a' | 'b' | undefined>() + + expectTypeOf(fromGenericQueryFn.data()).toEqualTypeOf() + expectTypeOf(fromGenericQueryFn.error()).toEqualTypeOf() + + expectTypeOf(fromGenericOptionsQueryFn.data()).toEqualTypeOf< + string | undefined + >() + expectTypeOf( + fromGenericOptionsQueryFn.error(), + ).toEqualTypeOf() + + expectTypeOf(fromMyDataArrayKeyQueryFn.data()).toEqualTypeOf< + number | undefined + >() + + expectTypeOf(fromPromiseAnyQueryFn.data()).toEqualTypeOf() + expectTypeOf(fromGetMyDataStringKeyQueryFn.data()).toEqualTypeOf< + number | undefined + >() + expectTypeOf(fromWrappedQuery.data()).toEqualTypeOf() + expectTypeOf(fromWrappedFuncStyleQuery.data()).toEqualTypeOf< + boolean | undefined + >() + }) + + it('should return pending status initially', () => { + @Component({ + selector: 'app-test', + template: '', + changeDetection: ChangeDetectionStrategy.OnPush, + }) + class TestComponent { + query = injectQuery(() => ({ + queryKey: ['key1'], + queryFn: () => sleep(10).then(() => 'Some data'), + })) + } + + const fixture = TestBed.createComponent(TestComponent) + fixture.detectChanges() + fixture.autoDetectChanges() + const query = fixture.componentInstance.query + + expect(query.status()).toBe('pending') + expect(query.isPending()).toBe(true) + expect(query.isFetching()).toBe(true) + expect(query.isStale()).toBe(true) + expect(query.isFetched()).toBe(false) + }) + + it('should resolve to success and update signal: injectQuery()', async () => { + @Component({ + selector: 'app-test', + template: '', + changeDetection: ChangeDetectionStrategy.OnPush, + }) + class TestComponent { + query = injectQuery(() => ({ + queryKey: ['key2'], + queryFn: () => sleep(10).then(() => 'result2'), + })) + } + + const fixture = TestBed.createComponent(TestComponent) + fixture.detectChanges() + const query = fixture.componentInstance.query + + await vi.advanceTimersByTimeAsync(11) + expect(query.status()).toBe('success') + expect(query.data()).toBe('result2') + expect(query.isPending()).toBe(false) + expect(query.isFetching()).toBe(false) + expect(query.isFetched()).toBe(true) + expect(query.isSuccess()).toBe(true) + }) + + it('should reject and update signal', async () => { + @Component({ + selector: 'app-test', + template: '', + changeDetection: ChangeDetectionStrategy.OnPush, + }) + class TestComponent { + query = injectQuery(() => ({ + retry: false, + queryKey: ['key3'], + queryFn: () => + sleep(10).then(() => Promise.reject(new Error('Some error'))), + })) + } + + const fixture = TestBed.createComponent(TestComponent) + fixture.detectChanges() + const query = fixture.componentInstance.query + + await vi.advanceTimersByTimeAsync(11) + expect(query.status()).toBe('error') + expect(query.data()).toBeUndefined() + expect(query.error()).toMatchObject({ message: 'Some error' }) + expect(query.isPending()).toBe(false) + expect(query.isFetching()).toBe(false) + expect(query.isError()).toBe(true) + expect(query.failureCount()).toBe(1) + expect(query.failureReason()).toMatchObject({ message: 'Some error' }) + }) + + it('should expose the query result as an Angular resource', async () => { + const queryFn = vi.fn<() => Promise>(() => + sleep(10).then(() => 'result'), + ) + const query = TestBed.runInInjectionContext(() => + injectQuery(() => ({ + queryKey: ['resource-query'], + queryFn, + })), + ) + + TestBed.tick() + expect('resource' in query).toBe(false) + const resource = toResource(query) + expect(resource.status()).toBe('loading') + expect(resource.snapshot()).toStrictEqual({ + status: 'loading', + value: undefined, + }) + expect(resource.isLoading()).toBe(true) + expect(resource.hasValue()).toBe(false) + + await vi.advanceTimersByTimeAsync(11) + + expect(resource.status()).toBe('resolved') + expect(resource.snapshot()).toStrictEqual({ + status: 'resolved', + value: 'result', + }) + expect(resource.isLoading()).toBe(false) + expect(resource.hasValue()).toBe(true) + expect(resource.value()).toBe('result') + + expect(resource.reload()).toBe(true) + await Promise.resolve() + expect(queryFn).toHaveBeenCalledTimes(2) + + expect(resource.status()).toBe('reloading') + expect(resource.snapshot()).toStrictEqual({ + status: 'reloading', + value: 'result', + }) + expect(resource.isLoading()).toBe(true) + expect(resource.value()).toBe('result') + expect(resource.reload()).toBe(false) + expect(queryFn).toHaveBeenCalledTimes(2) + + await vi.advanceTimersByTimeAsync(11) + + expect(resource.status()).toBe('resolved') + expect(resource.value()).toBe('result') + }) + + it.each([undefined, null, 'query failed'])( + 'should normalize a %s query rejection for the resource error state', + async (rejection) => { + const query = TestBed.runInInjectionContext(() => + injectQuery(() => ({ + queryKey: ['resource-query-error', rejection], + queryFn: () => Promise.reject(rejection), + retry: false, + })), + ) + + TestBed.tick() + await vi.advanceTimersByTimeAsync(1) + + const resource = toResource(query) + const resourceError = resource.error() + expect(resource.status()).toBe('error') + expect(resourceError).toBeInstanceOf(Error) + expect(resourceError?.cause).toBe(rejection) + expect(resource.snapshot()).toStrictEqual({ + status: 'error', + error: resourceError, + }) + + let thrown: unknown + try { + resource.value() + } catch (error) { + thrown = error + } + expect(thrown).toBe(resourceError) + }, + ) + + it('should preserve Error-like query rejections', async () => { + const rejection = { name: 'QueryError', message: 'query failed' } + const query = TestBed.runInInjectionContext(() => + injectQuery(() => ({ + queryKey: ['resource-query-error-like'], + queryFn: () => Promise.reject(rejection), + retry: false, + })), + ) + + TestBed.tick() + await vi.advanceTimersByTimeAsync(1) + + const resource = toResource(query) + expect(resource.status()).toBe('error') + expect(resource.error()).toBe(rejection) + }) + + it('should not reload fresh query resources', async () => { + const queryFn = vi.fn<() => Promise>(() => + sleep(10).then(() => 'fresh-result'), + ) + const query = TestBed.runInInjectionContext(() => + injectQuery(() => ({ + queryKey: ['fresh-resource-query'], + queryFn, + staleTime: Infinity, + })), + ) + + TestBed.tick() + await vi.advanceTimersByTimeAsync(11) + + const resource = toResource(query) + expect(resource.status()).toBe('resolved') + expect(resource.reload()).toBe(false) + expect(queryFn).toHaveBeenCalledTimes(1) + }) + + it('should expose disabled queries as idle resources', () => { + const query = TestBed.runInInjectionContext(() => + injectQuery(() => ({ + enabled: false, + queryKey: ['idle-resource-query'], + queryFn: () => sleep(10).then(() => 'result'), + })), + ) + + TestBed.tick() + const resource = toResource(query) + + expect(resource.status()).toBe('idle') + expect(resource.snapshot()).toStrictEqual({ + status: 'idle', + value: undefined, + }) + expect(resource.isLoading()).toBe(false) + expect(resource.hasValue()).toBe(false) + expect(resource.value()).toBeUndefined() + expect(resource.reload()).toBe(false) + }) + + it('should update query on options contained signal change', async () => { + const key = signal(['key6', 'key7']) + const spy = vi.fn<() => Promise>(() => + sleep(10).then(() => 'Some data'), + ) + + @Component({ + selector: 'app-test', + template: '', + changeDetection: ChangeDetectionStrategy.OnPush, + }) + class TestComponent { + key = key + spy = spy + query = injectQuery(() => ({ + queryKey: this.key(), + queryFn: this.spy, + })) + } + + const fixture = TestBed.createComponent(TestComponent) + fixture.detectChanges() + const query = fixture.componentInstance.query + + await vi.advanceTimersByTimeAsync(0) + expect(spy).toHaveBeenCalledTimes(1) + + await vi.advanceTimersByTimeAsync(10) + expect(query.status()).toBe('success') + + key.set(['key8']) + fixture.detectChanges() + + expect(spy).toHaveBeenCalledTimes(2) + // should call queryFn with context containing the new queryKey + expect(spy).toHaveBeenNthCalledWith( + 2, + expect.objectContaining({ + client: queryClient, + meta: undefined, + queryKey: ['key8'], + signal: expect.anything(), + }), + ) + }) + + it('allows cache listeners to read the result while options update', () => { + const key = signal('one') + const query = TestBed.runInInjectionContext(() => + injectQuery(() => ({ + queryKey: ['reentrant-options', key()], + queryFn: () => 'data', + enabled: false, + })), + ) + + TestBed.tick() + const readResult = vi.fn<() => 'error' | 'pending' | 'success'>(() => + query.status(), + ) + const unsubscribe = queryCache.subscribe((event) => { + // setOptions emits synchronously; this read must not re-enter the signal + // computation that caused the options update. + if (event.type === 'observerOptionsUpdated') readResult() + }) + + key.set('two') + + expect(() => TestBed.tick()).not.toThrow() + expect(readResult).toHaveBeenCalledWith() + + unsubscribe() + }) + + it('allows deferred cache-listener reads during restoration detach and reattach', async () => { + const isRestoring = signal(false) + TestBed.resetTestingModule() + TestBed.configureTestingModule({ + providers: [ + provideAngularQueryChangeDetection(), + provideTanStackQuery(() => queryClient), + provideIsRestoring(() => isRestoring.asReadonly()), + ], + }) + const query = TestBed.runInInjectionContext(() => + injectQuery(() => ({ + queryKey: ['reentrant-restoration-subscription'], + queryFn: () => 'data', + enabled: false, + })), + ) + expect(query.status()).toBe('pending') + TestBed.tick() + + const nestedStatuses: Array = [] + const unsubscribe = queryCache.subscribe((event) => { + if (event.type === 'observerAdded' || event.type === 'observerRemoved') { + void Promise.resolve().then(() => nestedStatuses.push(query.status())) + } + }) + + isRestoring.set(true) + expect(() => TestBed.tick()).not.toThrow() + isRestoring.set(false) + expect(() => TestBed.tick()).not.toThrow() + + await Promise.resolve() + expect(nestedStatuses).toStrictEqual(['pending', 'pending']) + unsubscribe() + }) + + it('allows deferred cache-listener reads while an option change creates a query', async () => { + const key = signal('old') + const query = TestBed.runInInjectionContext(() => + injectQuery(() => ({ + queryKey: ['reentrant-query-added', key()], + queryFn: () => 'data', + enabled: false, + })), + ) + + expect(query.status()).toBe('pending') + TestBed.tick() + const nestedStatuses: Array = [] + const unsubscribe = queryCache.subscribe((event) => { + if (event.type === 'added') + void Promise.resolve().then(() => nestedStatuses.push(query.status())) + }) + + key.set('new') + + expect(() => query.status()).not.toThrow() + expect(nestedStatuses).toStrictEqual([]) + expect(() => TestBed.tick()).not.toThrow() + await Promise.resolve() + expect(nestedStatuses).toStrictEqual(['pending']) + unsubscribe() + }) + + it('keeps the external subscription when non-key options change', () => { + const staleTime = signal(0) + const query = TestBed.runInInjectionContext(() => + injectQuery(() => ({ + queryKey: ['stable-option-subscription'], + queryFn: () => 'data', + enabled: false, + staleTime: staleTime(), + })), + ) + + expect(query.status()).toBe('pending') + TestBed.tick() + const cachedQuery = queryCache.find({ + queryKey: ['stable-option-subscription'], + })! + const subscriptionEvents: Array = [] + const unsubscribe = queryCache.subscribe((event) => { + if (event.type === 'observerAdded' || event.type === 'observerRemoved') { + subscriptionEvents.push(event.type) + } + }) + + staleTime.set(1) + expect(query.status()).toBe('pending') + TestBed.tick() + + expect(cachedQuery.getObserversCount()).toBe(1) + expect(subscriptionEvents).toStrictEqual([]) + unsubscribe() + }) + + it('should only run query once enabled signal is set to true', async () => { + const spy = vi.fn<() => Promise>(() => + sleep(10).then(() => 'Some data'), + ) + const enabled = signal(false) + + @Component({ + selector: 'app-test', + template: '', + changeDetection: ChangeDetectionStrategy.OnPush, + }) + class TestComponent { + enabled = enabled + spy = spy + query = injectQuery(() => ({ + queryKey: ['key9'], + queryFn: this.spy, + enabled: this.enabled(), + })) + } + + const fixture = TestBed.createComponent(TestComponent) + fixture.detectChanges() + const query = fixture.componentInstance.query + + expect(spy).not.toHaveBeenCalled() + expect(query.status()).toBe('pending') + + enabled.set(true) + fixture.detectChanges() + + await vi.advanceTimersByTimeAsync(10) + expect(spy).toHaveBeenCalledTimes(1) + expect(query.status()).toBe('success') + }) + + it('should properly execute dependant queries', async () => { + const dependentQueryFn = vi.fn<() => Promise>(() => + sleep(1000).then(() => 'Some data'), + ) + + @Component({ + selector: 'app-test', + template: '', + changeDetection: ChangeDetectionStrategy.OnPush, + }) + class TestComponent { + query1 = injectQuery(() => ({ + queryKey: ['dependant1'], + queryFn: () => sleep(10).then(() => 'Some data'), + })) + + query2 = injectQuery( + computed(() => ({ + queryKey: ['dependent2'], + queryFn: dependentQueryFn, + enabled: !!this.query1.data(), + })), + ) + } + + const fixture = TestBed.createComponent(TestComponent) + fixture.detectChanges() + fixture.autoDetectChanges() + const { query1, query2 } = fixture.componentInstance + + expect(query1.data()).toBeUndefined() + expect(query2.fetchStatus()).toBe('idle') + expect(dependentQueryFn).not.toHaveBeenCalled() + + await vi.advanceTimersByTimeAsync(11) + + expect(query1.data()).toBe('Some data') + expect(query2.fetchStatus()).toBe('fetching') + + await vi.advanceTimersByTimeAsync(1002) + + expect(query2.fetchStatus()).toBe('idle') + expect(query2.status()).toBe('success') + expect(dependentQueryFn).toHaveBeenCalledTimes(1) + expect(dependentQueryFn).toHaveBeenCalledWith( + expect.objectContaining({ queryKey: ['dependent2'] }), + ) + }) + + it('should use the current value for the queryKey when refetch is called', async () => { + const fetchFn = vi.fn<() => Promise>(() => + sleep(10).then(() => 'Some data'), + ) + const keySignal = signal('key11') + + @Component({ + selector: 'app-test', + template: '', + changeDetection: ChangeDetectionStrategy.OnPush, + }) + class TestComponent { + keySignal = keySignal + fetchFn = fetchFn + query = injectQuery(() => ({ + queryKey: ['key10', this.keySignal()], + queryFn: this.fetchFn, + enabled: false, + })) + } + + const fixture = TestBed.createComponent(TestComponent) + fixture.detectChanges() + const query = fixture.componentInstance.query + + expect(fetchFn).not.toHaveBeenCalled() + + const first = query.refetch() + await vi.advanceTimersByTimeAsync(10) + await first + expect(fetchFn).toHaveBeenCalledTimes(1) + expect(fetchFn).toHaveBeenCalledWith( + expect.objectContaining({ + queryKey: ['key10', 'key11'], + }), + ) + + keySignal.set('key12') + const second = query.refetch() + await vi.advanceTimersByTimeAsync(10) + await second + expect(fetchFn).toHaveBeenCalledTimes(2) + expect(fetchFn).toHaveBeenCalledWith( + expect.objectContaining({ + queryKey: ['key10', 'key12'], + }), + ) + }) + + it('should keep initialData visible alongside the error when a refetch fails', async () => { + @Component({ + selector: 'app-test', + template: '', + changeDetection: ChangeDetectionStrategy.OnPush, + }) + class TestComponent { + query = injectQuery(() => ({ + queryKey: ['initialDataError'], + queryFn: () => + sleep(10).then(() => Promise.reject(new Error('Some error'))), + initialData: 'initial', + retry: false, + })) + } + + const fixture = TestBed.createComponent(TestComponent) + fixture.detectChanges() + const query = fixture.componentInstance.query + + expect(query.data()).toBe('initial') + expect(query.isError()).toBe(false) + expect(query.status()).toBe('success') + + await vi.advanceTimersByTimeAsync(11) + fixture.detectChanges() + + expect(query.data()).toBe('initial') + expect(query.isError()).toBe(true) + expect(query.status()).toBe('error') + }) + + it('should support selection function with select', async () => { + const app = TestBed.inject(ApplicationRef) + + @Component({ + selector: 'app-test', + template: '', + changeDetection: ChangeDetectionStrategy.OnPush, + }) + class TestComponent { + query = injectQuery(() => ({ + queryKey: ['key13'], + queryFn: () => [{ id: 1 }, { id: 2 }], + select: (data) => data.map((item) => item.id), + })) + } + + const fixture = TestBed.createComponent(TestComponent) + fixture.detectChanges() + const query = fixture.componentInstance.query + + // Wait for query to complete (even synchronous queryFn needs time to process) + const stablePromise = app.whenStable() + await Promise.resolve() + await vi.advanceTimersByTimeAsync(10) + await stablePromise + + expect(query.status()).toBe('success') + expect(query.data()).toStrictEqual([1, 2]) + }) + + it('should set state to error when queryFn returns reject promise', async () => { + @Component({ + selector: 'app-test', + template: '', + changeDetection: ChangeDetectionStrategy.OnPush, + }) + class TestComponent { + query = injectQuery(() => ({ + retry: false, + queryKey: ['key15'], + queryFn: () => + sleep(10).then(() => Promise.reject(new Error('Some error'))), + })) + } + + const fixture = TestBed.createComponent(TestComponent) + fixture.detectChanges() + const query = fixture.componentInstance.query + + expect(query.status()).toBe('pending') + + await vi.advanceTimersByTimeAsync(11) + + expect(query.status()).toBe('error') + }) + + it('should render with required signal inputs', async () => { + @Component({ + selector: 'app-fake', + template: `{{ query.data() }}`, + changeDetection: ChangeDetectionStrategy.OnPush, + }) + class FakeComponent { + name = input.required() + + query = injectQuery(() => ({ + queryKey: ['fake', this.name()], + queryFn: () => this.name(), + })) + } + + const name = signal('signal-input-required-test') + const rendered = await render(FakeComponent, { + bindings: [inputBinding('name', name.asReadonly())], + detectChangesOnRender: false, + }) + rendered.fixture.detectChanges() + rendered.fixture.autoDetectChanges() + await vi.advanceTimersByTimeAsync(0) + + const result = rendered.fixture.nativeElement.textContent + expect(result).toBe('signal-input-required-test') + }) + + it('should support aliasing query.data on required signal inputs', async () => { + @Component({ + selector: 'app-fake', + template: `{{ data() }}`, + changeDetection: ChangeDetectionStrategy.OnPush, + }) + class FakeComponent { + name = input.required() + + query = injectQuery(() => ({ + queryKey: ['fake-alias', this.name()], + queryFn: () => this.name(), + })) + + data = this.query.data + } + + const name = signal('signal-input-alias-test') + const rendered = await render(FakeComponent, { + bindings: [inputBinding('name', name.asReadonly())], + detectChangesOnRender: false, + }) + rendered.fixture.detectChanges() + rendered.fixture.autoDetectChanges() + await vi.advanceTimersByTimeAsync(0) + + const result = rendered.fixture.nativeElement.textContent + expect(result).toBe('signal-input-alias-test') + }) + + it('should allow reading the query data on effect registered before injection', () => { + const spy = vi.fn<(value: string | undefined) => void>() + @Component({ + selector: 'app-test', + template: '', + changeDetection: ChangeDetectionStrategy.OnPush, + }) + class TestComponent { + readEffect = effect(() => { + spy(this.query.data()) + }) + + query = injectQuery(() => ({ + queryKey: ['effect-before-injection'], + queryFn: () => sleep(0).then(() => 'Some data'), + })) + } + + const fixture = TestBed.createComponent(TestComponent) + fixture.detectChanges() + expect(spy).toHaveBeenCalledWith(undefined) + }) + + it('should render with an initial value for input signal if available before change detection', async () => { + const key1 = createKey() as [string] + const key2 = createKey() as [string] + queryClient.setQueryData(key1, 'value 1') + queryClient.setQueryData(key2, 'value 2') + + @Component({ + selector: 'app-test', + template: '{{ query.data() }}', + changeDetection: ChangeDetectionStrategy.OnPush, + }) + class TestComponent { + inputKey = input.required<[string]>() + query = injectQuery(() => ({ + queryKey: this.inputKey(), + queryFn: () => sleep(0).then(() => 'Some data'), + })) + } + + const inputKey = signal<[string]>(key1) + const rendered = await render(TestComponent, { + bindings: [inputBinding('inputKey', inputKey.asReadonly())], + detectChangesOnRender: false, + }) + rendered.fixture.detectChanges() + + const instance = rendered.fixture.componentInstance + const query = instance.query + + expect(() => instance.inputKey()).not.toThrow() + + expect(instance.inputKey()).toStrictEqual(key1) + expect(query.data()).toBe('value 1') + + inputKey.set(key2) + rendered.fixture.detectChanges() + + expect(instance.inputKey()).toStrictEqual(key2) + expect(query.data()).toBe('value 2') + }) + + it('should allow reading the query data on component ngOnInit with required signal input', async () => { + const spy = vi.fn<() => void>() + @Component({ + selector: 'app-test', + template: '', + changeDetection: ChangeDetectionStrategy.OnPush, + }) + class TestComponent { + key = input.required<[string]>() + query = injectQuery(() => ({ + queryKey: this.key(), + queryFn: () => Promise.resolve(() => 'Some data'), + })) + + initialStatus!: string + + ngOnInit() { + this.initialStatus = this.query.status() + + // effect should not have been called yet + expect(spy).not.toHaveBeenCalled() + } + + _spyEffect = effect(() => { + spy() + }) + } + + const key = signal<[string]>(['ngOnInitTest']) + const rendered = await render(TestComponent, { + bindings: [inputBinding('key', key.asReadonly())], + detectChangesOnRender: false, + }) + rendered.fixture.detectChanges() + + const fixture = rendered.fixture + expect(spy).toHaveBeenCalledWith() + + const instance = fixture.componentInstance + expect(instance.initialStatus).toBe('pending') + }) + + it('should update query data synchronously when query data changes', () => { + const query = TestBed.runInInjectionContext(() => + injectQuery(() => ({ + queryKey: ['test'], + initialData: 'initial data', + })), + ) + + TestBed.tick() + + expect(query.data()).toBe('initial data') + queryClient.setQueryData(['test'], 'new data') + expect(query.data()).toBe('new data') + }) + + it('should pause fetching while restoring and fetch once restoring is disabled', async () => { + const isRestoring = signal(true) + const fetchSpy = vi.fn<() => Promise>(() => + sleep(10).then(() => 'restored-data'), + ) + + TestBed.resetTestingModule() + TestBed.configureTestingModule({ + providers: [ + provideAngularQueryChangeDetection(), + provideTanStackQuery(() => queryClient), + provideIsRestoring(() => isRestoring.asReadonly()), + ], + }) + + @Component({ + selector: 'app-test', + template: '', + changeDetection: ChangeDetectionStrategy.OnPush, + }) + class TestComponent { + query = injectQuery(() => ({ + queryKey: ['restoring'], + queryFn: fetchSpy, + })) + } + + const fixture = TestBed.createComponent(TestComponent) + fixture.detectChanges() + + const query = fixture.componentInstance.query + expect(fetchSpy).not.toHaveBeenCalled() + expect(query.status()).toBe('pending') + + const stablePromise = fixture.whenStable() + await Promise.resolve() + await stablePromise + + isRestoring.set(false) + fixture.detectChanges() + + await vi.advanceTimersByTimeAsync(11) + await fixture.whenStable() + + expect(fetchSpy).toHaveBeenCalledTimes(1) + expect(query.status()).toBe('success') + expect(query.data()).toBe('restored-data') + + const cachedQuery = queryClient + .getQueryCache() + .find({ queryKey: ['restoring'] })! + expect(cachedQuery.getObserversCount()).toBe(1) + + isRestoring.set(true) + fixture.detectChanges() + expect(cachedQuery.getObserversCount()).toBe(0) + + isRestoring.set(false) + fixture.detectChanges() + expect(cachedQuery.getObserversCount()).toBe(1) + + fixture.destroy() + expect(cachedQuery.getObserversCount()).toBe(0) + }) + + it.each(['options-first', 'restoring-first'] as const)( + 'uses the latest options when leaving restoration in the same turn (%s)', + async (writeOrder) => { + const isRestoring = signal(true) + const key = signal('old') + const queriedKeys: Array = [] + + TestBed.resetTestingModule() + TestBed.configureTestingModule({ + providers: [ + provideAngularQueryChangeDetection(), + provideTanStackQuery(() => queryClient), + provideIsRestoring(() => isRestoring.asReadonly()), + ], + }) + + const query = TestBed.runInInjectionContext(() => + injectQuery(() => ({ + queryKey: ['same-turn-restoration', key()], + queryFn: ({ queryKey: currentQueryKey }) => { + const currentKey = currentQueryKey[1] as string + queriedKeys.push(currentKey) + return Promise.resolve(currentKey) + }, + })), + ) + + expect(query.status()).toBe('pending') + expect(queriedKeys).toStrictEqual([]) + + // oxlint-disable-next-line vitest-js/no-conditional-in-test -- The parameter selects setup/actions; every case runs the assertions. + if (writeOrder === 'options-first') { + key.set('new') + isRestoring.set(false) + } else { + isRestoring.set(false) + key.set('new') + } + TestBed.tick() + const stablePromise = TestBed.inject(ApplicationRef).whenStable() + await vi.advanceTimersByTimeAsync(0) + await stablePromise + + expect(queriedKeys).toStrictEqual(['new']) + expect(query.data()).toBe('new') + expect( + queryClient + .getQueryCache() + .find({ queryKey: ['same-turn-restoration', 'old'] })?.state + .fetchStatus, + ).toBe('idle') + expect( + queryClient + .getQueryCache() + .find({ queryKey: ['same-turn-restoration', 'new'] }) + ?.getObserversCount(), + ).toBe(1) + }, + ) + + it('allows a cache listener to read the result during restoration-boundary configuration', () => { + const isRestoring = signal(true) + const key = signal('old') + + TestBed.resetTestingModule() + TestBed.configureTestingModule({ + providers: [ + provideAngularQueryChangeDetection(), + provideTanStackQuery(() => queryClient), + provideIsRestoring(() => isRestoring.asReadonly()), + ], + }) + + const query = TestBed.runInInjectionContext(() => + injectQuery(() => ({ + queryKey: ['restoration-reentrant', key()], + queryFn: () => 'data', + enabled: false, + })), + ) + + expect(query.status()).toBe('pending') + TestBed.tick() + + const boundaryRead = vi.fn<() => 'error' | 'pending' | 'success'>(() => + query.status(), + ) + const unsubscribe = queryCache.subscribe((event) => { + if ( + event.type === 'observerOptionsUpdated' && + event.query.getObserversCount() === 0 + ) { + boundaryRead() + } + }) + + key.set('new') + isRestoring.set(false) + + expect(() => TestBed.tick()).not.toThrow() + expect(boundaryRead).toHaveBeenCalledWith() + expect( + queryCache + .find({ queryKey: ['restoration-reentrant', 'new'] }) + ?.getObserversCount(), + ).toBe(1) + + unsubscribe() + }) + + it('converges to the current query after an early restoration read', async () => { + const isRestoring = signal(true) + const key = signal('old') + const queriedKeys: Array = [] + const oldQueryKey = ['early-restoration-read', 'old'] as const + const newQueryKey = ['early-restoration-read', 'new'] as const + + TestBed.resetTestingModule() + TestBed.configureTestingModule({ + providers: [ + provideAngularQueryChangeDetection(), + provideTanStackQuery(() => queryClient), + provideIsRestoring(() => isRestoring.asReadonly()), + ], + }) + + const query = TestBed.runInInjectionContext(() => + injectQuery(() => ({ + queryKey: ['early-restoration-read', key()], + queryFn: ({ queryKey: currentQueryKey }) => { + const currentKey = currentQueryKey[1] as string + queriedKeys.push(currentKey) + return Promise.resolve(currentKey) + }, + staleTime: Infinity, + })), + ) + + expect(query.status()).toBe('pending') + TestBed.tick() + const oldQuery = queryCache.find({ queryKey: oldQueryKey })! + expect(oldQuery.getObserversCount()).toBe(0) + + key.set('new') + isRestoring.set(false) + + // Pull before the option-configuration effect gets a chance to run. + expect(query.status()).toBe('pending') + expect(queryCache.find({ queryKey: newQueryKey })).toBeDefined() + + // A cache write to the optimistic query is adopted after configuration. + queryClient.setQueryData(newQueryKey, 'early data') + const newQuery = queryCache.find({ queryKey: newQueryKey })! + expect(newQuery.getObserversCount()).toBe(0) + TestBed.tick() + const stablePromise = TestBed.inject(ApplicationRef).whenStable() + await vi.advanceTimersByTimeAsync(0) + await stablePromise + + expect(oldQuery.getObserversCount()).toBe(0) + expect(newQuery.getObserversCount()).toBe(1) + expect(queriedKeys).not.toContain('new') + expect(query.data()).toBe('early data') + }) + + it('reads optimistic options before moving the subscription on the next tick', () => { + const key = signal('old') + const oldQueryKey = ['early-options-read', 'old'] as const + const newQueryKey = ['early-options-read', 'new'] as const + const query = TestBed.runInInjectionContext(() => + injectQuery(() => ({ + queryKey: ['early-options-read', key()], + queryFn: () => 'unused', + enabled: false, + })), + ) + + expect(query.status()).toBe('pending') + TestBed.tick() + const oldQuery = queryCache.find({ queryKey: oldQueryKey })! + expect(oldQuery.getObserversCount()).toBe(1) + + key.set('new') + + expect(query.status()).toBe('pending') + // An existing observer stays attached until the configuration effect can + // move it atomically. + expect(oldQuery.getObserversCount()).toBe(1) + expect(queryCache.find({ queryKey: newQueryKey })).toBeDefined() + + queryClient.setQueryData(newQueryKey, 'early data') + const newQuery = queryCache.find({ queryKey: newQueryKey })! + expect(newQuery.getObserversCount()).toBe(0) + TestBed.tick() + + expect(oldQuery.getObserversCount()).toBe(0) + expect(newQuery.getObserversCount()).toBe(1) + expect(query.data()).toBe('early data') + }) + + describe('injection context', () => { + it('throws NG0203 with descriptive error outside injection context', () => { + expect(() => { + injectQuery(() => ({ + queryKey: ['injectionContextError'], + queryFn: () => sleep(0).then(() => 'Some data'), + })) + }).toThrow(/NG0203(.*?)injectQuery/) + }) + + it('should complete queries before whenStable() resolves', async () => { + const app = TestBed.inject(ApplicationRef) + + @Component({ + selector: 'app-test', + template: '', + changeDetection: ChangeDetectionStrategy.OnPush, + }) + class TestComponent { + query = injectQuery(() => ({ + queryKey: ['pendingTasksTest'], + queryFn: async () => { + await sleep(50) + return 'test data' + }, + })) + } + + const fixture = TestBed.createComponent(TestComponent) + fixture.detectChanges() + const query = fixture.componentInstance.query + + expect(query.status()).toBe('pending') + expect(query.data()).toBeUndefined() + + await vi.advanceTimersByTimeAsync(60) + await app.whenStable() + + expect(query.status()).toBe('success') + expect(query.data()).toBe('test data') + }) + + it('should complete HttpClient-based queries before whenStable() resolves', async () => { + TestBed.resetTestingModule() + TestBed.configureTestingModule({ + providers: [ + provideAngularQueryChangeDetection(), + provideTanStackQuery(() => queryClient), + provideHttpClient(), + provideHttpClientTesting(), + ], + }) + + const app = TestBed.inject(ApplicationRef) + const httpClient = TestBed.inject(HttpClient) + const httpTestingController = TestBed.inject(HttpTestingController) + + @Component({ + selector: 'app-test', + template: '', + changeDetection: ChangeDetectionStrategy.OnPush, + }) + class TestComponent { + httpClient = httpClient + query = injectQuery(() => ({ + queryKey: ['httpClientTest'], + queryFn: () => + lastValueFrom( + this.httpClient.get<{ message: string }>('/api/test'), + ), + })) + } + + const fixture = TestBed.createComponent(TestComponent) + fixture.detectChanges() + const query = fixture.componentInstance.query + + setTimeout(() => { + const req = httpTestingController.expectOne('/api/test') + req.flush({ message: 'http test data' }) + }, 10) + + expect(query.status()).toBe('pending') + + // Advance timers and wait for Angular to be "stable" + await vi.advanceTimersByTimeAsync(20) + await app.whenStable() + + // Query should be complete after whenStable() thanks to PendingTasks integration + expect(query.status()).toBe('success') + expect(query.data()).toStrictEqual({ message: 'http test data' }) + + httpTestingController.verify() + }) + + it('should handle synchronous queryFn with staleTime', async () => { + TestBed.resetTestingModule() + TestBed.configureTestingModule({ + providers: [ + provideAngularQueryChangeDetection(), + provideTanStackQuery(() => queryClient), + ], + }) + + const app = TestBed.inject(ApplicationRef) + + @Component({ + selector: 'app-test', + template: '', + changeDetection: ChangeDetectionStrategy.OnPush, + }) + class TestComponent { + callCount = 0 + query = injectQuery(() => ({ + queryKey: ['sync-stale'], + staleTime: 1000, + queryFn: () => { + this.callCount++ + return `sync-data-${this.callCount}` + }, + })) + } + + const fixture = TestBed.createComponent(TestComponent) + fixture.detectChanges() + const component = fixture.componentInstance + const query = component.query + + const stablePromise = app.whenStable() + await vi.advanceTimersToNextTimerAsync() + await stablePromise + + expect(query.status()).toBe('success') + expect(query.data()).toBe('sync-data-1') + expect(component.callCount).toBe(1) + + await query.refetch() + await Promise.resolve() + await vi.runAllTimersAsync() + await app.whenStable() + + expect(query.status()).toBe('success') + expect(query.data()).toBe('sync-data-2') + expect(component.callCount).toBe(2) + }) + + it('should handle enabled/disabled transitions with synchronous queryFn', async () => { + TestBed.resetTestingModule() + TestBed.configureTestingModule({ + providers: [ + provideAngularQueryChangeDetection(), + provideTanStackQuery(() => queryClient), + ], + }) + + const app = TestBed.inject(ApplicationRef) + const enabledSignal = signal(false) + + @Component({ + selector: 'app-test', + template: '', + changeDetection: ChangeDetectionStrategy.OnPush, + }) + class TestComponent { + enabledSignal = enabledSignal + callCount = 0 + query = injectQuery(() => ({ + queryKey: ['sync-enabled'], + enabled: this.enabledSignal(), + queryFn: () => { + this.callCount++ + return `sync-data-${this.callCount}` + }, + })) + } + + const fixture = TestBed.createComponent(TestComponent) + fixture.detectChanges() + const component = fixture.componentInstance + const query = component.query + + await vi.advanceTimersByTimeAsync(0) + await app.whenStable() + expect(query.status()).toBe('pending') + expect(query.data()).toBeUndefined() + expect(component.callCount).toBe(0) + + enabledSignal.set(true) + fixture.detectChanges() + + const stablePromise = app.whenStable() + await vi.advanceTimersToNextTimerAsync() + await stablePromise + + expect(query.status()).toBe('success') + expect(query.data()).toBe('sync-data-1') + expect(component.callCount).toBe(1) + }) + + it('should handle query invalidation with synchronous data', async () => { + vi.useRealTimers() + TestBed.resetTestingModule() + TestBed.configureTestingModule({ + providers: [ + provideAngularQueryChangeDetection(), + provideTanStackQuery(() => queryClient), + ], + }) + + const app = TestBed.inject(ApplicationRef) + const testKey = ['sync-invalidate'] + + @Component({ + selector: 'app-test', + template: '', + changeDetection: ChangeDetectionStrategy.OnPush, + }) + class TestComponent { + callCount = 0 + query = injectQuery(() => ({ + queryKey: testKey, + queryFn: () => { + this.callCount++ + return `sync-data-${this.callCount}` + }, + })) + } + + const fixture = TestBed.createComponent(TestComponent) + fixture.detectChanges() + const component = fixture.componentInstance + const query = component.query + + await app.whenStable() + + expect(query.status()).toBe('success') + expect(query.data()).toBe('sync-data-1') + expect(component.callCount).toBe(1) + + await queryClient.invalidateQueries({ queryKey: testKey }) + await app.whenStable() + expect(query.status()).toBe('success') + expect(query.data()).toBe('sync-data-2') + expect(component.callCount).toBe(2) + }) + + it('should keep the application unstable while invalidation is pending', async () => { + vi.useRealTimers() + let resolveRefetch!: (value: string) => void + let callCount = 0 + + const query = TestBed.runInInjectionContext(() => + injectQuery(() => ({ + queryKey: ['pending-invalidation'], + queryFn: () => { + callCount++ + + if (callCount === 1) { + return 'data-1' + } + + return new Promise((resolve) => { + resolveRefetch = resolve + }) + }, + })), + ) + + const app = TestBed.inject(ApplicationRef) + await app.whenStable() + + const invalidation = queryClient.invalidateQueries({ + queryKey: ['pending-invalidation'], + }) + const stable = app.whenStable() + let stableResolved = false + void stable.then(() => { + stableResolved = true + }) + + expect(stableResolved).toBe(false) + + resolveRefetch('data-2') + + await invalidation + await stable + + expect(query.data()).toBe('data-2') + expect(query.fetchStatus()).toBe('idle') + }) + }) +}) diff --git a/packages/angular-query-experimental/src/__tests__/mutation-options.test-d.ts b/packages/angular-query/src/__tests__/mutation-options.test-d.ts similarity index 98% rename from packages/angular-query-experimental/src/__tests__/mutation-options.test-d.ts rename to packages/angular-query/src/__tests__/mutation-options.test-d.ts index 612f109b828..9b538b8a80f 100644 --- a/packages/angular-query-experimental/src/__tests__/mutation-options.test-d.ts +++ b/packages/angular-query/src/__tests__/mutation-options.test-d.ts @@ -176,7 +176,7 @@ describe('mutationOptions', () => { it('should infer types when used with injectIsMutating', () => { const key = createKey() - const isMutating = injectIsMutating( + const isMutating = injectIsMutating(() => mutationOptions({ mutationKey: key, mutationFn: () => Promise.resolve(5), @@ -184,8 +184,8 @@ describe('mutationOptions', () => { ) expectTypeOf(isMutating()).toEqualTypeOf() - injectIsMutating( - // @ts-expect-error filters should have mutationKey + // @ts-expect-error filters should have mutationKey + injectIsMutating(() => mutationOptions({ mutationFn: () => Promise.resolve(5), }), diff --git a/packages/angular-query-experimental/src/__tests__/mutation-options.test.ts b/packages/angular-query/src/__tests__/mutation-options.test.ts similarity index 84% rename from packages/angular-query-experimental/src/__tests__/mutation-options.test.ts rename to packages/angular-query/src/__tests__/mutation-options.test.ts index efebbc12097..42e8ba1ebca 100644 --- a/packages/angular-query-experimental/src/__tests__/mutation-options.test.ts +++ b/packages/angular-query/src/__tests__/mutation-options.test.ts @@ -1,5 +1,5 @@ +import { Component } from '@angular/core' import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest' -import { provideZonelessChangeDetection } from '@angular/core' import { TestBed } from '@angular/core/testing' import { QueryClient } from '@tanstack/query-core' import { createKey, sleep } from '@tanstack/query-test-utils' @@ -10,6 +10,7 @@ import { mutationOptions, provideTanStackQuery, } from '..' +import { provideAngularQueryChangeDetection } from './test-utils' import type { CreateMutationOptions } from '../types' describe('mutationOptions', () => { @@ -20,8 +21,8 @@ describe('mutationOptions', () => { queryClient = new QueryClient() TestBed.configureTestingModule({ providers: [ - provideZonelessChangeDetection(), - provideTanStackQuery(queryClient), + provideAngularQueryChangeDetection(), + provideTanStackQuery(() => queryClient), ], }) }) @@ -55,15 +56,19 @@ describe('mutationOptions', () => { mutationFn: () => sleep(50).then(() => 'data'), }) - const [mutation, isMutating] = TestBed.runInInjectionContext(() => [ - injectMutation(() => mutationOpts), - injectIsMutating(), - ]) + @Component({ template: '' }) + class Host { + readonly mutation = injectMutation(() => mutationOpts) + readonly isMutating = injectIsMutating() + } + const fixture = TestBed.createComponent(Host) + fixture.detectChanges() + const { mutation, isMutating } = fixture.componentInstance expect(isMutating()).toBe(0) mutation.mutate() - expect(isMutating()).toBe(0) + expect(isMutating()).toBe(1) await vi.advanceTimersByTimeAsync(0) expect(isMutating()).toBe(1) await vi.advanceTimersByTimeAsync(51) @@ -75,15 +80,19 @@ describe('mutationOptions', () => { mutationFn: () => sleep(50).then(() => 'data'), }) - const [mutation, isMutating] = TestBed.runInInjectionContext(() => [ - injectMutation(() => mutationOpts), - injectIsMutating(), - ]) + @Component({ template: '' }) + class Host { + readonly mutation = injectMutation(() => mutationOpts) + readonly isMutating = injectIsMutating() + } + const fixture = TestBed.createComponent(Host) + fixture.detectChanges() + const { mutation, isMutating } = fixture.componentInstance expect(isMutating()).toBe(0) mutation.mutate() - expect(isMutating()).toBe(0) + expect(isMutating()).toBe(1) await vi.advanceTimersByTimeAsync(0) expect(isMutating()).toBe(1) await vi.advanceTimersByTimeAsync(51) @@ -100,19 +109,21 @@ describe('mutationOptions', () => { mutationFn: () => sleep(50).then(() => 'data2'), }) - const [mutation1, mutation2, isMutating] = TestBed.runInInjectionContext( - () => [ - injectMutation(() => mutationOpts1), - injectMutation(() => mutationOpts2), - injectIsMutating(), - ], - ) + @Component({ template: '' }) + class Host { + readonly mutation1 = injectMutation(() => mutationOpts1) + readonly mutation2 = injectMutation(() => mutationOpts2) + readonly isMutating = injectIsMutating() + } + const fixture = TestBed.createComponent(Host) + fixture.detectChanges() + const { mutation1, mutation2, isMutating } = fixture.componentInstance expect(isMutating()).toBe(0) mutation1.mutate() mutation2.mutate() - expect(isMutating()).toBe(0) + expect(isMutating()).toBe(2) await vi.advanceTimersByTimeAsync(0) expect(isMutating()).toBe(2) await vi.advanceTimersByTimeAsync(51) @@ -129,19 +140,23 @@ describe('mutationOptions', () => { mutationFn: () => sleep(50).then(() => 'data2'), }) - const [mutation1, mutation2, isMutating] = TestBed.runInInjectionContext( - () => [ - injectMutation(() => mutationOpts1), - injectMutation(() => mutationOpts2), - injectIsMutating({ mutationKey: mutationOpts1.mutationKey }), - ], - ) + @Component({ template: '' }) + class Host { + readonly mutation1 = injectMutation(() => mutationOpts1) + readonly mutation2 = injectMutation(() => mutationOpts2) + readonly isMutating = injectIsMutating(() => ({ + mutationKey: mutationOpts1.mutationKey, + })) + } + const fixture = TestBed.createComponent(Host) + fixture.detectChanges() + const { mutation1, mutation2, isMutating } = fixture.componentInstance expect(isMutating()).toBe(0) mutation1.mutate() mutation2.mutate() - expect(isMutating()).toBe(0) + expect(isMutating()).toBe(1) await vi.advanceTimersByTimeAsync(0) expect(isMutating()).toBe(1) await vi.advanceTimersByTimeAsync(51) diff --git a/packages/angular-query/src/__tests__/pending-tasks-ssr.test.ts b/packages/angular-query/src/__tests__/pending-tasks-ssr.test.ts new file mode 100644 index 00000000000..30db5a70f09 --- /dev/null +++ b/packages/angular-query/src/__tests__/pending-tasks-ssr.test.ts @@ -0,0 +1,128 @@ +import { + ChangeDetectionStrategy, + Component, + destroyPlatform, + provideZonelessChangeDetection, +} from '@angular/core' +import { bootstrapApplication } from '@angular/platform-browser' +import { + provideServerRendering, + renderApplication, +} from '@angular/platform-server' +import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest' +import { sleep } from '@tanstack/query-test-utils' +import { + QueryClient, + injectQueries, + injectQuery, + provideTanStackQuery, +} from '..' + +describe('PendingTasks SSR', () => { + beforeEach(() => { + destroyPlatform() + vi.useFakeTimers() + }) + + afterEach(() => { + vi.useRealTimers() + }) + + @Component({ + selector: 'app-root', + template: '{{ query.data() }}', + changeDetection: ChangeDetectionStrategy.OnPush, + }) + class TestInjectQueryComponent { + query = injectQuery(() => ({ + queryKey: ['ssr-test'], + queryFn: async () => { + await sleep(1000) + return 'data-fetched-on-ssr' + }, + })) + } + + @Component({ + selector: 'app-queries-root', + template: '{{ queries()[0].data() }}', + changeDetection: ChangeDetectionStrategy.OnPush, + }) + class TestInjectQueriesComponent { + queries = injectQueries(() => ({ + queries: [ + { + queryKey: ['ssr-queries-test'], + queryFn: async () => { + await sleep(1000) + return 'queries-data-fetched-on-ssr' + }, + }, + ], + })) + } + + it('should wait for stability of injectQuery', async () => { + const htmlPromise = renderApplication( + (context) => + bootstrapApplication( + TestInjectQueryComponent, + { + providers: [ + provideServerRendering(), + provideZonelessChangeDetection(), + provideTanStackQuery( + () => + new QueryClient({ + defaultOptions: { queries: { retry: false } }, + }), + ), + ], + }, + context, + ), + { + url: '/', + document: + '', + }, + ) + + await vi.runAllTimersAsync() + const html = await htmlPromise + + expect(html).toContain('data-fetched-on-ssr') + }) + + it('should wait for stability of injectQueries', async () => { + const htmlPromise = renderApplication( + (context) => + bootstrapApplication( + TestInjectQueriesComponent, + { + providers: [ + provideServerRendering(), + provideZonelessChangeDetection(), + provideTanStackQuery( + () => + new QueryClient({ + defaultOptions: { queries: { retry: false } }, + }), + ), + ], + }, + context, + ), + { + url: '/', + document: + '', + }, + ) + + await vi.runAllTimersAsync() + const html = await htmlPromise + + expect(html).toContain('queries-data-fetched-on-ssr') + }) +}) diff --git a/packages/angular-query/src/__tests__/pending-tasks-ssr.zoneful.test.ts b/packages/angular-query/src/__tests__/pending-tasks-ssr.zoneful.test.ts new file mode 100644 index 00000000000..596cc0b58cb --- /dev/null +++ b/packages/angular-query/src/__tests__/pending-tasks-ssr.zoneful.test.ts @@ -0,0 +1,159 @@ +import { + ChangeDetectionStrategy, + Component, + destroyPlatform, + provideZoneChangeDetection, + signal, +} from '@angular/core' +import { bootstrapApplication } from '@angular/platform-browser' +import { + provideServerRendering, + renderApplication, +} from '@angular/platform-server' +import { afterEach, describe, expect, it } from 'vitest' +import { + QueryClient, + injectQueries, + injectQuery, + provideTanStackQuery, +} from '..' +import type { ApplicationRef, Type } from '@angular/core' + +const fetchData = () => + new Promise((resolve) => { + setTimeout(() => resolve('fetched-on-server'), 20) + }) + +@Component({ + selector: 'app-root', + template: '{{ query.data() }}', + changeDetection: ChangeDetectionStrategy.OnPush, +}) +class CachedQueryComponent { + readonly query = injectQuery(() => ({ + queryKey: ['cached'], + initialData: 'cached-on-server', + queryFn: fetchData, + staleTime: 30_000, + gcTime: 24 * 60 * 60 * 1000, + })) +} + +@Component({ + selector: 'app-root', + template: '{{ query.data() }}', + changeDetection: ChangeDetectionStrategy.OnPush, +}) +class FetchingQueryComponent { + readonly query = injectQuery(() => ({ + queryKey: ['fetching'], + queryFn: fetchData, + staleTime: 30_000, + gcTime: 24 * 60 * 60 * 1000, + })) +} + +@Component({ + selector: 'app-root', + template: '{{ queries()[0].data() }}', + changeDetection: ChangeDetectionStrategy.OnPush, +}) +class FetchingQueriesComponent { + readonly queries = injectQueries(() => ({ + queries: [ + { + queryKey: ['parallel'], + queryFn: fetchData, + staleTime: 30_000, + gcTime: 24 * 60 * 60 * 1000, + }, + ], + })) +} + +@Component({ + selector: 'app-root', + template: '{{ query.data() }}', + changeDetection: ChangeDetectionStrategy.OnPush, +}) +class ReactiveQueryComponent { + readonly key = signal('first') + readonly query = injectQuery(() => ({ + queryKey: [this.key()], + initialData: this.key(), + queryFn: fetchData, + staleTime: 30_000, + gcTime: 24 * 60 * 60 * 1000, + })) + + ngOnInit() { + setTimeout(() => this.key.set('second'), 20) + } +} + +async function render(component: Type) { + const client = new QueryClient() + let app: ApplicationRef | undefined + let deadline: ReturnType | undefined + try { + return await Promise.race([ + renderApplication( + async (context) => { + app = await bootstrapApplication( + component, + { + providers: [ + provideServerRendering(), + provideZoneChangeDetection(), + provideTanStackQuery(() => client), + ], + }, + context, + ) + return app + }, + { + url: '/', + document: '', + }, + ), + new Promise((_, reject) => { + deadline = setTimeout( + () => + reject(new Error('SSR did not become stable within one second')), + 1000, + ) + }), + ]) + } finally { + clearTimeout(deadline) + if (app && !app.destroyed) app.destroy() + client.clear() + } +} + +describe('SSR with real Zone.js timers', () => { + afterEach(() => destroyPlatform()) + + it('serializes cached data without waiting for stale or GC timers', async () => { + await expect(render(CachedQueryComponent)).resolves.toContain( + 'cached-on-server', + ) + }) + + it('serializes reactive query changes without waiting for background timers', async () => { + await expect(render(ReactiveQueryComponent)).resolves.toContain('second') + }) + + it('waits for a query fetch, but not its background timers', async () => { + await expect(render(FetchingQueryComponent)).resolves.toContain( + 'fetched-on-server', + ) + }) + + it('waits for parallel query fetches, but not their background timers', async () => { + await expect(render(FetchingQueriesComponent)).resolves.toContain( + 'fetched-on-server', + ) + }) +}) diff --git a/packages/angular-query-experimental/src/__tests__/pending-tasks.test.ts b/packages/angular-query/src/__tests__/pending-tasks.test.ts similarity index 61% rename from packages/angular-query-experimental/src/__tests__/pending-tasks.test.ts rename to packages/angular-query/src/__tests__/pending-tasks.test.ts index 8e6e6c0a15d..eb9af444fc3 100644 --- a/packages/angular-query-experimental/src/__tests__/pending-tasks.test.ts +++ b/packages/angular-query/src/__tests__/pending-tasks.test.ts @@ -1,7 +1,7 @@ import { ApplicationRef, + ChangeDetectionStrategy, Component, - provideZonelessChangeDetection, } from '@angular/core' import { TestBed } from '@angular/core/testing' import { HttpClient, provideHttpClient } from '@angular/common/http' @@ -10,15 +10,16 @@ import { provideHttpClientTesting, } from '@angular/common/http/testing' import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest' -import { createKey, sleep } from '@tanstack/query-test-utils' +import { sleep } from '@tanstack/query-test-utils' import { lastValueFrom } from 'rxjs' import { QueryClient, injectMutation, injectQuery, onlineManager, - provideTanStackQuery, + skipToken, } from '..' +import { flushQueryUpdates, setupTanStackQueryTestBed } from './test-utils' describe('PendingTasks Integration', () => { let queryClient: QueryClient @@ -37,12 +38,7 @@ describe('PendingTasks Integration', () => { }, }) - TestBed.configureTestingModule({ - providers: [ - provideZonelessChangeDetection(), - provideTanStackQuery(queryClient), - ], - }) + setupTanStackQueryTestBed(queryClient) }) afterEach(() => { @@ -51,17 +47,59 @@ describe('PendingTasks Integration', () => { vi.useRealTimers() }) + it.each([false, true])( + 'keeps all mutation invocations pending (reset=%s)', + async (reset) => { + vi.useRealTimers() + const resolve = new Map void>() + const mutation = TestBed.runInInjectionContext(() => + injectMutation(() => ({ + mutationFn: (id: string) => + new Promise((done) => resolve.set(id, done)), + })), + ) + const first = mutation.mutateAsync('first') + const second = mutation.mutateAsync('second') + await Promise.resolve() + // oxlint-disable-next-line vitest-js/no-conditional-in-test -- The parameter selects setup/actions; every case runs the assertions. + if (reset) mutation.reset() + let stable = false + const stability = TestBed.inject(ApplicationRef) + .whenStable() + .then(() => { + stable = true + }) + resolve.get('second')!('second') + await second + await Promise.resolve() + expect(stable).toBe(false) + expect(queryClient.isMutating()).toBe(1) + resolve.get('first')!('first') + await first + await stability + expect(stable).toBe(true) + }, + ) + describe('Synchronous Resolution', () => { it('should handle synchronous queryFn with whenStable()', async () => { const app = TestBed.inject(ApplicationRef) - const key = createKey() - const query = TestBed.runInInjectionContext(() => - injectQuery(() => ({ - queryKey: key, - queryFn: () => 'instant-data', // Resolves synchronously - })), - ) + @Component({ + selector: 'app-test', + template: '', + changeDetection: ChangeDetectionStrategy.OnPush, + }) + class TestComponent { + query = injectQuery(() => ({ + queryKey: ['sync'], + queryFn: () => 'instant-data', + })) + } + + const fixture = TestBed.createComponent(TestComponent) + fixture.autoDetectChanges() + const query = fixture.componentInstance.query // Should start as pending even with synchronous data expect(query.status()).toBe('pending') @@ -73,7 +111,6 @@ describe('PendingTasks Integration', () => { await vi.advanceTimersByTimeAsync(10) await stablePromise - // Should work correctly even though queryFn was synchronous expect(query.status()).toBe('success') expect(query.data()).toBe('instant-data') }) @@ -81,13 +118,12 @@ describe('PendingTasks Integration', () => { it('should handle synchronous error with whenStable()', async () => { const app = TestBed.inject(ApplicationRef) - const key = createKey() const query = TestBed.runInInjectionContext(() => injectQuery(() => ({ - queryKey: key, + queryKey: ['sync-error'], queryFn: () => { throw new Error('instant-error') - }, // Throws synchronously + }, })), ) @@ -148,11 +184,95 @@ describe('PendingTasks Integration', () => { expect(mutation.isError()).toBe(true) expect(mutation.error()).toStrictEqual(new Error('sync-mutation-error')) }) + + it('should keep whenStable pending after mutate starts', async () => { + const app = TestBed.inject(ApplicationRef) + + const mutation = TestBed.runInInjectionContext(() => + injectMutation(() => ({ + mutationFn: async () => { + await sleep(20) + return 'done' + }, + })), + ) + + mutation.mutate() + + let stableResolved = false + const stablePromise = app.whenStable().then(() => { + stableResolved = true + }) + + await Promise.resolve() + expect(stableResolved).toBe(false) + + await vi.advanceTimersByTimeAsync(21) + await vi.advanceTimersByTimeAsync(0) + await stablePromise + expect(mutation.isSuccess()).toBe(true) + expect(mutation.data()).toBe('done') + }) }) describe('Race Conditions', () => { + it('should not register a pending task while query is disabled by enabled', async () => { + const queryFn = vi.fn<() => Promise>(async () => { + await sleep(10) + return 'disabled-data' + }) + + @Component({ + template: '', + changeDetection: ChangeDetectionStrategy.OnPush, + }) + class TestComponent { + query = injectQuery(() => ({ + queryKey: ['disabled-enabled'], + queryFn, + enabled: false, + })) + } + + const fixture = TestBed.createComponent(TestComponent) + fixture.detectChanges() + const query = fixture.componentInstance.query + + await Promise.resolve() + + expect(query.status()).toBe('pending') + expect(query.fetchStatus()).toBe('idle') + expect(query.isPending()).toBe(true) + expect(queryFn).not.toHaveBeenCalled() + expect(fixture.isStable()).toBe(true) + }) + + it('should not register a pending task while query is disabled by skipToken', async () => { + @Component({ + template: '', + changeDetection: ChangeDetectionStrategy.OnPush, + }) + class TestComponent { + query = injectQuery(() => ({ + queryKey: ['disabled-skip-token'], + queryFn: skipToken, + })) + } + + const fixture = TestBed.createComponent(TestComponent) + fixture.detectChanges() + const query = fixture.componentInstance.query + + await Promise.resolve() + + expect(query.status()).toBe('pending') + expect(query.fetchStatus()).toBe('idle') + expect(query.isPending()).toBe(true) + expect(query.isEnabled()).toBe(false) + expect(fixture.isStable()).toBe(true) + }) + it('should handle query that completes during initial subscription', async () => { - const key = createKey() const app = TestBed.inject(ApplicationRef) let resolveQuery: (value: string) => void @@ -162,7 +282,7 @@ describe('PendingTasks Integration', () => { const query = TestBed.runInInjectionContext(() => injectQuery(() => ({ - queryKey: key, + queryKey: ['race-condition'], queryFn: () => queryPromise, })), ) @@ -180,19 +300,27 @@ describe('PendingTasks Integration', () => { it('should handle rapid refetches without task leaks', async () => { const app = TestBed.inject(ApplicationRef) - let callCount = 0 - const key = createKey() - const query = TestBed.runInInjectionContext(() => - injectQuery(() => ({ - queryKey: key, + @Component({ + selector: 'app-test', + template: '', + changeDetection: ChangeDetectionStrategy.OnPush, + }) + class TestComponent { + callCount = 0 + query = injectQuery(() => ({ + queryKey: ['rapid-refetch'], queryFn: async () => { - callCount++ + this.callCount++ await sleep(10) - return `data-${callCount}` + return `data-${this.callCount}` }, - })), - ) + })) + } + + const fixture = TestBed.createComponent(TestComponent) + fixture.autoDetectChanges() + const query = fixture.componentInstance.query // Trigger multiple rapid refetches query.refetch() @@ -206,14 +334,61 @@ describe('PendingTasks Integration', () => { expect(query.data()).toMatch(/^data-\d+$/) }) + it('should keep PendingTasks active when query starts offline (never reaches fetching)', async () => { + const app = TestBed.inject(ApplicationRef) + + onlineManager.setOnline(false) + + const query = TestBed.runInInjectionContext(() => + injectQuery(() => ({ + queryKey: ['start-offline'], + networkMode: 'online', // Default: won't fetch while offline + queryFn: async () => { + await sleep(10) + return 'online-data' + }, + })), + ) + + // Allow query to initialize + await Promise.resolve() + await flushQueryUpdates() + + // Query should initialize directly to 'paused' (never goes through 'fetching') + expect(query.status()).toBe('pending') + expect(query.fetchStatus()).toBe('paused') + + const stablePromise = app.whenStable() + let stableResolved = false + void stablePromise.then(() => { + stableResolved = true + }) + + await Promise.resolve() + + // PendingTasks should block stability even though we never hit 'fetching' + expect(stableResolved).toBe(false) + + // Bring the app back online so the query can fetch + onlineManager.setOnline(true) + + await vi.advanceTimersByTimeAsync(20) + await Promise.resolve() + + await stablePromise + + expect(stableResolved).toBe(true) + expect(query.status()).toBe('success') + expect(query.data()).toBe('online-data') + }) + it('should keep PendingTasks active while query retry is paused offline', async () => { const app = TestBed.inject(ApplicationRef) let attempt = 0 - const key = createKey() const query = TestBed.runInInjectionContext(() => injectQuery(() => ({ - queryKey: key, + queryKey: ['paused-offline'], retry: 1, retryDelay: 50, // Longer delay to ensure we can go offline before retry queryFn: async () => { @@ -228,7 +403,7 @@ describe('PendingTasks Integration', () => { ) // Allow the initial attempt to start and fail - await vi.advanceTimersByTimeAsync(0) + await flushQueryUpdates() await Promise.resolve() // Wait for the first attempt to complete and start retry delay @@ -271,82 +446,97 @@ describe('PendingTasks Integration', () => { }) describe('Component Destruction', () => { - @Component({ - template: '', - }) - class TestComponent { - query = injectQuery(() => ({ - queryKey: ['component-query'], - queryFn: () => sleep(100).then(() => 'component-data'), - })) - - mutation = injectMutation(() => ({ - mutationFn: (data: string) => - sleep(100).then(() => `processed: ${data}`), - })) - } - - it('should cleanup pending tasks when component with active query is destroyed', async () => { - const app = TestBed.inject(ApplicationRef) - const fixture = TestBed.createComponent(TestComponent) + it('becomes stable after destruction before an unresolved query completes', async () => { + vi.useRealTimers() + let resolveQuery!: (value: string) => void + const queryPromise = new Promise((resolve) => { + resolveQuery = resolve + }) + + @Component({ template: '' }) + class UnresolvedQueryComponent { + query = injectQuery(() => ({ + queryKey: ['unresolved-component-query'], + queryFn: () => queryPromise, + })) + } - // Start the query - expect(fixture.componentInstance.query.status()).toBe('pending') + const fixture = TestBed.createComponent(UnresolvedQueryComponent) + fixture.detectChanges() + expect(fixture.isStable()).toBe(false) - // Destroy component while query is running fixture.destroy() + await fixture.whenStable() + expect(fixture.isStable()).toBe(true) - // Angular should become stable even though component was destroyed - const stablePromise = app.whenStable() - await vi.advanceTimersByTimeAsync(150) - await expect(stablePromise).resolves.toBeUndefined() + resolveQuery('eventual data') + await Promise.resolve() }) - it('should cleanup pending tasks when component with active mutation is destroyed', async () => { - const app = TestBed.inject(ApplicationRef) - const fixture = TestBed.createComponent(TestComponent) + it('becomes stable after destruction before an unresolved mutation completes', async () => { + vi.useRealTimers() + let resolveMutation!: (value: string) => void + const mutationPromise = new Promise((resolve) => { + resolveMutation = resolve + }) + + @Component({ template: '' }) + class UnresolvedMutationComponent { + mutation = injectMutation(() => ({ + mutationFn: () => mutationPromise, + })) + } - fixture.componentInstance.mutation.mutate('test') + const fixture = TestBed.createComponent(UnresolvedMutationComponent) + fixture.detectChanges() + fixture.componentInstance.mutation.mutate() + expect(fixture.isStable()).toBe(false) - // Destroy component while mutation is running fixture.destroy() + await fixture.whenStable() + expect(fixture.isStable()).toBe(true) - // Angular should become stable even though component was destroyed - const stablePromise = app.whenStable() - await vi.advanceTimersByTimeAsync(150) - await expect(stablePromise).resolves.toBeUndefined() + resolveMutation('eventual data') + await Promise.resolve() }) }) describe('Concurrent Operations', () => { it('should handle multiple queries running simultaneously', async () => { - const key1 = createKey() - const key2 = createKey() - const key3 = createKey() const app = TestBed.inject(ApplicationRef) - const query1 = TestBed.runInInjectionContext(() => - injectQuery(() => ({ - queryKey: key1, - queryFn: () => sleep(30).then(() => 'data-1'), - })), - ) + @Component({ + selector: 'app-test', + template: '', + changeDetection: ChangeDetectionStrategy.OnPush, + }) + class TestComponent { + query1 = injectQuery(() => ({ + queryKey: ['concurrent-1'], + queryFn: async () => { + await sleep(30) + return 'data-1' + }, + })) - const query2 = TestBed.runInInjectionContext(() => - injectQuery(() => ({ - queryKey: key2, - queryFn: () => sleep(50).then(() => 'data-2'), - })), - ) + query2 = injectQuery(() => ({ + queryKey: ['concurrent-2'], + queryFn: async () => { + await sleep(50) + return 'data-2' + }, + })) - const query3 = TestBed.runInInjectionContext(() => - injectQuery(() => ({ - queryKey: key3, - queryFn: () => 'instant-data', // Synchronous - })), - ) + query3 = injectQuery(() => ({ + queryKey: ['concurrent-3'], + queryFn: () => 'instant-data', + })) + } + + const fixture = TestBed.createComponent(TestComponent) + fixture.autoDetectChanges() + const { query1, query2, query3 } = fixture.componentInstance - // All queries should start expect(query1.status()).toBe('pending') expect(query2.status()).toBe('pending') expect(query3.status()).toBe('pending') @@ -355,7 +545,6 @@ describe('PendingTasks Integration', () => { await vi.advanceTimersByTimeAsync(60) await stablePromise - // All queries should be complete expect(query1.status()).toBe('success') expect(query1.data()).toBe('data-1') expect(query2.status()).toBe('success') @@ -369,15 +558,19 @@ describe('PendingTasks Integration', () => { const mutation1 = TestBed.runInInjectionContext(() => injectMutation(() => ({ - mutationFn: (data: string) => - sleep(30).then(() => `processed-1: ${data}`), + mutationFn: async (data: string) => { + await sleep(30) + return `processed-1: ${data}` + }, })), ) const mutation2 = TestBed.runInInjectionContext(() => injectMutation(() => ({ - mutationFn: (data: string) => - sleep(50).then(() => `processed-2: ${data}`), + mutationFn: async (data: string) => { + await sleep(50) + return `processed-2: ${data}` + }, })), ) @@ -390,7 +583,6 @@ describe('PendingTasks Integration', () => { })), ) - // Start all mutations mutation1.mutate('test1') mutation2.mutate('test2') mutation3.mutate('test3') @@ -400,7 +592,6 @@ describe('PendingTasks Integration', () => { await vi.advanceTimersByTimeAsync(60) await stablePromise - // All mutations should be complete expect(mutation1.isSuccess()).toBe(true) expect(mutation1.data()).toBe('processed-1: test1') expect(mutation2.isSuccess()).toBe(true) @@ -412,29 +603,31 @@ describe('PendingTasks Integration', () => { it('should handle mixed queries and mutations', async () => { const app = TestBed.inject(ApplicationRef) - const key = createKey() const query = TestBed.runInInjectionContext(() => injectQuery(() => ({ - queryKey: key, - queryFn: () => sleep(40).then(() => 'query-data'), + queryKey: ['mixed-query'], + queryFn: async () => { + await sleep(40) + return 'query-data' + }, })), ) const mutation = TestBed.runInInjectionContext(() => injectMutation(() => ({ - mutationFn: (data: string) => - sleep(60).then(() => `mutation: ${data}`), + mutationFn: async (data: string) => { + await sleep(60) + return `mutation: ${data}` + }, })), ) - // Start both operations mutation.mutate('test') const stablePromise = app.whenStable() await vi.advanceTimersByTimeAsync(70) await stablePromise - // Both should be complete expect(query.status()).toBe('success') expect(query.data()).toBe('query-data') expect(mutation.isSuccess()).toBe(true) @@ -444,7 +637,7 @@ describe('PendingTasks Integration', () => { describe('HttpClient Integration', () => { beforeEach(() => { - TestBed.configureTestingModule({ + setupTanStackQueryTestBed(queryClient, { providers: [provideHttpClient(), provideHttpClientTesting()], }) }) @@ -454,12 +647,9 @@ describe('PendingTasks Integration', () => { const httpClient = TestBed.inject(HttpClient) const httpTestingController = TestBed.inject(HttpTestingController) - const key1 = createKey() - const key2 = createKey() - const query1 = TestBed.runInInjectionContext(() => injectQuery(() => ({ - queryKey: key1, + queryKey: ['http-1'], queryFn: () => lastValueFrom(httpClient.get<{ id: number }>('/api/1')), })), @@ -467,13 +657,12 @@ describe('PendingTasks Integration', () => { const query2 = TestBed.runInInjectionContext(() => injectQuery(() => ({ - queryKey: key2, + queryKey: ['http-2'], queryFn: () => lastValueFrom(httpClient.get<{ id: number }>('/api/2')), })), ) - // Schedule HTTP responses setTimeout(() => { const req1 = httpTestingController.expectOne('/api/1') req1.flush({ id: 1 }) @@ -498,10 +687,9 @@ describe('PendingTasks Integration', () => { const httpClient = TestBed.inject(HttpClient) const httpTestingController = TestBed.inject(HttpTestingController) - const key = createKey() const query = TestBed.runInInjectionContext(() => injectQuery(() => ({ - queryKey: key, + queryKey: ['http-cancel'], queryFn: () => lastValueFrom(httpClient.get<{ data: string }>('/api/cancel')), })), @@ -527,24 +715,25 @@ describe('PendingTasks Integration', () => { describe('Edge Cases', () => { it('should handle query cancellation mid-flight', async () => { - const key = createKey() const app = TestBed.inject(ApplicationRef) const query = TestBed.runInInjectionContext(() => injectQuery(() => ({ - queryKey: key, - queryFn: () => sleep(100).then(() => 'data'), + queryKey: ['cancel-test'], + queryFn: async () => { + await sleep(100) + return 'data' + }, })), ) // Cancel the query after a short delay setTimeout(() => { - queryClient.cancelQueries({ queryKey: key }) + queryClient.cancelQueries({ queryKey: ['cancel-test'] }) }, 20) // Advance to the cancellation point await vi.advanceTimersByTimeAsync(20) - TestBed.tick() const stablePromise = app.whenStable() await vi.advanceTimersByTimeAsync(130) @@ -559,10 +748,9 @@ describe('PendingTasks Integration', () => { const app = TestBed.inject(ApplicationRef) let attemptCount = 0 - const key = createKey() const query = TestBed.runInInjectionContext(() => injectQuery(() => ({ - queryKey: key, + queryKey: ['retry-test'], retry: 2, retryDelay: 10, queryFn: async () => { @@ -585,13 +773,16 @@ describe('PendingTasks Integration', () => { it('should handle mutation with optimistic updates', async () => { const app = TestBed.inject(ApplicationRef) - const testQueryKey = createKey() + const testQueryKey = ['optimistic-test'] queryClient.setQueryData(testQueryKey, 'initial-data') const mutation = TestBed.runInInjectionContext(() => injectMutation(() => ({ - mutationFn: (newData: string) => sleep(50).then(() => newData), + mutationFn: async (newData: string) => { + await sleep(50) + return newData + }, onMutate: async (newData) => { // Optimistic update const previousData = queryClient.getQueryData(testQueryKey) diff --git a/packages/angular-query/src/__tests__/provide-tanstack-query.test-d.ts b/packages/angular-query/src/__tests__/provide-tanstack-query.test-d.ts new file mode 100644 index 00000000000..814f624e4b8 --- /dev/null +++ b/packages/angular-query/src/__tests__/provide-tanstack-query.test-d.ts @@ -0,0 +1,44 @@ +import { describe, expectTypeOf, it } from 'vitest' +import { + QueryClient, + provideTanStackQuery, + withHydrationKey, + withNoQueryHydration, +} from '..' +import type { QueryFeature } from '..' +import type * as PublicApi from '..' +import type * as InternalApi from '../internal' + +describe('provideTanStackQuery', () => { + it('keeps integration helpers out of the public entry point', () => { + type InternalHelpers = + | 'queryFeature' + | 'getQueryFeatureProviders' + | 'provideIsRestoring' + expectTypeOf>().toBeNever() + expectTypeOf< + Extract + >().toEqualTypeOf() + }) + + it('accepts built-in opaque query features', () => { + expectTypeOf(withHydrationKey('cache')).toEqualTypeOf() + expectTypeOf(withNoQueryHydration()).toEqualTypeOf() + + provideTanStackQuery( + () => new QueryClient(), + withHydrationKey('cache'), + withNoQueryHydration(), + ) + }) + + it('rejects structurally fabricated features', () => { + expectTypeOf(withHydrationKey('cache')).toEqualTypeOf() + + provideTanStackQuery( + () => new QueryClient(), + // @ts-expect-error QueryFeature values can only be created by package features + { ɵkind: 'Hydration', ɵproviders: {} }, + ) + }) +}) diff --git a/packages/angular-query/src/__tests__/provide-tanstack-query.test.ts b/packages/angular-query/src/__tests__/provide-tanstack-query.test.ts new file mode 100644 index 00000000000..6b56d114f1f --- /dev/null +++ b/packages/angular-query/src/__tests__/provide-tanstack-query.test.ts @@ -0,0 +1,79 @@ +import { TestBed } from '@angular/core/testing' +import { describe, expect, it } from 'vitest' +import { InjectionToken, PLATFORM_ID, inject } from '@angular/core' +import { QueryClient } from '@tanstack/query-core' +import { provideTanStackQuery } from '../providers' +import { provideAngularQueryChangeDetection } from './test-utils' + +describe('provideTanStackQuery', () => { + it('should provide a QueryClient instance using a factory', () => { + const queryClient = new QueryClient() + + TestBed.configureTestingModule({ + providers: [ + provideAngularQueryChangeDetection(), + provideTanStackQuery(() => queryClient), + ], + }) + + const providedQueryClient = TestBed.inject(QueryClient) + expect(providedQueryClient).toBe(queryClient) + }) + + it('resolves an existing QueryClient through a factory in the injection context', () => { + const queryClient = new QueryClient() + const CUSTOM_QUERY_CLIENT = new InjectionToken('', { + factory: () => queryClient, + }) + + TestBed.configureTestingModule({ + providers: [ + provideAngularQueryChangeDetection(), + provideTanStackQuery(() => inject(CUSTOM_QUERY_CLIENT)), + ], + }) + + const providedQueryClient = TestBed.inject(QueryClient) + expect(providedQueryClient).toBe(queryClient) + }) +}) + +describe('server client defaults', () => { + it('uses server defaults without changing an unrelated client', () => { + const unrelated = new QueryClient() + TestBed.configureTestingModule({ + providers: [ + provideAngularQueryChangeDetection(), + { provide: PLATFORM_ID, useValue: 'server' }, + provideTanStackQuery(() => new QueryClient()), + ], + }) + expect(TestBed.inject(QueryClient).getDefaultOptions()).toStrictEqual({ + queries: { gcTime: Infinity, retry: false }, + mutations: { gcTime: Infinity }, + }) + expect(unrelated.getDefaultOptions()).toStrictEqual({}) + }) + + it('preserves explicit server client defaults', () => { + TestBed.configureTestingModule({ + providers: [ + provideAngularQueryChangeDetection(), + { provide: PLATFORM_ID, useValue: 'server' }, + provideTanStackQuery( + () => + new QueryClient({ + defaultOptions: { + queries: { gcTime: 1000, retry: 1, staleTime: 30000 }, + mutations: { gcTime: 2000 }, + }, + }), + ), + ], + }) + expect(TestBed.inject(QueryClient).getDefaultOptions()).toStrictEqual({ + queries: { gcTime: 1000, retry: 1, staleTime: 30000 }, + mutations: { gcTime: 2000 }, + }) + }) +}) diff --git a/packages/angular-query-experimental/src/__tests__/query-options.test-d.ts b/packages/angular-query/src/__tests__/query-options.test-d.ts similarity index 89% rename from packages/angular-query-experimental/src/__tests__/query-options.test-d.ts rename to packages/angular-query/src/__tests__/query-options.test-d.ts index d313b718221..2de3115d152 100644 --- a/packages/angular-query-experimental/src/__tests__/query-options.test-d.ts +++ b/packages/angular-query/src/__tests__/query-options.test-d.ts @@ -186,7 +186,7 @@ describe('queryOptions', () => { expectTypeOf(data).toEqualTypeOf() }) - it('should return the proper type when passed to getQueryState', () => { + it('should properly type updaterFn when passed to setQueryData', () => { const key = createKey() const { queryKey: tagged } = queryOptions({ queryKey: key, @@ -194,25 +194,41 @@ describe('queryOptions', () => { }) const queryClient = new QueryClient() - const state = queryClient.getQueryState(tagged) + const data = queryClient.setQueryData(tagged, (prev) => { + expectTypeOf(prev).toEqualTypeOf() + return prev + }) - expectTypeOf(state?.data).toEqualTypeOf() + expectTypeOf(data).toEqualTypeOf() }) - it('should properly type updaterFn when passed to setQueryData', () => { - const key = createKey() + it('should preserve discriminated union narrowing in setQueryData updaterFn', () => { + type Data = + | { kind: 'a'; value: number; requiredA: number } + | { kind: 'b'; value: number; requiredB: number } + const { queryKey: tagged } = queryOptions({ - queryKey: key, - queryFn: () => Promise.resolve(5), + queryKey: createKey(), + queryFn: (): Promise => + Promise.resolve({ + kind: 'a', + value: 1, + requiredA: 1, + }), }) const queryClient = new QueryClient() - const data = queryClient.setQueryData(tagged, (prev) => { - expectTypeOf(prev).toEqualTypeOf() - return prev + queryClient.setQueryData(tagged, (prev) => { + if (!prev || prev.kind !== 'a') { + return prev + } + + expectTypeOf(prev).toEqualTypeOf>() + return { ...prev, value: prev.value + 1 } }) - expectTypeOf(data).toEqualTypeOf() + // @ts-expect-error updater input should be inferred from the tagged query key + queryClient.setQueryData(tagged, (prev: string | undefined) => prev) }) it('should properly type value when passed to setQueryData', () => { @@ -234,6 +250,19 @@ describe('queryOptions', () => { expectTypeOf(data).toEqualTypeOf() }) + it('should return the proper type when passed to getQueryState', () => { + const key = createKey() + const { queryKey: tagged } = queryOptions({ + queryKey: key, + queryFn: () => Promise.resolve(5), + }) + + const queryClient = new QueryClient() + const state = queryClient.getQueryState(tagged) + + expectTypeOf(state?.data).toEqualTypeOf() + }) + it('should infer even if there is a conditional skipToken', () => { const key = createKey() const options = queryOptions({ @@ -258,6 +287,5 @@ describe('queryOptions', () => { const data = queryClient.getQueryData(options.queryKey) expectTypeOf(data).toEqualTypeOf() - expectTypeOf(options.queryKey[dataTagSymbol]).toEqualTypeOf() }) }) diff --git a/packages/angular-query-experimental/src/__tests__/query-options.test.ts b/packages/angular-query/src/__tests__/query-options.test.ts similarity index 58% rename from packages/angular-query-experimental/src/__tests__/query-options.test.ts rename to packages/angular-query/src/__tests__/query-options.test.ts index 72a53326326..40d5704be74 100644 --- a/packages/angular-query-experimental/src/__tests__/query-options.test.ts +++ b/packages/angular-query/src/__tests__/query-options.test.ts @@ -11,4 +11,14 @@ describe('queryOptions', () => { expect(queryOptions(object)).toBe(object) }) + + it('keeps notifyOnChangeProps adapter-owned', () => { + const options: CreateQueryOptions = { + queryKey: ['key'], + // @ts-expect-error Angular Query always subscribes to every result change. + notifyOnChangeProps: ['data'], + } + + expect(options).toHaveProperty('notifyOnChangeProps', ['data']) + }) }) diff --git a/packages/angular-query/src/__tests__/signal-proxy.test.ts b/packages/angular-query/src/__tests__/signal-proxy.test.ts new file mode 100644 index 00000000000..ee5332f1dcd --- /dev/null +++ b/packages/angular-query/src/__tests__/signal-proxy.test.ts @@ -0,0 +1,77 @@ +import { + ChangeDetectionStrategy, + Component, + computed, + input, + inputBinding, + isSignal, + signal, +} from '@angular/core' +import { beforeEach, describe, expect, it } from 'vitest' +import { TestBed } from '@angular/core/testing' +import { signalProxy } from '../utils/signal-proxy' +import { provideAngularQueryChangeDetection } from './test-utils' + +describe('signalProxy', () => { + it('only exposes declared fields with ordinary object semantics', async () => { + const source = signal({ value: 'data', falsy: false, zero: 0 }) + const proxy = signalProxy(source, ['value', 'falsy', 'zero']) + + expect(Object.keys(proxy)).toStrictEqual(['value', 'falsy', 'zero']) + expect('value' in proxy).toBe(true) + expect('falsy' in proxy).toBe(true) + expect('zero' in proxy).toBe(true) + expect('missing' in proxy).toBe(false) + expect(Object.hasOwn(proxy, 'missing')).toBe(false) + expect(Reflect.get(proxy, 'then')).toBeUndefined() + await expect(Promise.resolve(proxy)).resolves.toBe(proxy) + }) + + it('should have computed fields', () => { + const source = signal({ value: 'data' }) + const proxy = signalProxy(source, ['value']) + expect(proxy.value()).toBe('data') + expect(isSignal(proxy.value)).toBe(true) + }) + + describe('in component fixture', () => { + @Component({ + selector: 'app-test', + standalone: true, + template: '{{ proxy.number() }}', + changeDetection: ChangeDetectionStrategy.OnPush, + }) + class TestComponent { + number = input.required() + obj = computed(() => ({ number: this.number() })) + proxy = signalProxy(this.obj, ['number']) + shortNumber = this.proxy.number + } + + beforeEach(() => { + TestBed.configureTestingModule({ + providers: [provideAngularQueryChangeDetection()], + }) + }) + + it('should retain field signals and update aliases of required inputs', () => { + const number = signal(0) + const fixture = TestBed.createComponent(TestComponent, { + bindings: [inputBinding('number', number.asReadonly())], + }) + fixture.detectChanges() + const instance = fixture.componentInstance + + expect(isSignal(instance.proxy.number)).toBe(true) + expect(instance.shortNumber).toBe(instance.proxy.number) + expect(instance.shortNumber()).toBe(0) + + number.set(1) + fixture.detectChanges() + + expect(instance.shortNumber).toBe(instance.proxy.number) + expect(instance.shortNumber()).toBe(1) + expect(fixture.nativeElement.textContent).toBe('1') + }) + }) +}) diff --git a/packages/angular-query/src/__tests__/test-utils.ts b/packages/angular-query/src/__tests__/test-utils.ts new file mode 100644 index 00000000000..cc7151fc8de --- /dev/null +++ b/packages/angular-query/src/__tests__/test-utils.ts @@ -0,0 +1,78 @@ +// cspell:ignore ZONEFUL zoneful +import { + isSignal, + provideZoneChangeDetection, + provideZonelessChangeDetection, + untracked, +} from '@angular/core' +import { TestBed } from '@angular/core/testing' +import { expect, vi } from 'vitest' +import { provideTanStackQuery } from '..' +import type { QueryClient } from '@tanstack/query-core' +import type { EnvironmentProviders, Provider, Signal } from '@angular/core' + +/** + * Use the same change-detection mode as the test runner. The default runner + * is zoneless; the zoneful runner sets ANGULAR_QUERY_ZONEFUL before loading + * tests and installs the real Zone.js testing patches. + */ +export function provideAngularQueryChangeDetection(): EnvironmentProviders { + return process.env.ANGULAR_QUERY_ZONEFUL === 'true' + ? provideZoneChangeDetection() + : provideZonelessChangeDetection() +} + +function evaluateSignals>( + obj: T, +): { [K in keyof T]: ReturnType } { + const result: Partial<{ [K in keyof T]: ReturnType }> = {} + + untracked(() => { + for (const key in obj) { + if ( + Object.prototype.hasOwnProperty.call(obj, key) && + isSignal(obj[key]) + ) { + const func = obj[key] + result[key] = func() + } + } + }) + + return result as { [K in keyof T]: ReturnType } +} + +export const expectSignals = >( + obj: T, + expected: Partial<{ + [K in keyof T]: T[K] extends Signal ? ReturnType : never + }>, +): void => { + expect(evaluateSignals(obj)).toMatchObject(expected) +} + +/** + * Reset Angular's TestBed and configure the standard TanStack Query providers for tests. + * Pass additional providers (including EnvironmentProviders) via the options argument. + */ +export function setupTanStackQueryTestBed( + queryClient: QueryClient, + options: { providers?: Array } = {}, +) { + TestBed.resetTestingModule() + TestBed.configureTestingModule({ + providers: [ + provideAngularQueryChangeDetection(), + provideTanStackQuery(() => queryClient), + ...(options.providers ?? []), + ], + }) +} + +/** + * Advances zero-delay timers and their promise continuations in fake-timer tests. + * Angular rendering may require a subsequent change-detection pass. + */ +export async function flushQueryUpdates() { + await vi.advanceTimersByTimeAsync(0) +} diff --git a/packages/angular-query/src/__tests__/upstream-issues.test.ts b/packages/angular-query/src/__tests__/upstream-issues.test.ts new file mode 100644 index 00000000000..1fc1309b1d8 --- /dev/null +++ b/packages/angular-query/src/__tests__/upstream-issues.test.ts @@ -0,0 +1,292 @@ +import { + ApplicationRef, + ChangeDetectionStrategy, + Component, + VERSION, + effect, + input, + signal, +} from '@angular/core' +import { TestBed } from '@angular/core/testing' +import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest' +import { + QueryClient, + injectMutation, + injectQuery, + provideTanStackQuery, +} from '..' +import { provideAngularQueryChangeDetection } from './test-utils' + +// Reproductions transcribed from TanStack/query issues. Use real promises and +// Angular stability, without notification-scheduler overrides or timer flushes. +describe('upstream Angular issue reproductions', () => { + let client: QueryClient + + beforeEach(() => { + vi.useRealTimers() + if ( + process.env.ANGULAR_ISSUE_VERSION && + VERSION.full !== process.env.ANGULAR_ISSUE_VERSION + ) { + throw new Error(`Unexpected Angular runtime: ${VERSION.full}`) + } + client = new QueryClient({ + defaultOptions: { queries: { retry: false, gcTime: Infinity } }, + }) + TestBed.configureTestingModule({ + providers: [ + provideAngularQueryChangeDetection(), + provideTanStackQuery(() => client), + ], + }) + }) + + afterEach(() => { + TestBed.resetTestingModule() + client.clear() + }) + + it('#9910: a template signal read does not prevent whenStable from seeing success', async () => { + @Component({ template: '{{ query.isSuccess() }}' }) + class App { + query = injectQuery(() => ({ + queryKey: ['9910'], + queryFn: () => Promise.resolve([1, 2, 3, 4, 5]), + })) + } + const fixture = TestBed.createComponent(App) + fixture.autoDetectChanges() + await fixture.whenStable() + fixture.detectChanges() + expect(fixture.componentInstance.query.isSuccess()).toBe(true) + expect(fixture.componentInstance.query.data()).toStrictEqual([ + 1, 2, 3, 4, 5, + ]) + expect(fixture.nativeElement.textContent).toBe('true') + }) + + it('#10046: a class-field data alias is populated after whenStable', async () => { + @Component({ template: '{{ data() }}' }) + class App { + query = injectQuery(() => ({ + queryKey: ['10046'], + queryFn: () => Promise.resolve('loaded'), + })) + data = this.query.data + } + const fixture = TestBed.createComponent(App) + fixture.autoDetectChanges() + await fixture.whenStable() + fixture.detectChanges() + expect(fixture.componentInstance.data()).toBe('loaded') + expect(fixture.nativeElement.textContent).toBe('loaded') + }) + + it.each(['TestBed', 'Testing Library'] as const)( + '#9981: an isSuccess effect updates component state using %s', + async (runner) => { + @Component({ + template: '{{ value }}', + changeDetection: ChangeDetectionStrategy.OnPush, + }) + class App { + value = 42 + query = injectQuery(() => ({ + queryKey: ['9981'], + queryFn: () => Promise.resolve([30, 40, 50]), + })) + constructor() { + effect(() => { + if (this.query.isSuccess()) this.value = 9999 + }) + } + } + const fixture = + runner === 'TestBed' + ? TestBed.createComponent(App) + : (await (await import('@testing-library/angular')).render(App)) + .fixture + fixture.autoDetectChanges() + await fixture.whenStable() + fixture.detectChanges() + expect(fixture.componentInstance.value).toBe(9999) + }, + ) + + it('#7488: taking a data alias does not read an unset required input', async () => { + const optionsRead = vi.fn<() => void>() + @Component({ template: '{{ data() }}' }) + class App { + name = input.required() + data = injectQuery(() => { + optionsRead() + return { + queryKey: ['7488', this.name()], + queryFn: () => Promise.resolve(this.name()), + } + }).data + } + const fixture = TestBed.createComponent(App) + expect(optionsRead).not.toHaveBeenCalled() + fixture.componentRef.setInput('name', 'ready') + fixture.autoDetectChanges() + await fixture.whenStable() + expect(fixture.componentInstance.data()).toBe('ready') + expect(optionsRead).toHaveBeenCalledTimes(1) + }) + + it.each(['constructor', 'ngOnInit', 'ngAfterContentInit'] as const)( + '#9020: mutate immediately exposes pending from %s', + async (phase) => { + let finish!: (value: string) => void + const request = new Promise((resolve) => { + finish = resolve + }) + @Component({ template: '{{ mutation.status() }}' }) + class App { + immediate = '' + mutation = injectMutation(() => ({ mutationFn: () => request })) + constructor() { + if (phase === 'constructor') this.start() + } + ngOnInit() { + if (phase === 'ngOnInit') this.start() + } + ngAfterContentInit() { + if (phase === 'ngAfterContentInit') this.start() + } + start() { + this.mutation.mutate() + this.immediate = this.mutation.status() + } + } + const fixture = TestBed.createComponent(App) + fixture.detectChanges() + expect(fixture.componentInstance.immediate).toBe('pending') + expect(fixture.nativeElement.textContent).toBe('pending') + finish('done') + await fixture.whenStable() + expect(fixture.componentInstance.mutation.data()).toBe('done') + }, + ) + + it('#11176: whenStable waits for a just-triggered fire-and-forget mutation', async () => { + const app = TestBed.inject(ApplicationRef) + const mutation = TestBed.runInInjectionContext(() => + injectMutation(() => ({ + mutationFn: (value: string) => + new Promise((resolve) => { + setTimeout(() => resolve(value), 5) + }), + })), + ) + TestBed.tick() + mutation.mutate('mutated') + await app.whenStable() + expect(mutation.status()).toBe('success') + expect(mutation.data()).toBe('mutated') + }) + + it.each([false, true])( + '#11176: a newer mutation settling cannot release an older invocation (reset=%s)', + async (reset) => { + let finish!: () => void + const first = new Promise((resolve) => { + finish = resolve + }) + const mutation = TestBed.runInInjectionContext(() => + injectMutation(() => ({ + mutationFn: (request: Promise) => request, + })), + ) + TestBed.tick() + mutation.mutate(first) + // oxlint-disable-next-line vitest-js/no-conditional-in-test -- The parameter selects setup/actions; every case runs the assertions. + if (reset) mutation.reset() + const second = mutation.mutateAsync(Promise.resolve()) + let stable = false + const settled = TestBed.inject(ApplicationRef) + .whenStable() + .then(() => { + stable = true + }) + await second + expect(stable).toBe(false) + finish() + await settled + expect(stable).toBe(true) + }, + ) + + it('#9735: saving an edit exposes optimistic data in the same turn and render', async () => { + const snapshots: Array = [] + @Component({ + template: '@if (!editing()) { {{ query.data() }} }', + changeDetection: ChangeDetectionStrategy.OnPush, + }) + class App { + editing = signal(true) + query = injectQuery(() => ({ + queryKey: ['9735'], + queryFn: () => Promise.resolve('old title'), + initialData: 'old title', + staleTime: Infinity, + })) + mutation = injectMutation(() => ({ + mutationFn: async (title: string) => title, + onMutate: (title: string) => { + client.setQueryData(['9735'], title) + snapshots.push(this.query.data()) + }, + })) + save() { + this.mutation.mutate('new title') + this.editing.set(false) + snapshots.push(this.query.data()) + } + } + const fixture = TestBed.createComponent(App) + fixture.detectChanges() + fixture.componentInstance.save() + expect(snapshots).toStrictEqual(['new title', 'new title']) + expect(client.getQueryData(['9735'])).toBe('new title') + fixture.detectChanges() + expect(fixture.nativeElement.textContent).toBe('new title') + await fixture.whenStable() + }) + + it('#6567: changing to another cached key updates data immediately', () => { + client.setQueryData(['6567', 'a'], 'A') + client.setQueryData(['6567', 'b'], 'B') + const key = signal('a') + const query = TestBed.runInInjectionContext(() => + injectQuery(() => ({ + queryKey: ['6567', key()], + enabled: false, + })), + ) + expect(query.data()).toBe('A') + TestBed.tick() + key.set('b') + expect(query.data()).toBe('B') + }) + + it('#6771: enabling a fresh cached query and immediately refetching settles', async () => { + client.setQueryData(['6771'], 'cached') + const enabled = signal(false) + const query = TestBed.runInInjectionContext(() => + injectQuery(() => ({ + queryKey: ['6771'], + enabled: enabled(), + staleTime: Infinity, + queryFn: () => Promise.resolve('updated'), + })), + ) + TestBed.tick() + enabled.set(true) + await query.refetch() + await TestBed.inject(ApplicationRef).whenStable() + expect(query.data()).toBe('updated') + expect(query.isRefetching()).toBe(false) + }) +}) diff --git a/packages/angular-query/src/__tests__/with-hydration.test.ts b/packages/angular-query/src/__tests__/with-hydration.test.ts new file mode 100644 index 00000000000..f30b222b131 --- /dev/null +++ b/packages/angular-query/src/__tests__/with-hydration.test.ts @@ -0,0 +1,335 @@ +import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest' +import { + Component, + EnvironmentInjector, + PLATFORM_ID, + TransferState, + createEnvironmentInjector, + effect, + inject, + makeStateKey, + provideEnvironmentInitializer, +} from '@angular/core' +import { TestBed } from '@angular/core/testing' +import { render } from '@testing-library/angular' +import { createKey, sleep } from '@tanstack/query-test-utils' +import { + QueryClient, + dehydrate, + injectQuery, + noop, + provideTanStackQuery, + withHydrationKey, + withNoQueryHydration, +} from '..' +import { INTERNAL_TANSTACK_QUERY_HYDRATION_STATE_KEY } from '../hydration-state-key' +import { provideAngularQueryChangeDetection } from './test-utils' +import type { DehydratedState } from '@tanstack/query-core' + +describe('TransferState', () => { + beforeEach(() => { + vi.useFakeTimers() + }) + + afterEach(() => { + vi.restoreAllMocks() + vi.useRealTimers() + }) + + describe('TransferState hydration (client)', () => { + it('browser hydrates from default key', async () => { + const key = createKey() + const sourceClient = new QueryClient() + sourceClient.setQueryData(key, 'from-server') + const dehydrated = dehydrate(sourceClient) + const appClient = new QueryClient() + + @Component({ + template: `
{{ state.data() ?? '' }}
`, + }) + class Page { + state = injectQuery(() => ({ + queryKey: key, + queryFn: () => sleep(10).then(() => 'from-client'), + })) + } + + const rendered = await render(Page, { + providers: [ + provideAngularQueryChangeDetection(), + provideEnvironmentInitializer(() => { + inject(TransferState).set( + INTERNAL_TANSTACK_QUERY_HYDRATION_STATE_KEY, + dehydrated, + ) + }), + provideTanStackQuery(() => appClient), + ], + }) + + rendered.fixture.detectChanges() + expect(rendered.getByText('from-server')).toBeInTheDocument() + expect( + rendered.fixture.debugElement.injector + .get(TransferState) + .get(INTERNAL_TANSTACK_QUERY_HYDRATION_STATE_KEY, null), + ).toBeNull() + }) + + it('browser hydrates from custom key', async () => { + const customKeyName = 'tanstack-test-custom-hydration' + const customKey = makeStateKey(customKeyName) + const key = createKey() + const sourceClient = new QueryClient() + sourceClient.setQueryData(key, 'from-custom-key') + const dehydrated = dehydrate(sourceClient) + const appClient = new QueryClient() + + @Component({ + template: `
{{ state.data() ?? '' }}
`, + }) + class Page { + state = injectQuery(() => ({ + queryKey: key, + staleTime: Infinity, + queryFn: () => Promise.resolve('from-client'), + })) + } + + const rendered = await render(Page, { + providers: [ + provideAngularQueryChangeDetection(), + provideEnvironmentInitializer(() => { + inject(TransferState).set(customKey, dehydrated) + }), + provideTanStackQuery( + () => appClient, + withHydrationKey(customKeyName), + ), + ], + }) + + rendered.fixture.detectChanges() + expect(rendered.getByText('from-custom-key')).toBeInTheDocument() + expect( + rendered.fixture.debugElement.injector + .get(TransferState) + .get(customKey, null), + ).toBeNull() + }) + + it('browser does not re-fetch when hydrated state is fresh', async () => { + const key = createKey() + const sourceClient = new QueryClient() + sourceClient.setQueryData(key, 'cached') + const dehydrated = dehydrate(sourceClient) + const appClient = new QueryClient() + let queryFnCalls = 0 + + @Component({ + template: `
{{ state.data() ?? '' }}
`, + }) + class Page { + state = injectQuery(() => ({ + queryKey: key, + staleTime: Infinity, + queryFn: () => { + queryFnCalls++ + return sleep(10).then(() => 'should-not-run') + }, + })) + + _ = effect(() => { + void this.state.data() + }) + } + + await render(Page, { + providers: [ + provideAngularQueryChangeDetection(), + provideEnvironmentInitializer(() => { + inject(TransferState).set( + INTERNAL_TANSTACK_QUERY_HYDRATION_STATE_KEY, + dehydrated, + ) + }), + provideTanStackQuery(() => appClient), + ], + }) + + await vi.advanceTimersByTimeAsync(100) + expect(queryFnCalls).toBe(0) + }) + + it('withNoQueryHydration disables browser hydration', async () => { + const key = createKey() + const sourceClient = new QueryClient() + sourceClient.setQueryData(key, 'from-server') + const dehydrated = dehydrate(sourceClient) + const appClient = new QueryClient() + + @Component({ + template: `
{{ state.data() ?? '' }}
`, + }) + class Page { + state = injectQuery(() => ({ + queryKey: key, + queryFn: () => sleep(10).then(() => 'from-client'), + })) + } + + const rendered = await render(Page, { + providers: [ + provideAngularQueryChangeDetection(), + provideEnvironmentInitializer(() => { + inject(TransferState).set( + INTERNAL_TANSTACK_QUERY_HYDRATION_STATE_KEY, + dehydrated, + ) + }), + provideTanStackQuery(() => appClient, withNoQueryHydration()), + ], + }) + + rendered.fixture.detectChanges() + await vi.advanceTimersByTimeAsync(10) + rendered.fixture.detectChanges() + + expect(rendered.getByText('from-client')).toBeInTheDocument() + expect( + rendered.fixture.debugElement.injector + .get(TransferState) + .get(INTERNAL_TANSTACK_QUERY_HYDRATION_STATE_KEY, null), + ).toStrictEqual(dehydrated) + }) + }) + + describe('TransferState dehydration (server)', () => { + function createQueryInjector( + queryClient: QueryClient, + platformId: 'server' | 'browser', + ...features: Array[1]> + ) { + TestBed.configureTestingModule({ + providers: [ + provideAngularQueryChangeDetection(), + { provide: PLATFORM_ID, useValue: platformId }, + ], + }) + + return createEnvironmentInjector( + [provideTanStackQuery(() => queryClient, ...features)], + TestBed.inject(EnvironmentInjector), + ) + } + + it('server serializes dehydrated queries on TransferState.toJson', async () => { + const key = createKey() + const queryClient = new QueryClient() + const injector = createQueryInjector(queryClient, 'server') + + void queryClient + .query({ + queryKey: key, + queryFn: () => Promise.resolve('ssr-data'), + }) + .catch(noop) + await vi.advanceTimersByTimeAsync(0) + + injector.get(TransferState).toJson() + + const stored = injector + .get(TransferState) + .get(INTERNAL_TANSTACK_QUERY_HYDRATION_STATE_KEY, null) + expect(stored).not.toBeNull() + expect(stored!.queries).toHaveLength(1) + expect(stored!.queries[0]?.queryKey).toStrictEqual(key) + }) + + it('browser platform does not write server dehydration state', async () => { + const key = createKey() + const queryClient = new QueryClient() + const injector = createQueryInjector(queryClient, 'browser') + + void queryClient + .query({ + queryKey: key, + queryFn: () => Promise.resolve('data'), + }) + .catch(noop) + await vi.advanceTimersByTimeAsync(0) + + injector.get(TransferState).toJson() + + expect( + injector + .get(TransferState) + .get(INTERNAL_TANSTACK_QUERY_HYDRATION_STATE_KEY, null), + ).toBeNull() + }) + + it('withNoQueryHydration disables server dehydration', async () => { + const key = createKey() + const queryClient = new QueryClient() + const injector = createQueryInjector( + queryClient, + 'server', + withNoQueryHydration(), + ) + + void queryClient + .query({ + queryKey: key, + queryFn: () => Promise.resolve('data'), + }) + .catch(noop) + await vi.advanceTimersByTimeAsync(0) + + injector.get(TransferState).toJson() + + expect( + injector + .get(TransferState) + .get(INTERNAL_TANSTACK_QUERY_HYDRATION_STATE_KEY, null), + ).toBeNull() + }) + + it('multiple query clients can use distinct hydration keys', async () => { + const keyA = createKey() + const keyB = createKey() + const clientA = new QueryClient() + const clientB = new QueryClient() + + TestBed.configureTestingModule({ + providers: [ + provideAngularQueryChangeDetection(), + { provide: PLATFORM_ID, useValue: 'server' }, + ], + }) + + createEnvironmentInjector( + [provideTanStackQuery(() => clientA, withHydrationKey('client-a'))], + TestBed.inject(EnvironmentInjector), + ) + createEnvironmentInjector( + [provideTanStackQuery(() => clientB, withHydrationKey('client-b'))], + TestBed.inject(EnvironmentInjector), + ) + + clientA.setQueryData(keyA, 'a') + clientB.setQueryData(keyB, 'b') + + const transferState = TestBed.inject(TransferState) + transferState.toJson() + + expect( + transferState.get(makeStateKey('client-a'), null) + ?.queries[0]?.queryKey, + ).toStrictEqual(keyA) + expect( + transferState.get(makeStateKey('client-b'), null) + ?.queries[0]?.queryKey, + ).toStrictEqual(keyB) + }) + }) +}) diff --git a/packages/angular-query/src/__tests__/zoneful-integration.test.ts b/packages/angular-query/src/__tests__/zoneful-integration.test.ts new file mode 100644 index 00000000000..3d2a99fe690 --- /dev/null +++ b/packages/angular-query/src/__tests__/zoneful-integration.test.ts @@ -0,0 +1,192 @@ +// cspell:ignore zoneful +import { + ApplicationRef, + Component, + NgZone, + provideZoneChangeDetection, + signal, +} from '@angular/core' +import { TestBed } from '@angular/core/testing' +import { afterEach, beforeEach, describe, expect, it } from 'vitest' +import { provideIsRestoring } from '../internal' +import { + QueryClient, + injectMutation, + injectQueries, + injectQuery, + provideTanStackQuery, +} from '..' + +/** + * These tests deliberately provide Angular's zone-based scheduler directly. + * They are run by vitest.zoneful.config.ts, whose setup also loads the Zone.js + * testing patches. Keeping this small integration set separate avoids making + * every signal assertion in the zoneless suite depend on Zone.js scheduling. + */ +describe('Zone.js notification integration', () => { + let queryClient: QueryClient + + beforeEach(() => { + queryClient = new QueryClient() + TestBed.configureTestingModule({ + providers: [ + provideZoneChangeDetection(), + provideTanStackQuery(() => queryClient), + ], + }) + }) + + afterEach(() => { + TestBed.resetTestingModule() + }) + + it('keeps an injectQuery signal current after its subscription commits', () => { + const key = ['zoneful-query'] + const query = TestBed.runInInjectionContext(() => + injectQuery(() => ({ + queryKey: key, + enabled: false, + })), + ) + + expect(query.data()).toBeUndefined() + TestBed.tick() + queryClient.setQueryData(key, 'updated') + + expect(query.data()).toBe('updated') + }) + + it('keeps injectQueries current after its subscription commits', () => { + const key = ['zoneful-queries'] + const queries = TestBed.runInInjectionContext(() => + injectQueries(() => ({ + queries: [{ queryKey: key, enabled: false }], + })), + ) + + expect(queries()[0].data()).toBeUndefined() + TestBed.tick() + queryClient.setQueryData(key, 'updated') + + expect(queries()[0].data()).toBe('updated') + }) + + it('makes committed query notifications visible inside mutation onMutate', async () => { + const key = ['zoneful-optimistic'] + const query = TestBed.runInInjectionContext(() => + injectQuery(() => ({ + queryKey: key, + enabled: false, + })), + ) + const seenInOnMutate: Array = [] + const mutation = TestBed.runInInjectionContext(() => + injectMutation(() => ({ + mutationKey: ['zoneful-mutation'], + mutationFn: async () => 'server', + onMutate: () => { + queryClient.setQueryData(key, 'optimistic') + seenInOnMutate.push(query.data() as string | undefined) + }, + })), + ) + + query.data() + TestBed.tick() + await mutation.mutateAsync() + + expect(seenInOnMutate).toStrictEqual(['optimistic']) + }) + + it('uses the latest options when restoration ends in the same Zone.js turn', async () => { + const isRestoring = signal(true) + const key = signal('old') + const queriedKeys: Array = [] + + TestBed.resetTestingModule() + TestBed.configureTestingModule({ + providers: [ + provideZoneChangeDetection(), + provideTanStackQuery(() => queryClient), + provideIsRestoring(() => isRestoring.asReadonly()), + ], + }) + + const query = TestBed.runInInjectionContext(() => + injectQuery(() => ({ + queryKey: ['zoneful-restoration', key()], + queryFn: ({ queryKey }) => { + const currentKey = queryKey[1] as string + queriedKeys.push(currentKey) + return Promise.resolve(currentKey) + }, + })), + ) + + expect(query.status()).toBe('pending') + key.set('new') + isRestoring.set(false) + TestBed.tick() + await TestBed.inject(ApplicationRef).whenStable() + + expect(queriedKeys).toStrictEqual(['new']) + expect(query.data()).toBe('new') + expect( + queryClient + .getQueryCache() + .find({ queryKey: ['zoneful-restoration', 'new'] }) + ?.getObserversCount(), + ).toBe(1) + }) + + it('completes dependent queries before application stability without manual effect flushing', async () => { + @Component({ template: '{{ second.data() }}' }) + class Page { + first = injectQuery(() => ({ + queryKey: ['zoneful-dependency-first'], + queryFn: async () => 'ready', + })) + second = injectQuery(() => ({ + queryKey: ['zoneful-dependency-second'], + enabled: this.first.isSuccess(), + queryFn: async () => 'dependent data', + })) + } + + const fixture = TestBed.createComponent(Page) + fixture.autoDetectChanges() + await TestBed.inject(ApplicationRef).whenStable() + expect(fixture.componentInstance.second.data()).toBe('dependent data') + }) + + it('renders outside-zone query, multi-query and mutation notifications automatically', async () => { + @Component({ + template: + '{{ query.data() }} / {{ queries()[0].data() }} / {{ mutation.status() }}', + }) + class Page { + query = injectQuery(() => ({ + queryKey: ['outside-single'], + enabled: false, + })) + queries = injectQueries(() => ({ + queries: [{ queryKey: ['outside-multiple'], enabled: false }], + })) + mutation = injectMutation(() => ({ mutationFn: async () => 'done' })) + } + const fixture = TestBed.createComponent(Page) + fixture.autoDetectChanges() + await fixture.whenStable() + const zone = TestBed.inject(NgZone) + const promise = zone.runOutsideAngular(() => { + queryClient.setQueryData(['outside-single'], 'single') + queryClient.setQueryData(['outside-multiple'], 'multiple') + return fixture.componentInstance.mutation.mutateAsync() + }) + await promise + await fixture.whenStable() + expect(fixture.nativeElement.textContent).toBe( + 'single / multiple / success', + ) + }) +}) diff --git a/packages/angular-query/src/hydration-state-key.ts b/packages/angular-query/src/hydration-state-key.ts new file mode 100644 index 00000000000..3a1c4aeb327 --- /dev/null +++ b/packages/angular-query/src/hydration-state-key.ts @@ -0,0 +1,15 @@ +import { InjectionToken, makeStateKey } from '@angular/core' +import type { StateKey } from '@angular/core' +import type { DehydratedState } from '@tanstack/query-core' + +export const INTERNAL_TANSTACK_QUERY_HYDRATION_STATE_KEY = + makeStateKey('tanstack-query-hydration-state') + +export const INTERNAL_TANSTACK_QUERY_HYDRATION_TRANSFER_KEY = + new InjectionToken>( + 'tanstack-query-hydration-transfer-key', + { + providedIn: 'root', + factory: () => INTERNAL_TANSTACK_QUERY_HYDRATION_STATE_KEY, + }, + ) diff --git a/packages/angular-query-experimental/src/index.ts b/packages/angular-query/src/index.ts similarity index 56% rename from packages/angular-query-experimental/src/index.ts rename to packages/angular-query/src/index.ts index 0335dd09959..c4102b09671 100644 --- a/packages/angular-query-experimental/src/index.ts +++ b/packages/angular-query/src/index.ts @@ -4,6 +4,8 @@ export * from '@tanstack/query-core' export type * from './types' +export type { QueryResource } from './query-resource' +export { toResource } from './query-resource' export type { DefinedInitialDataOptions, @@ -22,39 +24,31 @@ export type { } from './infinite-query-options' export { infiniteQueryOptions } from './infinite-query-options' -export type { InjectInfiniteQueryOptions } from './inject-infinite-query' export { injectInfiniteQuery } from './inject-infinite-query' -export type { InjectIsFetchingOptions } from './inject-is-fetching' export { injectIsFetching } from './inject-is-fetching' -export type { InjectIsMutatingOptions } from './inject-is-mutating' export { injectIsMutating } from './inject-is-mutating' -export { injectIsRestoring, provideIsRestoring } from './inject-is-restoring' +export { injectIsRestoring } from './inject-is-restoring' -export type { InjectMutationOptions } from './inject-mutation' export { injectMutation } from './inject-mutation' -export type { InjectMutationStateOptions } from './inject-mutation-state' +export type { MutationStateOptions } from './inject-mutation-state' export { injectMutationState } from './inject-mutation-state' -export type { QueriesOptions, QueriesResults } from './inject-queries' +export type { + InjectQueriesOptions, + QueriesOptions, + QueriesResults, +} from './inject-queries.types' +export { injectQueries } from './inject-queries' -export type { InjectQueryOptions } from './inject-query' export { injectQuery } from './inject-query' -export { injectQueryClient } from './inject-query-client' - -export type { - DevtoolsFeature, - PersistQueryClientFeature, - QueryFeature, - QueryFeatures, -} from './providers' +export type { QueryFeature } from './providers' export { - provideAngularQuery, - provideQueryClient, provideTanStackQuery, - queryFeature, + withHydrationKey, + withNoQueryHydration, } from './providers' diff --git a/packages/angular-query-experimental/src/infinite-query-options.ts b/packages/angular-query/src/infinite-query-options.ts similarity index 99% rename from packages/angular-query-experimental/src/infinite-query-options.ts rename to packages/angular-query/src/infinite-query-options.ts index 3e23784dca1..46f99fb3f42 100644 --- a/packages/angular-query-experimental/src/infinite-query-options.ts +++ b/packages/angular-query/src/infinite-query-options.ts @@ -145,7 +145,7 @@ export type DefinedInitialDataInfiniteOptions< * @see {@link injectInfiniteQuery} to run an infinite query with these options. * @example * ```angular-ts - * import { infiniteQueryOptions, injectInfiniteQuery } from '@tanstack/angular-query-experimental' + * import { infiniteQueryOptions, injectInfiniteQuery } from '@tanstack/angular-query' * * export const projectsOptions = infiniteQueryOptions({ * queryKey: ['projects'], @@ -211,7 +211,7 @@ export function infiniteQueryOptions< * @example * A parameterized factory, so the same options object can be reused per `postId`: * ```angular-ts - * import { infiniteQueryOptions, injectInfiniteQuery } from '@tanstack/angular-query-experimental' + * import { infiniteQueryOptions, injectInfiniteQuery } from '@tanstack/angular-query' * * export const commentsOptions = (postId: string) => * infiniteQueryOptions({ @@ -282,7 +282,7 @@ export function infiniteQueryOptions< * @example * A parameterized factory, so the same options object can be reused per `postId`: * ```angular-ts - * import { infiniteQueryOptions, injectInfiniteQuery } from '@tanstack/angular-query-experimental' + * import { infiniteQueryOptions, injectInfiniteQuery } from '@tanstack/angular-query' * * export const commentsOptions = (postId: string) => * infiniteQueryOptions({ diff --git a/packages/angular-query/src/inject-base-query.ts b/packages/angular-query/src/inject-base-query.ts new file mode 100644 index 00000000000..b44c8292f7d --- /dev/null +++ b/packages/angular-query/src/inject-base-query.ts @@ -0,0 +1,110 @@ +import { computed, effect, inject, untracked } from '@angular/core' +import { QueryClient } from '@tanstack/query-core' +import { injectQueryZone } from './utils/inject-query-zone' +import { injectIsRestoring } from './inject-is-restoring' +import { injectPendingTasksLifecycle } from './utils/inject-pending-tasks-lifecycle' +import { injectExternalStore } from './utils/inject-external-store' +import type { + QueryKey, + QueryObserver, + QueryObserverOptions, + QueryObserverResult, +} from '@tanstack/query-core' + +/** + * Base implementation for `injectQuery` and `injectInfiniteQuery`. + * @param optionsFn - Produces the reactive query options. + * @param Observer - The core observer constructor for this query kind. + * @returns The current result signal and a function that reads its active observer. + */ +export function injectBaseQuery< + TQueryFnData, + TError, + TData, + TQueryData, + TQueryKey extends QueryKey, +>( + optionsFn: () => QueryObserverOptions< + TQueryFnData, + TError, + TData, + TQueryData, + TQueryKey + >, + Observer: typeof QueryObserver, +) { + const outsideZone = injectQueryZone() + const queryClient = inject(QueryClient) + const isRestoring = injectIsRestoring() + const lifecycle = injectPendingTasksLifecycle() + + const shouldBlockPendingTasks = ( + observer: QueryObserver, + result: QueryObserverResult, + ) => { + return ( + observer.getCurrentQuery().state.fetchStatus !== 'idle' || + (result.fetchStatus !== 'idle' && result.isEnabled) + ) + } + + const defaultedOptionsSignal = computed(() => { + const defaultedOptions = queryClient.defaultQueryOptions(optionsFn()) + defaultedOptions._optimisticResults = isRestoring() + ? 'isRestoring' + : 'optimistic' + defaultedOptions.notifyOnChangeProps = 'all' + return defaultedOptions + }) + + const observerSignal = computed( + () => new Observer(queryClient, untracked(defaultedOptionsSignal)), + ) + + effect(() => { + const options = defaultedOptionsSignal() + outsideZone(() => untracked(() => observerSignal().setOptions(options))) + }) + + const resultSignal = injectExternalStore(() => { + const observer = observerSignal() + const restoring = isRestoring() + return { + getSnapshot: () => observer.getOptimisticResult(defaultedOptionsSignal()), + subscribe: restoring + ? undefined + : (onStoreChange) => { + const unsubscribe = observer.subscribe(() => { + if (lifecycle.destroyed) return + onStoreChange() + }) + return () => { + lifecycle.setPending(false) + unsubscribe() + } + }, + } + }) + + effect((onCleanup) => { + const result = resultSignal() + if (isRestoring()) { + lifecycle.setPending(false) + return + } + + lifecycle.setPending(shouldBlockPendingTasks(observerSignal(), result)) + onCleanup(() => lifecycle.setPending(false)) + }) + + // Imperative methods use current options before starting work, even when + // invoked before the subscription effect runs. + const getObserver = () => + untracked(() => { + const observer = observerSignal() + observer.setOptions(defaultedOptionsSignal()) + return observer + }) + + return [resultSignal, getObserver] as const +} diff --git a/packages/angular-query/src/inject-infinite-query.ts b/packages/angular-query/src/inject-infinite-query.ts new file mode 100644 index 00000000000..fcd44a3e50d --- /dev/null +++ b/packages/angular-query/src/inject-infinite-query.ts @@ -0,0 +1,196 @@ +import { InfiniteQueryObserver } from '@tanstack/query-core' +import { assertInInjectionContext, untracked } from '@angular/core' +import { injectQueryZone } from './utils/inject-query-zone' +import { injectBaseQuery } from './inject-base-query' +import { signalProxy } from './utils/signal-proxy' +import { infiniteQueryResultFields } from './utils/result-fields' +import type { + DefaultError, + FetchNextPageOptions, + FetchPreviousPageOptions, + InfiniteData, + InfiniteQueryObserverResult, + QueryKey, + QueryObserver, + RefetchOptions, +} from '@tanstack/query-core' +import type { Signal } from '@angular/core' +import type { + CreateInfiniteQueryOptions, + CreateInfiniteQueryResult, + DefinedCreateInfiniteQueryResult, +} from './types' +import type { + DefinedInitialDataInfiniteOptions, + UndefinedInitialDataInfiniteOptions, +} from './infinite-query-options' + +/** + * This overload is selected when `initialData` is set, so the resulting `data` signal is never `undefined` + * (unless a `select` changes `TData` to include `undefined`). + * @param optionsFn - A function returning infinite-query options with `initialData` set. Similar to + * `computed` from Angular, this function runs in the reactive context. + * @returns The infinite query result, typed so that `data` is never `undefined`. + * @see https://tanstack.com/query/latest/docs/framework/angular/guides/infinite-queries + * @see {@link infiniteQueryOptions} to share these options between `injectInfiniteQuery` and + * `queryClient.infiniteQuery`. + */ +export function injectInfiniteQuery< + TQueryFnData, + TError = DefaultError, + TData = InfiniteData, + TQueryKey extends QueryKey = QueryKey, + TPageParam = unknown, +>( + optionsFn: () => DefinedInitialDataInfiniteOptions< + TQueryFnData, + TError, + TData, + TQueryKey, + TPageParam + >, +): DefinedCreateInfiniteQueryResult + +/** + * Injects an infinite query: a declarative dependency on an asynchronous source of data that is tied to a unique key. + * Infinite queries can additively "load more" data onto an existing set of data or support infinite scroll. + * @param optionsFn - A function that returns infinite query options. Similar to `computed` from Angular, + * this function runs in the reactive context, so signals read inside it drive the query. + * @returns The infinite query result. + * @see https://tanstack.com/query/latest/docs/framework/angular/guides/infinite-queries + * @see {@link infiniteQueryOptions} to share these options between `injectInfiniteQuery` and + * `queryClient.infiniteQuery`. + * @example + * ```angular-ts + * @Component({ + * selector: 'projects', + * template: ` + * @if (query.isPending()) { + * Loading... + * } @else if (query.isError()) { + * Error: {{ query.error()?.message }} + * } @else { + * @for (page of query.data().pages; track $index) { + * @for (project of page; track project.id) { + *

{{ project.name }}

+ * } + * } + * + * } + * `, + * }) + * export class Projects { + * readonly query = injectInfiniteQuery(() => ({ + * queryKey: ['projects'], + * queryFn: ({ pageParam }) => fetchProjects(pageParam), + * initialPageParam: 0, + * getNextPageParam: (lastPage) => lastPage.nextCursor, + * })) + * } + * ``` + */ +export function injectInfiniteQuery< + TQueryFnData, + TError = DefaultError, + TData = InfiniteData, + TQueryKey extends QueryKey = QueryKey, + TPageParam = unknown, +>( + optionsFn: () => UndefinedInitialDataInfiniteOptions< + TQueryFnData, + TError, + TData, + TQueryKey, + TPageParam + >, +): CreateInfiniteQueryResult + +/** + * This overload accepts the general {@link CreateInfiniteQueryOptions} shape rather than the + * `initialData`-aware overloads above, so whether `data` is defined can't be inferred from the call + * site — useful when wrapping `injectInfiniteQuery` in your own helper. + * @param optionsFn - A function that returns infinite query options. Similar to `computed` from Angular, + * this function runs in the reactive context, so signals read inside it drive the query. + * @returns The infinite query result. + * @see https://tanstack.com/query/latest/docs/framework/angular/guides/infinite-queries + */ +export function injectInfiniteQuery< + TQueryFnData, + TError = DefaultError, + TData = InfiniteData, + TQueryKey extends QueryKey = QueryKey, + TPageParam = unknown, +>( + optionsFn: () => CreateInfiniteQueryOptions< + TQueryFnData, + TError, + TData, + TQueryKey, + TPageParam + >, +): CreateInfiniteQueryResult + +export function injectInfiniteQuery< + TQueryFnData, + TError = DefaultError, + TData = InfiniteData, + TQueryKey extends QueryKey = QueryKey, + TPageParam = unknown, +>( + optionsFn: () => + | DefinedInitialDataInfiniteOptions< + TQueryFnData, + TError, + TData, + TQueryKey, + TPageParam + > + | CreateInfiniteQueryOptions< + TQueryFnData, + TError, + TData, + TQueryKey, + TPageParam + >, +): + | DefinedCreateInfiniteQueryResult + | CreateInfiniteQueryResult { + if (typeof ngDevMode === 'undefined' || ngDevMode) { + assertInInjectionContext(injectInfiniteQuery) + } + const outsideZone = injectQueryZone() + const [resultSignal, getObserver] = injectBaseQuery( + optionsFn, + InfiniteQueryObserver as typeof QueryObserver, + ) + const getInfiniteObserver = () => + getObserver() as InfiniteQueryObserver< + TQueryFnData, + TError, + TData, + TQueryKey, + TPageParam + > + return Object.assign( + signalProxy( + resultSignal as Signal>, + infiniteQueryResultFields, + ), + { + refetch: (options?: RefetchOptions) => + outsideZone(() => + untracked(() => getInfiniteObserver().refetch(options)), + ), + fetchNextPage: (options?: FetchNextPageOptions) => + outsideZone(() => + untracked(() => getInfiniteObserver().fetchNextPage(options)), + ), + fetchPreviousPage: (options?: FetchPreviousPageOptions) => + outsideZone(() => + untracked(() => getInfiniteObserver().fetchPreviousPage(options)), + ), + }, + ) as unknown as + | DefinedCreateInfiniteQueryResult + | CreateInfiniteQueryResult +} diff --git a/packages/angular-query/src/inject-is-fetching.ts b/packages/angular-query/src/inject-is-fetching.ts new file mode 100644 index 00000000000..21eb6c0ffc7 --- /dev/null +++ b/packages/angular-query/src/inject-is-fetching.ts @@ -0,0 +1,28 @@ +import { assertInInjectionContext, inject } from '@angular/core' +import { QueryClient } from '@tanstack/query-core' +import { injectExternalStore } from './utils/inject-external-store' +import type { QueryFilters } from '@tanstack/query-core' +import type { Signal } from '@angular/core' + +/** + * Injects a signal that tracks the number of queries that your application is loading or fetching in the + * background (useful for app-wide loading indicators). + * + * Can be used for app-wide loading indicators. + * @param filters - A reactive factory for the filters. + * @returns signal with number of loading or fetching queries. + */ +export function injectIsFetching( + filters: () => Omit = () => ({}), +): Signal { + if (typeof ngDevMode === 'undefined' || ngDevMode) { + assertInInjectionContext(injectIsFetching) + } + const queryClient = inject(QueryClient) + const cache = queryClient.getQueryCache() + + return injectExternalStore(() => ({ + getSnapshot: () => queryClient.isFetching(filters()), + subscribe: (onStoreChange) => cache.subscribe(onStoreChange), + })) +} diff --git a/packages/angular-query/src/inject-is-mutating.ts b/packages/angular-query/src/inject-is-mutating.ts new file mode 100644 index 00000000000..5fd6e8edce9 --- /dev/null +++ b/packages/angular-query/src/inject-is-mutating.ts @@ -0,0 +1,28 @@ +import { assertInInjectionContext, inject } from '@angular/core' +import { QueryClient } from '@tanstack/query-core' +import { injectExternalStore } from './utils/inject-external-store' +import type { MutationFilters } from '@tanstack/query-core' +import type { Signal } from '@angular/core' + +/** + * Injects a signal that tracks the number of mutations that your application currently has `pending` + * (useful for app-wide loading indicators). + * + * Can be used for app-wide loading indicators. + * @param filters - A reactive factory for the filters. + * @returns A read-only signal with the number of fetching mutations. + */ +export function injectIsMutating( + filters: () => Omit = () => ({}), +): Signal { + if (typeof ngDevMode === 'undefined' || ngDevMode) { + assertInInjectionContext(injectIsMutating) + } + const queryClient = inject(QueryClient) + const cache = queryClient.getMutationCache() + + return injectExternalStore(() => ({ + getSnapshot: () => queryClient.isMutating(filters()), + subscribe: (onStoreChange) => cache.subscribe(onStoreChange), + })) +} diff --git a/packages/angular-query/src/inject-is-restoring.ts b/packages/angular-query/src/inject-is-restoring.ts new file mode 100644 index 00000000000..82f908ac610 --- /dev/null +++ b/packages/angular-query/src/inject-is-restoring.ts @@ -0,0 +1,42 @@ +import { + InjectionToken, + assertInInjectionContext, + inject, + signal, +} from '@angular/core' +import type { Provider, Signal } from '@angular/core' + +/** + * Internal token used to track isRestoring state, accessible in public API through `injectIsRestoring` and set via `provideIsRestoring` + */ +const IS_RESTORING = new InjectionToken('', { + factory: () => signal(false).asReadonly(), +}) + +/** + * Injects a readonly signal that is true while the persistence integration restores + * cached query data. Returns false when no restoration is in progress. + * @returns The current restoration state. + */ +export function injectIsRestoring() { + if (typeof ngDevMode === 'undefined' || ngDevMode) { + assertInInjectionContext(injectIsRestoring) + } + return inject(IS_RESTORING) +} + +/** + * Supplies injector-scoped restoration state to the Angular Query integrations. + * The factory runs once in Angular's injection context. + * @internal + * @param isRestoringFactory - Produces the restoration signal for this injector. + * @returns The provider that makes the restoration state injectable. + */ +export function provideIsRestoring( + isRestoringFactory: () => Signal, +): Provider { + return { + provide: IS_RESTORING, + useFactory: isRestoringFactory, + } +} diff --git a/packages/angular-query/src/inject-mutation-state.ts b/packages/angular-query/src/inject-mutation-state.ts new file mode 100644 index 00000000000..bd987abe568 --- /dev/null +++ b/packages/angular-query/src/inject-mutation-state.ts @@ -0,0 +1,94 @@ +import { assertInInjectionContext, inject } from '@angular/core' +import { QueryClient } from '@tanstack/query-core' +import { injectExternalStore } from './utils/inject-external-store' +import type { Signal } from '@angular/core' +import type { + Mutation, + MutationCache, + MutationFilters, + MutationState, +} from '@tanstack/query-core' + +type MutationTypeFromResult = [TResult] extends [ + MutationState< + infer TData, + infer TError, + infer TVariables, + infer TOnMutateResult + >, +] + ? Mutation + : Mutation + +/** + * Filters and optional projection for observing entries in the mutation cache. + */ +export type MutationStateOptions< + TResult = MutationState, + TMutation extends Mutation = + MutationTypeFromResult, +> = { + /** + * Restricts the mutation cache entries included in the result. + */ + filters?: MutationFilters + /** + * Maps each matching mutation to the value exposed in the result signal. + */ + select?: (mutation: TMutation) => TResult +} + +/** + * Reads and projects the matching entries in a mutation cache. + * @param mutationCache - The cache to inspect. + * @param options - Filters and an optional projection for each entry. + * @returns The selected values, or each matching mutation state. + */ +function getResult< + TResult = MutationState, + TMutation extends Mutation = + MutationTypeFromResult, +>( + mutationCache: MutationCache, + options: MutationStateOptions, +): Array { + return mutationCache + .findAll(options.filters) + .map( + (mutation): TResult => + (options.select + ? options.select(mutation as TMutation) + : mutation.state) as TResult, + ) +} + +/** + * Injects a signal that tracks the state of all mutations. + * @param options - A function that returns mutation state options. + * @returns The signal that tracks the state of all mutations. + */ +export function injectMutationState< + TResult = MutationState, + TMutation extends Mutation = + MutationTypeFromResult, +>( + options: () => MutationStateOptions = () => ({}), +): Signal> { + if (typeof ngDevMode === 'undefined' || ngDevMode) { + assertInInjectionContext(injectMutationState) + } + const queryClient = inject(QueryClient) + const mutationCache = queryClient.getMutationCache() + + return injectExternalStore( + () => ({ + getSnapshot: () => getResult(mutationCache, options()), + subscribe: (onStoreChange) => mutationCache.subscribe(onStoreChange), + }), + { + equal: (previous, next) => + previous.length === next.length && + previous.every((value, index) => Object.is(value, next[index])), + }, + ) +} diff --git a/packages/angular-query/src/inject-mutation.ts b/packages/angular-query/src/inject-mutation.ts new file mode 100644 index 00000000000..d5191c6e3b2 --- /dev/null +++ b/packages/angular-query/src/inject-mutation.ts @@ -0,0 +1,151 @@ +import { + assertInInjectionContext, + computed, + effect, + inject, + untracked, +} from '@angular/core' +import { MutationObserver, QueryClient, noop } from '@tanstack/query-core' +import { injectQueryZone } from './utils/inject-query-zone' +import { signalProxy } from './utils/signal-proxy' +import { mutationResultFields } from './utils/result-fields' +import { injectPendingTasksLifecycle } from './utils/inject-pending-tasks-lifecycle' +import { injectExternalStore } from './utils/inject-external-store' +import type { DefaultError } from '@tanstack/query-core' +import type { + CreateMutateAsyncFunction, + CreateMutateFunction, + CreateMutationOptions, + CreateMutationResult, +} from './types' + +/** + * Injects a mutation: an imperative function that can be invoked which typically performs server side effects. + * Unlike queries, mutations are not run automatically. + * @param optionsFn - A function that returns mutation options. Similar to `computed` from Angular, this + * function runs in the reactive context, so signals read inside it drive the mutation. + * @returns The mutation result, including `mutate` and `mutateAsync`. + * @see https://tanstack.com/query/latest/docs/framework/angular/guides/mutations + * @see {@link mutationOptions} to share these options between `injectMutation` and `injectMutationState`. + * @example + * ```angular-ts + * @Component({ + * template: ` + * @if (mutation.isPending()) { + * Saving... + * } @else if (mutation.isError()) { + * Error: {{ mutation.error()?.message }} + * } + * + * `, + * }) + * export class CreatePost { + * readonly mutation = injectMutation(() => ({ + * mutationFn: createPost, + * })) + * } + * ``` + */ +export function injectMutation< + TData = unknown, + TError = DefaultError, + TVariables = void, + TOnMutateResult = unknown, +>( + optionsFn: () => CreateMutationOptions< + TData, + TError, + TVariables, + TOnMutateResult + >, +): CreateMutationResult { + if (typeof ngDevMode === 'undefined' || ngDevMode) { + assertInInjectionContext(injectMutation) + } + const outsideZone = injectQueryZone() + const queryClient = inject(QueryClient) + const lifecycle = injectPendingTasksLifecycle() + + const optionsSignal = computed(optionsFn) + + const observerSignal = computed( + () => new MutationObserver(queryClient, untracked(optionsSignal)), + ) + + // Configure the observer outside the result computation. Mutation-cache + // listeners can synchronously read the public result while setOptions emits. + effect(() => { + const options = optionsSignal() + outsideZone(() => untracked(() => observerSignal().setOptions(options))) + }) + + const mutationStateSignal = injectExternalStore(() => { + const observer = observerSignal() + return { + getSnapshot: () => observer.getCurrentResult(), + subscribe: (onStoreChange) => observer.subscribe(onStoreChange), + } + }) + + const mutate: CreateMutateFunction< + TData, + TError, + TVariables, + TOnMutateResult + > = (...args) => { + mutateAsync(...args).catch(noop) + } + + let pendingInvocations = 0 + + const mutateAsync: CreateMutateAsyncFunction< + TData, + TError, + TVariables, + TOnMutateResult + > = (...args) => { + return outsideZone(() => + untracked(() => { + const observer = observerSignal() + observer.setOptions(optionsSignal()) + pendingInvocations++ + lifecycle.setPending(true) + // Track invocations, not the observer's latest result: reset or a later + // mutation completing must not release work which is still running. + const settled = () => { + pendingInvocations-- + lifecycle.setPending(pendingInvocations > 0) + } + try { + return observer + .mutate(args[0] as TVariables, args[1]) + .finally(settled) + } catch (error) { + settled() + throw error + } + }), + ) + } + + const reset = () => { + outsideZone(() => + untracked(() => { + const observer = observerSignal() + observer.setOptions(optionsSignal()) + observer.reset() + }), + ) + } + + return Object.assign(signalProxy(mutationStateSignal, mutationResultFields), { + mutate, + mutateAsync, + reset, + }) as unknown as CreateMutationResult< + TData, + TError, + TVariables, + TOnMutateResult + > +} diff --git a/packages/angular-query/src/inject-queries.ts b/packages/angular-query/src/inject-queries.ts new file mode 100644 index 00000000000..2b400c1546d --- /dev/null +++ b/packages/angular-query/src/inject-queries.ts @@ -0,0 +1,199 @@ +import { QueriesObserver, QueryClient } from '@tanstack/query-core' +import { + assertInInjectionContext, + computed, + effect, + inject, + untracked, +} from '@angular/core' +import { injectQueryZone } from './utils/inject-query-zone' +import { signalProxy } from './utils/signal-proxy' +import { queryResultFields } from './utils/result-fields' +import { injectIsRestoring } from './inject-is-restoring' +import { injectPendingTasksLifecycle } from './utils/inject-pending-tasks-lifecycle' +import { injectExternalStore } from './utils/inject-external-store' +import type { + InjectQueriesOptions, + QueriesResults, +} from './inject-queries.types' +import type { + QueryObserverOptions, + QueryObserverResult, +} from '@tanstack/query-core' +import type { Signal } from '@angular/core' + +/** + * Injects multiple queries that run in parallel and react to Angular signals. + * @param optionsFn - A function that returns the queries' options. Similar to `computed` from Angular, + * this function runs in the reactive context, so signals read inside it drive the queries. + * @returns A signal containing the query results in the same order as the input queries. + * @see https://tanstack.com/query/latest/docs/framework/angular/guides/parallel-queries + * @example + * ```angular-ts + * @Component({ + * selector: 'users', + * template: ` + * @for (query of userQueries(); track $index) { + * @if (query.isSuccess()) { + *

{{ query.data().name }}

+ * } + * } + * `, + * }) + * export class UsersComponent { + * readonly users = input.required>() + * + * readonly userQueries = injectQueries(() => ({ + * queries: this.users().map((user) => ({ + * queryKey: ['user', user.id], + * queryFn: () => fetchUserById(user.id), + * })), + * })) + * } + * ``` + */ +export function injectQueries< + T extends Array, + TCombinedResult = QueriesResults, +>( + optionsFn: () => InjectQueriesOptions, +): Signal { + if (typeof ngDevMode === 'undefined' || ngDevMode) { + assertInInjectionContext(injectQueries) + } + const outsideZone = injectQueryZone() + const queryClient = inject(QueryClient) + const isRestoring = injectIsRestoring() + const lifecycle = injectPendingTasksLifecycle() + + const optionsSignal = computed(optionsFn) + + const defaultedQueries = computed(() => { + return optionsSignal().queries.map((opts) => { + const defaultedOptions = queryClient.defaultQueryOptions( + opts as QueryObserverOptions, + ) + defaultedOptions._optimisticResults = isRestoring() + ? 'isRestoring' + : 'optimistic' + defaultedOptions.notifyOnChangeProps = 'all' + + return defaultedOptions + }) + }) + + const shouldBlockPendingTasks = ( + observer: QueriesObserver, + results: Array, + ) => { + const queries = observer.getQueries() + + return results.some((result, index) => { + return ( + queries[index]?.state.fetchStatus !== 'idle' || + (result.fetchStatus !== 'idle' && result.isEnabled) + ) + }) + } + + const observerSignal = computed( + () => + new QueriesObserver( + queryClient, + untracked(defaultedQueries), + ), + ) + + effect(() => { + const queries = defaultedQueries() + outsideZone(() => untracked(() => observerSignal().setQueries(queries))) + }) + + // Methods address the current array slot, including methods handed to combine. + const refetches: Array = [] + const getRefetch = (index: number): QueryObserverResult['refetch'] => + (refetches[index] ??= (options) => + outsideZone(() => + untracked(() => { + const observer = observerSignal() + observer.setQueries(defaultedQueries()) + const queryObserver = observer.getObservers()[index] + if (!queryObserver) { + return Promise.reject( + new Error(`Cannot refetch removed query at index ${index}`), + ) + } + return queryObserver.refetch(options) + }), + )) + + const resultSignal = injectExternalStore(() => { + const observer = observerSignal() + const restoring = isRestoring() + return { + getSnapshot: () => { + const results = observer.getOptimisticResult( + defaultedQueries(), + undefined, + )[0] + refetches.length = results.length + return results.map((result, index) => ({ + ...result, + refetch: getRefetch(index), + })) + }, + subscribe: restoring + ? undefined + : (onStoreChange) => { + const unsubscribe = observer.subscribe(() => { + if (lifecycle.destroyed) return + onStoreChange() + }) + return () => { + lifecycle.setPending(false) + unsubscribe() + } + }, + } + }) + + effect((onCleanup) => { + const results = resultSignal() + if (isRestoring()) { + lifecycle.setPending(false) + return + } + + lifecycle.setPending(shouldBlockPendingTasks(observerSignal(), results)) + onCleanup(() => lifecycle.setPending(false)) + }) + + const createResultProxy = (index: number) => { + const resultAtIndexSignal = computed(() => resultSignal()[index]!) + return Object.assign(signalProxy(resultAtIndexSignal, queryResultFields), { + refetch: getRefetch(index), + }) + } + + const resultProxies: Array> = [] + const proxiedResultsSignal = computed(() => { + const results = resultSignal() + resultProxies.length = results.length + + return results.map((_, index) => { + return (resultProxies[index] ??= createResultProxy(index)) + }) + }) + + // Combine in Angular's tracked computation. Core must notify for every raw + // result change, including changes a previous combine function ignored. + return computed(() => { + const result = resultSignal() + const { combine } = optionsSignal() + + if (combine) + return combine(result as Parameters>[0]) + + return proxiedResultsSignal() as unknown as TCombinedResult + }) +} diff --git a/packages/angular-query/src/inject-queries.types.ts b/packages/angular-query/src/inject-queries.types.ts new file mode 100644 index 00000000000..d6741abe3c3 --- /dev/null +++ b/packages/angular-query/src/inject-queries.types.ts @@ -0,0 +1,242 @@ +import type { + DefaultError, + DefinedQueryObserverResult, + OmitKeyof, + QueriesPlaceholderDataFunction, + QueryFunction, + QueryKey, + QueryObserverResult, + dataTagErrorSymbol, +} from '@tanstack/query-core' +import type { + CreateQueryOptions, + CreateQueryResult, + DefinedCreateQueryResult, +} from './types' + +type QueryObserverOptionsForCreateQueries< + TQueryFnData = unknown, + TError = DefaultError, + TData = TQueryFnData, + TQueryKey extends QueryKey = QueryKey, +> = OmitKeyof< + CreateQueryOptions, + 'placeholderData' +> & { + placeholderData?: TQueryFnData | QueriesPlaceholderDataFunction +} + +type QueryError = T extends { + queryKey: { [dataTagErrorSymbol]: infer TError } +} + ? TError + : T extends CreateQueryOptions + ? unknown extends TError + ? DefaultError + : TError + : DefaultError + +type MAXIMUM_DEPTH = 20 +type SkipTokenForCreateQueries = symbol + +type GetCreateQueryOptionsForCreateQueries = T extends { + queryFnData: infer TQueryFnData + error?: infer TError + data: infer TData +} + ? QueryObserverOptionsForCreateQueries + : T extends { queryFnData: infer TQueryFnData; error?: infer TError } + ? QueryObserverOptionsForCreateQueries + : T extends { data: infer TData; error?: infer TError } + ? QueryObserverOptionsForCreateQueries + : T extends [infer TQueryFnData, infer TError, infer TData] + ? QueryObserverOptionsForCreateQueries + : T extends [infer TQueryFnData, infer TError] + ? QueryObserverOptionsForCreateQueries + : T extends [infer TQueryFnData] + ? QueryObserverOptionsForCreateQueries + : T extends { + queryFn?: + | QueryFunction + | SkipTokenForCreateQueries + select?: (data: any) => infer TData + } + ? QueryObserverOptionsForCreateQueries< + TQueryFnData, + QueryError, + unknown extends TData ? TQueryFnData : TData, + TQueryKey + > + : QueryObserverOptionsForCreateQueries + +type IsDefinedInitialData = T extends TData + ? true + : T extends () => infer TValue + ? unknown extends TValue + ? false + : TValue extends TData + ? true + : false + : false + +type GenericGetDefinedOrUndefinedQueryResult = + T extends { initialData?: infer TInitialData } + ? unknown extends TInitialData + ? TUndefined + : IsDefinedInitialData extends true + ? TDefined + : TUndefined + : TUndefined + +type InferDataAndError = T extends { + queryFnData: any + error?: infer TError + data: infer TData +} + ? { data: TData; error: TError } + : T extends { queryFnData: infer TQueryFnData; error?: infer TError } + ? { data: TQueryFnData; error: TError } + : T extends { data: infer TData; error?: infer TError } + ? { data: TData; error: TError } + : T extends [any, infer TError, infer TData] + ? { data: TData; error: TError } + : T extends [infer TQueryFnData, infer TError] + ? { data: TQueryFnData; error: TError } + : T extends [infer TQueryFnData] + ? { data: TQueryFnData; error: unknown } + : T extends { + queryFn?: + | QueryFunction + | SkipTokenForCreateQueries + select?: (data: any) => infer TData + } + ? { + data: unknown extends TData ? TQueryFnData : TData + error: QueryError + } + : { data: unknown; error: DefaultError } + +type GetCreateQueryResult = GenericGetDefinedOrUndefinedQueryResult< + T, + InferDataAndError['data'], + CreateQueryResult< + InferDataAndError['data'], + InferDataAndError['error'] + >, + DefinedCreateQueryResult< + InferDataAndError['data'], + InferDataAndError['error'] + > +> + +type GetQueryObserverResult = GenericGetDefinedOrUndefinedQueryResult< + T, + InferDataAndError['data'], + QueryObserverResult< + InferDataAndError['data'], + InferDataAndError['error'] + >, + DefinedQueryObserverResult< + InferDataAndError['data'], + InferDataAndError['error'] + > +> + +/** + * Maps a tuple of query descriptions to the options accepted by `injectQueries`. + */ +export type QueriesOptions< + T extends Array, + TResults extends Array = [], + TDepth extends ReadonlyArray = [], +> = TDepth['length'] extends MAXIMUM_DEPTH + ? Array + : T extends [] + ? [] + : T extends [infer Head] + ? [...TResults, GetCreateQueryOptionsForCreateQueries] + : T extends [infer Head, ...infer Tails] + ? QueriesOptions< + [...Tails], + [...TResults, GetCreateQueryOptionsForCreateQueries], + [...TDepth, 1] + > + : ReadonlyArray extends T + ? T + : T extends Array< + QueryObserverOptionsForCreateQueries< + infer TQueryFnData, + infer TError, + infer TData, + infer TQueryKey + > + > + ? Array< + QueryObserverOptionsForCreateQueries< + TQueryFnData, + TError, + TData, + TQueryKey + > + > + : Array + +/** + * Maps a tuple of query descriptions to their individual signal-backed results. + */ +export type QueriesResults< + T extends Array, + TResults extends Array = [], + TDepth extends ReadonlyArray = [], +> = TDepth['length'] extends MAXIMUM_DEPTH + ? Array + : T extends [] + ? [] + : T extends [infer Head] + ? [...TResults, GetCreateQueryResult] + : T extends [infer Head, ...infer Tails] + ? QueriesResults< + [...Tails], + [...TResults, GetCreateQueryResult], + [...TDepth, 1] + > + : { [K in keyof T]: GetCreateQueryResult } + +type RawQueriesResults< + T extends Array, + TResults extends Array = [], + TDepth extends ReadonlyArray = [], +> = TDepth['length'] extends MAXIMUM_DEPTH + ? Array + : T extends [] + ? [] + : T extends [infer Head] + ? [...TResults, GetQueryObserverResult] + : T extends [infer Head, ...infer Tails] + ? RawQueriesResults< + [...Tails], + [...TResults, GetQueryObserverResult], + [...TDepth, 1] + > + : { [K in keyof T]: GetQueryObserverResult } + +/** + * A reactive group of query options and an optional projection of their combined results. + */ +export interface InjectQueriesOptions< + T extends Array, + TCombinedResult = QueriesResults, +> { + /** + * The ordered query options to observe; entries can be added, removed, or replaced reactively. + */ + queries: + | readonly [...QueriesOptions] + | readonly [ + ...{ [K in keyof T]: GetCreateQueryOptionsForCreateQueries }, + ] + /** + * Projects the current plain observer results into a single reactively computed value. + */ + combine?: (result: RawQueriesResults) => TCombinedResult +} diff --git a/packages/angular-query-experimental/src/inject-query.ts b/packages/angular-query/src/inject-query.ts similarity index 70% rename from packages/angular-query-experimental/src/inject-query.ts rename to packages/angular-query/src/inject-query.ts index a2599a2fe87..24d696c1242 100644 --- a/packages/angular-query-experimental/src/inject-query.ts +++ b/packages/angular-query/src/inject-query.ts @@ -1,12 +1,14 @@ import { QueryObserver } from '@tanstack/query-core' -import { - Injector, - assertInInjectionContext, - inject, - runInInjectionContext, -} from '@angular/core' -import { createBaseQuery } from './create-base-query' -import type { DefaultError, QueryKey } from '@tanstack/query-core' +import { assertInInjectionContext, untracked } from '@angular/core' +import { injectQueryZone } from './utils/inject-query-zone' +import { injectBaseQuery } from './inject-base-query' +import { signalProxy } from './utils/signal-proxy' +import { queryResultFields } from './utils/result-fields' +import type { + DefaultError, + QueryKey, + RefetchOptions, +} from '@tanstack/query-core' import type { CreateQueryOptions, CreateQueryResult, @@ -18,31 +20,16 @@ import type { } from './query-options' /** - * Options for `injectQuery`, passed after the function that returns the query options. - */ -export interface InjectQueryOptions { - /** - * The `Injector` in which to create the query. - * - * If this is not provided, the current injection context will be used instead (via `inject`). - */ - injector?: Injector -} - -/** - * This overload is selected when `initialData` is known to be defined on the options returned by - * `injectQueryFn`, so the resulting `data` signal is never `undefined` (unless a `select` changes `TData` to - * include `undefined`). - * @param injectQueryFn - A function returning the {@link DefinedInitialDataOptions} to use — everything you - * can pass to `injectQuery`, with `initialData` known to be defined. Similar to `computed` from Angular, this - * function runs in the reactive context, so signals read inside it (in `queryKey`, `enabled`, etc.) drive the - * query. - * @param options - Additional configuration + * This overload is selected when `initialData` is known to be defined on the options returned by `optionsFn`, so the + * resulting `data` signal is never `undefined` (unless a `select` changes `TData` to include `undefined`). + * @param optionsFn - A function returning the {@link DefinedInitialDataOptions} to use — everything you + * can pass to `injectQuery`, with `initialData` known to be defined. Similar to `computed` from Angular, this function runs + * in the reactive context, so signals read inside it (in `queryKey`, `enabled`, etc.) drive the query. * @returns The query result, typed so that `data` is never `undefined` (unless a `select` changes `TData` to * include `undefined`). * @see https://tanstack.com/query/latest/docs/framework/angular/guides/queries * @see {@link queryOptions} to share these options between `injectQuery` and imperative APIs like - * `queryClient.fetchQuery`. + * `queryClient.query`. * @example * ```angular-ts * @Component({ @@ -75,27 +62,25 @@ export function injectQuery< TData = TQueryFnData, TQueryKey extends QueryKey = QueryKey, >( - injectQueryFn: () => DefinedInitialDataOptions< + optionsFn: () => DefinedInitialDataOptions< TQueryFnData, TError, TData, TQueryKey >, - options?: InjectQueryOptions, ): DefinedCreateQueryResult /** * Injects a query: a declarative dependency on an asynchronous source of data that is tied to a unique key. - * @param injectQueryFn - A function returning the {@link UndefinedInitialDataOptions} to use — everything + * @param optionsFn - A function returning the {@link UndefinedInitialDataOptions} to use — everything * you can pass to `injectQuery`. Similar to `computed` from Angular, this function runs in the reactive * context, so signals read inside it (in `queryKey`, `enabled`, etc.) drive the query. - * @param options - Additional configuration * @returns The query result. `status()` is `'pending'` if there is no cached data to display, `'error'` if * the last fetch attempt failed, or `'success'` if the query has data to display. `isPending`/`isSuccess`/ * `isError` are type-guard methods for convenience. * @see https://tanstack.com/query/latest/docs/framework/angular/guides/queries * @see {@link queryOptions} to share these options between `injectQuery` and imperative APIs like - * `queryClient.fetchQuery`. + * `queryClient.query`. * @example * ```angular-ts * @Component({ @@ -149,7 +134,6 @@ export function injectQuery< * readonly postsQuery = injectQuery(() => ({ * queryKey: ['posts', this.filter()], * queryFn: () => fetchPosts(this.filter()), - * // Signals can be combined with expressions * enabled: !!this.filter(), * })) * } @@ -161,23 +145,20 @@ export function injectQuery< TData = TQueryFnData, TQueryKey extends QueryKey = QueryKey, >( - injectQueryFn: () => UndefinedInitialDataOptions< + optionsFn: () => UndefinedInitialDataOptions< TQueryFnData, TError, TData, TQueryKey >, - options?: InjectQueryOptions, ): CreateQueryResult /** * This overload accepts the general {@link CreateQueryOptions} shape rather than the `initialData`-aware * overloads above, so whether `data` is defined can't be inferred from the call site — useful when wrapping * `injectQuery` in your own helper function that forwards caller-provided options. - * @param injectQueryFn - A function that returns query options. Similar to `computed` from Angular, this - * function runs in the reactive context, so signals read inside it (in `queryKey`, `enabled`, etc.) drive - * the query. - * @param options - Additional configuration + * @param optionsFn - A function that returns query options. Similar to `computed` from Angular, this + * function runs in the reactive context, so signals read inside it drive the query. * @returns The query result. * @see https://tanstack.com/query/latest/docs/framework/angular/guides/queries */ @@ -187,21 +168,19 @@ export function injectQuery< TData = TQueryFnData, TQueryKey extends QueryKey = QueryKey, >( - injectQueryFn: () => CreateQueryOptions< - TQueryFnData, - TError, - TData, - TQueryKey - >, - options?: InjectQueryOptions, + optionsFn: () => CreateQueryOptions, ): CreateQueryResult export function injectQuery( - injectQueryFn: () => CreateQueryOptions, - options?: InjectQueryOptions, -) { - !options?.injector && assertInInjectionContext(injectQuery) - return runInInjectionContext(options?.injector ?? inject(Injector), () => - createBaseQuery(injectQueryFn, QueryObserver), - ) as unknown as CreateQueryResult + optionsFn: () => CreateQueryOptions, +): DefinedCreateQueryResult | CreateQueryResult { + if (typeof ngDevMode === 'undefined' || ngDevMode) { + assertInInjectionContext(injectQuery) + } + const outsideZone = injectQueryZone() + const [resultSignal, getObserver] = injectBaseQuery(optionsFn, QueryObserver) + return Object.assign(signalProxy(resultSignal, queryResultFields), { + refetch: (options?: RefetchOptions) => + outsideZone(() => untracked(() => getObserver().refetch(options))), + }) as unknown as DefinedCreateQueryResult | CreateQueryResult } diff --git a/packages/angular-query/src/internal.ts b/packages/angular-query/src/internal.ts new file mode 100644 index 00000000000..b975e19381b --- /dev/null +++ b/packages/angular-query/src/internal.ts @@ -0,0 +1,8 @@ +/** + * Internal APIs shared by the Angular Query packages. + * + * This entry point is not part of the application-facing API and may change + * without notice. + */ +export { getQueryFeatureProviders, queryFeature } from './providers' +export { provideIsRestoring } from './inject-is-restoring' diff --git a/packages/angular-query-experimental/src/mutation-options.ts b/packages/angular-query/src/mutation-options.ts similarity index 98% rename from packages/angular-query-experimental/src/mutation-options.ts rename to packages/angular-query/src/mutation-options.ts index 399fa035633..72d13be3428 100644 --- a/packages/angular-query-experimental/src/mutation-options.ts +++ b/packages/angular-query/src/mutation-options.ts @@ -12,7 +12,7 @@ import type { CreateMutationOptions } from './types' * @example * Looking the mutation up elsewhere via its `mutationKey`, e.g. for a global "saving…" indicator: * ```angular-ts - * import { mutationOptions, injectMutationState } from '@tanstack/angular-query-experimental' + * import { mutationOptions, injectMutationState } from '@tanstack/angular-query' * * const createPostOptions = mutationOptions({ * mutationKey: ['posts', 'create'], @@ -62,7 +62,7 @@ export function mutationOptions< * @example * Sharing options across services, so `QueriesService` stays the single place a mutation is defined: * ```angular-ts - * import { mutationOptions, injectMutation } from '@tanstack/angular-query-experimental' + * import { mutationOptions, injectMutation } from '@tanstack/angular-query' * * @Injectable({ providedIn: 'root' }) * export class QueriesService { diff --git a/packages/angular-query/src/providers.ts b/packages/angular-query/src/providers.ts new file mode 100644 index 00000000000..255652e919d --- /dev/null +++ b/packages/angular-query/src/providers.ts @@ -0,0 +1,197 @@ +import { isPlatformBrowser, isPlatformServer } from '@angular/common' +import { + DOCUMENT, + DestroyRef, + InjectionToken, + PLATFORM_ID, + TransferState, + inject, + makeEnvironmentProviders, + makeStateKey, + provideEnvironmentInitializer, +} from '@angular/core' +import { QueryClient, dehydrate, hydrate } from '@tanstack/query-core' +import { INTERNAL_TANSTACK_QUERY_HYDRATION_TRANSFER_KEY } from './hydration-state-key' +import { injectQueryZone } from './utils/inject-query-zone' +import type { DehydratedState } from '@tanstack/query-core' +import type { EnvironmentProviders } from '@angular/core' + +const INTERNAL_QUERY_CLIENT_SHOULD_HYDRATE = new InjectionToken('', { + providedIn: 'root', + factory: () => true, +}) + +/** + * Mounts the injected client, configures server defaults, and connects TransferState hydration. + */ +function configureQueryClient() { + const queryClient = inject(QueryClient) + const destroyRef = inject(DestroyRef) + const platformId = inject(PLATFORM_ID) + + if (isPlatformServer(platformId)) { + // DOM emulation can fool core's runtime detection. Apply server defaults to + // this client without changing other clients or global scheduling providers. + const defaults = queryClient.getDefaultOptions() + queryClient.setDefaultOptions({ + ...defaults, + queries: { gcTime: Infinity, retry: false, ...defaults.queries }, + mutations: { gcTime: Infinity, ...defaults.mutations }, + }) + } + const shouldHydrate = inject(INTERNAL_QUERY_CLIENT_SHOULD_HYDRATE) + const hydrationStateKey = inject( + INTERNAL_TANSTACK_QUERY_HYDRATION_TRANSFER_KEY, + ) + + if (inject(DOCUMENT, { optional: true })) { + const transferState = inject(TransferState) + + if (shouldHydrate && isPlatformServer(platformId)) { + transferState.onSerialize(hydrationStateKey, () => dehydrate(queryClient)) + } else if (shouldHydrate && isPlatformBrowser(platformId)) { + const dehydratedState = transferState.get(hydrationStateKey, null) + if (dehydratedState) { + hydrate(queryClient, dehydratedState) + transferState.remove(hydrationStateKey) + } + } + } + + queryClient.mount() + destroyRef.onDestroy(() => queryClient.unmount()) +} + +/** + * Provides a `QueryClient` and optional TanStack Query features. + * The factory runs once per injector in Angular's injection context, so it can + * call `inject()` and each SSR request can receive an independent cache. + * @param queryClientFactory - Creates or resolves a `QueryClient` in the injection context. + * @param features - Optional features to configure additional Query functionality. + * @returns A single {@link EnvironmentProviders} value (do not spread into `providers`). + * @see https://tanstack.com/query/v5/docs/framework/angular/quick-start + * @see https://tanstack.com/query/v5/docs/framework/angular/devtools + * @see https://tanstack.com/query/latest/docs/framework/angular/guides/ssr + * @example + * ```ts + * import { + * provideTanStackQuery, + * QueryClient, + * } from '@tanstack/angular-query' + * + * bootstrapApplication(AppComponent, { + * providers: [provideTanStackQuery(() => new QueryClient())], + * }) + * ``` + * + * You can also enable optional developer tools by adding `withDevtools`. By + * default the tools will then be loaded when your app is in development mode. + * + * ```ts + * import { provideTanStackQuery, QueryClient } from '@tanstack/angular-query' + * import { withDevtools } from '@tanstack/angular-query-devtools' + * + * bootstrapApplication(AppComponent, { + * providers: [ + * provideTanStackQuery(() => new QueryClient(), withDevtools()), + * ], + * }) + * ``` + */ +export function provideTanStackQuery( + queryClientFactory: () => QueryClient, + ...features: ReadonlyArray +): EnvironmentProviders { + return makeEnvironmentProviders([ + { + provide: QueryClient, + useFactory: () => injectQueryZone()(queryClientFactory), + }, + ...features.map(getQueryFeatureProviders), + provideEnvironmentInitializer(configureQueryClient), + ]) +} + +const queryFeatureBrand: unique symbol = Symbol('QueryFeature') + +/** + * Opaque configuration returned by Query feature functions such as `withHydrationKey`. + * Pass features to `provideTanStackQuery`; applications do not construct them directly. + */ +export interface QueryFeature { + /** @internal */ + readonly [queryFeatureBrand]: true +} + +interface InternalQueryFeature extends QueryFeature { + readonly ɵproviders: EnvironmentProviders +} + +/** + * Creates a feature shared by Angular Query integration packages. + * @internal + * @param providers - Providers owned by this Query feature. + * @returns An opaque feature that installs the supplied environment providers. + */ +export function queryFeature(providers: EnvironmentProviders): QueryFeature { + const feature: InternalQueryFeature = { + [queryFeatureBrand]: true, + ɵproviders: providers, + } + + return feature +} + +/** + * Gets the environment providers owned by an opaque Query feature. + * @internal + * @param feature - The feature to unwrap. + * @returns The environment providers to install. + */ +export function getQueryFeatureProviders( + feature: QueryFeature, +): EnvironmentProviders { + return (feature as InternalQueryFeature).ɵproviders +} + +/** + * Sets a non-default serialization key for this injector's `QueryClient` cache (server dehydrate / + * browser hydrate via `TransferState`). Use this when you have multiple `QueryClient` instances + * so each has its own key. The default key applies when you do not add this feature. + * + * ```ts + * providers: [ + * provideTanStackQuery( + * () => new QueryClient(), + * withHydrationKey('my-secondary-query-cache'), + * ), + * ] + * ``` + * @param key - A unique string for this client's `TransferState` entry. + * @returns A feature that stores this client's cache under the supplied key. + */ +export function withHydrationKey(key: string): QueryFeature { + return queryFeature( + makeEnvironmentProviders([ + { + provide: INTERNAL_TANSTACK_QUERY_HYDRATION_TRANSFER_KEY, + useValue: makeStateKey(key), + }, + ]), + ) +} + +/** + * Disables `TransferState` hydration and dehydration for the current environment injector. + * @returns A feature that prevents automatic cache transfer for this injector. + */ +export function withNoQueryHydration(): QueryFeature { + return queryFeature( + makeEnvironmentProviders([ + { + provide: INTERNAL_QUERY_CLIENT_SHOULD_HYDRATE, + useValue: false, + }, + ]), + ) +} diff --git a/packages/angular-query-experimental/src/query-options.ts b/packages/angular-query/src/query-options.ts similarity index 89% rename from packages/angular-query-experimental/src/query-options.ts rename to packages/angular-query/src/query-options.ts index 959c6f9369d..593f7884d2c 100644 --- a/packages/angular-query-experimental/src/query-options.ts +++ b/packages/angular-query/src/query-options.ts @@ -3,7 +3,6 @@ import type { InitialDataFunction, NonUndefinedGuard, OmitKeyof, - QueryFunction, QueryKey, QueryKeyWithDataTag, SkipToken, @@ -82,31 +81,15 @@ export type DefinedInitialDataOptions< TError = DefaultError, TData = TQueryFnData, TQueryKey extends QueryKey = QueryKey, -> = Omit< - CreateQueryOptions, - 'queryFn' -> & { - /** - * If set, this value will be used as the initial data for the query cache (as long as the query hasn't been - * created or cached yet). If set to a function, the function will be called **once** during the shared/root - * query initialization, and be expected to synchronously return the initial data. Initial data is - * considered stale by default unless a `staleTime` has been set. `initialData` **is persisted** to the - * cache. - */ +> = CreateQueryOptions & { initialData: | NonUndefinedGuard | (() => NonUndefinedGuard) - /** - * Optional here, but omitting it is only safe when no fetch will be attempted — for example with - * `enabled: false`, or when a default query function has been defined. Otherwise, an enabled query with no - * `queryFn` still tries to fetch and fails with a "Missing queryFn" error; `initialData` does not prevent this. - */ - queryFn?: QueryFunction } /** * You can generally pass everything to `queryOptions` that you can also pass to `injectQuery`. These options - * can be shared across functions and imperative APIs such as `queryClient.fetchQuery`. `options.queryKey` is + * can be shared across functions and imperative APIs such as `queryClient.query`. `options.queryKey` is * required and is the query key to generate options for. * * This overload is selected when `initialData` is known to be defined, so the resulting `data` is never @@ -118,7 +101,7 @@ export type DefinedInitialDataOptions< * @see [The Query Options API](https://tkdodo.eu/blog/the-query-options-api) for more on this pattern. * @example * ```angular-ts - * import { queryOptions, injectQuery } from '@tanstack/angular-query-experimental' + * import { queryOptions, injectQuery } from '@tanstack/angular-query' * * export const postsOptions = queryOptions({ * queryKey: ['posts'], @@ -158,7 +141,7 @@ export function queryOptions< /** * You can generally pass everything to `queryOptions` that you can also pass to `injectQuery`. These options - * can be shared across functions and imperative APIs such as `queryClient.fetchQuery`. `options.queryKey` is + * can be shared across functions and imperative APIs such as `queryClient.query`. `options.queryKey` is * required and is the query key to generate options for. * @param options - The {@link UnusedSkipTokenOptions} to use — everything you can pass to `injectQuery`. * @returns The same options object, typed so that `queryKey` carries the inferred data type. @@ -167,7 +150,7 @@ export function queryOptions< * @example * A parameterized factory, so the same options object can be reused per `id`: * ```angular-ts - * import { queryOptions, injectQuery } from '@tanstack/angular-query-experimental' + * import { queryOptions, injectQuery } from '@tanstack/angular-query' * * export const postOptions = (id: string) => * queryOptions({ @@ -205,7 +188,7 @@ export function queryOptions< /** * You can generally pass everything to `queryOptions` that you can also pass to `injectQuery`. These options - * can be shared across functions and imperative APIs such as `queryClient.fetchQuery`. `options.queryKey` is + * can be shared across functions and imperative APIs such as `queryClient.query`. `options.queryKey` is * required and is the query key to generate options for. * @param options - The {@link UndefinedInitialDataOptions} to use — everything you can pass to `injectQuery`. * @returns The same options object, typed so that `queryKey` carries the inferred data type. @@ -215,7 +198,7 @@ export function queryOptions< * @example * A parameterized factory, so the same options object can be reused per `id`: * ```angular-ts - * import { queryOptions, injectQuery } from '@tanstack/angular-query-experimental' + * import { queryOptions, injectQuery } from '@tanstack/angular-query' * * export const postOptions = (id: string) => * queryOptions({ @@ -243,7 +226,7 @@ export function queryOptions< * @example * A factory that disables the query, type safe, until `postId` is set: * ```angular-ts - * import { queryOptions, skipToken, injectQuery } from '@tanstack/angular-query-experimental' + * import { queryOptions, skipToken, injectQuery } from '@tanstack/angular-query' * * export const postOptions = (postId: number | undefined) => * queryOptions({ diff --git a/packages/angular-query/src/query-resource.ts b/packages/angular-query/src/query-resource.ts new file mode 100644 index 00000000000..4deab7a8c5e --- /dev/null +++ b/packages/angular-query/src/query-resource.ts @@ -0,0 +1,151 @@ +import { computed, untracked } from '@angular/core' +import type { QueryObserverResult } from '@tanstack/query-core' +import type { ResourceSnapshot } from './utils/resource-types' +import type { Resource, ResourceStatus, Signal } from '@angular/core' + +/** + * A query-backed Angular Resource that also exposes an atomic state snapshot. + */ +export interface QueryResource extends Resource { + /** + * The current query state as a single snapshot. + */ + readonly snapshot: Signal> + + /** + * Requests a new query fetch only when the current query data is stale. + * + * Used for compatibility with Angular APIs that might want to reload a resource, + * like Signal Forms' validateAsync resource interface. + * @returns `true` if a reload was initiated, `false` if a reload was unnecessary or unsupported. + */ + reload: () => boolean +} + +type QueryResourceSource = { + readonly data: Signal + readonly status: Signal + readonly fetchStatus: Signal + readonly error: Signal + readonly isStale: Signal + readonly refetch: () => unknown +} + +/** + * Converts an Angular Query result into Angular's Resource interface. + * + * Warning: experimental feature. The API may change in minor and patch releases. + * Pin your package version to an exact version when using this feature. + * + * Call this function once and reuse the returned resource. + * @param query - An Angular Query or infinite-query result. + * @returns A Resource-compatible view of the query result. + */ +export function toResource( + query: QueryResourceSource, +): QueryResource { + // Intentionally does not use resource from snapshot to have + // support for the reload method for compatible libraries + const status = computed(() => { + const fetchStatus = query.fetchStatus() + const data = query.data() + + if (fetchStatus === 'fetching' || fetchStatus === 'paused') { + return data === undefined ? 'loading' : 'reloading' + } + + switch (query.status()) { + case 'success': + return 'resolved' + case 'error': + return 'error' + case 'pending': + return 'idle' + } + }) + + const error = computed(() => { + return query.status() === 'error' + ? normalizeError(query.error()) + : undefined + }) + + const value = computed(() => { + if (status() === 'error') { + throw error() + } + + return query.data() + }) + + const snapshot = computed>(() => { + const currentStatus = status() + + if (currentStatus === 'error') { + return { status: 'error', error: error()! } + } + + return { status: currentStatus, value: query.data() } + }) + + const hasValue = (() => + status() !== 'error' && + query.data() !== undefined) as QueryResource['hasValue'] + + return { + value, + status, + error, + snapshot, + isLoading: computed(() => { + const currentStatus = status() + return currentStatus === 'loading' || currentStatus === 'reloading' + }), + hasValue, + reload(): boolean { + const currentStatus = untracked(status) + if ( + currentStatus === 'idle' || + currentStatus === 'loading' || + currentStatus === 'reloading' + ) { + return false + } + + if (!untracked(query.isStale)) { + return false + } + + void query.refetch() + return true + }, + } +} + +/** + * Converts an unknown rejection reason to an Error-compatible value. + * @param error - The rejected value. + * @returns The existing error-like value, or an Error wrapping the rejection. + */ +function normalizeError(error: unknown): Error { + if (isErrorLike(error)) { + return error + } + + return new Error(String(error), { cause: error }) +} + +/** + * Checks whether a value provides the name and message of an Error. + * @param error - The value to inspect. + * @returns Whether the value can be used as an Error. + */ +function isErrorLike(error: unknown): error is Error { + return ( + error instanceof Error || + (typeof error === 'object' && + error !== null && + typeof (error as Error).name === 'string' && + typeof (error as Error).message === 'string') + ) +} diff --git a/packages/angular-query-experimental/src/types.ts b/packages/angular-query/src/types.ts similarity index 63% rename from packages/angular-query-experimental/src/types.ts rename to packages/angular-query/src/types.ts index 46dc5f88049..ca88db623b1 100644 --- a/packages/angular-query-experimental/src/types.ts +++ b/packages/angular-query/src/types.ts @@ -16,52 +16,28 @@ import type { QueryObserverResult, } from '@tanstack/query-core' import type { Signal } from '@angular/core' -import type { MapToSignals } from './signal-proxy' +import type { MapToSignals } from './utils/signal-proxy' +import type { + InfiniteQueryResultFields, + MutationResultFields, + QueryResultFields, +} from './utils/result-fields' -/** - * The options shared across `angular-query-experimental`'s query functions. Extends - * {@link QueryObserverOptions} from `@tanstack/query-core` as-is — unlike `react-query`, - * `angular-query-experimental` has no extra framework-specific option here. - * @template TQueryFnData - The type your `queryFn` resolves to. - * @template TError - The type of errors your `queryFn` may throw. - * @template TData - The type `data` ends up as after `select` runs. Defaults to `TQueryFnData` when no - * `select` is used. - * @template TQueryData - The type of the data actually held in the query cache — the input to `select` and - * `placeholderData`. Defaults to, and is usually the same as, `TQueryFnData`. - * @template TQueryKey - The type of your `queryKey`. - */ -export interface CreateBaseQueryOptions< - TQueryFnData = unknown, - TError = DefaultError, - TData = TQueryFnData, - TQueryData = TQueryFnData, - TQueryKey extends QueryKey = QueryKey, -> extends QueryObserverOptions< - TQueryFnData, - TError, - TData, - TQueryData, - TQueryKey -> {} +type SignalFunction any> = T & Signal> /** - * The options accepted by `injectQuery`. Same as {@link CreateBaseQueryOptions}, minus `suspense` — which - * `angular-query-experimental` doesn't support, unlike `react-query`. - * @template TQueryFnData - The type your `queryFn` resolves to. - * @template TError - The type of errors your `queryFn` may throw. - * @template TData - The type `data` ends up as after `select` runs. Defaults to `TQueryFnData` when no - * `select` is used. - * @template TQueryKey - The type of your `queryKey`. + * Options accepted by `injectQuery`, with cache data projected through an optional `select`. + * Angular owns result notifications and exposes errors through signals rather than error boundaries. */ -export interface CreateQueryOptions< +export type CreateQueryOptions< TQueryFnData = unknown, TError = DefaultError, TData = TQueryFnData, TQueryKey extends QueryKey = QueryKey, -> extends OmitKeyof< - CreateBaseQueryOptions, - 'suspense' -> {} +> = OmitKeyof< + QueryObserverOptions, + 'notifyOnChangeProps' | 'suspense' | 'throwOnError' +> type CreateStatusBasedQueryResult< TStatus extends QueryObserverResult['status'], @@ -69,59 +45,179 @@ type CreateStatusBasedQueryResult< TError = DefaultError, > = Extract, { status: TStatus }> +type CreateStatusBasedDefinedQueryResult< + TStatus extends DefinedQueryObserverResult['status'], + TData = unknown, + TError = DefaultError, +> = Extract, { status: TStatus }> + +type CreateStatusBasedInfiniteQueryResult< + TStatus extends InfiniteQueryObserverResult['status'], + TData = unknown, + TError = DefaultError, +> = Extract, { status: TStatus }> + +type CreateStatusBasedDefinedInfiniteQueryResult< + TStatus extends DefinedInfiniteQueryObserverResult['status'], + TData = unknown, + TError = DefaultError, +> = Extract< + DefinedInfiniteQueryObserverResult, + { status: TStatus } +> + /** - * The `isSuccess`/`isError`/`isPending` methods on a query result. Unlike `react-query`'s derived booleans, - * these are type-guard methods you call — `if (query.isSuccess())` — so that `query.data` narrows away - * `undefined` inside the branch, the same way `status` narrowing works on the plain object `react-query` - * returns. - * @template TData - The type `data` ends up as after `select` runs. - * @template TError - The type of errors your `queryFn` may throw. + * Signal-backed guards that narrow a query result and its data and error fields by status. */ export interface BaseQueryNarrowing { /** - * Returns `true` if the query is in the `success` state, narrowing the result to that state. + * Returns whether the result is successful and narrows its data and error signals. */ - isSuccess: ( - this: CreateBaseQueryResult, - ) => this is CreateBaseQueryResult< - TData, - TError, - CreateStatusBasedQueryResult<'success', TData, TError> + isSuccess: SignalFunction< + () => this is CreateBaseQueryResult< + TData, + TError, + CreateStatusBasedQueryResult<'success', TData, TError> + > > /** - * Returns `true` if the query is in the `error` state, narrowing the result to that state. + * Returns whether the result failed and narrows its data and error signals. */ - isError: ( - this: CreateBaseQueryResult, - ) => this is CreateBaseQueryResult< - TData, - TError, - CreateStatusBasedQueryResult<'error', TData, TError> + isError: SignalFunction< + () => this is CreateBaseQueryResult< + TData, + TError, + CreateStatusBasedQueryResult<'error', TData, TError> + > > /** - * Returns `true` if the query is in the `pending` state, narrowing the result to that state. + * Narrows the result to the pending state when that state is possible. */ - isPending: ( - this: CreateBaseQueryResult, - ) => this is CreateBaseQueryResult< - TData, - TError, - CreateStatusBasedQueryResult<'pending', TData, TError> + isPending: SignalFunction< + () => this is CreateBaseQueryResult< + TData, + TError, + CreateStatusBasedQueryResult<'pending', TData, TError> + > > } /** - * The options accepted by `injectInfiniteQuery`. Same as {@link CreateBaseQueryOptions}, minus `suspense` — - * which `angular-query-experimental` doesn't support, unlike `react-query` — extends - * {@link InfiniteQueryObserverOptions} from `@tanstack/query-core` for the infinite-query-specific options - * (`getNextPageParam`, `initialPageParam`, etc.). - * @template TQueryFnData - The type of a single page, as your `queryFn` resolves it. - * @template TError - The type of errors your `queryFn` may throw. - * @template TData - The type `data` ends up as after `select` runs. Defaults to `TQueryFnData` here, though - * `injectInfiniteQuery` itself defaults it to `InfiniteData` — the shape `data` actually has - * when no `select` is used. - * @template TQueryKey - The type of your `queryKey`. - * @template TPageParam - The type of the parameter passed to `queryFn` to fetch a given page. + * Signal-backed guards for a query whose initial data excludes the pending state. + */ +export interface DefinedQueryNarrowing { + /** + * Returns whether the result is successful and narrows its data and error signals. + */ + isSuccess: SignalFunction< + () => this is DefinedCreateQueryResult< + TData, + TError, + CreateStatusBasedDefinedQueryResult<'success', TData, TError> + > + > + /** + * Returns whether the result failed and narrows its data and error signals. + */ + isError: SignalFunction< + () => this is DefinedCreateQueryResult< + TData, + TError, + CreateStatusBasedDefinedQueryResult<'error', TData, TError> + > + > + /** + * Narrows the result to the pending state when that state is possible. + */ + isPending: SignalFunction<() => this is never> +} + +/** + * Signal-backed guards that narrow a paginated query result by its current status. + */ +export interface BaseInfiniteQueryNarrowing< + TData = unknown, + TError = DefaultError, +> { + /** + * Returns whether the result is successful and narrows its data and error signals. + */ + isSuccess: SignalFunction< + ( + this: CreateInfiniteQueryResult, + ) => this is CreateInfiniteQueryResult< + TData, + TError, + CreateStatusBasedInfiniteQueryResult<'success', TData, TError> + > + > + /** + * Returns whether the result failed and narrows its data and error signals. + */ + isError: SignalFunction< + ( + this: CreateInfiniteQueryResult, + ) => this is CreateInfiniteQueryResult< + TData, + TError, + CreateStatusBasedInfiniteQueryResult<'error', TData, TError> + > + > + /** + * Narrows the result to the pending state when that state is possible. + */ + isPending: SignalFunction< + ( + this: CreateInfiniteQueryResult, + ) => this is CreateInfiniteQueryResult< + TData, + TError, + CreateStatusBasedInfiniteQueryResult<'pending', TData, TError> + > + > +} + +/** + * Signal-backed guards for a paginated query whose initial data excludes the pending state. + */ +export interface DefinedInfiniteQueryNarrowing< + TData = unknown, + TError = DefaultError, +> { + /** + * Returns whether the result is successful and narrows its data and error signals. + */ + isSuccess: SignalFunction< + ( + this: DefinedCreateInfiniteQueryResult, + ) => this is DefinedCreateInfiniteQueryResult< + TData, + TError, + CreateStatusBasedDefinedInfiniteQueryResult<'success', TData, TError> + > + > + /** + * Returns whether the result failed and narrows its data and error signals. + */ + isError: SignalFunction< + ( + this: DefinedCreateInfiniteQueryResult, + ) => this is DefinedCreateInfiniteQueryResult< + TData, + TError, + CreateStatusBasedDefinedInfiniteQueryResult<'error', TData, TError> + > + > + /** + * Narrows the result to the pending state when that state is possible. + */ + isPending: SignalFunction< + (this: DefinedCreateInfiniteQueryResult) => this is never + > +} + +/** + * Options accepted by `injectInfiniteQuery`, including page parameters and pagination callbacks. */ export interface CreateInfiniteQueryOptions< TQueryFnData = unknown, @@ -137,7 +233,7 @@ export interface CreateInfiniteQueryOptions< TQueryKey, TPageParam >, - 'suspense' + 'notifyOnChangeProps' | 'suspense' | 'throwOnError' > {} /** @@ -153,9 +249,15 @@ export interface CreateInfiniteQueryOptions< export type CreateBaseQueryResult< TData = unknown, TError = DefaultError, - TState = QueryObserverResult, + TState extends QueryObserverResult = QueryObserverResult< + TData, + TError + >, > = BaseQueryNarrowing & - MapToSignals> + MapToSignals< + OmitKeyof, + QueryResultFields + > /** * The result of `injectQuery`. Same as {@link CreateBaseQueryResult}. @@ -177,9 +279,13 @@ export type CreateQueryResult< export type DefinedCreateQueryResult< TData = unknown, TError = DefaultError, - TState = DefinedQueryObserverResult, -> = BaseQueryNarrowing & - MapToSignals> + TState extends DefinedQueryObserverResult = + DefinedQueryObserverResult, +> = DefinedQueryNarrowing & + MapToSignals< + OmitKeyof, + QueryResultFields + > /** * The result of `injectInfiniteQuery` when `initialData` isn't set — `data` may be `undefined` while the @@ -192,8 +298,10 @@ export type DefinedCreateQueryResult< export type CreateInfiniteQueryResult< TData = unknown, TError = DefaultError, -> = BaseQueryNarrowing & - MapToSignals> + TState extends InfiniteQueryObserverResult = + InfiniteQueryObserverResult, +> = BaseInfiniteQueryNarrowing & + MapToSignals /** * The result of `injectInfiniteQuery` when `initialData` is set — `data` is never `undefined`. Same shape as @@ -205,11 +313,12 @@ export type CreateInfiniteQueryResult< export type DefinedCreateInfiniteQueryResult< TData = unknown, TError = DefaultError, - TDefinedInfiniteQueryObserver = DefinedInfiniteQueryObserverResult< + TDefinedInfiniteQueryObserver extends DefinedInfiniteQueryObserverResult< TData, TError - >, -> = MapToSignals + > = DefinedInfiniteQueryObserverResult, +> = DefinedInfiniteQueryNarrowing & + MapToSignals /** * The options accepted by `injectMutation`. Same as {@link MutationObserverOptions} from @@ -227,14 +336,13 @@ export interface CreateMutationOptions< TOnMutateResult = unknown, > extends OmitKeyof< MutationObserverOptions, - '_defaulted' + '_defaulted' | 'throwOnError' > {} /** * The type of `mutate`, as returned by `injectMutation`. Forwards the variables (and an optional per-call * `onSuccess`/`onError`/`onSettled`) to the underlying `mutate` call. Fire-and-forget — errors are surfaced - * through the mutation result instead of being thrown by `mutate`, unless `throwOnError` makes - * `injectMutation` rethrow them after emitting them on `ngZone.onError`. + * through the mutation result, not thrown. * @template TData - The type your mutation function resolves to. * @template TError - The type of errors your mutation function may throw. * @template TVariables - The type of the variable passed to `mutate`. @@ -309,17 +417,8 @@ type CreateStatusBasedMutationResult< { status: TStatus } > -type SignalFunction any> = T & Signal> - /** - * The `isSuccess`/`isError`/`isPending`/`isIdle` methods on a mutation result. Each is both a `Signal` - * (its current boolean value is read reactively without calling it) and a type-guard function you can - * call — `if (mutation.isSuccess())` — so that `mutation.data` narrows away `undefined` inside the branch. - * @template TData - The type your mutation function resolves to. - * @template TError - The type of errors your mutation function may throw. - * @template TVariables - The type of the variable passed to `mutate`/`mutateAsync`. - * @template TOnMutateResult - The type returned by `onMutate`, passed to `onSuccess`/`onError`/`onSettled` as - * their `onMutateResult` parameter — useful for optimistic-update rollback data. + * Signal-backed guards that narrow mutation data, errors, and variables by the current status. */ export interface BaseMutationNarrowing< TData = unknown, @@ -433,4 +532,7 @@ export type CreateMutationResult< TOnMutateResult >, > = BaseMutationNarrowing & - MapToSignals> + MapToSignals< + OmitKeyof, + MutationResultFields + > diff --git a/packages/angular-query/src/utils/__test__/inject-external-store.test.ts b/packages/angular-query/src/utils/__test__/inject-external-store.test.ts new file mode 100644 index 00000000000..b9345e61739 --- /dev/null +++ b/packages/angular-query/src/utils/__test__/inject-external-store.test.ts @@ -0,0 +1,280 @@ +import { Component, computed, input, inputBinding, signal } from '@angular/core' +import { TestBed } from '@angular/core/testing' +import { beforeEach, describe, expect, it, vi } from 'vitest' +import { injectExternalStore } from '../inject-external-store' +import { provideAngularQueryChangeDetection } from '../../__tests__/test-utils' +import type { Signal } from '@angular/core' + +function store(initial: number) { + let current = initial + const listeners = new Set<() => void>() + const cleanup = vi.fn<(notify: () => void) => boolean>((notify: () => void) => + listeners.delete(notify), + ) + const subscribe = vi.fn<(notify: () => void) => () => boolean>( + (notify: () => void) => { + listeners.add(notify) + return () => cleanup(notify) + }, + ) + return { + subscribe, + cleanup, + getSnapshot: () => current, + set(next: number) { + current = next + listeners.forEach((notify) => notify()) + }, + } +} + +function host( + create: () => Signal, + initialize?: (value: Signal) => void, +) { + @Component({ template: '' }) + class Host { + readonly value = create() + ngOnInit() { + initialize?.(this.value) + } + } + return TestBed.createComponent(Host) +} + +describe('injectExternalStore', () => { + beforeEach(() => { + TestBed.configureTestingModule({ + providers: [provideAngularQueryChangeDetection()], + }) + }) + + it('reflects changes made during initialization after an early snapshot read', () => { + const source = store(1) + const fixture = host( + () => injectExternalStore(() => source), + (value) => { + expect(value()).toBe(1) + source.set(2) + }, + ) + fixture.detectChanges() + expect(fixture.componentInstance.value()).toBe(2) + source.set(3) + expect(fixture.componentInstance.value()).toBe(3) + }) + + it.each([false, true])( + 'reflects changes made by subscription setup (notifies: %s)', + (notifies) => { + const source = store(1) + const fixture = host(() => + injectExternalStore(() => ({ + getSnapshot: source.getSnapshot, + subscribe: (notify) => { + source.set(2) + if (notifies) notify() + return source.subscribe(notify) + }, + })), + ) + fixture.detectChanges() + expect(fixture.componentInstance.value()).toBe(2) + source.set(3) + expect(fixture.componentInstance.value()).toBe(3) + }, + ) + + it('preserves equal snapshots for consumers', () => { + const source = store(1) + const fixture = host(() => + injectExternalStore( + () => ({ + getSnapshot: () => ({ count: source.getSnapshot() }), + subscribe: source.subscribe, + }), + { equal: (a, b) => a.count === b.count }, + ), + ) + fixture.detectChanges() + const derive = vi.fn<() => number>( + () => fixture.componentInstance.value().count, + ) + const derived = computed(derive) + expect(derived()).toBe(1) + source.set(1) + expect(derived()).toBe(1) + expect(derive).toHaveBeenCalledTimes(1) + source.set(2) + expect(derived()).toBe(2) + }) + + it('tracks snapshot dependencies without reconnecting for selectors or incidental reads', () => { + const source = store(0) + const multiplier = signal(10) + const incidental = signal(0) + const fixture = host(() => + injectExternalStore(() => ({ + getSnapshot: () => (source.getSnapshot() > 0 ? multiplier() : 0), + subscribe: (notify) => { + incidental() + return source.subscribe(notify) + }, + })), + ) + fixture.detectChanges() + const value = fixture.componentInstance.value + expect(value()).toBe(0) + source.set(1) + expect(value()).toBe(10) + multiplier.set(20) + incidental.set(1) + fixture.detectChanges() + expect(value()).toBe(20) + expect(source.subscribe).toHaveBeenCalledTimes(1) + }) + + it('follows the current source and releases the previous source', () => { + const first = store(1) + const second = store(10) + const requested = signal(first) + const fixture = host(() => injectExternalStore(() => requested())) + fixture.detectChanges() + const value = fixture.componentInstance.value + expect(value()).toBe(1) + requested.set(second) + expect(value()).toBe(10) + second.set(11) + fixture.detectChanges() + expect(value()).toBe(11) + expect(first.cleanup).toHaveBeenCalledTimes(1) + first.set(2) + expect(value()).toBe(11) + second.set(12) + expect(value()).toBe(12) + }) + + it('releases observation while paused and catches up on resume', () => { + const source = store(1) + const paused = signal(false) + const fixture = host(() => + injectExternalStore(() => ({ + getSnapshot: source.getSnapshot, + subscribe: paused() ? undefined : source.subscribe, + })), + ) + fixture.detectChanges() + paused.set(true) + fixture.detectChanges() + expect(source.cleanup).toHaveBeenCalledTimes(1) + source.set(2) + paused.set(false) + fixture.detectChanges() + expect(fixture.componentInstance.value()).toBe(2) + source.set(3) + expect(fixture.componentInstance.value()).toBe(3) + }) + + it('allows subscription setup and cleanup to read the result', () => { + const source = store(1) + const enabled = signal(true) + const seen: Array = [] + const fixture = host(() => { + const value = injectExternalStore(() => ({ + getSnapshot: source.getSnapshot, + subscribe: enabled() + ? (notify: () => void) => { + seen.push(value()) + const cleanup = source.subscribe(notify) + return () => { + seen.push(value()) + cleanup() + } + } + : undefined, + })) + return value + }) + fixture.detectChanges() + enabled.set(false) + fixture.detectChanges() + expect(seen).toStrictEqual([1, 1]) + }) + + it('keeps snapshot errors separate from subscription errors', () => { + const source = store(1) + const fixture = host(() => + injectExternalStore(() => ({ + getSnapshot: source.getSnapshot, + subscribe: () => { + source.set(2) + throw new Error('subscribe failed') + }, + })), + ) + expect(() => fixture.detectChanges()).toThrow('subscribe failed') + expect(fixture.componentInstance.value()).toBe(2) + }) + + it('recovers from a snapshot error on the next store notification', () => { + const source = store(1) + const fixture = host(() => + injectExternalStore(() => ({ + getSnapshot: () => { + if (source.getSnapshot() === 2) throw new Error('snapshot failed') + return source.getSnapshot() + }, + subscribe: source.subscribe, + })), + ) + fixture.detectChanges() + source.set(2) + expect(() => fixture.componentInstance.value()).toThrow('snapshot failed') + source.set(3) + expect(fixture.componentInstance.value()).toBe(3) + expect(source.subscribe).toHaveBeenCalledTimes(1) + }) + + it.each([false, true])( + 'releases subscriptions on destruction (during setup: %s)', + (duringSetup) => { + const source = store(1) + const fixture = host(() => + injectExternalStore(() => ({ + getSnapshot: source.getSnapshot, + subscribe: (notify) => { + const cleanup = source.subscribe(notify) + // oxlint-disable-next-line vitest-js/no-conditional-in-test -- The parameter selects setup/actions; every case runs the assertions. + if (duringSetup) fixture.destroy() + return cleanup + }, + })), + ) + fixture.detectChanges() + // oxlint-disable-next-line vitest-js/no-conditional-in-test -- The parameter selects setup/actions; every case runs the assertions. + if (!duringSetup) fixture.destroy() + expect(source.cleanup).toHaveBeenCalledTimes(1) + }, + ) + + it('renders required inputs and changes made in ngOnInit', () => { + const source = store(1) + @Component({ template: '{{ value() }}' }) + class Example { + readonly source = input.required>() + readonly value = injectExternalStore(() => this.source()) + ngOnInit() { + expect(this.value()).toBe(1) + this.source().set(2) + } + } + const fixture = TestBed.createComponent(Example, { + bindings: [inputBinding('source', () => source)], + }) + fixture.detectChanges() + expect(fixture.nativeElement.textContent).toBe('2') + source.set(3) + fixture.detectChanges() + expect(fixture.nativeElement.textContent).toBe('3') + }) +}) diff --git a/packages/angular-query/src/utils/inject-external-store.ts b/packages/angular-query/src/utils/inject-external-store.ts new file mode 100644 index 00000000000..d20c5dc69f8 --- /dev/null +++ b/packages/angular-query/src/utils/inject-external-store.ts @@ -0,0 +1,91 @@ +import { + DestroyRef, + assertInInjectionContext, + computed, + effect, + inject, + signal, + untracked, +} from '@angular/core' +import { injectQueryZone } from './inject-query-zone' +import type { Signal, ValueEqualityFn } from '@angular/core' + +interface ExternalBinding { + /** Synchronous snapshot. Angular signals read here are tracked dependencies. */ + readonly getSnapshot: () => T + /** Omit to pause observation; changing eligibility requires a new descriptor. */ + readonly subscribe?: ((notify: () => void) => () => void) | undefined +} + +interface ExternalStoreOptions { + /** Snapshot equality, defaulting to Object.is. Does not control connection identity. */ + readonly equal?: ValueEqualityFn | undefined +} + +/** + * Creates a readonly Angular signal backed by a synchronous external store. + * + * Store access, subscription setup, and cleanup run outside NgZone so background + * timers do not hold Angular stability open. + * + * Reads evaluate snapshots without subscribing. An effect owns the subscription + * and invalidates the snapshot after setup, closing the gap between an early + * read and connection. The next read recomputes the snapshot; equality prevents + * unchanged values from propagating. Unread snapshots stay lazy. + * + * Notifications invalidate snapshots synchronously once connected. Snapshot-only + * dependencies do not reinstall the subscription. Subscription setup and cleanup + * may read the returned signal; factories and snapshot readers must not recurse. + * + * Only factory/snapshot errors are exposed on reads. Subscription and cleanup + * errors follow Angular's normal effect error handling; the helper does not store + * them or implement retries. Destruction stops observation without changing the + * cached snapshot. + * @param binding - Produces the current snapshot reader and optional subscription. + * @param options - Optional equality comparison for snapshots. + * @returns A readonly signal containing the latest external snapshot. + */ +export function injectExternalStore( + binding: () => ExternalBinding, + options?: ExternalStoreOptions, +): Signal { + if (typeof ngDevMode === 'undefined' || ngDevMode) { + assertInInjectionContext(injectExternalStore) + } + const owner = inject(DestroyRef) + const outsideZone = injectQueryZone() + const revision = signal(0) + const requested = computed(() => outsideZone(binding)) + const invalidate = () => untracked(() => revision.update((n) => n + 1)) + + effect((onCleanup) => { + // The previous subscription's cleanup may have destroyed the owner. + if (owner.destroyed) return + const current = requested() + outsideZone(() => + untracked(() => { + try { + const unsubscribe = current.subscribe?.(invalidate) + if (unsubscribe) { + // subscribe() can trigger component/injector destruction before returning. + // Registering cleanup afterward misses that destruction. + if (owner.destroyed) unsubscribe() + else onCleanup(() => outsideZone(unsubscribe)) + } + } finally { + // Invalidate after subscribing so an early cached snapshot cannot miss + // changes before or during setup. Do not eagerly read the snapshot. + invalidate() + } + }), + ) + }) + + return computed( + () => { + revision() + return outsideZone(() => requested().getSnapshot()) + }, + options?.equal ? { equal: options.equal } : undefined, + ) +} diff --git a/packages/angular-query/src/utils/inject-pending-tasks-lifecycle.ts b/packages/angular-query/src/utils/inject-pending-tasks-lifecycle.ts new file mode 100644 index 00000000000..b6718d743e3 --- /dev/null +++ b/packages/angular-query/src/utils/inject-pending-tasks-lifecycle.ts @@ -0,0 +1,53 @@ +import { DestroyRef, NgZone, PendingTasks, inject } from '@angular/core' + +/** + * Tracks ownership and pending work for the current Angular injection context. + */ +export interface QueryLifecycle { + /** + * Whether Angular has destroyed the injection context that owns this query. + */ + readonly destroyed: boolean + /** + * Adds or releases the task that keeps Angular unstable while owned work is pending. + */ + setPending: (pending: boolean) => void +} + +/** + * Tracks pending work for the lifetime of the current injection context. + * @returns The destruction state and pending-task controller for this context. + */ +export function injectPendingTasksLifecycle(): QueryLifecycle { + const destroyRef = inject(DestroyRef) + const pendingTasks = inject(PendingTasks) + const ngZone = inject(NgZone) + let taskCleanup: (() => void) | undefined + + const lifecycle: QueryLifecycle = { + get destroyed() { + return destroyRef.destroyed + }, + setPending(pending) { + if (pending) { + if (!destroyRef.destroyed && !taskCleanup) { + taskCleanup = pendingTasks.add() + } + return + } + + const cleanup = taskCleanup + taskCleanup = undefined + // Enter NgZone while our task is still held to avoid transient stability + // before dependent queries are scheduled. + // In zoneless apps, NgZone.run simply invokes the cleanup. + if (cleanup) ngZone.run(cleanup) + }, + } + + destroyRef.onDestroy(() => { + lifecycle.setPending(false) + }) + + return lifecycle +} diff --git a/packages/angular-query/src/utils/inject-query-zone.ts b/packages/angular-query/src/utils/inject-query-zone.ts new file mode 100644 index 00000000000..1bc40a01560 --- /dev/null +++ b/packages/angular-query/src/utils/inject-query-zone.ts @@ -0,0 +1,10 @@ +import { NgZone, inject } from '@angular/core' + +/** + * Keeps Query's background timers out of Angular's stability tracking. + * @returns A function that runs callbacks outside the injected NgZone. + */ +export function injectQueryZone() { + const ngZone = inject(NgZone) + return (fn: () => T): T => ngZone.runOutsideAngular(fn) +} diff --git a/packages/angular-query/src/utils/resource-types.ts b/packages/angular-query/src/utils/resource-types.ts new file mode 100644 index 00000000000..29981ce15cd --- /dev/null +++ b/packages/angular-query/src/utils/resource-types.ts @@ -0,0 +1,13 @@ +import type { ResourceStatus } from '@angular/core' + +// Angular 20 does not expose ResourceSnapshot. Remove this local type when the +// minimum supported Angular version provides it. +/** + * A discriminated snapshot containing either a resource value or its current error. + */ +export type ResourceSnapshot = + | { readonly status: 'error'; readonly error: Error } + | { + readonly status: Exclude + readonly value: T + } diff --git a/packages/angular-query/src/utils/result-fields.ts b/packages/angular-query/src/utils/result-fields.ts new file mode 100644 index 00000000000..4b238f4b6bf --- /dev/null +++ b/packages/angular-query/src/utils/result-fields.ts @@ -0,0 +1,87 @@ +import type { + InfiniteQueryObserverResult, + MutationObserverResult, + QueryObserverResult, +} from '@tanstack/query-core' +import type { MethodKeys } from './signal-proxy' + +type Fields = { [K in Exclude>]: true } + +// Exhaustive maps keep the field surface aligned with query-core at compile time. +const queryFields = { + data: true, + dataUpdatedAt: true, + error: true, + errorUpdatedAt: true, + failureCount: true, + failureReason: true, + errorUpdateCount: true, + isError: true, + isFetched: true, + isFetchedAfterMount: true, + isFetching: true, + isLoading: true, + isPending: true, + isLoadingError: true, + isInitialLoading: true, + isPaused: true, + isPlaceholderData: true, + isRefetchError: true, + isRefetching: true, + isStale: true, + isSuccess: true, + isEnabled: true, + status: true, + fetchStatus: true, +} satisfies Fields + +const infiniteQueryFields = { + ...queryFields, + hasNextPage: true, + hasPreviousPage: true, + isFetchNextPageError: true, + isFetchingNextPage: true, + isFetchPreviousPageError: true, + isFetchingPreviousPage: true, +} satisfies Fields + +const mutationFields = { + context: true, + data: true, + error: true, + failureCount: true, + failureReason: true, + isPaused: true, + status: true, + variables: true, + submittedAt: true, + isError: true, + isIdle: true, + isPending: true, + isSuccess: true, +} satisfies Fields + +export const queryResultFields = /* #__PURE__ */ Object.keys( + queryFields, +) as Array +/** + * The query observer value fields exposed as Angular signals. + */ +export type QueryResultFields = (typeof queryResultFields)[number] + +export const infiniteQueryResultFields = /* #__PURE__ */ Object.keys( + infiniteQueryFields, +) as Array +/** + * The paginated query observer value fields exposed as Angular signals. + */ +export type InfiniteQueryResultFields = + (typeof infiniteQueryResultFields)[number] + +export const mutationResultFields = /* #__PURE__ */ Object.keys( + mutationFields, +) as Array +/** + * The mutation observer value fields exposed as Angular signals. + */ +export type MutationResultFields = (typeof mutationResultFields)[number] diff --git a/packages/angular-query/src/utils/signal-proxy.ts b/packages/angular-query/src/utils/signal-proxy.ts new file mode 100644 index 00000000000..cec6cf4c500 --- /dev/null +++ b/packages/angular-query/src/utils/signal-proxy.ts @@ -0,0 +1,37 @@ +import { computed } from '@angular/core' +import type { Signal } from '@angular/core' + +/** + * Names of object properties whose values are callable. + */ +export type MethodKeys = { + [K in keyof T]: T[K] extends (...args: Array) => any ? K : never +}[keyof T] + +/** + * Exposes selected object fields as Angular signals and leaves all other fields unchanged. + */ +export type MapToSignals = { + [K in keyof T as K extends TSignalFields ? K : never]: Signal +} & { + [K in keyof T as K extends TSignalFields ? never : K]: T[K] +} + +/** + * Maps known result fields to lazy computed signals on an ordinary object. + * Creating or enumerating the fields never evaluates the source. Imperative + * methods are defined by each adapter, outside this mapping. + * @param inputSignal - The source snapshot. + * @param fields - The fields exposed as signals. + * @returns An object containing one stable signal per field. + */ +export function signalProxy( + inputSignal: Signal, + fields: ReadonlyArray, +): { [P in TField]: Signal } { + const result = {} as { [P in TField]: Signal } + for (const field of fields) { + result[field] = computed(() => inputSignal()[field]) + } + return result +} diff --git a/packages/angular-query/test-setup.ts b/packages/angular-query/test-setup.ts new file mode 100644 index 00000000000..eb69f3f05a9 --- /dev/null +++ b/packages/angular-query/test-setup.ts @@ -0,0 +1,9 @@ +import '@testing-library/jest-dom/vitest' +import '@angular/compiler' +import { getTestBed } from '@angular/core/testing' +import { + BrowserTestingModule, + platformBrowserTesting, +} from '@angular/platform-browser/testing' + +getTestBed().initTestEnvironment(BrowserTestingModule, platformBrowserTesting()) diff --git a/packages/angular-query/test-setup.zoneful.ts b/packages/angular-query/test-setup.zoneful.ts new file mode 100644 index 00000000000..4f24c5e4cf7 --- /dev/null +++ b/packages/angular-query/test-setup.zoneful.ts @@ -0,0 +1,13 @@ +import 'zone.js' +import 'zone.js/testing' +import '@testing-library/jest-dom/vitest' +import '@angular/compiler' +import { getTestBed } from '@angular/core/testing' +import { + BrowserTestingModule, + platformBrowserTesting, +} from '@angular/platform-browser/testing' + +process.env.ANGULAR_QUERY_ZONEFUL = 'true' + +getTestBed().initTestEnvironment(BrowserTestingModule, platformBrowserTesting()) diff --git a/packages/angular-query-experimental/tsconfig.json b/packages/angular-query/tsconfig.json similarity index 85% rename from packages/angular-query-experimental/tsconfig.json rename to packages/angular-query/tsconfig.json index 7db92102f0f..87d66700082 100644 --- a/packages/angular-query-experimental/tsconfig.json +++ b/packages/angular-query/tsconfig.json @@ -17,11 +17,12 @@ }, "include": [ "src", + "schematics", + "schematics-build", "scripts", "test-setup.ts", - "*.config.ts", - "*.config.js", + "*.config.*", "package.json" ], - "references": [{ "path": "../query-devtools" }] + "exclude": ["src/**/*.tmp.test.ts"] } diff --git a/packages/angular-query/tsconfig.prod.json b/packages/angular-query/tsconfig.prod.json new file mode 100644 index 00000000000..0f5fee44cf4 --- /dev/null +++ b/packages/angular-query/tsconfig.prod.json @@ -0,0 +1,15 @@ +{ + "extends": "./tsconfig.json", + "compilerOptions": { + "incremental": false, + "composite": false, + "rootDir": "../../", + "customConditions": null, + // vite-plugin-dts must not depend on a generated query-core build. + "paths": { + "@tanstack/query-core": ["../query-core/src/index.ts"] + } + }, + "include": ["src"], + "exclude": ["src/__tests__"] +} diff --git a/packages/angular-query/tsconfig.schematics.json b/packages/angular-query/tsconfig.schematics.json new file mode 100644 index 00000000000..470c02914cd --- /dev/null +++ b/packages/angular-query/tsconfig.schematics.json @@ -0,0 +1,22 @@ +{ + "compilerOptions": { + "declaration": false, + "esModuleInterop": true, + "forceConsistentCasingInFileNames": true, + "lib": ["ES2022"], + "module": "CommonJS", + "moduleResolution": "Node", + "ignoreDeprecations": "6.0", + "noEmitOnError": true, + "noImplicitReturns": true, + "noUnusedLocals": true, + "noUnusedParameters": true, + "outDir": "dist/schematics", + "rootDir": "schematics", + "skipLibCheck": true, + "strict": true, + "target": "ES2022", + "types": ["node"] + }, + "include": ["schematics/**/*.ts"] +} diff --git a/packages/angular-query/tsconfig.spec.json b/packages/angular-query/tsconfig.spec.json new file mode 100644 index 00000000000..c70b776b257 --- /dev/null +++ b/packages/angular-query/tsconfig.spec.json @@ -0,0 +1,15 @@ +{ + "extends": "./tsconfig.json", + "compilerOptions": { + "types": ["vitest/globals", "node"], + "noEmit": false, + "emitDeclarationOnly": false, + "declaration": false, + "declarationMap": false, + "composite": false, + "target": "ES2022" + }, + "files": ["test-setup.ts"], + "include": ["src/**/*.test.ts", "../query-test-utils/src/**/*.ts"], + "exclude": ["src/**/*.test-d.ts", "src/**/*.tmp.test.ts"] +} diff --git a/packages/angular-query/vite.config.ts b/packages/angular-query/vite.config.ts new file mode 100644 index 00000000000..17665498241 --- /dev/null +++ b/packages/angular-query/vite.config.ts @@ -0,0 +1,91 @@ +import { isBuiltin } from 'node:module' +import { defineConfig } from 'vite' +import tsconfigPaths from 'vite-tsconfig-paths' +import dts from 'vite-plugin-dts' +import packageJson from './package.json' with { type: 'json' } + +function ensureImportFileExtension({ + content, + extension, +}: { + content: string + extension: string +}) { + // replace e.g. `import { foo } from './foo'` with `import { foo } from './foo.js'` + content = content.replace( + /(im|ex)port\s[\w{}/*\s,]+from\s['"](?:\.\.?\/)+?[^'"]+(?=['"];?)/gm, + (specifier) => + /\.(?:[cm]?js|json)$/.test(specifier) + ? specifier + : `${specifier}.${extension}`, + ) + + // replace e.g. `import('./foo')` with `import('./foo.js')` + content = content.replace( + /import\(['"](?:\.\.?\/)+?[^'"]+(?=['"];?)/gm, + (specifier) => + /\.(?:[cm]?js|json)$/.test(specifier) + ? specifier + : `${specifier}.${extension}`, + ) + return content +} + +const externalDependencies = Object.keys({ + ...packageJson.dependencies, + ...packageJson.peerDependencies, +}) + +export default defineConfig({ + // fix from https://github.com/vitest-dev/vitest/issues/6992#issuecomment-2509408660 + resolve: { + conditions: ['@tanstack/custom-condition'], + }, + plugins: [ + tsconfigPaths({ projects: ['tsconfig.prod.json'] }), + dts({ + outDir: 'dist', + entryRoot: './src', + include: './src', + exclude: ['src/**/__tests__/**', 'src/**/__test__/**'], + tsconfigPath: 'tsconfig.prod.json', + compilerOptions: { + module: 99, // ESNext + declarationMap: false, + }, + beforeWriteFile: (filePath, content) => { + return { + filePath, + content: ensureImportFileExtension({ content, extension: 'js' }), + } + }, + afterDiagnostic: (diagnostics) => { + if (diagnostics.length > 0) { + console.error('Please fix the above type errors') + process.exit(1) + } + }, + }), + ], + build: { + outDir: 'dist', + minify: false, + sourcemap: true, + lib: { + entry: ['./src/index.ts', './src/internal.ts'], + formats: ['es'], + fileName: () => '[name].mjs', + }, + rolldownOptions: { + external: (id) => + isBuiltin(id) || + externalDependencies.some( + (dependency) => id === dependency || id.startsWith(`${dependency}/`), + ), + output: { + preserveModules: true, + preserveModulesRoot: 'src', + }, + }, + }, +}) diff --git a/packages/angular-query/vitest.config.ts b/packages/angular-query/vitest.config.ts new file mode 100644 index 00000000000..7a66c43a335 --- /dev/null +++ b/packages/angular-query/vitest.config.ts @@ -0,0 +1,57 @@ +import { defineConfig } from 'vitest/config' +import angular from '@analogjs/vite-plugin-angular' +import packageJson from './package.json' with { type: 'json' } + +export default defineConfig({ + // fix from https://github.com/vitest-dev/vitest/issues/6992#issuecomment-2509408660 + resolve: { + conditions: ['@tanstack/custom-condition'], + }, + environments: { + ssr: { + resolve: { + conditions: ['@tanstack/custom-condition'], + }, + }, + }, + oxc: { + target: 'es2022', + }, + plugins: [ + angular({ + tsconfig: './tsconfig.spec.json', + // Vitest sets VITEST; Analog defaults jit: true, which skips ngtsc transforms for + // signal inputs so inputBinding() fails (NG0315). Keep the plugin and compiler-cli + // on the same supported TypeScript version to avoid mixed compiler ASTs. + jit: false, + }), + ], + test: { + name: packageJson.name, + dir: './src', + watch: false, + environment: 'jsdom', + setupFiles: ['./test-setup.ts'], + coverage: { + enabled: !!process.env.CI, + provider: 'istanbul', + include: ['src/**/*'], + exclude: ['src/__tests__/**'], + }, + include: ['**/*.{test,spec}.{ts,mts,cts,tsx,js,mjs,cjs,jsx}'], + // The focused Zone.js project opts this file back in. The default project + // must not load provideZoneChangeDetection without the Zone.js setup file. + exclude: [ + '**/zoneful-integration.test.ts', + '**/*.zoneful.test.ts', + '**/*.tmp.test.ts', + ], + typecheck: { + enabled: true, + include: ['**/*.test-d.ts'], + exclude: ['**/*.tmp.test.ts'], + }, + globals: true, + restoreMocks: true, + }, +}) diff --git a/packages/angular-query/vitest.schematics.config.ts b/packages/angular-query/vitest.schematics.config.ts new file mode 100644 index 00000000000..b1f64767770 --- /dev/null +++ b/packages/angular-query/vitest.schematics.config.ts @@ -0,0 +1,11 @@ +import { defineConfig } from 'vitest/config' +import packageJson from './package.json' with { type: 'json' } + +export default defineConfig({ + test: { + name: `${packageJson.name}:schematics`, + environment: 'node', + include: ['./schematics-build/**/*.test.ts'], + watch: false, + }, +}) diff --git a/packages/angular-query/vitest.zoneful.config.ts b/packages/angular-query/vitest.zoneful.config.ts new file mode 100644 index 00000000000..7bf284091d3 --- /dev/null +++ b/packages/angular-query/vitest.zoneful.config.ts @@ -0,0 +1,36 @@ +import { defineConfig, mergeConfig } from 'vitest/config' +import baseConfig from './vitest.config' + +/** + * Runs the Angular tests with Zone.js enabled. Tests use the change-detection + * provider from test-utils, which selects provideZoneChangeDetection here and + * provideZonelessChangeDetection in the default runner. + */ +const config = mergeConfig( + baseConfig, + defineConfig({ + test: { + setupFiles: ['./test-setup.zoneful.ts'], + coverage: { reportsDirectory: './coverage/zoneful' }, + typecheck: { enabled: false }, + }, + }), +) + +// The base project excludes the Zone.js-only integration file so an ordinary +// run remains genuinely zoneless. The Zone.js project explicitly opts it in. +if (config.test) { + // Replace, rather than merge with, the base setup so Zone.js is installed + // before Angular initializes its browser testing environment. + config.test.setupFiles = ['./test-setup.zoneful.ts'] + config.test.include = [ + '**/zoneful-integration.test.ts', + '**/pending-tasks.test.ts', + '**/pending-tasks-ssr.zoneful.test.ts', + '**/upstream-issues.test.ts', + '**/inject-external-store.test.ts', + ] + config.test.exclude = [] +} + +export default config diff --git a/packages/query-core/src/types.ts b/packages/query-core/src/types.ts index fac9b158bb2..de9e6240bcc 100644 --- a/packages/query-core/src/types.ts +++ b/packages/query-core/src/types.ts @@ -56,7 +56,7 @@ export type Override = { * `mutationMeta` for {@link MutationMeta}. Leave a field out to keep that type's default. * Augment the module you install — `@tanstack/react-query`, `@tanstack/vue-query`, * `@tanstack/solid-query`, `@tanstack/svelte-query`, `@tanstack/preact-query`, - * `@tanstack/angular-query-experimental` or `@tanstack/lit-query`. Augmenting `@tanstack/query-core` + * `@tanstack/angular-query` or `@tanstack/lit-query`. Augmenting `@tanstack/query-core` * works too and covers every adapter at once. * @example * ```ts diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 8e5735b7c48..ecf7cfa37cb 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -167,18 +167,30 @@ catalogs: '@analogjs/vite-plugin-angular': specifier: ^2.7.5 version: 2.7.5 + '@angular/build': + specifier: ^22.2.5 + version: 22.2.5 '@angular/common': specifier: ^22.2.4 version: 22.2.4 '@angular/compiler': specifier: ^22.2.4 version: 22.2.4 + '@angular/compiler-cli': + specifier: ^22.2.4 + version: 22.2.4 '@angular/core': specifier: ^22.2.4 version: 22.2.4 '@angular/platform-browser': specifier: ^22.2.4 version: 22.2.4 + '@angular/platform-server': + specifier: ^22.2.4 + version: 22.2.4 + '@angular/router': + specifier: ^22.2.4 + version: 22.2.4 '@eslint-react/eslint-plugin': specifier: ^5.28.8 version: 5.28.8 @@ -396,29 +408,35 @@ importers: dependencies: '@angular/common': specifier: ^22.2.4 - version: 22.2.4(@angular/core@22.2.4(@angular/compiler@22.2.4)(rxjs@7.8.2)(zone.js@0.15.0))(rxjs@7.8.2) + version: 22.2.4(@angular/core@22.2.4(@angular/compiler@22.2.4)(rxjs@7.8.2)(zone.js@0.16.1))(rxjs@7.8.2) '@angular/compiler': specifier: ^22.2.4 version: 22.2.4 '@angular/core': specifier: ^22.2.4 - version: 22.2.4(@angular/compiler@22.2.4)(rxjs@7.8.2)(zone.js@0.15.0) + version: 22.2.4(@angular/compiler@22.2.4)(rxjs@7.8.2)(zone.js@0.16.1) '@angular/platform-browser': specifier: ^22.2.4 - version: 22.2.4(@angular/common@22.2.4(@angular/core@22.2.4(@angular/compiler@22.2.4)(rxjs@7.8.2)(zone.js@0.15.0))(rxjs@7.8.2))(@angular/core@22.2.4(@angular/compiler@22.2.4)(rxjs@7.8.2)(zone.js@0.15.0)) - '@tanstack/angular-query-experimental': - specifier: ^5.107.1 - version: link:../../../packages/angular-query-experimental + version: 22.2.4(@angular/common@22.2.4(@angular/core@22.2.4(@angular/compiler@22.2.4)(rxjs@7.8.2)(zone.js@0.16.1))(rxjs@7.8.2))(@angular/core@22.2.4(@angular/compiler@22.2.4)(rxjs@7.8.2)(zone.js@0.16.1)) + '@tanstack/angular-query': + specifier: ^5.0.0-rc.5 + version: link:../../../packages/angular-query + '@tanstack/angular-query-devtools': + specifier: ^5.0.0-rc.5 + version: link:../../../packages/angular-query-devtools rxjs: specifier: ^7.8.2 version: 7.8.2 tslib: specifier: ^2.8.1 version: 2.8.1 + zone.js: + specifier: 0.16.1 + version: 0.16.1 devDependencies: '@angular/build': specifier: ^22.2.5 - version: 22.2.5(@angular/compiler-cli@22.2.4(@angular/compiler@22.2.4)(typescript@6.0.3))(@angular/compiler@22.2.4)(@angular/core@22.2.4(@angular/compiler@22.2.4)(rxjs@7.8.2)(zone.js@0.15.0))(@angular/platform-browser@22.2.4(@angular/common@22.2.4(@angular/core@22.2.4(@angular/compiler@22.2.4)(rxjs@7.8.2)(zone.js@0.15.0))(rxjs@7.8.2))(@angular/core@22.2.4(@angular/compiler@22.2.4)(rxjs@7.8.2)(zone.js@0.15.0)))(@types/node@24.19.2)(istanbul-lib-instrument@6.0.3(supports-color@10.2.2))(jiti@2.7.0)(postcss@8.5.32)(rollup@4.65.1)(supports-color@10.2.2)(tailwindcss@4.2.2)(terser@5.46.1)(tslib@2.8.1)(tsx@4.23.15)(typescript@6.0.3)(vitest@5.0.5)(yaml@2.9.0) + version: 22.2.5(7f936de9cead077dbd0c3a79d0bff23c) '@angular/cli': specifier: ^22.2.5 version: 22.2.5(@types/node@24.19.2)(chokidar@5.0.0) @@ -436,29 +454,35 @@ importers: dependencies: '@angular/common': specifier: ^22.2.4 - version: 22.2.4(@angular/core@22.2.4(@angular/compiler@22.2.4)(rxjs@7.8.2)(zone.js@0.15.0))(rxjs@7.8.2) + version: 22.2.4(@angular/core@22.2.4(@angular/compiler@22.2.4)(rxjs@7.8.2)(zone.js@0.16.1))(rxjs@7.8.2) '@angular/compiler': specifier: ^22.2.4 version: 22.2.4 '@angular/core': specifier: ^22.2.4 - version: 22.2.4(@angular/compiler@22.2.4)(rxjs@7.8.2)(zone.js@0.15.0) + version: 22.2.4(@angular/compiler@22.2.4)(rxjs@7.8.2)(zone.js@0.16.1) '@angular/platform-browser': specifier: ^22.2.4 - version: 22.2.4(@angular/common@22.2.4(@angular/core@22.2.4(@angular/compiler@22.2.4)(rxjs@7.8.2)(zone.js@0.15.0))(rxjs@7.8.2))(@angular/core@22.2.4(@angular/compiler@22.2.4)(rxjs@7.8.2)(zone.js@0.15.0)) - '@tanstack/angular-query-experimental': - specifier: ^5.107.1 - version: link:../../../packages/angular-query-experimental + version: 22.2.4(@angular/common@22.2.4(@angular/core@22.2.4(@angular/compiler@22.2.4)(rxjs@7.8.2)(zone.js@0.16.1))(rxjs@7.8.2))(@angular/core@22.2.4(@angular/compiler@22.2.4)(rxjs@7.8.2)(zone.js@0.16.1)) + '@tanstack/angular-query': + specifier: ^5.0.0-rc.5 + version: link:../../../packages/angular-query + '@tanstack/angular-query-devtools': + specifier: ^5.0.0-rc.5 + version: link:../../../packages/angular-query-devtools rxjs: specifier: ^7.8.2 version: 7.8.2 tslib: specifier: ^2.8.1 version: 2.8.1 + zone.js: + specifier: 0.16.1 + version: 0.16.1 devDependencies: '@angular/build': specifier: ^22.2.5 - version: 22.2.5(@angular/compiler-cli@22.2.4(@angular/compiler@22.2.4)(typescript@6.0.3))(@angular/compiler@22.2.4)(@angular/core@22.2.4(@angular/compiler@22.2.4)(rxjs@7.8.2)(zone.js@0.15.0))(@angular/platform-browser@22.2.4(@angular/common@22.2.4(@angular/core@22.2.4(@angular/compiler@22.2.4)(rxjs@7.8.2)(zone.js@0.15.0))(rxjs@7.8.2))(@angular/core@22.2.4(@angular/compiler@22.2.4)(rxjs@7.8.2)(zone.js@0.15.0)))(@types/node@24.19.2)(istanbul-lib-instrument@6.0.3(supports-color@10.2.2))(jiti@2.7.0)(postcss@8.5.32)(rollup@4.65.1)(supports-color@10.2.2)(tailwindcss@4.2.2)(terser@5.46.1)(tslib@2.8.1)(tsx@4.23.15)(typescript@6.0.3)(vitest@5.0.5)(yaml@2.9.0) + version: 22.2.5(@angular/compiler-cli@22.2.4(@angular/compiler@22.2.4)(typescript@6.0.3))(@angular/compiler@22.2.4)(@angular/core@22.2.4(@angular/compiler@22.2.4)(rxjs@7.8.2)(zone.js@0.16.1))(@angular/platform-browser@22.2.4(@angular/common@22.2.4(@angular/core@22.2.4(@angular/compiler@22.2.4)(rxjs@7.8.2)(zone.js@0.16.1))(rxjs@7.8.2))(@angular/core@22.2.4(@angular/compiler@22.2.4)(rxjs@7.8.2)(zone.js@0.16.1)))(@types/node@24.19.2)(istanbul-lib-instrument@6.0.3(supports-color@10.2.2))(jiti@2.7.0)(postcss@8.5.32)(rollup@4.65.1)(supports-color@10.2.2)(tailwindcss@4.2.2)(terser@5.46.1)(tslib@2.8.1)(tsx@4.23.15)(typescript@6.0.3)(vitest@5.0.5)(yaml@2.9.0) '@angular/cli': specifier: ^22.2.5 version: 22.2.5(@types/node@24.19.2)(chokidar@5.0.0) @@ -476,21 +500,24 @@ importers: dependencies: '@angular/common': specifier: ^22.2.4 - version: 22.2.4(@angular/core@22.2.4(@angular/compiler@22.2.4)(rxjs@7.8.2)(zone.js@0.15.0))(rxjs@7.8.2) + version: 22.2.4(@angular/core@22.2.4(@angular/compiler@22.2.4)(rxjs@7.8.2)(zone.js@0.16.1))(rxjs@7.8.2) '@angular/compiler': specifier: ^22.2.4 version: 22.2.4 '@angular/core': specifier: ^22.2.4 - version: 22.2.4(@angular/compiler@22.2.4)(rxjs@7.8.2)(zone.js@0.15.0) + version: 22.2.4(@angular/compiler@22.2.4)(rxjs@7.8.2)(zone.js@0.16.1) '@angular/platform-browser': specifier: ^22.2.4 - version: 22.2.4(@angular/common@22.2.4(@angular/core@22.2.4(@angular/compiler@22.2.4)(rxjs@7.8.2)(zone.js@0.15.0))(rxjs@7.8.2))(@angular/core@22.2.4(@angular/compiler@22.2.4)(rxjs@7.8.2)(zone.js@0.15.0)) - '@tanstack/angular-query-experimental': - specifier: ^5.107.1 - version: link:../../../packages/angular-query-experimental + version: 22.2.4(@angular/common@22.2.4(@angular/core@22.2.4(@angular/compiler@22.2.4)(rxjs@7.8.2)(zone.js@0.16.1))(rxjs@7.8.2))(@angular/core@22.2.4(@angular/compiler@22.2.4)(rxjs@7.8.2)(zone.js@0.16.1)) + '@tanstack/angular-query': + specifier: ^5.0.0-rc.5 + version: link:../../../packages/angular-query + '@tanstack/angular-query-devtools': + specifier: ^5.0.0-rc.5 + version: link:../../../packages/angular-query-devtools '@tanstack/angular-query-persist-client': - specifier: ^5.103.2 + specifier: ^5.0.0-rc.5 version: link:../../../packages/angular-query-persist-client '@tanstack/query-async-storage-persister': specifier: ^5.107.1 @@ -501,10 +528,13 @@ importers: tslib: specifier: ^2.8.1 version: 2.8.1 + zone.js: + specifier: 0.16.1 + version: 0.16.1 devDependencies: '@angular/build': specifier: ^22.2.5 - version: 22.2.5(@angular/compiler-cli@22.2.4(@angular/compiler@22.2.4)(typescript@6.0.3))(@angular/compiler@22.2.4)(@angular/core@22.2.4(@angular/compiler@22.2.4)(rxjs@7.8.2)(zone.js@0.15.0))(@angular/platform-browser@22.2.4(@angular/common@22.2.4(@angular/core@22.2.4(@angular/compiler@22.2.4)(rxjs@7.8.2)(zone.js@0.15.0))(rxjs@7.8.2))(@angular/core@22.2.4(@angular/compiler@22.2.4)(rxjs@7.8.2)(zone.js@0.15.0)))(@types/node@24.19.2)(istanbul-lib-instrument@6.0.3(supports-color@10.2.2))(jiti@2.7.0)(postcss@8.5.32)(rollup@4.65.1)(supports-color@10.2.2)(tailwindcss@4.2.2)(terser@5.46.1)(tslib@2.8.1)(tsx@4.23.15)(typescript@6.0.3)(vitest@5.0.5)(yaml@2.9.0) + version: 22.2.5(@angular/compiler-cli@22.2.4(@angular/compiler@22.2.4)(typescript@6.0.3))(@angular/compiler@22.2.4)(@angular/core@22.2.4(@angular/compiler@22.2.4)(rxjs@7.8.2)(zone.js@0.16.1))(@angular/platform-browser@22.2.4(@angular/common@22.2.4(@angular/core@22.2.4(@angular/compiler@22.2.4)(rxjs@7.8.2)(zone.js@0.16.1))(rxjs@7.8.2))(@angular/core@22.2.4(@angular/compiler@22.2.4)(rxjs@7.8.2)(zone.js@0.16.1)))(@types/node@24.19.2)(istanbul-lib-instrument@6.0.3(supports-color@10.2.2))(jiti@2.7.0)(postcss@8.5.32)(rollup@4.65.1)(supports-color@10.2.2)(tailwindcss@4.2.2)(terser@5.46.1)(tslib@2.8.1)(tsx@4.23.15)(typescript@6.0.3)(vitest@5.0.5)(yaml@2.9.0) '@angular/cli': specifier: ^22.2.5 version: 22.2.5(@types/node@24.19.2)(chokidar@5.0.0) @@ -535,9 +565,12 @@ importers: '@angular/router': specifier: ^22.2.4 version: 22.2.4(@angular/common@22.2.4(@angular/core@22.2.4(@angular/compiler@22.2.4)(rxjs@7.8.2)(zone.js@0.15.0))(rxjs@7.8.2))(@angular/core@22.2.4(@angular/compiler@22.2.4)(rxjs@7.8.2)(zone.js@0.15.0))(@angular/platform-browser@22.2.4(@angular/common@22.2.4(@angular/core@22.2.4(@angular/compiler@22.2.4)(rxjs@7.8.2)(zone.js@0.15.0))(rxjs@7.8.2))(@angular/core@22.2.4(@angular/compiler@22.2.4)(rxjs@7.8.2)(zone.js@0.15.0)))(rxjs@7.8.2) - '@tanstack/angular-query-experimental': - specifier: ^5.107.1 - version: link:../../../packages/angular-query-experimental + '@tanstack/angular-query': + specifier: ^5.0.0-rc.5 + version: link:../../../packages/angular-query + '@tanstack/angular-query-devtools': + specifier: ^5.0.0-rc.5 + version: link:../../../packages/angular-query-devtools rxjs: specifier: ^7.8.2 version: 7.8.2 @@ -547,7 +580,7 @@ importers: devDependencies: '@angular/build': specifier: ^22.2.5 - version: 22.2.5(@angular/compiler-cli@22.2.4(@angular/compiler@22.2.4)(typescript@6.0.3))(@angular/compiler@22.2.4)(@angular/core@22.2.4(@angular/compiler@22.2.4)(rxjs@7.8.2)(zone.js@0.15.0))(@angular/platform-browser@22.2.4(@angular/common@22.2.4(@angular/core@22.2.4(@angular/compiler@22.2.4)(rxjs@7.8.2)(zone.js@0.15.0))(rxjs@7.8.2))(@angular/core@22.2.4(@angular/compiler@22.2.4)(rxjs@7.8.2)(zone.js@0.15.0)))(@types/node@24.19.2)(istanbul-lib-instrument@6.0.3(supports-color@10.2.2))(jiti@2.7.0)(postcss@8.5.32)(rollup@4.65.1)(supports-color@10.2.2)(tailwindcss@4.2.2)(terser@5.46.1)(tslib@2.8.1)(tsx@4.23.15)(typescript@6.0.3)(vitest@5.0.5)(yaml@2.9.0) + version: 22.2.5(b858ed7f8ea1790ed93711819419a5f9) '@angular/cli': specifier: ^22.2.5 version: 22.2.5(@types/node@24.19.2)(chokidar@5.0.0) @@ -561,33 +594,125 @@ importers: specifier: ^6.0.3 version: 6.0.3 + examples/angular/dynamic-devtools: + dependencies: + '@angular/common': + specifier: ^22.0.0 + version: 22.2.4(@angular/core@22.2.4(@angular/compiler@22.2.4)(rxjs@7.8.2)(zone.js@0.16.1))(rxjs@7.8.2) + '@angular/compiler': + specifier: ^22.0.0 + version: 22.2.4 + '@angular/core': + specifier: ^22.0.0 + version: 22.2.4(@angular/compiler@22.2.4)(rxjs@7.8.2)(zone.js@0.16.1) + '@angular/platform-browser': + specifier: ^22.0.0 + version: 22.2.4(@angular/common@22.2.4(@angular/core@22.2.4(@angular/compiler@22.2.4)(rxjs@7.8.2)(zone.js@0.16.1))(rxjs@7.8.2))(@angular/core@22.2.4(@angular/compiler@22.2.4)(rxjs@7.8.2)(zone.js@0.16.1)) + '@tanstack/angular-query': + specifier: ^5.0.0-rc.5 + version: link:../../../packages/angular-query + '@tanstack/angular-query-devtools': + specifier: ^5.0.0-rc.5 + version: link:../../../packages/angular-query-devtools + rxjs: + specifier: ^7.8.2 + version: 7.8.2 + tslib: + specifier: ^2.8.1 + version: 2.8.1 + zone.js: + specifier: 0.16.1 + version: 0.16.1 + devDependencies: + '@angular/build': + specifier: ^22.0.0 + version: 22.2.5(46fc5ca31db6cb271ad7edc37360be27) + '@angular/cli': + specifier: ^22.0.0 + version: 22.2.5(@types/node@24.19.2)(chokidar@5.0.0) + '@angular/compiler-cli': + specifier: ^22.0.0 + version: 22.2.4(@angular/compiler@22.2.4)(typescript@6.0.3) + typescript: + specifier: 6.0.3 + version: 6.0.3 + + examples/angular/dynamic-queries: + dependencies: + '@angular/common': + specifier: ^22.0.0 + version: 22.2.4(@angular/core@22.2.4(@angular/compiler@22.2.4)(rxjs@7.8.2)(zone.js@0.16.1))(rxjs@7.8.2) + '@angular/compiler': + specifier: ^22.0.0 + version: 22.2.4 + '@angular/core': + specifier: ^22.0.0 + version: 22.2.4(@angular/compiler@22.2.4)(rxjs@7.8.2)(zone.js@0.16.1) + '@angular/platform-browser': + specifier: ^22.0.0 + version: 22.2.4(@angular/common@22.2.4(@angular/core@22.2.4(@angular/compiler@22.2.4)(rxjs@7.8.2)(zone.js@0.16.1))(rxjs@7.8.2))(@angular/core@22.2.4(@angular/compiler@22.2.4)(rxjs@7.8.2)(zone.js@0.16.1)) + '@tanstack/angular-query': + specifier: ^5.0.0-rc.5 + version: link:../../../packages/angular-query + '@tanstack/angular-query-devtools': + specifier: ^5.0.0-rc.5 + version: link:../../../packages/angular-query-devtools + rxjs: + specifier: ^7.8.2 + version: 7.8.2 + tslib: + specifier: ^2.8.1 + version: 2.8.1 + zone.js: + specifier: 0.16.1 + version: 0.16.1 + devDependencies: + '@angular/build': + specifier: ^22.0.0 + version: 22.2.5(46fc5ca31db6cb271ad7edc37360be27) + '@angular/cli': + specifier: ^22.0.0 + version: 22.2.5(@types/node@24.19.2)(chokidar@5.0.0) + '@angular/compiler-cli': + specifier: ^22.0.0 + version: 22.2.4(@angular/compiler@22.2.4)(typescript@6.0.3) + typescript: + specifier: 6.0.3 + version: 6.0.3 + examples/angular/infinite-query-with-max-pages: dependencies: '@angular/common': specifier: ^22.2.4 - version: 22.2.4(@angular/core@22.2.4(@angular/compiler@22.2.4)(rxjs@7.8.2)(zone.js@0.15.0))(rxjs@7.8.2) + version: 22.2.4(@angular/core@22.2.4(@angular/compiler@22.2.4)(rxjs@7.8.2)(zone.js@0.16.1))(rxjs@7.8.2) '@angular/compiler': specifier: ^22.2.4 version: 22.2.4 '@angular/core': specifier: ^22.2.4 - version: 22.2.4(@angular/compiler@22.2.4)(rxjs@7.8.2)(zone.js@0.15.0) + version: 22.2.4(@angular/compiler@22.2.4)(rxjs@7.8.2)(zone.js@0.16.1) '@angular/platform-browser': specifier: ^22.2.4 - version: 22.2.4(@angular/common@22.2.4(@angular/core@22.2.4(@angular/compiler@22.2.4)(rxjs@7.8.2)(zone.js@0.15.0))(rxjs@7.8.2))(@angular/core@22.2.4(@angular/compiler@22.2.4)(rxjs@7.8.2)(zone.js@0.15.0)) - '@tanstack/angular-query-experimental': - specifier: ^5.107.1 - version: link:../../../packages/angular-query-experimental + version: 22.2.4(@angular/common@22.2.4(@angular/core@22.2.4(@angular/compiler@22.2.4)(rxjs@7.8.2)(zone.js@0.16.1))(rxjs@7.8.2))(@angular/core@22.2.4(@angular/compiler@22.2.4)(rxjs@7.8.2)(zone.js@0.16.1)) + '@tanstack/angular-query': + specifier: ^5.0.0-rc.5 + version: link:../../../packages/angular-query + '@tanstack/angular-query-devtools': + specifier: ^5.0.0-rc.5 + version: link:../../../packages/angular-query-devtools rxjs: specifier: ^7.8.2 version: 7.8.2 tslib: specifier: ^2.8.1 version: 2.8.1 + zone.js: + specifier: 0.16.1 + version: 0.16.1 devDependencies: '@angular/build': specifier: ^22.2.5 - version: 22.2.5(@angular/compiler-cli@22.2.4(@angular/compiler@22.2.4)(typescript@6.0.3))(@angular/compiler@22.2.4)(@angular/core@22.2.4(@angular/compiler@22.2.4)(rxjs@7.8.2)(zone.js@0.15.0))(@angular/platform-browser@22.2.4(@angular/common@22.2.4(@angular/core@22.2.4(@angular/compiler@22.2.4)(rxjs@7.8.2)(zone.js@0.15.0))(rxjs@7.8.2))(@angular/core@22.2.4(@angular/compiler@22.2.4)(rxjs@7.8.2)(zone.js@0.15.0)))(@types/node@24.19.2)(istanbul-lib-instrument@6.0.3(supports-color@10.2.2))(jiti@2.7.0)(postcss@8.5.32)(rollup@4.65.1)(supports-color@10.2.2)(tailwindcss@4.2.2)(terser@5.46.1)(tslib@2.8.1)(tsx@4.23.15)(typescript@6.0.3)(vitest@5.0.5)(yaml@2.9.0) + version: 22.2.5(@angular/compiler-cli@22.2.4(@angular/compiler@22.2.4)(typescript@6.0.3))(@angular/compiler@22.2.4)(@angular/core@22.2.4(@angular/compiler@22.2.4)(rxjs@7.8.2)(zone.js@0.16.1))(@angular/platform-browser@22.2.4(@angular/common@22.2.4(@angular/core@22.2.4(@angular/compiler@22.2.4)(rxjs@7.8.2)(zone.js@0.16.1))(rxjs@7.8.2))(@angular/core@22.2.4(@angular/compiler@22.2.4)(rxjs@7.8.2)(zone.js@0.16.1)))(@types/node@24.19.2)(istanbul-lib-instrument@6.0.3(supports-color@10.2.2))(jiti@2.7.0)(postcss@8.5.32)(rollup@4.65.1)(supports-color@10.2.2)(tailwindcss@4.2.2)(terser@5.46.1)(tslib@2.8.1)(tsx@4.23.15)(typescript@6.0.3)(vitest@5.0.5)(yaml@2.9.0) '@angular/cli': specifier: ^22.2.5 version: 22.2.5(@types/node@24.19.2)(chokidar@5.0.0) @@ -605,32 +730,38 @@ importers: dependencies: '@angular/common': specifier: ^22.2.4 - version: 22.2.4(@angular/core@22.2.4(@angular/compiler@22.2.4)(rxjs@7.8.2)(zone.js@0.15.0))(rxjs@7.8.2) + version: 22.2.4(@angular/core@22.2.4(@angular/compiler@22.2.4)(rxjs@7.8.2)(zone.js@0.16.1))(rxjs@7.8.2) '@angular/compiler': specifier: ^22.2.4 version: 22.2.4 '@angular/core': specifier: ^22.2.4 - version: 22.2.4(@angular/compiler@22.2.4)(rxjs@7.8.2)(zone.js@0.15.0) + version: 22.2.4(@angular/compiler@22.2.4)(rxjs@7.8.2)(zone.js@0.16.1) '@angular/forms': specifier: ^22.2.4 - version: 22.2.4(@angular/common@22.2.4(@angular/core@22.2.4(@angular/compiler@22.2.4)(rxjs@7.8.2)(zone.js@0.15.0))(rxjs@7.8.2))(@angular/core@22.2.4(@angular/compiler@22.2.4)(rxjs@7.8.2)(zone.js@0.15.0))(@angular/platform-browser@22.2.4(@angular/common@22.2.4(@angular/core@22.2.4(@angular/compiler@22.2.4)(rxjs@7.8.2)(zone.js@0.15.0))(rxjs@7.8.2))(@angular/core@22.2.4(@angular/compiler@22.2.4)(rxjs@7.8.2)(zone.js@0.15.0)))(rxjs@7.8.2) + version: 22.2.4(@angular/common@22.2.4(@angular/core@22.2.4(@angular/compiler@22.2.4)(rxjs@7.8.2)(zone.js@0.16.1))(rxjs@7.8.2))(@angular/core@22.2.4(@angular/compiler@22.2.4)(rxjs@7.8.2)(zone.js@0.16.1))(@angular/platform-browser@22.2.4(@angular/common@22.2.4(@angular/core@22.2.4(@angular/compiler@22.2.4)(rxjs@7.8.2)(zone.js@0.16.1))(rxjs@7.8.2))(@angular/core@22.2.4(@angular/compiler@22.2.4)(rxjs@7.8.2)(zone.js@0.16.1)))(rxjs@7.8.2) '@angular/platform-browser': specifier: ^22.2.4 - version: 22.2.4(@angular/common@22.2.4(@angular/core@22.2.4(@angular/compiler@22.2.4)(rxjs@7.8.2)(zone.js@0.15.0))(rxjs@7.8.2))(@angular/core@22.2.4(@angular/compiler@22.2.4)(rxjs@7.8.2)(zone.js@0.15.0)) - '@tanstack/angular-query-experimental': - specifier: ^5.107.1 - version: link:../../../packages/angular-query-experimental + version: 22.2.4(@angular/common@22.2.4(@angular/core@22.2.4(@angular/compiler@22.2.4)(rxjs@7.8.2)(zone.js@0.16.1))(rxjs@7.8.2))(@angular/core@22.2.4(@angular/compiler@22.2.4)(rxjs@7.8.2)(zone.js@0.16.1)) + '@tanstack/angular-query': + specifier: ^5.0.0-rc.5 + version: link:../../../packages/angular-query + '@tanstack/angular-query-devtools': + specifier: ^5.0.0-rc.5 + version: link:../../../packages/angular-query-devtools rxjs: specifier: ^7.8.2 version: 7.8.2 tslib: specifier: ^2.8.1 version: 2.8.1 + zone.js: + specifier: 0.16.1 + version: 0.16.1 devDependencies: '@angular/build': specifier: ^22.2.5 - version: 22.2.5(@angular/compiler-cli@22.2.4(@angular/compiler@22.2.4)(typescript@6.0.3))(@angular/compiler@22.2.4)(@angular/core@22.2.4(@angular/compiler@22.2.4)(rxjs@7.8.2)(zone.js@0.15.0))(@angular/platform-browser@22.2.4(@angular/common@22.2.4(@angular/core@22.2.4(@angular/compiler@22.2.4)(rxjs@7.8.2)(zone.js@0.15.0))(rxjs@7.8.2))(@angular/core@22.2.4(@angular/compiler@22.2.4)(rxjs@7.8.2)(zone.js@0.15.0)))(@types/node@24.19.2)(jiti@2.7.0)(postcss@8.5.32)(supports-color@10.2.2)(tailwindcss@4.2.2)(terser@5.46.1)(tslib@2.8.1)(tsx@4.23.15)(typescript@6.0.3)(vitest@5.0.5)(yaml@2.9.0) + version: 22.2.5(0f8d76520212c66259ef5e9d1f4fbaaa) '@angular/cli': specifier: ^22.2.5 version: 22.2.5(@types/node@24.19.2)(chokidar@5.0.0) @@ -648,29 +779,35 @@ importers: dependencies: '@angular/common': specifier: ^22.2.4 - version: 22.2.4(@angular/core@22.2.4(@angular/compiler@22.2.4)(rxjs@7.8.2)(zone.js@0.15.0))(rxjs@7.8.2) + version: 22.2.4(@angular/core@22.2.4(@angular/compiler@22.2.4)(rxjs@7.8.2)(zone.js@0.16.1))(rxjs@7.8.2) '@angular/compiler': specifier: ^22.2.4 version: 22.2.4 '@angular/core': specifier: ^22.2.4 - version: 22.2.4(@angular/compiler@22.2.4)(rxjs@7.8.2)(zone.js@0.15.0) + version: 22.2.4(@angular/compiler@22.2.4)(rxjs@7.8.2)(zone.js@0.16.1) '@angular/platform-browser': specifier: ^22.2.4 - version: 22.2.4(@angular/common@22.2.4(@angular/core@22.2.4(@angular/compiler@22.2.4)(rxjs@7.8.2)(zone.js@0.15.0))(rxjs@7.8.2))(@angular/core@22.2.4(@angular/compiler@22.2.4)(rxjs@7.8.2)(zone.js@0.15.0)) - '@tanstack/angular-query-experimental': - specifier: ^5.107.1 - version: link:../../../packages/angular-query-experimental + version: 22.2.4(@angular/common@22.2.4(@angular/core@22.2.4(@angular/compiler@22.2.4)(rxjs@7.8.2)(zone.js@0.16.1))(rxjs@7.8.2))(@angular/core@22.2.4(@angular/compiler@22.2.4)(rxjs@7.8.2)(zone.js@0.16.1)) + '@tanstack/angular-query': + specifier: ^5.0.0-rc.5 + version: link:../../../packages/angular-query + '@tanstack/angular-query-devtools': + specifier: ^5.0.0-rc.5 + version: link:../../../packages/angular-query-devtools rxjs: specifier: ^7.8.2 version: 7.8.2 tslib: specifier: ^2.8.1 version: 2.8.1 + zone.js: + specifier: 0.16.1 + version: 0.16.1 devDependencies: '@angular/build': specifier: ^22.2.5 - version: 22.2.5(@angular/compiler-cli@22.2.4(@angular/compiler@22.2.4)(typescript@6.0.3))(@angular/compiler@22.2.4)(@angular/core@22.2.4(@angular/compiler@22.2.4)(rxjs@7.8.2)(zone.js@0.15.0))(@angular/platform-browser@22.2.4(@angular/common@22.2.4(@angular/core@22.2.4(@angular/compiler@22.2.4)(rxjs@7.8.2)(zone.js@0.15.0))(rxjs@7.8.2))(@angular/core@22.2.4(@angular/compiler@22.2.4)(rxjs@7.8.2)(zone.js@0.15.0)))(@types/node@24.19.2)(jiti@2.7.0)(postcss@8.5.32)(supports-color@10.2.2)(tailwindcss@4.2.2)(terser@5.46.1)(tslib@2.8.1)(tsx@4.23.15)(typescript@6.0.3)(vitest@5.0.5)(yaml@2.9.0) + version: 22.2.5(0f8d76520212c66259ef5e9d1f4fbaaa) '@angular/cli': specifier: ^22.2.5 version: 22.2.5(@types/node@24.19.2)(chokidar@5.0.0) @@ -701,9 +838,12 @@ importers: '@angular/router': specifier: ^22.2.4 version: 22.2.4(@angular/common@22.2.4(@angular/core@22.2.4(@angular/compiler@22.2.4)(rxjs@7.8.2)(zone.js@0.15.0))(rxjs@7.8.2))(@angular/core@22.2.4(@angular/compiler@22.2.4)(rxjs@7.8.2)(zone.js@0.15.0))(@angular/platform-browser@22.2.4(@angular/common@22.2.4(@angular/core@22.2.4(@angular/compiler@22.2.4)(rxjs@7.8.2)(zone.js@0.15.0))(rxjs@7.8.2))(@angular/core@22.2.4(@angular/compiler@22.2.4)(rxjs@7.8.2)(zone.js@0.15.0)))(rxjs@7.8.2) - '@tanstack/angular-query-experimental': - specifier: ^5.107.1 - version: link:../../../packages/angular-query-experimental + '@tanstack/angular-query': + specifier: ^5.0.0-rc.5 + version: link:../../../packages/angular-query + '@tanstack/angular-query-devtools': + specifier: ^5.0.0-rc.5 + version: link:../../../packages/angular-query-devtools rxjs: specifier: ^7.8.2 version: 7.8.2 @@ -713,7 +853,7 @@ importers: devDependencies: '@angular/build': specifier: ^22.2.5 - version: 22.2.5(@angular/compiler-cli@22.2.4(@angular/compiler@22.2.4)(typescript@6.0.3))(@angular/compiler@22.2.4)(@angular/core@22.2.4(@angular/compiler@22.2.4)(rxjs@7.8.2)(zone.js@0.15.0))(@angular/platform-browser@22.2.4(@angular/common@22.2.4(@angular/core@22.2.4(@angular/compiler@22.2.4)(rxjs@7.8.2)(zone.js@0.15.0))(rxjs@7.8.2))(@angular/core@22.2.4(@angular/compiler@22.2.4)(rxjs@7.8.2)(zone.js@0.15.0)))(@types/node@24.19.2)(istanbul-lib-instrument@6.0.3(supports-color@10.2.2))(jiti@2.7.0)(postcss@8.5.32)(rollup@4.65.1)(supports-color@10.2.2)(tailwindcss@4.2.2)(terser@5.46.1)(tslib@2.8.1)(tsx@4.23.15)(typescript@6.0.3)(vitest@5.0.5)(yaml@2.9.0) + version: 22.2.5(6bedf23a38a60eea6664da587937b88b) '@angular/cli': specifier: ^22.2.5 version: 22.2.5(@types/node@24.19.2)(chokidar@5.0.0) @@ -731,32 +871,38 @@ importers: dependencies: '@angular/common': specifier: ^22.2.4 - version: 22.2.4(@angular/core@22.2.4(@angular/compiler@22.2.4)(rxjs@7.8.2)(zone.js@0.15.0))(rxjs@7.8.2) + version: 22.2.4(@angular/core@22.2.4(@angular/compiler@22.2.4)(rxjs@7.8.2)(zone.js@0.16.1))(rxjs@7.8.2) '@angular/compiler': specifier: ^22.2.4 version: 22.2.4 '@angular/core': specifier: ^22.2.4 - version: 22.2.4(@angular/compiler@22.2.4)(rxjs@7.8.2)(zone.js@0.15.0) + version: 22.2.4(@angular/compiler@22.2.4)(rxjs@7.8.2)(zone.js@0.16.1) '@angular/platform-browser': specifier: ^22.2.4 - version: 22.2.4(@angular/common@22.2.4(@angular/core@22.2.4(@angular/compiler@22.2.4)(rxjs@7.8.2)(zone.js@0.15.0))(rxjs@7.8.2))(@angular/core@22.2.4(@angular/compiler@22.2.4)(rxjs@7.8.2)(zone.js@0.15.0)) + version: 22.2.4(@angular/common@22.2.4(@angular/core@22.2.4(@angular/compiler@22.2.4)(rxjs@7.8.2)(zone.js@0.16.1))(rxjs@7.8.2))(@angular/core@22.2.4(@angular/compiler@22.2.4)(rxjs@7.8.2)(zone.js@0.16.1)) '@angular/router': specifier: ^22.2.4 - version: 22.2.4(@angular/common@22.2.4(@angular/core@22.2.4(@angular/compiler@22.2.4)(rxjs@7.8.2)(zone.js@0.15.0))(rxjs@7.8.2))(@angular/core@22.2.4(@angular/compiler@22.2.4)(rxjs@7.8.2)(zone.js@0.15.0))(@angular/platform-browser@22.2.4(@angular/common@22.2.4(@angular/core@22.2.4(@angular/compiler@22.2.4)(rxjs@7.8.2)(zone.js@0.15.0))(rxjs@7.8.2))(@angular/core@22.2.4(@angular/compiler@22.2.4)(rxjs@7.8.2)(zone.js@0.15.0)))(rxjs@7.8.2) - '@tanstack/angular-query-experimental': - specifier: ^5.107.1 - version: link:../../../packages/angular-query-experimental + version: 22.2.4(@angular/common@22.2.4(@angular/core@22.2.4(@angular/compiler@22.2.4)(rxjs@7.8.2)(zone.js@0.16.1))(rxjs@7.8.2))(@angular/core@22.2.4(@angular/compiler@22.2.4)(rxjs@7.8.2)(zone.js@0.16.1))(@angular/platform-browser@22.2.4(@angular/common@22.2.4(@angular/core@22.2.4(@angular/compiler@22.2.4)(rxjs@7.8.2)(zone.js@0.16.1))(rxjs@7.8.2))(@angular/core@22.2.4(@angular/compiler@22.2.4)(rxjs@7.8.2)(zone.js@0.16.1)))(rxjs@7.8.2) + '@tanstack/angular-query': + specifier: ^5.0.0-rc.5 + version: link:../../../packages/angular-query + '@tanstack/angular-query-devtools': + specifier: ^5.0.0-rc.5 + version: link:../../../packages/angular-query-devtools rxjs: specifier: ^7.8.2 version: 7.8.2 tslib: specifier: ^2.8.1 version: 2.8.1 + zone.js: + specifier: 0.16.1 + version: 0.16.1 devDependencies: '@angular/build': specifier: ^22.2.5 - version: 22.2.5(@angular/compiler-cli@22.2.4(@angular/compiler@22.2.4)(typescript@6.0.3))(@angular/compiler@22.2.4)(@angular/core@22.2.4(@angular/compiler@22.2.4)(rxjs@7.8.2)(zone.js@0.15.0))(@angular/platform-browser@22.2.4(@angular/common@22.2.4(@angular/core@22.2.4(@angular/compiler@22.2.4)(rxjs@7.8.2)(zone.js@0.15.0))(rxjs@7.8.2))(@angular/core@22.2.4(@angular/compiler@22.2.4)(rxjs@7.8.2)(zone.js@0.15.0)))(@types/node@24.19.2)(istanbul-lib-instrument@6.0.3(supports-color@10.2.2))(jiti@2.7.0)(postcss@8.5.32)(rollup@4.65.1)(supports-color@10.2.2)(tailwindcss@4.2.2)(terser@5.46.1)(tslib@2.8.1)(tsx@4.23.15)(typescript@6.0.3)(vitest@5.0.5)(yaml@2.9.0) + version: 22.2.5(835301e0da58bb9a0c984493908ccb9e) '@angular/cli': specifier: ^22.2.5 version: 22.2.5(@types/node@24.19.2)(chokidar@5.0.0) @@ -774,32 +920,38 @@ importers: dependencies: '@angular/common': specifier: ^22.2.4 - version: 22.2.4(@angular/core@22.2.4(@angular/compiler@22.2.4)(rxjs@7.8.2)(zone.js@0.15.0))(rxjs@7.8.2) + version: 22.2.4(@angular/core@22.2.4(@angular/compiler@22.2.4)(rxjs@7.8.2)(zone.js@0.16.1))(rxjs@7.8.2) '@angular/compiler': specifier: ^22.2.4 version: 22.2.4 '@angular/core': specifier: ^22.2.4 - version: 22.2.4(@angular/compiler@22.2.4)(rxjs@7.8.2)(zone.js@0.15.0) + version: 22.2.4(@angular/compiler@22.2.4)(rxjs@7.8.2)(zone.js@0.16.1) '@angular/forms': specifier: ^22.2.4 - version: 22.2.4(@angular/common@22.2.4(@angular/core@22.2.4(@angular/compiler@22.2.4)(rxjs@7.8.2)(zone.js@0.15.0))(rxjs@7.8.2))(@angular/core@22.2.4(@angular/compiler@22.2.4)(rxjs@7.8.2)(zone.js@0.15.0))(@angular/platform-browser@22.2.4(@angular/common@22.2.4(@angular/core@22.2.4(@angular/compiler@22.2.4)(rxjs@7.8.2)(zone.js@0.15.0))(rxjs@7.8.2))(@angular/core@22.2.4(@angular/compiler@22.2.4)(rxjs@7.8.2)(zone.js@0.15.0)))(rxjs@7.8.2) + version: 22.2.4(@angular/common@22.2.4(@angular/core@22.2.4(@angular/compiler@22.2.4)(rxjs@7.8.2)(zone.js@0.16.1))(rxjs@7.8.2))(@angular/core@22.2.4(@angular/compiler@22.2.4)(rxjs@7.8.2)(zone.js@0.16.1))(@angular/platform-browser@22.2.4(@angular/common@22.2.4(@angular/core@22.2.4(@angular/compiler@22.2.4)(rxjs@7.8.2)(zone.js@0.16.1))(rxjs@7.8.2))(@angular/core@22.2.4(@angular/compiler@22.2.4)(rxjs@7.8.2)(zone.js@0.16.1)))(rxjs@7.8.2) '@angular/platform-browser': specifier: ^22.2.4 - version: 22.2.4(@angular/common@22.2.4(@angular/core@22.2.4(@angular/compiler@22.2.4)(rxjs@7.8.2)(zone.js@0.15.0))(rxjs@7.8.2))(@angular/core@22.2.4(@angular/compiler@22.2.4)(rxjs@7.8.2)(zone.js@0.15.0)) - '@tanstack/angular-query-experimental': - specifier: ^5.107.1 - version: link:../../../packages/angular-query-experimental + version: 22.2.4(@angular/common@22.2.4(@angular/core@22.2.4(@angular/compiler@22.2.4)(rxjs@7.8.2)(zone.js@0.16.1))(rxjs@7.8.2))(@angular/core@22.2.4(@angular/compiler@22.2.4)(rxjs@7.8.2)(zone.js@0.16.1)) + '@tanstack/angular-query': + specifier: ^5.0.0-rc.5 + version: link:../../../packages/angular-query + '@tanstack/angular-query-devtools': + specifier: ^5.0.0-rc.5 + version: link:../../../packages/angular-query-devtools rxjs: specifier: ^7.8.2 version: 7.8.2 tslib: specifier: ^2.8.1 version: 2.8.1 + zone.js: + specifier: 0.16.1 + version: 0.16.1 devDependencies: '@angular/build': specifier: ^22.2.5 - version: 22.2.5(@angular/compiler-cli@22.2.4(@angular/compiler@22.2.4)(typescript@6.0.3))(@angular/compiler@22.2.4)(@angular/core@22.2.4(@angular/compiler@22.2.4)(rxjs@7.8.2)(zone.js@0.15.0))(@angular/platform-browser@22.2.4(@angular/common@22.2.4(@angular/core@22.2.4(@angular/compiler@22.2.4)(rxjs@7.8.2)(zone.js@0.15.0))(rxjs@7.8.2))(@angular/core@22.2.4(@angular/compiler@22.2.4)(rxjs@7.8.2)(zone.js@0.15.0)))(@types/node@24.19.2)(jiti@2.7.0)(postcss@8.5.32)(supports-color@10.2.2)(tailwindcss@4.2.2)(terser@5.46.1)(tslib@2.8.1)(tsx@4.23.15)(typescript@6.0.3)(vitest@5.0.5)(yaml@2.9.0) + version: 22.2.5(0f8d76520212c66259ef5e9d1f4fbaaa) '@angular/cli': specifier: ^22.2.5 version: 22.2.5(@types/node@24.19.2)(chokidar@5.0.0) @@ -817,29 +969,35 @@ importers: dependencies: '@angular/common': specifier: ^22.2.4 - version: 22.2.4(@angular/core@22.2.4(@angular/compiler@22.2.4)(rxjs@7.8.2)(zone.js@0.15.0))(rxjs@7.8.2) + version: 22.2.4(@angular/core@22.2.4(@angular/compiler@22.2.4)(rxjs@7.8.2)(zone.js@0.16.1))(rxjs@7.8.2) '@angular/compiler': specifier: ^22.2.4 version: 22.2.4 '@angular/core': specifier: ^22.2.4 - version: 22.2.4(@angular/compiler@22.2.4)(rxjs@7.8.2)(zone.js@0.15.0) + version: 22.2.4(@angular/compiler@22.2.4)(rxjs@7.8.2)(zone.js@0.16.1) '@angular/platform-browser': specifier: ^22.2.4 - version: 22.2.4(@angular/common@22.2.4(@angular/core@22.2.4(@angular/compiler@22.2.4)(rxjs@7.8.2)(zone.js@0.15.0))(rxjs@7.8.2))(@angular/core@22.2.4(@angular/compiler@22.2.4)(rxjs@7.8.2)(zone.js@0.15.0)) - '@tanstack/angular-query-experimental': - specifier: ^5.107.1 - version: link:../../../packages/angular-query-experimental + version: 22.2.4(@angular/common@22.2.4(@angular/core@22.2.4(@angular/compiler@22.2.4)(rxjs@7.8.2)(zone.js@0.16.1))(rxjs@7.8.2))(@angular/core@22.2.4(@angular/compiler@22.2.4)(rxjs@7.8.2)(zone.js@0.16.1)) + '@tanstack/angular-query': + specifier: ^5.0.0-rc.5 + version: link:../../../packages/angular-query + '@tanstack/angular-query-devtools': + specifier: ^5.0.0-rc.5 + version: link:../../../packages/angular-query-devtools rxjs: specifier: ^7.8.2 version: 7.8.2 tslib: specifier: ^2.8.1 version: 2.8.1 + zone.js: + specifier: 0.16.1 + version: 0.16.1 devDependencies: '@angular/build': specifier: ^22.2.5 - version: 22.2.5(@angular/compiler-cli@22.2.4(@angular/compiler@22.2.4)(typescript@6.0.3))(@angular/compiler@22.2.4)(@angular/core@22.2.4(@angular/compiler@22.2.4)(rxjs@7.8.2)(zone.js@0.15.0))(@angular/platform-browser@22.2.4(@angular/common@22.2.4(@angular/core@22.2.4(@angular/compiler@22.2.4)(rxjs@7.8.2)(zone.js@0.15.0))(rxjs@7.8.2))(@angular/core@22.2.4(@angular/compiler@22.2.4)(rxjs@7.8.2)(zone.js@0.15.0)))(@types/node@24.19.2)(jiti@2.7.0)(postcss@8.5.32)(supports-color@10.2.2)(tailwindcss@4.2.2)(terser@5.46.1)(tslib@2.8.1)(tsx@4.23.15)(typescript@6.0.3)(vitest@5.0.5)(yaml@2.9.0) + version: 22.2.5(0f8d76520212c66259ef5e9d1f4fbaaa) '@angular/cli': specifier: ^22.2.5 version: 22.2.5(@types/node@24.19.2)(chokidar@5.0.0) @@ -853,6 +1011,168 @@ importers: specifier: ^6.0.3 version: 6.0.3 + examples/angular/ssr: + dependencies: + '@angular/common': + specifier: ^22.0.0 + version: 22.2.4(@angular/core@22.2.4(@angular/compiler@22.2.4)(rxjs@7.8.2)(zone.js@0.16.1))(rxjs@7.8.2) + '@angular/compiler': + specifier: ^22.0.0 + version: 22.2.4 + '@angular/core': + specifier: ^22.0.0 + version: 22.2.4(@angular/compiler@22.2.4)(rxjs@7.8.2)(zone.js@0.16.1) + '@angular/platform-browser': + specifier: ^22.0.0 + version: 22.2.4(@angular/common@22.2.4(@angular/core@22.2.4(@angular/compiler@22.2.4)(rxjs@7.8.2)(zone.js@0.16.1))(rxjs@7.8.2))(@angular/core@22.2.4(@angular/compiler@22.2.4)(rxjs@7.8.2)(zone.js@0.16.1)) + '@angular/platform-server': + specifier: ^22.0.0 + version: 22.2.4(@angular/common@22.2.4(@angular/core@22.2.4(@angular/compiler@22.2.4)(rxjs@7.8.2)(zone.js@0.16.1))(rxjs@7.8.2))(@angular/compiler@22.2.4)(@angular/core@22.2.4(@angular/compiler@22.2.4)(rxjs@7.8.2)(zone.js@0.16.1))(@angular/platform-browser@22.2.4(@angular/common@22.2.4(@angular/core@22.2.4(@angular/compiler@22.2.4)(rxjs@7.8.2)(zone.js@0.16.1))(rxjs@7.8.2))(@angular/core@22.2.4(@angular/compiler@22.2.4)(rxjs@7.8.2)(zone.js@0.16.1)))(rxjs@7.8.2) + '@angular/ssr': + specifier: ^22.0.0 + version: 22.2.6(a1d20e1579b007a10175d052ea6e8746) + '@tanstack/angular-query': + specifier: ^5.0.0-rc.5 + version: link:../../../packages/angular-query + '@tanstack/angular-query-devtools': + specifier: ^5.0.0-rc.5 + version: link:../../../packages/angular-query-devtools + express: + specifier: ^5.1.0 + version: 5.3.0(supports-color@10.2.2) + rxjs: + specifier: ^7.8.2 + version: 7.8.2 + tslib: + specifier: ^2.8.1 + version: 2.8.1 + zone.js: + specifier: 0.16.1 + version: 0.16.1 + devDependencies: + '@angular/build': + specifier: ^22.0.0 + version: 22.2.5(1f987ade22dd7399d2bd38dc661ec906) + '@angular/cli': + specifier: ^22.0.0 + version: 22.2.5(@types/node@24.19.2)(chokidar@5.0.0) + '@angular/compiler-cli': + specifier: ^22.0.0 + version: 22.2.4(@angular/compiler@22.2.4)(typescript@6.0.3) + '@types/express': + specifier: ^5.0.1 + version: 5.0.6 + typescript: + specifier: 6.0.3 + version: 6.0.3 + + examples/angular/ssr-persist: + dependencies: + '@angular/common': + specifier: ^22.0.0 + version: 22.2.4(@angular/core@22.2.4(@angular/compiler@22.2.4)(rxjs@7.8.2)(zone.js@0.16.1))(rxjs@7.8.2) + '@angular/compiler': + specifier: ^22.0.0 + version: 22.2.4 + '@angular/core': + specifier: ^22.0.0 + version: 22.2.4(@angular/compiler@22.2.4)(rxjs@7.8.2)(zone.js@0.16.1) + '@angular/platform-browser': + specifier: ^22.0.0 + version: 22.2.4(@angular/common@22.2.4(@angular/core@22.2.4(@angular/compiler@22.2.4)(rxjs@7.8.2)(zone.js@0.16.1))(rxjs@7.8.2))(@angular/core@22.2.4(@angular/compiler@22.2.4)(rxjs@7.8.2)(zone.js@0.16.1)) + '@angular/platform-server': + specifier: ^22.0.0 + version: 22.2.4(@angular/common@22.2.4(@angular/core@22.2.4(@angular/compiler@22.2.4)(rxjs@7.8.2)(zone.js@0.16.1))(rxjs@7.8.2))(@angular/compiler@22.2.4)(@angular/core@22.2.4(@angular/compiler@22.2.4)(rxjs@7.8.2)(zone.js@0.16.1))(@angular/platform-browser@22.2.4(@angular/common@22.2.4(@angular/core@22.2.4(@angular/compiler@22.2.4)(rxjs@7.8.2)(zone.js@0.16.1))(rxjs@7.8.2))(@angular/core@22.2.4(@angular/compiler@22.2.4)(rxjs@7.8.2)(zone.js@0.16.1)))(rxjs@7.8.2) + '@angular/ssr': + specifier: ^22.0.0 + version: 22.2.6(a1d20e1579b007a10175d052ea6e8746) + '@tanstack/angular-query': + specifier: ^5.0.0-rc.5 + version: link:../../../packages/angular-query + '@tanstack/angular-query-devtools': + specifier: ^5.0.0-rc.5 + version: link:../../../packages/angular-query-devtools + '@tanstack/angular-query-persist-client': + specifier: ^5.0.0-rc.5 + version: link:../../../packages/angular-query-persist-client + '@tanstack/query-async-storage-persister': + specifier: ^5.107.1 + version: link:../../../packages/query-async-storage-persister + express: + specifier: ^5.1.0 + version: 5.3.0(supports-color@10.2.2) + rxjs: + specifier: ^7.8.2 + version: 7.8.2 + tslib: + specifier: ^2.8.1 + version: 2.8.1 + zone.js: + specifier: 0.16.1 + version: 0.16.1 + devDependencies: + '@angular/build': + specifier: ^22.0.0 + version: 22.2.5(46fc5ca31db6cb271ad7edc37360be27) + '@angular/cli': + specifier: ^22.0.0 + version: 22.2.5(@types/node@24.19.2)(chokidar@5.0.0) + '@angular/compiler-cli': + specifier: ^22.0.0 + version: 22.2.4(@angular/compiler@22.2.4)(typescript@6.0.3) + '@types/express': + specifier: ^5.0.1 + version: 5.0.6 + typescript: + specifier: 6.0.3 + version: 6.0.3 + + examples/angular/to-resource-signal-forms: + dependencies: + '@angular/common': + specifier: ^22.0.0 + version: 22.2.4(@angular/core@22.2.4(@angular/compiler@22.2.4)(rxjs@7.8.2)(zone.js@0.16.1))(rxjs@7.8.2) + '@angular/compiler': + specifier: ^22.0.0 + version: 22.2.4 + '@angular/core': + specifier: ^22.0.0 + version: 22.2.4(@angular/compiler@22.2.4)(rxjs@7.8.2)(zone.js@0.16.1) + '@angular/forms': + specifier: ^22.0.0 + version: 22.2.4(@angular/common@22.2.4(@angular/core@22.2.4(@angular/compiler@22.2.4)(rxjs@7.8.2)(zone.js@0.16.1))(rxjs@7.8.2))(@angular/core@22.2.4(@angular/compiler@22.2.4)(rxjs@7.8.2)(zone.js@0.16.1))(@angular/platform-browser@22.2.4(@angular/common@22.2.4(@angular/core@22.2.4(@angular/compiler@22.2.4)(rxjs@7.8.2)(zone.js@0.16.1))(rxjs@7.8.2))(@angular/core@22.2.4(@angular/compiler@22.2.4)(rxjs@7.8.2)(zone.js@0.16.1)))(rxjs@7.8.2) + '@angular/platform-browser': + specifier: ^22.0.0 + version: 22.2.4(@angular/common@22.2.4(@angular/core@22.2.4(@angular/compiler@22.2.4)(rxjs@7.8.2)(zone.js@0.16.1))(rxjs@7.8.2))(@angular/core@22.2.4(@angular/compiler@22.2.4)(rxjs@7.8.2)(zone.js@0.16.1)) + '@tanstack/angular-query': + specifier: ^5.0.0-rc.5 + version: link:../../../packages/angular-query + '@tanstack/angular-query-devtools': + specifier: ^5.0.0-rc.5 + version: link:../../../packages/angular-query-devtools + rxjs: + specifier: ^7.8.2 + version: 7.8.2 + tslib: + specifier: ^2.8.1 + version: 2.8.1 + zone.js: + specifier: 0.16.1 + version: 0.16.1 + devDependencies: + '@angular/build': + specifier: ^22.0.0 + version: 22.2.5(46fc5ca31db6cb271ad7edc37360be27) + '@angular/cli': + specifier: ^22.0.0 + version: 22.2.5(@types/node@24.19.2)(chokidar@5.0.0) + '@angular/compiler-cli': + specifier: ^22.0.0 + version: 22.2.4(@angular/compiler@22.2.4)(typescript@6.0.3) + typescript: + specifier: 6.0.3 + version: 6.0.3 + examples/lit/algolia: dependencies: '@algolia/client-search': @@ -5952,25 +6272,28 @@ importers: dependencies: '@angular/common': specifier: ^22.2.4 - version: 22.2.4(@angular/core@22.2.4(@angular/compiler@22.2.4)(rxjs@7.8.2)(zone.js@0.15.0))(rxjs@7.8.2) + version: 22.2.4(@angular/core@22.2.4(@angular/compiler@22.2.4)(rxjs@7.8.2)(zone.js@0.16.1))(rxjs@7.8.2) '@angular/compiler': specifier: ^22.2.4 version: 22.2.4 '@angular/core': specifier: ^22.2.4 - version: 22.2.4(@angular/compiler@22.2.4)(rxjs@7.8.2)(zone.js@0.15.0) + version: 22.2.4(@angular/compiler@22.2.4)(rxjs@7.8.2)(zone.js@0.16.1) '@angular/forms': specifier: ^22.2.4 - version: 22.2.4(@angular/common@22.2.4(@angular/core@22.2.4(@angular/compiler@22.2.4)(rxjs@7.8.2)(zone.js@0.15.0))(rxjs@7.8.2))(@angular/core@22.2.4(@angular/compiler@22.2.4)(rxjs@7.8.2)(zone.js@0.15.0))(@angular/platform-browser@22.2.4(@angular/common@22.2.4(@angular/core@22.2.4(@angular/compiler@22.2.4)(rxjs@7.8.2)(zone.js@0.15.0))(rxjs@7.8.2))(@angular/core@22.2.4(@angular/compiler@22.2.4)(rxjs@7.8.2)(zone.js@0.15.0)))(rxjs@7.8.2) + version: 22.2.4(@angular/common@22.2.4(@angular/core@22.2.4(@angular/compiler@22.2.4)(rxjs@7.8.2)(zone.js@0.16.1))(rxjs@7.8.2))(@angular/core@22.2.4(@angular/compiler@22.2.4)(rxjs@7.8.2)(zone.js@0.16.1))(@angular/platform-browser@22.2.4(@angular/common@22.2.4(@angular/core@22.2.4(@angular/compiler@22.2.4)(rxjs@7.8.2)(zone.js@0.16.1))(rxjs@7.8.2))(@angular/core@22.2.4(@angular/compiler@22.2.4)(rxjs@7.8.2)(zone.js@0.16.1)))(rxjs@7.8.2) '@angular/platform-browser': specifier: ^22.2.4 - version: 22.2.4(@angular/common@22.2.4(@angular/core@22.2.4(@angular/compiler@22.2.4)(rxjs@7.8.2)(zone.js@0.15.0))(rxjs@7.8.2))(@angular/core@22.2.4(@angular/compiler@22.2.4)(rxjs@7.8.2)(zone.js@0.15.0)) + version: 22.2.4(@angular/common@22.2.4(@angular/core@22.2.4(@angular/compiler@22.2.4)(rxjs@7.8.2)(zone.js@0.16.1))(rxjs@7.8.2))(@angular/core@22.2.4(@angular/compiler@22.2.4)(rxjs@7.8.2)(zone.js@0.16.1)) '@angular/router': specifier: ^22.2.4 - version: 22.2.4(@angular/common@22.2.4(@angular/core@22.2.4(@angular/compiler@22.2.4)(rxjs@7.8.2)(zone.js@0.15.0))(rxjs@7.8.2))(@angular/core@22.2.4(@angular/compiler@22.2.4)(rxjs@7.8.2)(zone.js@0.15.0))(@angular/platform-browser@22.2.4(@angular/common@22.2.4(@angular/core@22.2.4(@angular/compiler@22.2.4)(rxjs@7.8.2)(zone.js@0.15.0))(rxjs@7.8.2))(@angular/core@22.2.4(@angular/compiler@22.2.4)(rxjs@7.8.2)(zone.js@0.15.0)))(rxjs@7.8.2) - '@tanstack/angular-query-experimental': + version: 22.2.4(@angular/common@22.2.4(@angular/core@22.2.4(@angular/compiler@22.2.4)(rxjs@7.8.2)(zone.js@0.16.1))(rxjs@7.8.2))(@angular/core@22.2.4(@angular/compiler@22.2.4)(rxjs@7.8.2)(zone.js@0.16.1))(@angular/platform-browser@22.2.4(@angular/common@22.2.4(@angular/core@22.2.4(@angular/compiler@22.2.4)(rxjs@7.8.2)(zone.js@0.16.1))(rxjs@7.8.2))(@angular/core@22.2.4(@angular/compiler@22.2.4)(rxjs@7.8.2)(zone.js@0.16.1)))(rxjs@7.8.2) + '@tanstack/angular-query': specifier: workspace:* - version: link:../../../packages/angular-query-experimental + version: link:../../../packages/angular-query + '@tanstack/angular-query-devtools': + specifier: workspace:* + version: link:../../../packages/angular-query-devtools rxjs: specifier: ^7.8.2 version: 7.8.2 @@ -5980,7 +6303,7 @@ importers: devDependencies: '@angular/build': specifier: ^22.2.5 - version: 22.2.5(@angular/compiler-cli@22.2.4(@angular/compiler@22.2.4)(typescript@6.0.3))(@angular/compiler@22.2.4)(@angular/core@22.2.4(@angular/compiler@22.2.4)(rxjs@7.8.2)(zone.js@0.15.0))(@angular/platform-browser@22.2.4(@angular/common@22.2.4(@angular/core@22.2.4(@angular/compiler@22.2.4)(rxjs@7.8.2)(zone.js@0.15.0))(rxjs@7.8.2))(@angular/core@22.2.4(@angular/compiler@22.2.4)(rxjs@7.8.2)(zone.js@0.15.0)))(@types/node@24.19.2)(istanbul-lib-instrument@6.0.3(supports-color@10.2.2))(jiti@2.7.0)(postcss@8.5.32)(rollup@4.65.1)(supports-color@10.2.2)(tailwindcss@4.3.3)(terser@5.46.1)(tslib@2.8.1)(tsx@4.23.15)(typescript@6.0.3)(vitest@5.0.5)(yaml@2.9.1) + version: 22.2.5(46fc5ca31db6cb271ad7edc37360be27) '@angular/cli': specifier: ^22.2.5 version: 22.2.5(@types/node@24.19.2)(chokidar@5.0.0) @@ -5991,6 +6314,87 @@ importers: specifier: ^6.0.3 version: 6.0.3 + integrations/angular/types-20: + devDependencies: + '@angular/common': + specifier: ~20.1.0 + version: 20.1.8(@angular/core@20.1.8(@angular/compiler@20.1.8)(rxjs@7.8.2)(zone.js@0.15.0))(rxjs@7.8.2) + '@angular/compiler': + specifier: ~20.1.0 + version: 20.1.8 + '@angular/compiler-cli': + specifier: ~20.1.0 + version: 20.1.8(@angular/compiler@20.1.8)(supports-color@10.2.2)(typescript@5.8.3) + '@angular/core': + specifier: ~20.1.0 + version: 20.1.8(@angular/compiler@20.1.8)(rxjs@7.8.2)(zone.js@0.15.0) + '@tanstack/angular-query': + specifier: workspace:* + version: link:../../../packages/angular-query + '@tanstack/angular-query-devtools': + specifier: workspace:* + version: link:../../../packages/angular-query-devtools + '@tanstack/angular-query-persist-client': + specifier: workspace:* + version: link:../../../packages/angular-query-persist-client + typescript: + specifier: 5.8.3 + version: 5.8.3 + + integrations/angular/types-21: + devDependencies: + '@angular/common': + specifier: ^21.0.0 + version: 21.2.26(@angular/core@21.2.26(@angular/compiler@21.2.26)(rxjs@7.8.2)(zone.js@0.16.1))(rxjs@7.8.2) + '@angular/compiler': + specifier: ^21.0.0 + version: 21.2.26 + '@angular/compiler-cli': + specifier: ^21.0.0 + version: 21.2.26(@angular/compiler@21.2.26)(supports-color@10.2.2)(typescript@5.9.3) + '@angular/core': + specifier: ^21.0.0 + version: 21.2.26(@angular/compiler@21.2.26)(rxjs@7.8.2)(zone.js@0.16.1) + '@tanstack/angular-query': + specifier: workspace:* + version: link:../../../packages/angular-query + '@tanstack/angular-query-devtools': + specifier: workspace:* + version: link:../../../packages/angular-query-devtools + '@tanstack/angular-query-persist-client': + specifier: workspace:* + version: link:../../../packages/angular-query-persist-client + typescript: + specifier: 5.9.3 + version: 5.9.3 + + integrations/angular/types-22: + devDependencies: + '@angular/common': + specifier: ^22.0.0 + version: 22.2.4(@angular/core@22.2.4(@angular/compiler@22.2.4)(rxjs@7.8.2)(zone.js@0.16.1))(rxjs@7.8.2) + '@angular/compiler': + specifier: ^22.0.0 + version: 22.2.4 + '@angular/compiler-cli': + specifier: ^22.0.0 + version: 22.2.4(@angular/compiler@22.2.4)(typescript@6.0.3) + '@angular/core': + specifier: ^22.0.0 + version: 22.2.4(@angular/compiler@22.2.4)(rxjs@7.8.2)(zone.js@0.16.1) + '@tanstack/angular-query': + specifier: workspace:* + version: link:../../../packages/angular-query + '@tanstack/angular-query-devtools': + specifier: workspace:* + version: link:../../../packages/angular-query-devtools + '@tanstack/angular-query-persist-client': + specifier: workspace:* + version: link:../../../packages/angular-query-persist-client + typescript: + specifier: 'catalog:' + version: 6.0.3 + integrations/lit/vite: dependencies: '@tanstack/lit-query': @@ -6475,7 +6879,7 @@ importers: specifier: ^3.3.13 version: 3.3.13(typescript@6.0.3) - packages/angular-query-experimental: + packages/angular-query: dependencies: '@tanstack/query-core': specifier: workspace:* @@ -6483,38 +6887,126 @@ importers: devDependencies: '@analogjs/vite-plugin-angular': specifier: 'catalog:' - version: 2.7.5(@angular/build@22.2.5(@angular/compiler-cli@22.2.4(@angular/compiler@22.2.4)(typescript@6.0.3))(@angular/compiler@22.2.4)(@angular/core@22.2.4(@angular/compiler@22.2.4)(rxjs@7.8.2)(zone.js@0.15.0))(@angular/platform-browser@22.2.4(@angular/common@22.2.4(@angular/core@22.2.4(@angular/compiler@22.2.4)(rxjs@7.8.2)(zone.js@0.15.0))(rxjs@7.8.2))(@angular/core@22.2.4(@angular/compiler@22.2.4)(rxjs@7.8.2)(zone.js@0.15.0)))(@types/node@24.19.2)(istanbul-lib-instrument@6.0.3(supports-color@10.2.2))(jiti@2.7.0)(postcss@8.5.28)(rollup@4.65.1)(supports-color@10.2.2)(tailwindcss@4.3.3)(terser@5.46.1)(tslib@2.8.1)(tsx@4.23.15)(typescript@6.0.3)(vitest@5.0.5)(yaml@2.9.1))(@emnapi/core@1.11.3)(@emnapi/runtime@1.11.3)(vite@8.3.5(@types/node@24.19.2)(esbuild@0.28.2)(jiti@2.7.0)(sass-embedded@1.104.1)(sass@1.90.0)(terser@5.46.1)(tsx@4.23.15)(yaml@2.9.1)) + version: 2.7.5(@angular/build@22.2.5(4f59dfb2b83d9aac3696e2b8995912cc))(@emnapi/core@1.11.3)(@emnapi/runtime@1.11.3)(vite@8.3.5(@types/node@24.19.2)(esbuild@0.28.2)(jiti@2.7.0)(sass-embedded@1.104.1)(sass@1.104.1)(terser@5.46.1)(tsx@4.23.15)(yaml@2.9.1)) + '@angular-devkit/schematics': + specifier: ^22.0.0 + version: 22.2.5(chokidar@5.0.0) + '@angular/build': + specifier: 'catalog:' + version: 22.2.5(4f59dfb2b83d9aac3696e2b8995912cc) '@angular/common': specifier: 'catalog:' - version: 22.2.4(@angular/core@22.2.4(@angular/compiler@22.2.4)(rxjs@7.8.2)(zone.js@0.15.0))(rxjs@7.8.2) + version: 22.2.4(@angular/core@22.2.4(@angular/compiler@22.2.4)(rxjs@7.8.2)(zone.js@0.16.1))(rxjs@7.8.2) '@angular/compiler': specifier: 'catalog:' version: 22.2.4 + '@angular/compiler-cli': + specifier: 'catalog:' + version: 22.2.4(@angular/compiler@22.2.4)(typescript@6.0.3) '@angular/core': specifier: 'catalog:' - version: 22.2.4(@angular/compiler@22.2.4)(rxjs@7.8.2)(zone.js@0.15.0) + version: 22.2.4(@angular/compiler@22.2.4)(rxjs@7.8.2)(zone.js@0.16.1) '@angular/platform-browser': specifier: 'catalog:' - version: 22.2.4(@angular/common@22.2.4(@angular/core@22.2.4(@angular/compiler@22.2.4)(rxjs@7.8.2)(zone.js@0.15.0))(rxjs@7.8.2))(@angular/core@22.2.4(@angular/compiler@22.2.4)(rxjs@7.8.2)(zone.js@0.15.0)) - '@oxc-project/runtime': - specifier: ^0.151.0 - version: 0.151.0 + version: 22.2.4(@angular/common@22.2.4(@angular/core@22.2.4(@angular/compiler@22.2.4)(rxjs@7.8.2)(zone.js@0.16.1))(rxjs@7.8.2))(@angular/core@22.2.4(@angular/compiler@22.2.4)(rxjs@7.8.2)(zone.js@0.16.1)) + '@angular/platform-server': + specifier: 'catalog:' + version: 22.2.4(@angular/common@22.2.4(@angular/core@22.2.4(@angular/compiler@22.2.4)(rxjs@7.8.2)(zone.js@0.16.1))(rxjs@7.8.2))(@angular/compiler@22.2.4)(@angular/core@22.2.4(@angular/compiler@22.2.4)(rxjs@7.8.2)(zone.js@0.16.1))(@angular/platform-browser@22.2.4(@angular/common@22.2.4(@angular/core@22.2.4(@angular/compiler@22.2.4)(rxjs@7.8.2)(zone.js@0.16.1))(rxjs@7.8.2))(@angular/core@22.2.4(@angular/compiler@22.2.4)(rxjs@7.8.2)(zone.js@0.16.1)))(rxjs@7.8.2) + '@angular/router': + specifier: 'catalog:' + version: 22.2.4(@angular/common@22.2.4(@angular/core@22.2.4(@angular/compiler@22.2.4)(rxjs@7.8.2)(zone.js@0.16.1))(rxjs@7.8.2))(@angular/core@22.2.4(@angular/compiler@22.2.4)(rxjs@7.8.2)(zone.js@0.16.1))(@angular/platform-browser@22.2.4(@angular/common@22.2.4(@angular/core@22.2.4(@angular/compiler@22.2.4)(rxjs@7.8.2)(zone.js@0.16.1))(rxjs@7.8.2))(@angular/core@22.2.4(@angular/compiler@22.2.4)(rxjs@7.8.2)(zone.js@0.16.1)))(rxjs@7.8.2) + '@schematics/angular': + specifier: ^22.0.0 + version: 22.2.5(chokidar@5.0.0) '@tanstack/query-test-utils': specifier: workspace:* version: link:../query-test-utils '@testing-library/angular': specifier: 'catalog:' - version: 19.6.0(@angular/core@22.2.4(@angular/compiler@22.2.4)(rxjs@7.8.2)(zone.js@0.15.0))(@angular/router@22.2.4(@angular/common@22.2.4(@angular/core@22.2.4(@angular/compiler@22.2.4)(rxjs@7.8.2)(zone.js@0.15.0))(rxjs@7.8.2))(@angular/core@22.2.4(@angular/compiler@22.2.4)(rxjs@7.8.2)(zone.js@0.15.0))(@angular/platform-browser@22.2.4(@angular/common@22.2.4(@angular/core@22.2.4(@angular/compiler@22.2.4)(rxjs@7.8.2)(zone.js@0.15.0))(rxjs@7.8.2))(@angular/core@22.2.4(@angular/compiler@22.2.4)(rxjs@7.8.2)(zone.js@0.15.0)))(rxjs@7.8.2))(@testing-library/dom@10.4.1) + version: 19.6.0(@angular/core@22.2.4(@angular/compiler@22.2.4)(rxjs@7.8.2)(zone.js@0.16.1))(@angular/router@22.2.4(@angular/common@22.2.4(@angular/core@22.2.4(@angular/compiler@22.2.4)(rxjs@7.8.2)(zone.js@0.16.1))(rxjs@7.8.2))(@angular/core@22.2.4(@angular/compiler@22.2.4)(rxjs@7.8.2)(zone.js@0.16.1))(@angular/platform-browser@22.2.4(@angular/common@22.2.4(@angular/core@22.2.4(@angular/compiler@22.2.4)(rxjs@7.8.2)(zone.js@0.16.1))(rxjs@7.8.2))(@angular/core@22.2.4(@angular/compiler@22.2.4)(rxjs@7.8.2)(zone.js@0.16.1)))(rxjs@7.8.2))(@testing-library/dom@10.4.1) + npm-run-all2: + specifier: ^9.0.3 + version: 9.0.3 rxjs: specifier: ^7.8.2 version: 7.8.2 typescript: specifier: 'catalog:' version: 6.0.3 - optionalDependencies: + vite: + specifier: ^8.3.5 + version: 8.3.5(@types/node@24.19.2)(esbuild@0.28.2)(jiti@2.7.0)(sass-embedded@1.104.1)(sass@1.104.1)(terser@5.46.1)(tsx@4.23.15)(yaml@2.9.1) + vite-plugin-dts: + specifier: 4.2.3 + version: 4.2.3(@types/node@24.19.2)(rollup@4.65.1)(supports-color@10.2.2)(typescript@6.0.3)(vite@8.3.5(@types/node@24.19.2)(esbuild@0.28.2)(jiti@2.7.0)(sass-embedded@1.104.1)(sass@1.104.1)(terser@5.46.1)(tsx@4.23.15)(yaml@2.9.1)) + vite-tsconfig-paths: + specifier: ^5.1.4 + version: 5.1.4(supports-color@10.2.2)(typescript@6.0.3)(vite@8.3.5(@types/node@24.19.2)(esbuild@0.28.2)(jiti@2.7.0)(sass-embedded@1.104.1)(sass@1.104.1)(terser@5.46.1)(tsx@4.23.15)(yaml@2.9.1)) + zone.js: + specifier: ^0.16.0 + version: 0.16.1 + linkDirectory: false + publishDirectory: dist + + packages/angular-query-devtools: + dependencies: '@tanstack/query-devtools': specifier: workspace:* version: link:../query-devtools + devDependencies: + '@analogjs/vite-plugin-angular': + specifier: 'catalog:' + version: 2.7.5(@angular/build@22.2.5(57a0f8143a78e352390c218bbf5a24f3))(@emnapi/core@1.11.3)(@emnapi/runtime@1.11.3)(vite@8.3.5(@types/node@24.19.2)(esbuild@0.28.2)(jiti@2.7.0)(sass-embedded@1.104.1)(sass@1.104.1)(terser@5.46.1)(tsx@4.23.15)(yaml@2.9.1)) + '@angular/build': + specifier: 'catalog:' + version: 22.2.5(57a0f8143a78e352390c218bbf5a24f3) + '@angular/common': + specifier: 'catalog:' + version: 22.2.4(@angular/core@22.2.4(@angular/compiler@22.2.4)(rxjs@7.8.2)(zone.js@0.16.1))(rxjs@7.8.2) + '@angular/compiler': + specifier: 'catalog:' + version: 22.2.4 + '@angular/compiler-cli': + specifier: 'catalog:' + version: 22.2.4(@angular/compiler@22.2.4)(typescript@6.0.3) + '@angular/core': + specifier: 'catalog:' + version: 22.2.4(@angular/compiler@22.2.4)(rxjs@7.8.2)(zone.js@0.16.1) + '@angular/platform-browser': + specifier: 'catalog:' + version: 22.2.4(@angular/common@22.2.4(@angular/core@22.2.4(@angular/compiler@22.2.4)(rxjs@7.8.2)(zone.js@0.16.1))(rxjs@7.8.2))(@angular/core@22.2.4(@angular/compiler@22.2.4)(rxjs@7.8.2)(zone.js@0.16.1)) + '@tanstack/angular-query': + specifier: workspace:* + version: link:../angular-query + '@testing-library/jest-dom': + specifier: ^6.8.0 + version: 6.9.1 + npm-run-all2: + specifier: ^9.0.3 + version: 9.0.3 + rxjs: + specifier: ^7.8.2 + version: 7.8.2 + typescript: + specifier: 'catalog:' + version: 6.0.3 + vite: + specifier: ^8.3.5 + version: 8.3.5(@types/node@24.19.2)(esbuild@0.28.2)(jiti@2.7.0)(sass-embedded@1.104.1)(sass@1.104.1)(terser@5.46.1)(tsx@4.23.15)(yaml@2.9.1) + vite-plugin-dts: + specifier: 4.2.3 + version: 4.2.3(@types/node@24.19.2)(rollup@4.65.1)(supports-color@10.2.2)(typescript@6.0.3)(vite@8.3.5(@types/node@24.19.2)(esbuild@0.28.2)(jiti@2.7.0)(sass-embedded@1.104.1)(sass@1.104.1)(terser@5.46.1)(tsx@4.23.15)(yaml@2.9.1)) + vite-tsconfig-paths: + specifier: ^5.1.4 + version: 5.1.4(supports-color@10.2.2)(typescript@6.0.3)(vite@8.3.5(@types/node@24.19.2)(esbuild@0.28.2)(jiti@2.7.0)(sass-embedded@1.104.1)(sass@1.104.1)(terser@5.46.1)(tsx@4.23.15)(yaml@2.9.1)) + vitest: + specifier: ^5.0.5 + version: 5.0.5(@types/node@24.19.2)(@vitest/coverage-istanbul@5.0.5)(jsdom@27.4.0(supports-color@10.2.2))(msw@2.15.0(@types/node@24.19.2)(typescript@6.0.3))(vite@8.3.5(@types/node@24.19.2)(esbuild@0.28.2)(jiti@2.7.0)(sass-embedded@1.104.1)(sass@1.104.1)(terser@5.46.1)(tsx@4.23.15)(yaml@2.9.1)) + zone.js: + specifier: ^0.16.0 + version: 0.16.1 + linkDirectory: false + publishDirectory: dist packages/angular-query-persist-client: dependencies: @@ -6524,37 +7016,46 @@ importers: devDependencies: '@analogjs/vite-plugin-angular': specifier: 'catalog:' - version: 2.7.5(@angular/build@22.2.5(@angular/compiler-cli@22.2.4(@angular/compiler@22.2.4)(typescript@6.0.3))(@angular/compiler@22.2.4)(@angular/core@22.2.4(@angular/compiler@22.2.4)(rxjs@7.8.2)(zone.js@0.15.0))(@angular/platform-browser@22.2.4(@angular/common@22.2.4(@angular/core@22.2.4(@angular/compiler@22.2.4)(rxjs@7.8.2)(zone.js@0.15.0))(rxjs@7.8.2))(@angular/core@22.2.4(@angular/compiler@22.2.4)(rxjs@7.8.2)(zone.js@0.15.0)))(@types/node@24.19.2)(istanbul-lib-instrument@6.0.3(supports-color@10.2.2))(jiti@2.7.0)(postcss@8.5.28)(rollup@4.65.1)(supports-color@10.2.2)(tailwindcss@4.3.3)(terser@5.46.1)(tslib@2.8.1)(tsx@4.23.15)(typescript@6.0.3)(vitest@5.0.5)(yaml@2.9.1))(@emnapi/core@1.11.3)(@emnapi/runtime@1.11.3)(vite@8.3.5(@types/node@24.19.2)(esbuild@0.28.2)(jiti@2.7.0)(sass-embedded@1.104.1)(sass@1.90.0)(terser@5.46.1)(tsx@4.23.15)(yaml@2.9.1)) + version: 2.7.5(@angular/build@22.2.5(4f59dfb2b83d9aac3696e2b8995912cc))(@emnapi/core@1.11.3)(@emnapi/runtime@1.11.3)(vite@8.3.5(@types/node@24.19.2)(esbuild@0.28.2)(jiti@2.7.0)(sass-embedded@1.104.1)(sass@1.90.0)(terser@5.46.1)(tsx@4.23.15)(yaml@2.9.1)) '@angular/common': specifier: 'catalog:' - version: 22.2.4(@angular/core@22.2.4(@angular/compiler@22.2.4)(rxjs@7.8.2)(zone.js@0.15.0))(rxjs@7.8.2) + version: 22.2.4(@angular/core@22.2.4(@angular/compiler@22.2.4)(rxjs@7.8.2)(zone.js@0.16.1))(rxjs@7.8.2) '@angular/compiler': specifier: 'catalog:' version: 22.2.4 '@angular/core': specifier: 'catalog:' - version: 22.2.4(@angular/compiler@22.2.4)(rxjs@7.8.2)(zone.js@0.15.0) + version: 22.2.4(@angular/compiler@22.2.4)(rxjs@7.8.2)(zone.js@0.16.1) '@angular/platform-browser': specifier: 'catalog:' - version: 22.2.4(@angular/common@22.2.4(@angular/core@22.2.4(@angular/compiler@22.2.4)(rxjs@7.8.2)(zone.js@0.15.0))(rxjs@7.8.2))(@angular/core@22.2.4(@angular/compiler@22.2.4)(rxjs@7.8.2)(zone.js@0.15.0)) + version: 22.2.4(@angular/common@22.2.4(@angular/core@22.2.4(@angular/compiler@22.2.4)(rxjs@7.8.2)(zone.js@0.16.1))(rxjs@7.8.2))(@angular/core@22.2.4(@angular/compiler@22.2.4)(rxjs@7.8.2)(zone.js@0.16.1)) + '@angular/router': + specifier: 'catalog:' + version: 22.2.4(@angular/common@22.2.4(@angular/core@22.2.4(@angular/compiler@22.2.4)(rxjs@7.8.2)(zone.js@0.16.1))(rxjs@7.8.2))(@angular/core@22.2.4(@angular/compiler@22.2.4)(rxjs@7.8.2)(zone.js@0.16.1))(@angular/platform-browser@22.2.4(@angular/common@22.2.4(@angular/core@22.2.4(@angular/compiler@22.2.4)(rxjs@7.8.2)(zone.js@0.16.1))(rxjs@7.8.2))(@angular/core@22.2.4(@angular/compiler@22.2.4)(rxjs@7.8.2)(zone.js@0.16.1)))(rxjs@7.8.2) '@oxc-project/runtime': specifier: ^0.151.0 version: 0.151.0 - '@tanstack/angular-query-experimental': + '@tanstack/angular-query': specifier: workspace:* - version: link:../angular-query-experimental + version: link:../angular-query '@tanstack/query-test-utils': specifier: workspace:* version: link:../query-test-utils '@testing-library/angular': specifier: 'catalog:' - version: 19.6.0(@angular/core@22.2.4(@angular/compiler@22.2.4)(rxjs@7.8.2)(zone.js@0.15.0))(@angular/router@22.2.4(@angular/common@22.2.4(@angular/core@22.2.4(@angular/compiler@22.2.4)(rxjs@7.8.2)(zone.js@0.15.0))(rxjs@7.8.2))(@angular/core@22.2.4(@angular/compiler@22.2.4)(rxjs@7.8.2)(zone.js@0.15.0))(@angular/platform-browser@22.2.4(@angular/common@22.2.4(@angular/core@22.2.4(@angular/compiler@22.2.4)(rxjs@7.8.2)(zone.js@0.15.0))(rxjs@7.8.2))(@angular/core@22.2.4(@angular/compiler@22.2.4)(rxjs@7.8.2)(zone.js@0.15.0)))(rxjs@7.8.2))(@testing-library/dom@10.4.1) + version: 19.6.0(@angular/core@22.2.4(@angular/compiler@22.2.4)(rxjs@7.8.2)(zone.js@0.16.1))(@angular/router@22.2.4(@angular/common@22.2.4(@angular/core@22.2.4(@angular/compiler@22.2.4)(rxjs@7.8.2)(zone.js@0.16.1))(rxjs@7.8.2))(@angular/core@22.2.4(@angular/compiler@22.2.4)(rxjs@7.8.2)(zone.js@0.16.1))(@angular/platform-browser@22.2.4(@angular/common@22.2.4(@angular/core@22.2.4(@angular/compiler@22.2.4)(rxjs@7.8.2)(zone.js@0.16.1))(rxjs@7.8.2))(@angular/core@22.2.4(@angular/compiler@22.2.4)(rxjs@7.8.2)(zone.js@0.16.1)))(rxjs@7.8.2))(@testing-library/dom@10.4.1) '@testing-library/dom': specifier: ^10.4.0 version: 10.4.1 + npm-run-all2: + specifier: ^9.0.3 + version: 9.0.3 typescript: specifier: 'catalog:' version: 6.0.3 + zone.js: + specifier: ^0.16.0 + version: 0.16.1 packages/eslint-plugin-query: dependencies: @@ -7351,6 +7852,20 @@ packages: engines: {node: ^22.22.3 || ^24.15.0 || >=26.0.0, npm: ^6.11.0 || ^7.5.6 || >=8.0.0, yarn: '>= 1.13.0'} hasBin: true + '@angular/common@20.1.8': + resolution: {integrity: sha512-naL9BOwbjnCHU/lV36qTeRn7dp/zBVE2ROaMi2VFnNt3IUZn6izolzFEEmjBkTXGChp+X9y0ha6JlQr/HlWGqg==} + engines: {node: ^20.19.0 || ^22.12.0 || >=24.0.0} + peerDependencies: + '@angular/core': 20.1.8 + rxjs: ^6.5.3 || ^7.4.0 + + '@angular/common@21.2.26': + resolution: {integrity: sha512-2lnNdImIHaeTmYqW+lEKeU9vPauNLz8NgM2MoZs7kV9D+CfPMi90F5VwRg0q16J/UiKS8uiYIYmUeaoo2wu4Pg==} + engines: {node: ^20.19.0 || ^22.12.0 || >=24.0.0} + peerDependencies: + '@angular/core': 21.2.26 + rxjs: ^6.5.3 || ^7.4.0 + '@angular/common@22.2.4': resolution: {integrity: sha512-i5oosToLSAXumbkOF5pZyti0W0jrfRppj4y6a913f+AY4Em+iHT87JIOKrfybR7vkHs0eceZnpS0CpzylVAvgA==} engines: {node: ^22.22.3 || ^24.15.0 || >=26.0.0} @@ -7358,6 +7873,28 @@ packages: '@angular/core': 22.2.4 rxjs: ^6.5.3 || ^7.4.0 + '@angular/compiler-cli@20.1.8': + resolution: {integrity: sha512-zjkNO13etxB4Q6Tz3CTCaSY9FIfmEzR/lchAdC9lz2jygxCukjbwHD0HHKCwoF4oJZSwZKLLh0ZXMm2sQNGf6A==} + engines: {node: ^20.19.0 || ^22.12.0 || >=24.0.0} + hasBin: true + peerDependencies: + '@angular/compiler': 20.1.8 + typescript: '>=5.8 <5.9' + peerDependenciesMeta: + typescript: + optional: true + + '@angular/compiler-cli@21.2.26': + resolution: {integrity: sha512-W/S9tImJg9IqEQmkP1yPY2LD4D6/2uSMvg2eHZuTg8zOq3YrhzJINlCKpRy/wp9oWsKxlDKef6tddMDiNa32Hw==} + engines: {node: ^20.19.0 || ^22.12.0 || >=24.0.0} + hasBin: true + peerDependencies: + '@angular/compiler': 21.2.26 + typescript: '>=5.9 <6.1' + peerDependenciesMeta: + typescript: + optional: true + '@angular/compiler-cli@22.2.4': resolution: {integrity: sha512-Ow6AlIdmidjFxa3v4+uZrbPVSc45jLMUO9ERdFp69z6fv5CP9jd4DhK+wKVCvIlCp5ygelia8admEypdY3p5Hw==} engines: {node: ^22.22.3 || ^24.15.0 || >=26.0.0} @@ -7369,10 +7906,44 @@ packages: typescript: optional: true + '@angular/compiler@20.1.8': + resolution: {integrity: sha512-EvPO+sCLx2kGowvexxB4FMdXlza6UpGBv+r3hxI0rolUDHJpuVvxmyIbOMadHCVWXs7V3OwwHG8uEZK6fgdfcQ==} + engines: {node: ^20.19.0 || ^22.12.0 || >=24.0.0} + + '@angular/compiler@21.2.26': + resolution: {integrity: sha512-awrZjb8ok4TE871RVCvVkPfO63vmW0whqslXQ1s5sSFzlYoYDGxQznVbp0PoDiYU+QpoxMK50Lec/J2l0+0fjw==} + engines: {node: ^20.19.0 || ^22.12.0 || >=24.0.0} + '@angular/compiler@22.2.4': resolution: {integrity: sha512-Az14b7hE1iCMqNhskOjA28+8w3VQDhSkrVUU+2gyucDHey1qw9rX5x45/z3qNanz4VtTBShvqEDsjctkobKJSA==} engines: {node: ^22.22.3 || ^24.15.0 || >=26.0.0} + '@angular/core@20.1.8': + resolution: {integrity: sha512-MFXUAP7DCBRBAfGl7Yx8aGIyDkbpHiAAjaXpZ2faE+H9H6j3pB7sSEIw2BUZvI0sNk15ZCFVgASbzZR2mSrWzA==} + engines: {node: ^20.19.0 || ^22.12.0 || >=24.0.0} + peerDependencies: + '@angular/compiler': 20.1.8 + rxjs: ^6.5.3 || ^7.4.0 + zone.js: ~0.15.0 + peerDependenciesMeta: + '@angular/compiler': + optional: true + zone.js: + optional: true + + '@angular/core@21.2.26': + resolution: {integrity: sha512-EXALAnHRhhBj9WAYend5IIpFlpqPq+HM3OrHxBiWNQoqxOfFKnmRKGERLlX3FEDSzWQt+iZcZHpd2569Xo0pMA==} + engines: {node: ^20.19.0 || ^22.12.0 || >=24.0.0} + peerDependencies: + '@angular/compiler': 21.2.26 + rxjs: ^6.5.3 || ^7.4.0 + zone.js: ~0.15.0 || ~0.16.0 + peerDependenciesMeta: + '@angular/compiler': + optional: true + zone.js: + optional: true + '@angular/core@22.2.4': resolution: {integrity: sha512-FME4hPQ6+RbOkaRtUHWytwyAFXZYjIQ81TDJ3Dj7tx+vzKs0StpH9g/0AoZwQUDmhPlN84IazBimQ7II7lmwVw==} engines: {node: ^22.22.3 || ^24.15.0 || >=26.0.0} @@ -7406,6 +7977,16 @@ packages: '@angular/animations': optional: true + '@angular/platform-server@22.2.4': + resolution: {integrity: sha512-IN2tqpP63PQzW2dGOPLOwvgGseKKeoi1eRP0HANklGXzvugFOY/c2v5MqLMMIBji+5tFGneJRsy0Dwe/kpda5w==} + engines: {node: ^22.22.3 || ^24.15.0 || >=26.0.0} + peerDependencies: + '@angular/common': 22.2.4 + '@angular/compiler': 22.2.4 + '@angular/core': 22.2.4 + '@angular/platform-browser': 22.2.4 + rxjs: ^6.5.3 || ^7.4.0 + '@angular/router@22.2.4': resolution: {integrity: sha512-HKe2lqHbeCxczwiRoUlGfNLcJWi/VWGCF3a2v2w3qCBBGUBqed0RghbjdEQzl13led8PsLgse7U1ZC8zlz+BMw==} engines: {node: ^22.22.3 || ^24.15.0 || >=26.0.0} @@ -7415,6 +7996,17 @@ packages: '@angular/platform-browser': 22.2.4 rxjs: ^6.5.3 || ^7.4.0 + '@angular/ssr@22.2.6': + resolution: {integrity: sha512-IHUuZ64Fp/PEEKWjzboApZNYV3czpAsvWnRIhV2Hfdo45t2p404AjLy5dQdM3angjwUGkmpvtD4PPolAvreTBQ==} + peerDependencies: + '@angular/common': ^22.0.0 + '@angular/core': ^22.0.0 + '@angular/platform-server': ^22.0.0 + '@angular/router': ^22.0.0 + peerDependenciesMeta: + '@angular/platform-server': + optional: true + '@antfu/install-pkg@2.1.0': resolution: {integrity: sha512-sdg9NxU3zR4Mnawfbc/x6GB5Wf17WYud5qOuEuxXjaKpYpMkISSJEjItGebXJ2bQ4DIcly4NYH23mtkGJjvKUw==} @@ -7596,6 +8188,10 @@ packages: resolution: {integrity: sha512-YLsYoQMvL8l8WrGpN3Zj7O1wK5LEBN+cQtux7BcuHyxIXve724XG+zuJ1n3U1cUweRtTzQOA4IHbuQw3N34SZw==} engines: {node: ^22.18.0 || >=24.11.0} + '@babel/core@7.28.0': + resolution: {integrity: sha512-UlLAnTPrFdNGoFtbSXwcGFQBtQZJCNjaN6hQNP3UPvuNXT1i82N26KL3dZeIpNalWywr9IuQuncaAfUaS1g6sQ==} + engines: {node: '>=6.9.0'} + '@babel/core@7.29.7': resolution: {integrity: sha512-RgHBCvtjbOK2gXSNBNIkNoEc9qoVEtau3hj8gEqKQuL3HZAibKarWFEI3Lfm6EYKkLalOh8eSrj9b+ch9H/VBA==} engines: {node: '>=6.9.0'} @@ -10053,6 +10649,19 @@ packages: '@mdn/browser-compat-data@6.1.5': resolution: {integrity: sha512-PzdZZzRhcXvKB0begee28n5lvwAcinGKYuLZOVxHAZm+n7y01ddEGfdS1ZXRuVcV+ndG6mSEAE8vgudom5UjYg==} + '@microsoft/api-extractor-model@7.29.6': + resolution: {integrity: sha512-gC0KGtrZvxzf/Rt9oMYD2dHvtN/1KPEYsrQPyMKhLHnlVuO/f4AFN3E4toqZzD2pt4LhkKoYmL2H9tX3yCOyRw==} + + '@microsoft/api-extractor@7.47.7': + resolution: {integrity: sha512-fNiD3G55ZJGhPOBPMKD/enozj8yxJSYyVJWxRWdcUtw842rvthDHJgUWq9gXQTensFlMHv2wGuCjjivPv53j0A==} + hasBin: true + + '@microsoft/tsdoc-config@0.17.1': + resolution: {integrity: sha512-UtjIFe0C6oYgTnad4q1QP4qXwLhe6tIpNTRStJ2RZEPIkqQPREAwE5spzVxsdn9UaEMUqhh0AqSx3X4nWAKXWw==} + + '@microsoft/tsdoc@0.15.1': + resolution: {integrity: sha512-4aErSrCR/On/e5G2hDP0wjooqDdauzEbIq8hIkIe5pXV0rtWJZvdCEKL0ykZxex+IxIwBp0eGeV48hQN07dXtw==} + '@modelcontextprotocol/client@2.4.0': resolution: {integrity: sha512-LgrD2OphHuG12vfKFKz6SOnq7bKHQmhGJIAYdD+MZBn2npHEyry6uD8zvktodtl5CQM85MO0anUyD9JwmUmxww==} engines: {node: '>=20'} @@ -12908,6 +13517,28 @@ packages: cpu: [x64] os: [win32] + '@rushstack/node-core-library@5.7.0': + resolution: {integrity: sha512-Ff9Cz/YlWu9ce4dmqNBZpA45AEya04XaBFIjV7xTVeEf+y/kTjEasmozqFELXlNG4ROdevss75JrrZ5WgufDkQ==} + peerDependencies: + '@types/node': ^24.19.2 + peerDependenciesMeta: + '@types/node': + optional: true + + '@rushstack/rig-package@0.5.3': + resolution: {integrity: sha512-olzSSjYrvCNxUFZowevC3uz8gvKr3WTpHQ7BkpjtRpA3wK+T0ybep/SRUMfr195gBzJm5gaXw0ZMgjIyHqJUow==} + + '@rushstack/terminal@0.14.0': + resolution: {integrity: sha512-juTKMAMpTIJKudeFkG5slD8Z/LHwNwGZLtU441l/u82XdTBfsP+LbGKJLCNwP5se+DMCT55GB8x9p6+C4UL7jw==} + peerDependencies: + '@types/node': ^24.19.2 + peerDependenciesMeta: + '@types/node': + optional: true + + '@rushstack/ts-command-line@4.22.6': + resolution: {integrity: sha512-QSRqHT/IfoC5nk9zn6+fgyqOPXHME0BfchII9EUPR19pocsNp/xSbeBCbD3PIR2Lg+Q5qk7OFqk1VhWPMdKHJg==} + '@schematics/angular@22.2.5': resolution: {integrity: sha512-wP4pzkm1lwrC1UxaGqq6/4sEAHeBNsg/vyyKy4y94C6B0YzDQbMnvPBFvVsv1sD7ORhiQe5n2DBr8gzgr6mAYg==} engines: {node: ^22.22.3 || ^24.15.0 || >=26.0.0, npm: ^6.11.0 || ^7.5.6 || >=8.0.0, yarn: '>= 1.13.0'} @@ -13510,6 +14141,9 @@ packages: '@tybys/wasm-util@0.9.0': resolution: {integrity: sha512-6+7nlbMVX/PVDCwaIQ8nTOPveOcFLSt8GcXdx8hD0bt39uWxYT88uXzqTd4fTvqta7oeUJqudepapKNt2DYJFw==} + '@types/argparse@1.0.38': + resolution: {integrity: sha512-ebDJ9b0e702Yr7pWgB0jzm+CX4Srzz8RcXtLJDJB+BSccqMa36uyH/zUsSYao5+BD1ytv3k3rPYCq4mAE1hsXA==} + '@types/aria-query@5.0.4': resolution: {integrity: sha512-rfT93uj5s0PRL7EzccGMs3brplhcrghnDoV26NqKhCAS1hVo+WdNsPvE/yb6ilfr5hi2MEk6d5EWJTKdxg8jVw==} @@ -14398,6 +15032,14 @@ packages: '@vue/devtools-shared@8.2.1': resolution: {integrity: sha512-Fkac7lUdGReh6pVOi3AYPRGe82LQqRmAfThW7RRligOAP0ZA/Z1z9XLHDM9dv34pV2HRc79DK8uKPeG2fLnA/g==} + '@vue/language-core@2.1.6': + resolution: {integrity: sha512-MW569cSky9R/ooKMh6xa2g1D0AtRKbL56k83dzus/bx//RDJk24RHWkMzbAlXjMdDNyxAaagKPRquBIxkxlCkg==} + peerDependencies: + typescript: '*' + peerDependenciesMeta: + typescript: + optional: true + '@vue/language-core@2.2.12': resolution: {integrity: sha512-IsGljWbKGU1MZpBPN+BvPAdr55YPkj2nB/TBNGNC32Vy2qLG25DYu/NBN2vNtZqdRbTRjaoYrahLrToim2NanA==} peerDependencies: @@ -14604,133 +15246,157 @@ packages: resolution: {integrity: sha512-Oc2KInVkPfUjEB4PeV6X0NvIoyYTzDe/WmqFrTwBqKs6YKnz4A7XwWQvJTb7M0rLz9a6WgpUUiiS5QKaCi4O/g==} cpu: [arm64] os: [android] + deprecated: yuku-codegen is pure JavaScript since 0.14 '@yuku-codegen/binding-darwin-arm64@0.10.2': resolution: {integrity: sha512-3H7eNPIHJndUJXZ4QUGBPq1zC6RGcUZfm7bymJes+/N7wTVWUn1bxZ9JcozYHpkWQNm9f23G8YWbaHD9aYH72A==} cpu: [arm64] os: [darwin] + deprecated: yuku-codegen is pure JavaScript since 0.14 '@yuku-codegen/binding-darwin-x64@0.10.2': resolution: {integrity: sha512-AJOUpR2s3LF9AWiiub/Uyc/UoXNTWcq8hK3cVI6fUSXtwh34dG21J6hRuNlO6JVJFTo4o3ScVvZOrh/YFfUEAA==} cpu: [x64] os: [darwin] + deprecated: yuku-codegen is pure JavaScript since 0.14 '@yuku-codegen/binding-freebsd-x64@0.10.2': resolution: {integrity: sha512-ms7DcZu87u5CiK/wMwvpKAvAmtaqKjCQIXNweMLypG6qbuiaOMQf1jpbB5+j46xBcgCovo8TQMcv0bCQLKIL9w==} cpu: [x64] os: [freebsd] + deprecated: yuku-codegen is pure JavaScript since 0.14 '@yuku-codegen/binding-linux-arm-gnu@0.10.2': resolution: {integrity: sha512-xJDpYAsKV5+eaiBhTYl05fvT6sst4PsCeuIFMRu9b0/WCSrNQPfCDtAQ5/MS6xNpsdujdZEPR+gmfWk3ZG5i3A==} cpu: [arm] os: [linux] libc: [glibc] + deprecated: yuku-codegen is pure JavaScript since 0.14 '@yuku-codegen/binding-linux-arm-musl@0.10.2': resolution: {integrity: sha512-qfTkgd7AEx61l4K9VtXWCGTxc/fmXJ4ZheDz3i+/AAJUtg4sa0bPrc0VBxPggB/rayR8Z3+JfrBItuyanBJJ9Q==} cpu: [arm] os: [linux] libc: [musl] + deprecated: yuku-codegen is pure JavaScript since 0.14 '@yuku-codegen/binding-linux-arm64-gnu@0.10.2': resolution: {integrity: sha512-4e6Mifm/4UdjtU3D8mATIrvgP+xEiH8xtQOjd0zpd72XKWT7ug3sdyhq2utkkZFP6BvYp7SgZrI+aR4VeIOHdw==} cpu: [arm64] os: [linux] libc: [glibc] + deprecated: yuku-codegen is pure JavaScript since 0.14 '@yuku-codegen/binding-linux-arm64-musl@0.10.2': resolution: {integrity: sha512-RdsJrUfDYFVV3JOmWFUWwSu31fa1APn12xDeIKxgl/YWxrabwtxsDBNjF2561c7tmcbiewdCUvngqRs8AyGVLA==} cpu: [arm64] os: [linux] libc: [musl] + deprecated: yuku-codegen is pure JavaScript since 0.14 '@yuku-codegen/binding-linux-x64-gnu@0.10.2': resolution: {integrity: sha512-mVzWimEPPreaPyXIUvxsHoJzvO7ckZ5j0LgQFHz04zQIRwt9A9T2hA7K5/jYjJKkMxWG/U2VjhGNwVhtyU+uqg==} cpu: [x64] os: [linux] libc: [glibc] + deprecated: yuku-codegen is pure JavaScript since 0.14 '@yuku-codegen/binding-linux-x64-musl@0.10.2': resolution: {integrity: sha512-Y77fyISurmr2mvO1yeq3u+x/WJbACgPR4w+lzEVx30ViCxZzIGrZPRN1yEdZ9xUNPNsIO5thBHIdRNG+UGUG+Q==} cpu: [x64] os: [linux] libc: [musl] + deprecated: yuku-codegen is pure JavaScript since 0.14 '@yuku-codegen/binding-win32-arm64@0.10.2': resolution: {integrity: sha512-1+tGLyG0u5YYy0lev4ck7/0sd8xJ9SZde0dLut7qLDPZV5WVTV8x6OxNXUne/PGuHZyO1vK+txPQzzHOyXHGSw==} cpu: [arm64] os: [win32] + deprecated: yuku-codegen is pure JavaScript since 0.14 '@yuku-codegen/binding-win32-x64@0.10.2': resolution: {integrity: sha512-8a2SExRohRbwC0MY4VpOF0/RSckrJ2ASZqAor5/RYSJJaeadR93n10gZzcKT6pY9ukiSOIZCRKVRD2tH73T0qA==} cpu: [x64] os: [win32] + deprecated: yuku-codegen is pure JavaScript since 0.14 '@yuku-parser/binding-android-arm64@0.10.2': resolution: {integrity: sha512-2VPBU9fRGRAQ2xPAvghnec3oou5Nrxm2Bezhf+13UMspAxQSkF/32r+ySKXSwIPA5/RivumDJDxAxc301Sgicw==} cpu: [arm64] os: [android] + deprecated: yuku-parser runs on yuku-core since 0.14 '@yuku-parser/binding-darwin-arm64@0.10.2': resolution: {integrity: sha512-LD+PMZE51tCYTOss5HBkm3/AE39MvcMDBfWJx7A4yDcjfNbAQDnHZKtzSOuqrswx+TQHY0ws5xn6+fWOwtmfBA==} cpu: [arm64] os: [darwin] + deprecated: yuku-parser runs on yuku-core since 0.14 '@yuku-parser/binding-darwin-x64@0.10.2': resolution: {integrity: sha512-mmZ8cND+AoIIMRERyMinlg5ApHxP23B9jH2B5wT7T+dliPa9rubLxneB/SUjFwyUjGaFnB5G7t4YvpfbO5zbkQ==} cpu: [x64] os: [darwin] + deprecated: yuku-parser runs on yuku-core since 0.14 '@yuku-parser/binding-freebsd-x64@0.10.2': resolution: {integrity: sha512-gVIjaaIddbRfAhHlC8N809wQWml7mxfSVnzaLtzGXObTeFTPAg/YVnQXt1UOhPM1ah5eG/8Y0RUlNpB4GVe7eQ==} cpu: [x64] os: [freebsd] + deprecated: yuku-parser runs on yuku-core since 0.14 '@yuku-parser/binding-linux-arm-gnu@0.10.2': resolution: {integrity: sha512-q/XPPQQAPdlw05aPj30ygBhekmQryGOwxVraBgApjKK8yY1kNQgqq6XCYLF1WHSee+lhxclrTO7W0/bt7dR1GA==} cpu: [arm] os: [linux] libc: [glibc] + deprecated: yuku-parser runs on yuku-core since 0.14 '@yuku-parser/binding-linux-arm-musl@0.10.2': resolution: {integrity: sha512-A+Cb0I1hFF4wilTQpWs79k1aNnj4B2tkrHx3zsuUNF9BtVY2zPZ4yeQEM/zjXrS/qJlNMZVK9NrWJjwdpnTrfg==} cpu: [arm] os: [linux] libc: [musl] + deprecated: yuku-parser runs on yuku-core since 0.14 '@yuku-parser/binding-linux-arm64-gnu@0.10.2': resolution: {integrity: sha512-aGNSzqIqqphFwAdIFwVvKIyXD1Iy3CxrEJVIZAT87Ecyi4vCmmDD2v2l9h+Gd3/wSy3JZlOI792LJbKAjyy9rQ==} cpu: [arm64] os: [linux] libc: [glibc] + deprecated: yuku-parser runs on yuku-core since 0.14 '@yuku-parser/binding-linux-arm64-musl@0.10.2': resolution: {integrity: sha512-Ddl1sF0rtuCXyHGSOV6dcmdx+ETv1iD+IVFqQuOjzkJZWclxJxdBWX6ZJMRtTiGqGUTbqLEKiTXxpR/Bvqk+2A==} cpu: [arm64] os: [linux] libc: [musl] + deprecated: yuku-parser runs on yuku-core since 0.14 '@yuku-parser/binding-linux-x64-gnu@0.10.2': resolution: {integrity: sha512-/nlcpR6IF5U+0m5L9wvAIXeQa2DT+BXuvqKDsTcOTlcc0B4dHNyqE5hTXsS4hAyimpy2ZK8A1zMNF5hTrjg2cg==} cpu: [x64] os: [linux] libc: [glibc] + deprecated: yuku-parser runs on yuku-core since 0.14 '@yuku-parser/binding-linux-x64-musl@0.10.2': resolution: {integrity: sha512-GX80dxTQD/M/OryyuxJcFzFENzry3cDFPvCFTyWogNWQH3fSHfMrNfpwpl1YzMos1eV9NygK5GSDG7VArQlb4w==} cpu: [x64] os: [linux] libc: [musl] + deprecated: yuku-parser runs on yuku-core since 0.14 '@yuku-parser/binding-win32-arm64@0.10.2': resolution: {integrity: sha512-agePQBV4VHewiGU0ACSjscZ/hJd283f9JfAF19Gf1rI5+wy5tTgx4GS36i0b3xim15AQ4RCpDRosEvhLZ4zAOw==} cpu: [arm64] os: [win32] + deprecated: yuku-parser runs on yuku-core since 0.14 '@yuku-parser/binding-win32-x64@0.10.2': resolution: {integrity: sha512-s8//CMpgL5+y1lvDCdyh1rwGI5+ytDJywFJRe1vnhI7n0j+caxshNucurikYLLVeQ2SYFex6aPrzgQxkabBQRA==} cpu: [x64] os: [win32] + deprecated: yuku-parser runs on yuku-core since 0.14 '@yuku-toolchain/types@0.10.2': resolution: {integrity: sha512-sSeo4SSSToiS+sSD+bwn/s94EEcaLJ7tG5LCp8gFYC1G5VzxzX7fqB6m9RU1yMD8KTpu6zdU/I1NlQf8hVBJ9Q==} @@ -14869,6 +15535,12 @@ packages: ajv@6.14.0: resolution: {integrity: sha512-IWrosm/yrn43eiKqkfkHis7QioDleaXQHdDVPKg0FSwwd/DuvyX79TZnFOnYpB7dcsFAMmtFztZuXPDvSePkFw==} + ajv@8.12.0: + resolution: {integrity: sha512-sRu1kpcO9yLtYxBKvqfTeh9KzZEwO3STyX1HT+4CaDzC6HpTGYhIhPIzj9XuKU7KYDwnaeh5hcOwjy1QuJzBPA==} + + ajv@8.13.0: + resolution: {integrity: sha512-PRA911Blj99jR5RMeTunVbNXMF6Lp4vZXnk5GQjcnUWUTsrXtekg/pnmFFI2u/I36Y/2bITGS30GZCXei6uNkA==} + ajv@8.20.0: resolution: {integrity: sha512-Thbli+OlOj+iMPYFBVBfJ3OmCAnaSyNn4M1vz9T6Gka5Jt9ba/HIR56joy65tY6kx/FCF5VXNB819Y7/GUrBGA==} @@ -15790,6 +16462,9 @@ packages: resolution: {integrity: sha512-o8vI5RE5A6EVVOd9o41jKp41aJom+QTEO/Bx8MYNjexMo/Bv2WOjUfZr+aL0WnYSgymUy6zeguqLTsIhV0gMvQ==} engines: {node: '>= 0.8.0'} + computeds@0.0.1: + resolution: {integrity: sha512-7CEBgcMjVmitjYo5q8JTJVra6X5mQ20uTThdK+0kR7UEaDrAWEQcRiBtWJzga4eRpP6afNwwLsX2SET2JhVB1Q==} + concat-map@0.0.1: resolution: {integrity: sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==} @@ -17343,6 +18018,10 @@ packages: fs-constants@1.0.0: resolution: {integrity: sha512-y6OAwoSIf7FyjMIv94u+b5rdheZEjzR63GTyZJm5qh4Bi+2YgwLCcI/fPFZkL5PSixOt6ZNKm+w+Hfp/Bciwow==} + fs-extra@7.0.1: + resolution: {integrity: sha512-YJDaCJZEnBmcbw13fvdAM9AwNOJwOzrE4pqMqBq5nFiEqXUqHwlK4B+3pUw6JNvfSPtX05xFHtYy/1ni01eGCw==} + engines: {node: '>=6 <7 || >=8'} + fs-write-stream-atomic@1.0.10: resolution: {integrity: sha512-gehEzmPn2nAwr39eay+x3X34Ra+M2QlVUTLhkXPjWdeO8RF9kszk116avgBJM3ZyNHgHXBNx+VmPaFC36k0PzA==} deprecated: This package is no longer supported. @@ -17821,6 +18500,10 @@ packages: resolution: {integrity: sha512-/XFeXYgkuWgbtqPC7qPKvciXTvhtz7WMNQKQsAM1Kz+j0I5OWJDrybfiya6QtHF9oEvPkLwTHmC9+4OR/MmfIA==} engines: {node: '>=22.15'} + import-lazy@4.0.0: + resolution: {integrity: sha512-rKtvo6a868b5Hu3heneU+L4yEQ4jYKLtjpnPeUdK7h0yzXGmyBTypknlkCvHFBqfX9YlorEiMM6Dnq/5atfHkw==} + engines: {node: '>=8'} + import-local@3.2.0: resolution: {integrity: sha512-2SPlun1JUPWoM6t3F0dw0FkCF/jWY8kttcY4f599GLTSjh2OCuuhdTkJQsEcZzBqbXZGKMK2OqW1oZsjtf/gQA==} engines: {node: '>=8'} @@ -18394,6 +19077,9 @@ packages: jsonc-parser@3.3.1: resolution: {integrity: sha512-HUgH65KyejrUFPvHFPbqOY0rsFip3Bo5wb4ngvdi1EpCYWUQDC5V+Y7mZws+DLkr4M//zQJoanu1SP+87Dv1oQ==} + jsonfile@4.0.0: + resolution: {integrity: sha512-m6F1R3z8jjlf2imQHS2Qez5sjKWQzbuuhuJ/FKYFRZvPE3PuHcSMVZzfsLhGVOkfd20obL5SWEBew5ShlquNxg==} + jsx-ast-utils@3.3.5: resolution: {integrity: sha512-ZZow9HBI5O6EPgSJLUb8n2NKgmVWTwCvHGwFuJlMjvLFqlGG6pjirPhtdsseaLZjSibD8eegzmYpUZwoIlj2cQ==} engines: {node: '>=4.0'} @@ -18676,6 +19362,10 @@ packages: resolution: {integrity: sha512-FMJTLMXfCLMLfJxcX9PFqX5qD88Z5MRGaZCVzfuqeZSPsyiBzs+pahDQjbIWz2QIzPZz0NX9Zy4FX3lmK6YHIg==} engines: {node: '>= 12.13.0'} + local-pkg@0.5.1: + resolution: {integrity: sha512-9rrA30MRRP3gBD3HTGnC6cDFpaE1kVDWxWgqWJUN0RvDNAo+Nz/9GxB+nHOH0ifbVFy0hSA1V6vFDvnx54lTEQ==} + engines: {node: '>=14'} + local-pkg@1.2.1: resolution: {integrity: sha512-++gUqRDEvcnN6Zhqrr+y/CkVEHhlrR96vZn3nZZPYzMcBUyBtTKzB9NadClFIsIVSsu+3i9tfk/erqy9kAmt7Q==} engines: {node: '>=14'} @@ -18724,6 +19414,9 @@ packages: lodash.uniq@4.5.0: resolution: {integrity: sha512-xfBaXQd9ryd9dlSDvnvI0lvxfLJlYAZzXomUYzLKtUeOQvOP5piqAWuGtrhWeqaXK9hhoM/iyJc5AV+XfsX3HQ==} + lodash@4.17.23: + resolution: {integrity: sha512-LgVTMpQtIopCi79SJeDiP0TfWi5CNEc/L/aRdTh3yIvmZXTnheWpKjSZhnvMl8iXbC1tFg9gdHHDMLoV7CnG+w==} + lodash@4.18.1: resolution: {integrity: sha512-dMInicTPVE8d1e5otfwmmjlxkZoUpiVLwyeTdUsi/Caj/gfzzblBcCE5sRHV/AsjuCmxWrte2TNGSYuCeCq+0Q==} @@ -18760,6 +19453,10 @@ packages: lru-cache@5.1.1: resolution: {integrity: sha512-KpNARQA3Iwv+jTA0utUVVbrh+Jlrr1Fv0e56GGzAFOXN7dk/FviaDW8LHmK52DlcH4WP2n6gI8vN1aesBFgo9w==} + lru-cache@6.0.0: + resolution: {integrity: sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==} + engines: {node: '>=10'} + lunr@2.3.9: resolution: {integrity: sha512-zTU3DaZaF3Rt9rhN3uBMGQD3dD2/vFQqnvZCDv4dl5iOzq2IZQqTxu90r4E5J+nP70J3ilqVCrbho2eWaeW8Ow==} @@ -19047,6 +19744,9 @@ packages: resolution: {integrity: sha512-vpLQEs+VLCr1nU0BXS07maYoFwlDAH0gngQuuttxIwutDFEMHq2blX+8vpgxDdK3J1PwjCJiep77OitTZ4Ll1A==} engines: {node: 18 || 20 || >=22} + minimatch@3.0.8: + resolution: {integrity: sha512-6FsRAQsxQ61mw+qP1ZzbL9Bc78x2p5OqNgNpnoAFLTrX8n5Kxph0CsnhmKKNXTWjXqU5L0pGPR7hYk+XWZr60Q==} + minimatch@3.1.5: resolution: {integrity: sha512-VgjWUsnnT6n+NUk6eZq77zeFdpW2LWDzP6zFGrCbHXiYNul5Dzqk2HHQ5uFH2DNW5Xbp8+jVzaeNt94ssEEl4w==} @@ -20279,10 +20979,6 @@ packages: resolution: {integrity: sha512-g50586zr4bZmwFiTlflMu8E0bDTb5I5gertgwAKmsdUlTQIhZtunzUlD1WSzwcVWPoAVpsrA6vlfCD7oXvRwgg==} engines: {node: ^10 || ^12 || >=14} - postcss@8.5.28: - resolution: {integrity: sha512-RRuzqDtt5Y9h3quz5hWhK+TPnsmVs6WwSU6LkJMeY4HstUEDuYTG8UJSdawMRzmzAtV+KEoG8N3Qg2qLy5vM/A==} - engines: {node: ^10 || ^12 || >=14} - postcss@8.5.32: resolution: {integrity: sha512-LJlKCCAUFKOuZxipUdYw1NzIITEsPcgyOG9LkvRJvuKj/bRzbuRY0ARXvL0pWGpsZvn8jku+LMep2eU0seHp8g==} engines: {node: ^10 || ^12 || >=14} @@ -21195,6 +21891,11 @@ packages: resolution: {integrity: sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==} hasBin: true + semver@7.5.4: + resolution: {integrity: sha512-1bCSESV6Pv+i21Hvpxp3Dx+pSD8lIPt8uVjRrxAUt/nbswYc+tK6Y2btiULjd4+fnq15PX+nqQDC7Oft7WkwcA==} + engines: {node: '>=10'} + hasBin: true + semver@7.8.4: resolution: {integrity: sha512-rUCObTnP32Q08R2uuIrt7r9PlEonuTmtuXYcW6s5kjdlj3xbnwe+21yXptAUYcMAABLkYYTtnmzb3w3EDZfueA==} engines: {node: '>=10'} @@ -21644,6 +22345,10 @@ packages: strict-event-emitter@0.5.1: resolution: {integrity: sha512-vMgjE/GGEPEFnhFub6pa4FmJBRBVOLpIII2hvCZ8Kzb7K0hlHo7mQv6xYrBvCL2LtAIBwFUK8wvuJgTVSQ5MFQ==} + string-argv@0.3.2: + resolution: {integrity: sha512-aqD2Q0144Z+/RqG52NeHEkZauTAUWJO8c6yTftGJKO3Tja5tUgIfmIl6kExvhtxSDP7fXB6DvzkfMpCd/F3G+Q==} + engines: {node: '>=0.6.19'} + string-ts@2.3.1: resolution: {integrity: sha512-xSJq+BS52SaFFAVxuStmx6n5aYZU571uYUnUrPXkPFCfdHyZMMlbP2v2Wx5sNBnAVzq/2+0+mcBLBa3Xa5ubYw==} @@ -22125,6 +22830,17 @@ packages: ts-pattern@5.9.2: resolution: {integrity: sha512-qAf+7M7Jjk7uebZeIo9uEzyintfuRtgHdzM9dqxRKcMi2dt76Ec+FH2wW3bnU9TuGLkZIJLoLs7cCQnU7Tu8ig==} + tsconfck@3.1.6: + resolution: {integrity: sha512-ks6Vjr/jEw0P1gmOVwutM3B7fWxoWBL2KRDb1JfqGVawBmO5UsvmWOQFGHBPl5yxYz4eERr19E6L7NMv+Fej4w==} + engines: {node: ^18 || >=20} + deprecated: unmaintained + hasBin: true + peerDependencies: + typescript: ^5.0.0 + peerDependenciesMeta: + typescript: + optional: true + tsconfig-paths@4.2.0: resolution: {integrity: sha512-NoZ4roiN7LnbKn9QqE1amc9DJfzvZXxF4xDavcOWt1BPkdx+m+0gJuPM+S0vCe7zTJMYUP0R8pO2XMr+Y8oLIg==} engines: {node: '>=6'} @@ -22258,6 +22974,11 @@ packages: eslint: ^8.57.0 || ^9.0.0 || ^10.0.0 typescript: '>=4.8.4 <6.1.0' + typescript@5.4.2: + resolution: {integrity: sha512-+2/g0Fds1ERlP6JsakQQDXjZdZMM+rqpamFZJEKh4kwTIn3iDkgKtby0CeNd5ATNZ4Ry1ax15TMx0W2V+miizQ==} + engines: {node: '>=14.17'} + hasBin: true + typescript@5.6.1-rc: resolution: {integrity: sha512-E3b2+1zEFu84jB0YQi9BORDjz9+jGbwwy1Zi3G0LUNw7a7cePUrHMRNy8aPh53nXpkFGVHSxIZo5vKTfYaFiBQ==} engines: {node: '>=14.17'} @@ -22455,6 +23176,10 @@ packages: unist-util-visit@5.1.0: resolution: {integrity: sha512-m+vIdyeCOpdr/QeQCu2EzxX/ohgS8KbnPDgFni4dQsfSCtpz8UqDyY5GjRru8PDKuYn7Fq19j1CQ+nJSsGKOzg==} + universalify@0.1.2: + resolution: {integrity: sha512-rBJeI5CXAlmy1pV+617WB9J63U6XcazHHF2f2dbJix4XzpUF0RS3Zbj0FGIOCAva5P/d/GBOYaACQ1w+0azUkg==} + engines: {node: '>= 4.0.0'} + unload@2.4.1: resolution: {integrity: sha512-IViSAm8Z3sRBYA+9wc0fLQmU9Nrxb16rcDmIiR6Y9LJSZzI7QY5QsDhqPpKOjAn0O9/kfK1TfNEMMAGPTIraPw==} @@ -22761,6 +23486,16 @@ packages: vue-tsc: optional: true + vite-plugin-dts@4.2.3: + resolution: {integrity: sha512-O5NalzHANQRwVw1xj8KQun3Bv8OSDAlNJXrnqoAz10BOuW8FVvY5g4ygj+DlJZL5mtSPuMu9vd3OfrdW5d4k6w==} + engines: {node: ^14.18.0 || >=16.0.0} + peerDependencies: + typescript: '*' + vite: '*' + peerDependenciesMeta: + vite: + optional: true + vite-plugin-inspect@11.4.1: resolution: {integrity: sha512-ShOFe2PURXGvRS5OrgmOLZOCwDTD7dEBVt0tMpFPKb9AsvqXKCRGM8QgKrUbRbJYFXScHvDPpGRd28rYidC0tA==} engines: {node: '>=14'} @@ -22802,6 +23537,14 @@ packages: peerDependencies: vite: 5.x || 6.x || 7.x || 8.x + vite-tsconfig-paths@5.1.4: + resolution: {integrity: sha512-cYj0LRuLV2c2sMqhqhGpaO3LretdtMn/BVX4cPLanIZuwwrkVl+lK84E/miEXkCHWXuq65rhNN4rXsBcOB3S4w==} + peerDependencies: + vite: '*' + peerDependenciesMeta: + vite: + optional: true + vite@7.3.7: resolution: {integrity: sha512-AHEzTORMbi7/7aXp7w7KZ5+DCUdSeLsJz0grY8xHpc9DHdYb0vQu6DqJfm2tOw3gDExNgPgnJTXxM6syYFHaCA==} engines: {node: ^20.19.0 || >=22.12.0} @@ -23405,6 +24148,10 @@ packages: resolution: {integrity: sha512-GCPAHLvrIH13+c0SuacwvRYj2SxJXQ4kaVTT5xgL3kPrz56XxkF21IGhjSE1+W0aw7gpBWRGXLCPnPby6lSpmQ==} engines: {node: '>=12'} + xhr2@0.2.1: + resolution: {integrity: sha512-sID0rrVCqkVNUn8t6xuv9+6FViXjUVXq8H5rWOH2rz9fDNQEd4g0EA2XlcEdJXRz5BMEn4O1pJFdT+z4YHhoWw==} + engines: {node: '>= 6'} + xml-name-validator@5.0.0: resolution: {integrity: sha512-EvGK8EJ3DhaHfbRlETOWAS5pO9MZITeauHKJyb8wyajUfQUenkIg2MvLDTZ4T/TgIcm3HU0TFBgWWboAZ30UHg==} engines: {node: '>=18'} @@ -23441,6 +24188,9 @@ packages: yallist@3.1.1: resolution: {integrity: sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g==} + yallist@4.0.0: + resolution: {integrity: sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==} + yallist@5.0.0: resolution: {integrity: sha512-YgvUTfwqyc7UXVMrB+SImsVYSmTS8X/tSrtdNZMImM+n7+QTriRXyXim0mBrTXNeqzVF0KWGgHPeiyViFFrNDw==} engines: {node: '>=18'} @@ -23549,6 +24299,9 @@ packages: zone.js@0.15.0: resolution: {integrity: sha512-9oxn0IIjbCZkJ67L+LkhYWRyAy7axphb3VgE2MBDlOqnmHMPWGYMxJxBYFueFq/JGY2GMwS0rU+UCLunEmy5UA==} + zone.js@0.16.1: + resolution: {integrity: sha512-dpvY17vxYIW3+bNrP0ClUlaiY0CiIRK3tnoLaGoQsQcY9/I/NpzIWQ7tQNhbV7LacQMpCII6wVzuL3tuWOyfuA==} + zwitch@2.0.4: resolution: {integrity: sha512-bXE4cR/kVZhKZX/RjPEflHaKVhUVl85noU3v6b8apfQEc1x4A+zBxjZ4lN8LqGd6WZ3dl98pY4o717VFmoPp+A==} @@ -23590,19 +24343,45 @@ snapshots: '@jridgewell/gen-mapping': 0.3.13 '@jridgewell/trace-mapping': 0.3.31 - '@analogjs/vite-plugin-angular@2.7.5(@angular/build@22.2.5(@angular/compiler-cli@22.2.4(@angular/compiler@22.2.4)(typescript@6.0.3))(@angular/compiler@22.2.4)(@angular/core@22.2.4(@angular/compiler@22.2.4)(rxjs@7.8.2)(zone.js@0.15.0))(@angular/platform-browser@22.2.4(@angular/common@22.2.4(@angular/core@22.2.4(@angular/compiler@22.2.4)(rxjs@7.8.2)(zone.js@0.15.0))(rxjs@7.8.2))(@angular/core@22.2.4(@angular/compiler@22.2.4)(rxjs@7.8.2)(zone.js@0.15.0)))(@types/node@24.19.2)(istanbul-lib-instrument@6.0.3(supports-color@10.2.2))(jiti@2.7.0)(postcss@8.5.28)(rollup@4.65.1)(supports-color@10.2.2)(tailwindcss@4.3.3)(terser@5.46.1)(tslib@2.8.1)(tsx@4.23.15)(typescript@6.0.3)(vitest@5.0.5)(yaml@2.9.1))(@emnapi/core@1.11.3)(@emnapi/runtime@1.11.3)(vite@8.3.5(@types/node@24.19.2)(esbuild@0.28.2)(jiti@2.7.0)(sass-embedded@1.104.1)(sass@1.90.0)(terser@5.46.1)(tsx@4.23.15)(yaml@2.9.1))': + '@analogjs/vite-plugin-angular@2.7.5(@angular/build@22.2.5(4f59dfb2b83d9aac3696e2b8995912cc))(@emnapi/core@1.11.3)(@emnapi/runtime@1.11.3)(vite@8.3.5(@types/node@24.19.2)(esbuild@0.28.2)(jiti@2.7.0)(sass-embedded@1.104.1)(sass@1.104.1)(terser@5.46.1)(tsx@4.23.15)(yaml@2.9.1))': dependencies: magic-string: 0.30.21 obug: 2.1.4 oxc-parser: 0.121.0(@emnapi/core@1.11.3)(@emnapi/runtime@1.11.3) tinyglobby: 0.2.17 optionalDependencies: - '@angular/build': 22.2.5(@angular/compiler-cli@22.2.4(@angular/compiler@22.2.4)(typescript@6.0.3))(@angular/compiler@22.2.4)(@angular/core@22.2.4(@angular/compiler@22.2.4)(rxjs@7.8.2)(zone.js@0.15.0))(@angular/platform-browser@22.2.4(@angular/common@22.2.4(@angular/core@22.2.4(@angular/compiler@22.2.4)(rxjs@7.8.2)(zone.js@0.15.0))(rxjs@7.8.2))(@angular/core@22.2.4(@angular/compiler@22.2.4)(rxjs@7.8.2)(zone.js@0.15.0)))(@types/node@24.19.2)(istanbul-lib-instrument@6.0.3(supports-color@10.2.2))(jiti@2.7.0)(postcss@8.5.28)(rollup@4.65.1)(supports-color@10.2.2)(tailwindcss@4.3.3)(terser@5.46.1)(tslib@2.8.1)(tsx@4.23.15)(typescript@6.0.3)(vitest@5.0.5)(yaml@2.9.1) + '@angular/build': 22.2.5(4f59dfb2b83d9aac3696e2b8995912cc) + vite: 8.3.5(@types/node@24.19.2)(esbuild@0.28.2)(jiti@2.7.0)(sass-embedded@1.104.1)(sass@1.104.1)(terser@5.46.1)(tsx@4.23.15)(yaml@2.9.1) + transitivePeerDependencies: + - '@emnapi/core' + - '@emnapi/runtime' + + '@analogjs/vite-plugin-angular@2.7.5(@angular/build@22.2.5(4f59dfb2b83d9aac3696e2b8995912cc))(@emnapi/core@1.11.3)(@emnapi/runtime@1.11.3)(vite@8.3.5(@types/node@24.19.2)(esbuild@0.28.2)(jiti@2.7.0)(sass-embedded@1.104.1)(sass@1.90.0)(terser@5.46.1)(tsx@4.23.15)(yaml@2.9.1))': + dependencies: + magic-string: 0.30.21 + obug: 2.1.4 + oxc-parser: 0.121.0(@emnapi/core@1.11.3)(@emnapi/runtime@1.11.3) + tinyglobby: 0.2.17 + optionalDependencies: + '@angular/build': 22.2.5(4f59dfb2b83d9aac3696e2b8995912cc) vite: 8.3.5(@types/node@24.19.2)(esbuild@0.28.2)(jiti@2.7.0)(sass-embedded@1.104.1)(sass@1.90.0)(terser@5.46.1)(tsx@4.23.15)(yaml@2.9.1) transitivePeerDependencies: - '@emnapi/core' - '@emnapi/runtime' + '@analogjs/vite-plugin-angular@2.7.5(@angular/build@22.2.5(57a0f8143a78e352390c218bbf5a24f3))(@emnapi/core@1.11.3)(@emnapi/runtime@1.11.3)(vite@8.3.5(@types/node@24.19.2)(esbuild@0.28.2)(jiti@2.7.0)(sass-embedded@1.104.1)(sass@1.104.1)(terser@5.46.1)(tsx@4.23.15)(yaml@2.9.1))': + dependencies: + magic-string: 0.30.21 + obug: 2.1.4 + oxc-parser: 0.121.0(@emnapi/core@1.11.3)(@emnapi/runtime@1.11.3) + tinyglobby: 0.2.17 + optionalDependencies: + '@angular/build': 22.2.5(57a0f8143a78e352390c218bbf5a24f3) + vite: 8.3.5(@types/node@24.19.2)(esbuild@0.28.2)(jiti@2.7.0)(sass-embedded@1.104.1)(sass@1.104.1)(terser@5.46.1)(tsx@4.23.15)(yaml@2.9.1) + transitivePeerDependencies: + - '@emnapi/core' + - '@emnapi/runtime' + '@andrewbranch/untar.js@1.0.3': {} '@angular-devkit/architect@0.2202.5(chokidar@5.0.0)': @@ -23633,118 +24412,7 @@ snapshots: transitivePeerDependencies: - chokidar - '@angular/build@22.2.5(@angular/compiler-cli@22.2.4(@angular/compiler@22.2.4)(typescript@6.0.3))(@angular/compiler@22.2.4)(@angular/core@22.2.4(@angular/compiler@22.2.4)(rxjs@7.8.2)(zone.js@0.15.0))(@angular/platform-browser@22.2.4(@angular/common@22.2.4(@angular/core@22.2.4(@angular/compiler@22.2.4)(rxjs@7.8.2)(zone.js@0.15.0))(rxjs@7.8.2))(@angular/core@22.2.4(@angular/compiler@22.2.4)(rxjs@7.8.2)(zone.js@0.15.0)))(@types/node@24.19.2)(istanbul-lib-instrument@6.0.3(supports-color@10.2.2))(jiti@2.7.0)(postcss@8.5.28)(rollup@4.65.1)(supports-color@10.2.2)(tailwindcss@4.3.3)(terser@5.46.1)(tslib@2.8.1)(tsx@4.23.15)(typescript@6.0.3)(vitest@5.0.5)(yaml@2.9.1)': - dependencies: - '@ampproject/remapping': 2.3.0 - '@angular-devkit/architect': 0.2202.5(chokidar@5.0.0) - '@angular/compiler': 22.2.4 - '@angular/compiler-cli': 22.2.4(@angular/compiler@22.2.4)(typescript@6.0.3) - '@babel/core': 8.0.5 - '@inquirer/confirm': 6.3.2(@types/node@24.19.2) - '@parcel/watcher': 2.6.0 - '@vitejs/plugin-basic-ssl': 2.3.0(vite@8.3.5(@types/node@24.19.2)(esbuild@0.28.2)(jiti@2.7.0)(sass-embedded@1.104.1)(sass@1.90.0)(terser@5.46.1)(tsx@4.23.15)(yaml@2.9.1)) - beasties: 0.5.4 - browserslist: 4.29.5 - chokidar: 5.0.0 - esbuild: 0.28.2 - https-proxy-agent: 9.1.0(supports-color@10.2.2) - jsonc-parser: 3.3.1 - listr2: 11.1.0 - magic-string: 1.4.1 - mrmime: 2.0.1 - oxc-parser: 0.150.0 - parse5-html-rewriting-stream: 8.0.1 - picomatch: 4.0.7 - piscina: 5.3.2 - rolldown: 1.2.15 - sass: 1.104.1 - sass-embedded: 1.104.1 - semver: 7.8.5 - source-map-support: 0.5.21 - tinyglobby: 0.2.17 - tslib: 2.8.1 - typescript: 6.0.3 - vite: 8.3.5(@types/node@24.19.2)(esbuild@0.28.2)(jiti@2.7.0)(sass-embedded@1.104.1)(sass@1.104.1)(terser@5.46.1)(tsx@4.23.15)(yaml@2.9.1) - xxhash-wasm: 1.1.0 - optionalDependencies: - '@angular/core': 22.2.4(@angular/compiler@22.2.4)(rxjs@7.8.2)(zone.js@0.15.0) - '@angular/platform-browser': 22.2.4(@angular/common@22.2.4(@angular/core@22.2.4(@angular/compiler@22.2.4)(rxjs@7.8.2)(zone.js@0.15.0))(rxjs@7.8.2))(@angular/core@22.2.4(@angular/compiler@22.2.4)(rxjs@7.8.2)(zone.js@0.15.0)) - '@oxc-parser/binding-wasm32-wasi': 0.150.0 - istanbul-lib-instrument: 6.0.3(supports-color@10.2.2) - lmdb: 3.5.6 - postcss: 8.5.28 - rollup: 4.65.1 - tailwindcss: 4.3.3 - vitest: 5.0.5(@types/node@24.19.2)(@vitest/coverage-istanbul@5.0.5)(jsdom@27.4.0(supports-color@7.2.0))(msw@2.15.0(@types/node@24.19.2)(typescript@6.0.3))(vite@8.3.5(@types/node@24.19.2)(esbuild@0.28.2)(jiti@2.7.0)(sass-embedded@1.104.1)(sass@1.90.0)(terser@5.46.1)(tsx@4.23.15)(yaml@2.9.1)) - transitivePeerDependencies: - - '@types/node' - - '@vitejs/devtools' - - jiti - - kerberos - - stylus - - sugarss - - supports-color - - terser - - tsx - - yaml - optional: true - - '@angular/build@22.2.5(@angular/compiler-cli@22.2.4(@angular/compiler@22.2.4)(typescript@6.0.3))(@angular/compiler@22.2.4)(@angular/core@22.2.4(@angular/compiler@22.2.4)(rxjs@7.8.2)(zone.js@0.15.0))(@angular/platform-browser@22.2.4(@angular/common@22.2.4(@angular/core@22.2.4(@angular/compiler@22.2.4)(rxjs@7.8.2)(zone.js@0.15.0))(rxjs@7.8.2))(@angular/core@22.2.4(@angular/compiler@22.2.4)(rxjs@7.8.2)(zone.js@0.15.0)))(@types/node@24.19.2)(istanbul-lib-instrument@6.0.3(supports-color@10.2.2))(jiti@2.7.0)(postcss@8.5.32)(rollup@4.65.1)(supports-color@10.2.2)(tailwindcss@4.2.2)(terser@5.46.1)(tslib@2.8.1)(tsx@4.23.15)(typescript@6.0.3)(vitest@5.0.5)(yaml@2.9.0)': - dependencies: - '@ampproject/remapping': 2.3.0 - '@angular-devkit/architect': 0.2202.5(chokidar@5.0.0) - '@angular/compiler': 22.2.4 - '@angular/compiler-cli': 22.2.4(@angular/compiler@22.2.4)(typescript@6.0.3) - '@babel/core': 8.0.5 - '@inquirer/confirm': 6.3.2(@types/node@24.19.2) - '@parcel/watcher': 2.6.0 - '@vitejs/plugin-basic-ssl': 2.3.0(vite@8.3.5(@types/node@24.19.2)(esbuild@0.28.2)(jiti@2.7.0)(sass-embedded@1.104.1)(sass@1.104.1)(terser@5.46.1)(tsx@4.23.15)(yaml@2.9.0)) - beasties: 0.5.4 - browserslist: 4.29.5 - chokidar: 5.0.0 - esbuild: 0.28.2 - https-proxy-agent: 9.1.0(supports-color@10.2.2) - jsonc-parser: 3.3.1 - listr2: 11.1.0 - magic-string: 1.4.1 - mrmime: 2.0.1 - oxc-parser: 0.150.0 - parse5-html-rewriting-stream: 8.0.1 - picomatch: 4.0.7 - piscina: 5.3.2 - rolldown: 1.2.15 - sass: 1.104.1 - sass-embedded: 1.104.1 - semver: 7.8.5 - source-map-support: 0.5.21 - tinyglobby: 0.2.17 - tslib: 2.8.1 - typescript: 6.0.3 - vite: 8.3.5(@types/node@24.19.2)(esbuild@0.28.2)(jiti@2.7.0)(sass-embedded@1.104.1)(sass@1.104.1)(terser@5.46.1)(tsx@4.23.15)(yaml@2.9.0) - xxhash-wasm: 1.1.0 - optionalDependencies: - '@angular/core': 22.2.4(@angular/compiler@22.2.4)(rxjs@7.8.2)(zone.js@0.15.0) - '@angular/platform-browser': 22.2.4(@angular/common@22.2.4(@angular/core@22.2.4(@angular/compiler@22.2.4)(rxjs@7.8.2)(zone.js@0.15.0))(rxjs@7.8.2))(@angular/core@22.2.4(@angular/compiler@22.2.4)(rxjs@7.8.2)(zone.js@0.15.0)) - '@oxc-parser/binding-wasm32-wasi': 0.150.0 - istanbul-lib-instrument: 6.0.3(supports-color@10.2.2) - lmdb: 3.5.6 - postcss: 8.5.32 - rollup: 4.65.1 - tailwindcss: 4.2.2 - vitest: 5.0.5(@types/node@24.19.2)(@vitest/coverage-istanbul@5.0.5)(jsdom@27.4.0(supports-color@10.2.2))(msw@2.15.0(@types/node@24.19.2)(typescript@6.0.3))(vite@8.3.5(@types/node@24.19.2)(esbuild@0.28.2)(jiti@2.7.0)(sass-embedded@1.104.1)(sass@1.104.1)(terser@5.46.1)(tsx@4.23.15)(yaml@2.9.0)) - transitivePeerDependencies: - - '@types/node' - - '@vitejs/devtools' - - jiti - - kerberos - - stylus - - sugarss - - supports-color - - terser - - tsx - - yaml - - '@angular/build@22.2.5(@angular/compiler-cli@22.2.4(@angular/compiler@22.2.4)(typescript@6.0.3))(@angular/compiler@22.2.4)(@angular/core@22.2.4(@angular/compiler@22.2.4)(rxjs@7.8.2)(zone.js@0.15.0))(@angular/platform-browser@22.2.4(@angular/common@22.2.4(@angular/core@22.2.4(@angular/compiler@22.2.4)(rxjs@7.8.2)(zone.js@0.15.0))(rxjs@7.8.2))(@angular/core@22.2.4(@angular/compiler@22.2.4)(rxjs@7.8.2)(zone.js@0.15.0)))(@types/node@24.19.2)(istanbul-lib-instrument@6.0.3(supports-color@10.2.2))(jiti@2.7.0)(postcss@8.5.32)(rollup@4.65.1)(supports-color@10.2.2)(tailwindcss@4.3.3)(terser@5.46.1)(tslib@2.8.1)(tsx@4.23.15)(typescript@6.0.3)(vitest@5.0.5)(yaml@2.9.1)': + '@angular/build@22.2.5(0f8d76520212c66259ef5e9d1f4fbaaa)': dependencies: '@ampproject/remapping': 2.3.0 '@angular-devkit/architect': 0.2202.5(chokidar@5.0.0) @@ -23775,17 +24443,418 @@ snapshots: tinyglobby: 0.2.17 tslib: 2.8.1 typescript: 6.0.3 + vite: 8.3.5(@types/node@24.19.2)(esbuild@0.28.2)(jiti@2.7.0)(sass-embedded@1.104.1)(sass@1.104.1)(terser@5.51.2)(tsx@4.23.15)(yaml@2.9.1) + xxhash-wasm: 1.1.0 + optionalDependencies: + '@angular/core': 22.2.4(@angular/compiler@22.2.4)(rxjs@7.8.2)(zone.js@0.16.1) + '@angular/platform-browser': 22.2.4(@angular/common@22.2.4(@angular/core@22.2.4(@angular/compiler@22.2.4)(rxjs@7.8.2)(zone.js@0.16.1))(rxjs@7.8.2))(@angular/core@22.2.4(@angular/compiler@22.2.4)(rxjs@7.8.2)(zone.js@0.16.1)) + '@angular/platform-server': 22.2.4(@angular/common@22.2.4(@angular/core@22.2.4(@angular/compiler@22.2.4)(rxjs@7.8.2)(zone.js@0.16.1))(rxjs@7.8.2))(@angular/compiler@22.2.4)(@angular/core@22.2.4(@angular/compiler@22.2.4)(rxjs@7.8.2)(zone.js@0.16.1))(@angular/platform-browser@22.2.4(@angular/common@22.2.4(@angular/core@22.2.4(@angular/compiler@22.2.4)(rxjs@7.8.2)(zone.js@0.16.1))(rxjs@7.8.2))(@angular/core@22.2.4(@angular/compiler@22.2.4)(rxjs@7.8.2)(zone.js@0.16.1)))(rxjs@7.8.2) + '@angular/ssr': 22.2.6(a1d20e1579b007a10175d052ea6e8746) + '@oxc-parser/binding-wasm32-wasi': 0.150.0 + istanbul-lib-instrument: 6.0.3(supports-color@10.2.2) + lmdb: 3.5.6 + postcss: 8.5.32 + rollup: 4.65.1 + tailwindcss: 4.2.2 + vitest: 5.0.5(@types/node@24.19.2)(@vitest/coverage-istanbul@5.0.5)(jsdom@27.4.0(supports-color@7.2.0))(msw@2.15.0(@types/node@24.19.2)(typescript@6.0.3))(vite@8.3.5(@types/node@24.19.2)(esbuild@0.28.2)(jiti@2.7.0)(sass-embedded@1.104.1)(sass@1.90.0)(terser@5.46.1)(tsx@4.23.15)(yaml@2.9.0)) + transitivePeerDependencies: + - '@types/node' + - '@vitejs/devtools' + - jiti + - kerberos + - stylus + - sugarss + - supports-color + - terser + - tsx + - yaml + + '@angular/build@22.2.5(1f987ade22dd7399d2bd38dc661ec906)': + dependencies: + '@ampproject/remapping': 2.3.0 + '@angular-devkit/architect': 0.2202.5(chokidar@5.0.0) + '@angular/compiler': 22.2.4 + '@angular/compiler-cli': 22.2.4(@angular/compiler@22.2.4)(typescript@6.0.3) + '@babel/core': 8.0.5 + '@inquirer/confirm': 6.3.2(@types/node@24.19.2) + '@parcel/watcher': 2.6.0 + '@vitejs/plugin-basic-ssl': 2.3.0(vite@8.3.5(@types/node@24.19.2)(esbuild@0.28.2)(jiti@2.7.0)(sass-embedded@1.104.1)(sass@1.90.0)(terser@5.46.1)(tsx@4.23.15)(yaml@2.9.0)) + beasties: 0.5.4 + browserslist: 4.29.5 + chokidar: 5.0.0 + esbuild: 0.28.2 + https-proxy-agent: 9.1.0(supports-color@10.2.2) + jsonc-parser: 3.3.1 + listr2: 11.1.0 + magic-string: 1.4.1 + mrmime: 2.0.1 + oxc-parser: 0.150.0 + parse5-html-rewriting-stream: 8.0.1 + picomatch: 4.0.7 + piscina: 5.3.2 + rolldown: 1.2.15 + sass: 1.104.1 + sass-embedded: 1.104.1 + semver: 7.8.5 + source-map-support: 0.5.21 + tinyglobby: 0.2.17 + tslib: 2.8.1 + typescript: 6.0.3 + vite: 8.3.5(@types/node@24.19.2)(esbuild@0.28.2)(jiti@2.7.0)(sass-embedded@1.104.1)(sass@1.104.1)(terser@5.46.1)(tsx@4.23.15)(yaml@2.9.0) + xxhash-wasm: 1.1.0 + optionalDependencies: + '@angular/core': 22.2.4(@angular/compiler@22.2.4)(rxjs@7.8.2)(zone.js@0.16.1) + '@angular/platform-browser': 22.2.4(@angular/common@22.2.4(@angular/core@22.2.4(@angular/compiler@22.2.4)(rxjs@7.8.2)(zone.js@0.16.1))(rxjs@7.8.2))(@angular/core@22.2.4(@angular/compiler@22.2.4)(rxjs@7.8.2)(zone.js@0.16.1)) + '@angular/platform-server': 22.2.4(@angular/common@22.2.4(@angular/core@22.2.4(@angular/compiler@22.2.4)(rxjs@7.8.2)(zone.js@0.16.1))(rxjs@7.8.2))(@angular/compiler@22.2.4)(@angular/core@22.2.4(@angular/compiler@22.2.4)(rxjs@7.8.2)(zone.js@0.16.1))(@angular/platform-browser@22.2.4(@angular/common@22.2.4(@angular/core@22.2.4(@angular/compiler@22.2.4)(rxjs@7.8.2)(zone.js@0.16.1))(rxjs@7.8.2))(@angular/core@22.2.4(@angular/compiler@22.2.4)(rxjs@7.8.2)(zone.js@0.16.1)))(rxjs@7.8.2) + '@angular/ssr': 22.2.6(a1d20e1579b007a10175d052ea6e8746) + '@oxc-parser/binding-wasm32-wasi': 0.150.0 + istanbul-lib-instrument: 6.0.3(supports-color@10.2.2) + lmdb: 3.5.6 + postcss: 8.5.32 + rollup: 4.65.1 + tailwindcss: 4.3.3 + vitest: 5.0.5(@types/node@24.19.2)(@vitest/coverage-istanbul@5.0.5)(jsdom@27.4.0(supports-color@7.2.0))(msw@2.15.0(@types/node@24.19.2)(typescript@6.0.3))(vite@8.3.5(@types/node@24.19.2)(esbuild@0.28.2)(jiti@2.7.0)(sass-embedded@1.104.1)(sass@1.90.0)(terser@5.46.1)(tsx@4.23.15)(yaml@2.9.0)) + transitivePeerDependencies: + - '@types/node' + - '@vitejs/devtools' + - jiti + - kerberos + - stylus + - sugarss + - supports-color + - terser + - tsx + - yaml + + '@angular/build@22.2.5(46fc5ca31db6cb271ad7edc37360be27)': + dependencies: + '@ampproject/remapping': 2.3.0 + '@angular-devkit/architect': 0.2202.5(chokidar@5.0.0) + '@angular/compiler': 22.2.4 + '@angular/compiler-cli': 22.2.4(@angular/compiler@22.2.4)(typescript@6.0.3) + '@babel/core': 8.0.5 + '@inquirer/confirm': 6.3.2(@types/node@24.19.2) + '@parcel/watcher': 2.6.0 + '@vitejs/plugin-basic-ssl': 2.3.0(vite@8.3.5(@types/node@24.19.2)(esbuild@0.28.2)(jiti@2.7.0)(sass-embedded@1.104.1)(sass@1.90.0)(terser@5.46.1)(tsx@4.23.15)(yaml@2.9.0)) + beasties: 0.5.4 + browserslist: 4.29.5 + chokidar: 5.0.0 + esbuild: 0.28.2 + https-proxy-agent: 9.1.0(supports-color@10.2.2) + jsonc-parser: 3.3.1 + listr2: 11.1.0 + magic-string: 1.4.1 + mrmime: 2.0.1 + oxc-parser: 0.150.0 + parse5-html-rewriting-stream: 8.0.1 + picomatch: 4.0.7 + piscina: 5.3.2 + rolldown: 1.2.15 + sass: 1.104.1 + sass-embedded: 1.104.1 + semver: 7.8.5 + source-map-support: 0.5.21 + tinyglobby: 0.2.17 + tslib: 2.8.1 + typescript: 6.0.3 + vite: 8.3.5(@types/node@24.19.2)(esbuild@0.28.2)(jiti@2.7.0)(sass-embedded@1.104.1)(sass@1.104.1)(terser@5.51.2)(tsx@4.23.15)(yaml@2.9.1) + xxhash-wasm: 1.1.0 + optionalDependencies: + '@angular/core': 22.2.4(@angular/compiler@22.2.4)(rxjs@7.8.2)(zone.js@0.16.1) + '@angular/platform-browser': 22.2.4(@angular/common@22.2.4(@angular/core@22.2.4(@angular/compiler@22.2.4)(rxjs@7.8.2)(zone.js@0.16.1))(rxjs@7.8.2))(@angular/core@22.2.4(@angular/compiler@22.2.4)(rxjs@7.8.2)(zone.js@0.16.1)) + '@angular/platform-server': 22.2.4(@angular/common@22.2.4(@angular/core@22.2.4(@angular/compiler@22.2.4)(rxjs@7.8.2)(zone.js@0.16.1))(rxjs@7.8.2))(@angular/compiler@22.2.4)(@angular/core@22.2.4(@angular/compiler@22.2.4)(rxjs@7.8.2)(zone.js@0.16.1))(@angular/platform-browser@22.2.4(@angular/common@22.2.4(@angular/core@22.2.4(@angular/compiler@22.2.4)(rxjs@7.8.2)(zone.js@0.16.1))(rxjs@7.8.2))(@angular/core@22.2.4(@angular/compiler@22.2.4)(rxjs@7.8.2)(zone.js@0.16.1)))(rxjs@7.8.2) + '@angular/ssr': 22.2.6(a1d20e1579b007a10175d052ea6e8746) + '@oxc-parser/binding-wasm32-wasi': 0.150.0 + istanbul-lib-instrument: 6.0.3(supports-color@10.2.2) + lmdb: 3.5.6 + postcss: 8.5.32 + rollup: 4.65.1 + tailwindcss: 4.3.3 + vitest: 5.0.5(@types/node@24.19.2)(@vitest/coverage-istanbul@5.0.5)(jsdom@27.4.0(supports-color@7.2.0))(msw@2.15.0(@types/node@24.19.2)(typescript@6.0.3))(vite@8.3.5(@types/node@24.19.2)(esbuild@0.28.2)(jiti@2.7.0)(sass-embedded@1.104.1)(sass@1.90.0)(terser@5.46.1)(tsx@4.23.15)(yaml@2.9.0)) + transitivePeerDependencies: + - '@types/node' + - '@vitejs/devtools' + - jiti + - kerberos + - stylus + - sugarss + - supports-color + - terser + - tsx + - yaml + + '@angular/build@22.2.5(4f59dfb2b83d9aac3696e2b8995912cc)': + dependencies: + '@ampproject/remapping': 2.3.0 + '@angular-devkit/architect': 0.2202.5(chokidar@5.0.0) + '@angular/compiler': 22.2.4 + '@angular/compiler-cli': 22.2.4(@angular/compiler@22.2.4)(typescript@6.0.3) + '@babel/core': 8.0.5 + '@inquirer/confirm': 6.3.2(@types/node@24.19.2) + '@parcel/watcher': 2.6.0 + '@vitejs/plugin-basic-ssl': 2.3.0(vite@8.3.5(@types/node@24.19.2)(esbuild@0.28.2)(jiti@2.7.0)(sass-embedded@1.104.1)(sass@1.104.1)(terser@5.46.1)(tsx@4.23.15)(yaml@2.9.1)) + beasties: 0.5.4 + browserslist: 4.29.5 + chokidar: 5.0.0 + esbuild: 0.28.2 + https-proxy-agent: 9.1.0(supports-color@10.2.2) + jsonc-parser: 3.3.1 + listr2: 11.1.0 + magic-string: 1.4.1 + mrmime: 2.0.1 + oxc-parser: 0.150.0 + parse5-html-rewriting-stream: 8.0.1 + picomatch: 4.0.7 + piscina: 5.3.2 + rolldown: 1.2.15 + sass: 1.104.1 + sass-embedded: 1.104.1 + semver: 7.8.5 + source-map-support: 0.5.21 + tinyglobby: 0.2.17 + tslib: 2.8.1 + typescript: 6.0.3 + vite: 8.3.5(@types/node@24.19.2)(esbuild@0.28.2)(jiti@2.7.0)(sass-embedded@1.104.1)(sass@1.104.1)(terser@5.46.1)(tsx@4.23.15)(yaml@2.9.1) + xxhash-wasm: 1.1.0 + optionalDependencies: + '@angular/core': 22.2.4(@angular/compiler@22.2.4)(rxjs@7.8.2)(zone.js@0.16.1) + '@angular/platform-browser': 22.2.4(@angular/common@22.2.4(@angular/core@22.2.4(@angular/compiler@22.2.4)(rxjs@7.8.2)(zone.js@0.16.1))(rxjs@7.8.2))(@angular/core@22.2.4(@angular/compiler@22.2.4)(rxjs@7.8.2)(zone.js@0.16.1)) + '@angular/platform-server': 22.2.4(@angular/common@22.2.4(@angular/core@22.2.4(@angular/compiler@22.2.4)(rxjs@7.8.2)(zone.js@0.16.1))(rxjs@7.8.2))(@angular/compiler@22.2.4)(@angular/core@22.2.4(@angular/compiler@22.2.4)(rxjs@7.8.2)(zone.js@0.16.1))(@angular/platform-browser@22.2.4(@angular/common@22.2.4(@angular/core@22.2.4(@angular/compiler@22.2.4)(rxjs@7.8.2)(zone.js@0.16.1))(rxjs@7.8.2))(@angular/core@22.2.4(@angular/compiler@22.2.4)(rxjs@7.8.2)(zone.js@0.16.1)))(rxjs@7.8.2) + '@angular/ssr': 22.2.6(a1d20e1579b007a10175d052ea6e8746) + '@oxc-parser/binding-wasm32-wasi': 0.150.0 + istanbul-lib-instrument: 6.0.3(supports-color@10.2.2) + lmdb: 3.5.6 + postcss: 8.5.32 + rollup: 4.65.1 + tailwindcss: 4.3.3 + vitest: 5.0.5(@types/node@24.19.2)(@vitest/coverage-istanbul@5.0.5)(jsdom@27.4.0(supports-color@10.2.2))(msw@2.12.14(@types/node@24.19.2)(typescript@6.0.3))(vite@8.3.5(@types/node@24.19.2)(esbuild@0.28.2)(jiti@2.7.0)(sass-embedded@1.104.1)(sass@1.104.1)(terser@5.46.1)(tsx@4.23.15)(yaml@2.9.1)) + transitivePeerDependencies: + - '@types/node' + - '@vitejs/devtools' + - jiti + - kerberos + - stylus + - sugarss + - supports-color + - terser + - tsx + - yaml + + '@angular/build@22.2.5(57a0f8143a78e352390c218bbf5a24f3)': + dependencies: + '@ampproject/remapping': 2.3.0 + '@angular-devkit/architect': 0.2202.5(chokidar@5.0.0) + '@angular/compiler': 22.2.4 + '@angular/compiler-cli': 22.2.4(@angular/compiler@22.2.4)(typescript@6.0.3) + '@babel/core': 8.0.5 + '@inquirer/confirm': 6.3.2(@types/node@24.19.2) + '@parcel/watcher': 2.6.0 + '@vitejs/plugin-basic-ssl': 2.3.0(vite@8.3.5(@types/node@24.19.2)(esbuild@0.28.2)(jiti@2.7.0)(sass-embedded@1.104.1)(sass@1.104.1)(terser@5.46.1)(tsx@4.23.15)(yaml@2.9.1)) + beasties: 0.5.4 + browserslist: 4.29.5 + chokidar: 5.0.0 + esbuild: 0.28.2 + https-proxy-agent: 9.1.0(supports-color@10.2.2) + jsonc-parser: 3.3.1 + listr2: 11.1.0 + magic-string: 1.4.1 + mrmime: 2.0.1 + oxc-parser: 0.150.0 + parse5-html-rewriting-stream: 8.0.1 + picomatch: 4.0.7 + piscina: 5.3.2 + rolldown: 1.2.15 + sass: 1.104.1 + sass-embedded: 1.104.1 + semver: 7.8.5 + source-map-support: 0.5.21 + tinyglobby: 0.2.17 + tslib: 2.8.1 + typescript: 6.0.3 vite: 8.3.5(@types/node@24.19.2)(esbuild@0.28.2)(jiti@2.7.0)(sass-embedded@1.104.1)(sass@1.104.1)(terser@5.46.1)(tsx@4.23.15)(yaml@2.9.1) xxhash-wasm: 1.1.0 + optionalDependencies: + '@angular/core': 22.2.4(@angular/compiler@22.2.4)(rxjs@7.8.2)(zone.js@0.16.1) + '@angular/platform-browser': 22.2.4(@angular/common@22.2.4(@angular/core@22.2.4(@angular/compiler@22.2.4)(rxjs@7.8.2)(zone.js@0.16.1))(rxjs@7.8.2))(@angular/core@22.2.4(@angular/compiler@22.2.4)(rxjs@7.8.2)(zone.js@0.16.1)) + '@angular/platform-server': 22.2.4(@angular/common@22.2.4(@angular/core@22.2.4(@angular/compiler@22.2.4)(rxjs@7.8.2)(zone.js@0.16.1))(rxjs@7.8.2))(@angular/compiler@22.2.4)(@angular/core@22.2.4(@angular/compiler@22.2.4)(rxjs@7.8.2)(zone.js@0.16.1))(@angular/platform-browser@22.2.4(@angular/common@22.2.4(@angular/core@22.2.4(@angular/compiler@22.2.4)(rxjs@7.8.2)(zone.js@0.16.1))(rxjs@7.8.2))(@angular/core@22.2.4(@angular/compiler@22.2.4)(rxjs@7.8.2)(zone.js@0.16.1)))(rxjs@7.8.2) + '@angular/ssr': 22.2.6(a1d20e1579b007a10175d052ea6e8746) + '@oxc-parser/binding-wasm32-wasi': 0.150.0 + istanbul-lib-instrument: 6.0.3(supports-color@10.2.2) + lmdb: 3.5.6 + postcss: 8.5.32 + rollup: 4.65.1 + tailwindcss: 4.3.3 + vitest: 5.0.5(@types/node@24.19.2)(@vitest/coverage-istanbul@5.0.5)(jsdom@27.4.0(supports-color@10.2.2))(msw@2.15.0(@types/node@24.19.2)(typescript@6.0.3))(vite@8.3.5(@types/node@24.19.2)(esbuild@0.28.2)(jiti@2.7.0)(sass-embedded@1.104.1)(sass@1.104.1)(terser@5.46.1)(tsx@4.23.15)(yaml@2.9.1)) + transitivePeerDependencies: + - '@types/node' + - '@vitejs/devtools' + - jiti + - kerberos + - stylus + - sugarss + - supports-color + - terser + - tsx + - yaml + + '@angular/build@22.2.5(6bedf23a38a60eea6664da587937b88b)': + dependencies: + '@ampproject/remapping': 2.3.0 + '@angular-devkit/architect': 0.2202.5(chokidar@5.0.0) + '@angular/compiler': 22.2.4 + '@angular/compiler-cli': 22.2.4(@angular/compiler@22.2.4)(typescript@6.0.3) + '@babel/core': 8.0.5 + '@inquirer/confirm': 6.3.2(@types/node@24.19.2) + '@parcel/watcher': 2.6.0 + '@vitejs/plugin-basic-ssl': 2.3.0(vite@8.3.5(@types/node@24.19.2)(esbuild@0.28.2)(jiti@2.7.0)(sass-embedded@1.104.1)(sass@1.90.0)(terser@5.46.1)(tsx@4.23.15)(yaml@2.9.0)) + beasties: 0.5.4 + browserslist: 4.29.5 + chokidar: 5.0.0 + esbuild: 0.28.2 + https-proxy-agent: 9.1.0(supports-color@10.2.2) + jsonc-parser: 3.3.1 + listr2: 11.1.0 + magic-string: 1.4.1 + mrmime: 2.0.1 + oxc-parser: 0.150.0 + parse5-html-rewriting-stream: 8.0.1 + picomatch: 4.0.7 + piscina: 5.3.2 + rolldown: 1.2.15 + sass: 1.104.1 + sass-embedded: 1.104.1 + semver: 7.8.5 + source-map-support: 0.5.21 + tinyglobby: 0.2.17 + tslib: 2.8.1 + typescript: 6.0.3 + vite: 8.3.5(@types/node@24.19.2)(esbuild@0.28.2)(jiti@2.7.0)(sass-embedded@1.104.1)(sass@1.104.1)(terser@5.51.2)(tsx@4.23.15)(yaml@2.9.1) + xxhash-wasm: 1.1.0 optionalDependencies: '@angular/core': 22.2.4(@angular/compiler@22.2.4)(rxjs@7.8.2)(zone.js@0.15.0) '@angular/platform-browser': 22.2.4(@angular/common@22.2.4(@angular/core@22.2.4(@angular/compiler@22.2.4)(rxjs@7.8.2)(zone.js@0.15.0))(rxjs@7.8.2))(@angular/core@22.2.4(@angular/compiler@22.2.4)(rxjs@7.8.2)(zone.js@0.15.0)) + '@angular/platform-server': 22.2.4(@angular/common@22.2.4(@angular/core@22.2.4(@angular/compiler@22.2.4)(rxjs@7.8.2)(zone.js@0.15.0))(rxjs@7.8.2))(@angular/compiler@22.2.4)(@angular/core@22.2.4(@angular/compiler@22.2.4)(rxjs@7.8.2)(zone.js@0.15.0))(@angular/platform-browser@22.2.4(@angular/common@22.2.4(@angular/core@22.2.4(@angular/compiler@22.2.4)(rxjs@7.8.2)(zone.js@0.15.0))(rxjs@7.8.2))(@angular/core@22.2.4(@angular/compiler@22.2.4)(rxjs@7.8.2)(zone.js@0.15.0)))(rxjs@7.8.2) + '@angular/ssr': 22.2.6(cd52d6d26dcd116ddb301cefc9e3063d) '@oxc-parser/binding-wasm32-wasi': 0.150.0 istanbul-lib-instrument: 6.0.3(supports-color@10.2.2) lmdb: 3.5.6 postcss: 8.5.32 rollup: 4.65.1 - tailwindcss: 4.3.3 + tailwindcss: 4.2.2 + vitest: 5.0.5(@types/node@24.19.2)(@vitest/coverage-istanbul@5.0.5)(jsdom@27.4.0(supports-color@7.2.0))(msw@2.15.0(@types/node@24.19.2)(typescript@6.0.3))(vite@8.3.5(@types/node@24.19.2)(esbuild@0.28.2)(jiti@2.7.0)(sass-embedded@1.104.1)(sass@1.90.0)(terser@5.46.1)(tsx@4.23.15)(yaml@2.9.0)) + transitivePeerDependencies: + - '@types/node' + - '@vitejs/devtools' + - jiti + - kerberos + - stylus + - sugarss + - supports-color + - terser + - tsx + - yaml + + '@angular/build@22.2.5(7f936de9cead077dbd0c3a79d0bff23c)': + dependencies: + '@ampproject/remapping': 2.3.0 + '@angular-devkit/architect': 0.2202.5(chokidar@5.0.0) + '@angular/compiler': 22.2.4 + '@angular/compiler-cli': 22.2.4(@angular/compiler@22.2.4)(typescript@6.0.3) + '@babel/core': 8.0.5 + '@inquirer/confirm': 6.3.2(@types/node@24.19.2) + '@parcel/watcher': 2.6.0 + '@vitejs/plugin-basic-ssl': 2.3.0(vite@8.3.5(@types/node@24.19.2)(esbuild@0.28.2)(jiti@2.7.0)(sass-embedded@1.104.1)(sass@1.104.1)(terser@5.51.2)(tsx@4.23.15)(yaml@2.9.1)) + beasties: 0.5.4 + browserslist: 4.29.5 + chokidar: 5.0.0 + esbuild: 0.28.2 + https-proxy-agent: 9.1.0(supports-color@10.2.2) + jsonc-parser: 3.3.1 + listr2: 11.1.0 + magic-string: 1.4.1 + mrmime: 2.0.1 + oxc-parser: 0.150.0 + parse5-html-rewriting-stream: 8.0.1 + picomatch: 4.0.7 + piscina: 5.3.2 + rolldown: 1.2.15 + sass: 1.104.1 + sass-embedded: 1.104.1 + semver: 7.8.5 + source-map-support: 0.5.21 + tinyglobby: 0.2.17 + tslib: 2.8.1 + typescript: 6.0.3 + vite: 8.3.5(@types/node@24.19.2)(esbuild@0.28.2)(jiti@2.7.0)(sass-embedded@1.104.1)(sass@1.104.1)(terser@5.51.2)(tsx@4.23.15)(yaml@2.9.1) + xxhash-wasm: 1.1.0 + optionalDependencies: + '@angular/core': 22.2.4(@angular/compiler@22.2.4)(rxjs@7.8.2)(zone.js@0.16.1) + '@angular/platform-browser': 22.2.4(@angular/common@22.2.4(@angular/core@22.2.4(@angular/compiler@22.2.4)(rxjs@7.8.2)(zone.js@0.16.1))(rxjs@7.8.2))(@angular/core@22.2.4(@angular/compiler@22.2.4)(rxjs@7.8.2)(zone.js@0.16.1)) + '@angular/platform-server': 22.2.4(@angular/common@22.2.4(@angular/core@22.2.4(@angular/compiler@22.2.4)(rxjs@7.8.2)(zone.js@0.16.1))(rxjs@7.8.2))(@angular/compiler@22.2.4)(@angular/core@22.2.4(@angular/compiler@22.2.4)(rxjs@7.8.2)(zone.js@0.16.1))(@angular/platform-browser@22.2.4(@angular/common@22.2.4(@angular/core@22.2.4(@angular/compiler@22.2.4)(rxjs@7.8.2)(zone.js@0.16.1))(rxjs@7.8.2))(@angular/core@22.2.4(@angular/compiler@22.2.4)(rxjs@7.8.2)(zone.js@0.16.1)))(rxjs@7.8.2) + '@angular/ssr': 22.2.6(a1d20e1579b007a10175d052ea6e8746) + '@oxc-parser/binding-wasm32-wasi': 0.150.0 + istanbul-lib-instrument: 6.0.3(supports-color@10.2.2) + lmdb: 3.5.6 + postcss: 8.5.32 + rollup: 4.65.1 + tailwindcss: 4.2.2 + vitest: 5.0.5(@types/node@24.19.2)(@vitest/coverage-istanbul@5.0.5)(jsdom@27.4.0(supports-color@10.2.2))(msw@2.15.0(@types/node@24.19.2)(typescript@6.0.3))(vite@8.3.5(@types/node@24.19.2)(esbuild@0.28.2)(jiti@2.7.0)(sass-embedded@1.104.1)(sass@1.104.1)(terser@5.51.2)(tsx@4.23.15)(yaml@2.9.1)) + transitivePeerDependencies: + - '@types/node' + - '@vitejs/devtools' + - jiti + - kerberos + - stylus + - sugarss + - supports-color + - terser + - tsx + - yaml + + '@angular/build@22.2.5(835301e0da58bb9a0c984493908ccb9e)': + dependencies: + '@ampproject/remapping': 2.3.0 + '@angular-devkit/architect': 0.2202.5(chokidar@5.0.0) + '@angular/compiler': 22.2.4 + '@angular/compiler-cli': 22.2.4(@angular/compiler@22.2.4)(typescript@6.0.3) + '@babel/core': 8.0.5 + '@inquirer/confirm': 6.3.2(@types/node@24.19.2) + '@parcel/watcher': 2.6.0 + '@vitejs/plugin-basic-ssl': 2.3.0(vite@8.3.5(@types/node@24.19.2)(esbuild@0.28.2)(jiti@2.7.0)(sass-embedded@1.104.1)(sass@1.90.0)(terser@5.46.1)(tsx@4.23.15)(yaml@2.9.0)) + beasties: 0.5.4 + browserslist: 4.29.5 + chokidar: 5.0.0 + esbuild: 0.28.2 + https-proxy-agent: 9.1.0(supports-color@10.2.2) + jsonc-parser: 3.3.1 + listr2: 11.1.0 + magic-string: 1.4.1 + mrmime: 2.0.1 + oxc-parser: 0.150.0 + parse5-html-rewriting-stream: 8.0.1 + picomatch: 4.0.7 + piscina: 5.3.2 + rolldown: 1.2.15 + sass: 1.104.1 + sass-embedded: 1.104.1 + semver: 7.8.5 + source-map-support: 0.5.21 + tinyglobby: 0.2.17 + tslib: 2.8.1 + typescript: 6.0.3 + vite: 8.3.5(@types/node@24.19.2)(esbuild@0.28.2)(jiti@2.7.0)(sass-embedded@1.104.1)(sass@1.104.1)(terser@5.46.1)(tsx@4.23.15)(yaml@2.9.0) + xxhash-wasm: 1.1.0 + optionalDependencies: + '@angular/core': 22.2.4(@angular/compiler@22.2.4)(rxjs@7.8.2)(zone.js@0.16.1) + '@angular/platform-browser': 22.2.4(@angular/common@22.2.4(@angular/core@22.2.4(@angular/compiler@22.2.4)(rxjs@7.8.2)(zone.js@0.16.1))(rxjs@7.8.2))(@angular/core@22.2.4(@angular/compiler@22.2.4)(rxjs@7.8.2)(zone.js@0.16.1)) + '@angular/platform-server': 22.2.4(@angular/common@22.2.4(@angular/core@22.2.4(@angular/compiler@22.2.4)(rxjs@7.8.2)(zone.js@0.16.1))(rxjs@7.8.2))(@angular/compiler@22.2.4)(@angular/core@22.2.4(@angular/compiler@22.2.4)(rxjs@7.8.2)(zone.js@0.16.1))(@angular/platform-browser@22.2.4(@angular/common@22.2.4(@angular/core@22.2.4(@angular/compiler@22.2.4)(rxjs@7.8.2)(zone.js@0.16.1))(rxjs@7.8.2))(@angular/core@22.2.4(@angular/compiler@22.2.4)(rxjs@7.8.2)(zone.js@0.16.1)))(rxjs@7.8.2) + '@angular/ssr': 22.2.6(a1d20e1579b007a10175d052ea6e8746) + '@oxc-parser/binding-wasm32-wasi': 0.150.0 + istanbul-lib-instrument: 6.0.3(supports-color@10.2.2) + lmdb: 3.5.6 + postcss: 8.5.32 + rollup: 4.65.1 + tailwindcss: 4.2.2 vitest: 5.0.5(@types/node@24.19.2)(@vitest/coverage-istanbul@5.0.5)(jsdom@27.4.0(supports-color@7.2.0))(msw@2.15.0(@types/node@24.19.2)(typescript@6.0.3))(vite@8.3.5(@types/node@24.19.2)(esbuild@0.28.2)(jiti@2.7.0)(sass-embedded@1.104.1)(sass@1.90.0)(terser@5.46.1)(tsx@4.23.15)(yaml@2.9.0)) transitivePeerDependencies: - '@types/node' @@ -23799,7 +24868,62 @@ snapshots: - tsx - yaml - '@angular/build@22.2.5(@angular/compiler-cli@22.2.4(@angular/compiler@22.2.4)(typescript@6.0.3))(@angular/compiler@22.2.4)(@angular/core@22.2.4(@angular/compiler@22.2.4)(rxjs@7.8.2)(zone.js@0.15.0))(@angular/platform-browser@22.2.4(@angular/common@22.2.4(@angular/core@22.2.4(@angular/compiler@22.2.4)(rxjs@7.8.2)(zone.js@0.15.0))(rxjs@7.8.2))(@angular/core@22.2.4(@angular/compiler@22.2.4)(rxjs@7.8.2)(zone.js@0.15.0)))(@types/node@24.19.2)(jiti@2.7.0)(postcss@8.5.32)(supports-color@10.2.2)(tailwindcss@4.2.2)(terser@5.46.1)(tslib@2.8.1)(tsx@4.23.15)(typescript@6.0.3)(vitest@5.0.5)(yaml@2.9.0)': + '@angular/build@22.2.5(@angular/compiler-cli@22.2.4(@angular/compiler@22.2.4)(typescript@6.0.3))(@angular/compiler@22.2.4)(@angular/core@22.2.4(@angular/compiler@22.2.4)(rxjs@7.8.2)(zone.js@0.16.1))(@angular/platform-browser@22.2.4(@angular/common@22.2.4(@angular/core@22.2.4(@angular/compiler@22.2.4)(rxjs@7.8.2)(zone.js@0.16.1))(rxjs@7.8.2))(@angular/core@22.2.4(@angular/compiler@22.2.4)(rxjs@7.8.2)(zone.js@0.16.1)))(@types/node@24.19.2)(istanbul-lib-instrument@6.0.3(supports-color@10.2.2))(jiti@2.7.0)(postcss@8.5.32)(rollup@4.65.1)(supports-color@10.2.2)(tailwindcss@4.2.2)(terser@5.46.1)(tslib@2.8.1)(tsx@4.23.15)(typescript@6.0.3)(vitest@5.0.5)(yaml@2.9.0)': + dependencies: + '@ampproject/remapping': 2.3.0 + '@angular-devkit/architect': 0.2202.5(chokidar@5.0.0) + '@angular/compiler': 22.2.4 + '@angular/compiler-cli': 22.2.4(@angular/compiler@22.2.4)(typescript@6.0.3) + '@babel/core': 8.0.5 + '@inquirer/confirm': 6.3.2(@types/node@24.19.2) + '@parcel/watcher': 2.6.0 + '@vitejs/plugin-basic-ssl': 2.3.0(vite@8.3.5(@types/node@24.19.2)(esbuild@0.28.2)(jiti@2.7.0)(sass-embedded@1.104.1)(sass@1.104.1)(terser@5.46.1)(tsx@4.23.15)(yaml@2.9.0)) + beasties: 0.5.4 + browserslist: 4.29.5 + chokidar: 5.0.0 + esbuild: 0.28.2 + https-proxy-agent: 9.1.0(supports-color@10.2.2) + jsonc-parser: 3.3.1 + listr2: 11.1.0 + magic-string: 1.4.1 + mrmime: 2.0.1 + oxc-parser: 0.150.0 + parse5-html-rewriting-stream: 8.0.1 + picomatch: 4.0.7 + piscina: 5.3.2 + rolldown: 1.2.15 + sass: 1.104.1 + sass-embedded: 1.104.1 + semver: 7.8.5 + source-map-support: 0.5.21 + tinyglobby: 0.2.17 + tslib: 2.8.1 + typescript: 6.0.3 + vite: 8.3.5(@types/node@24.19.2)(esbuild@0.28.2)(jiti@2.7.0)(sass-embedded@1.104.1)(sass@1.104.1)(terser@5.46.1)(tsx@4.23.15)(yaml@2.9.0) + xxhash-wasm: 1.1.0 + optionalDependencies: + '@angular/core': 22.2.4(@angular/compiler@22.2.4)(rxjs@7.8.2)(zone.js@0.16.1) + '@angular/platform-browser': 22.2.4(@angular/common@22.2.4(@angular/core@22.2.4(@angular/compiler@22.2.4)(rxjs@7.8.2)(zone.js@0.16.1))(rxjs@7.8.2))(@angular/core@22.2.4(@angular/compiler@22.2.4)(rxjs@7.8.2)(zone.js@0.16.1)) + '@oxc-parser/binding-wasm32-wasi': 0.150.0 + istanbul-lib-instrument: 6.0.3(supports-color@10.2.2) + lmdb: 3.5.6 + postcss: 8.5.32 + rollup: 4.65.1 + tailwindcss: 4.2.2 + vitest: 5.0.5(@types/node@24.19.2)(@vitest/coverage-istanbul@5.0.5)(jsdom@27.4.0(supports-color@10.2.2))(msw@2.12.14(@types/node@24.19.2)(typescript@6.0.3))(vite@8.3.5(@types/node@24.19.2)(esbuild@0.28.2)(jiti@2.7.0)(sass-embedded@1.104.1)(sass@1.104.1)(terser@5.46.1)(tsx@4.23.15)(yaml@2.9.0)) + transitivePeerDependencies: + - '@types/node' + - '@vitejs/devtools' + - jiti + - kerberos + - stylus + - sugarss + - supports-color + - terser + - tsx + - yaml + + '@angular/build@22.2.5(b858ed7f8ea1790ed93711819419a5f9)': dependencies: '@ampproject/remapping': 2.3.0 '@angular-devkit/architect': 0.2202.5(chokidar@5.0.0) @@ -23835,9 +24959,13 @@ snapshots: optionalDependencies: '@angular/core': 22.2.4(@angular/compiler@22.2.4)(rxjs@7.8.2)(zone.js@0.15.0) '@angular/platform-browser': 22.2.4(@angular/common@22.2.4(@angular/core@22.2.4(@angular/compiler@22.2.4)(rxjs@7.8.2)(zone.js@0.15.0))(rxjs@7.8.2))(@angular/core@22.2.4(@angular/compiler@22.2.4)(rxjs@7.8.2)(zone.js@0.15.0)) + '@angular/platform-server': 22.2.4(@angular/common@22.2.4(@angular/core@22.2.4(@angular/compiler@22.2.4)(rxjs@7.8.2)(zone.js@0.15.0))(rxjs@7.8.2))(@angular/compiler@22.2.4)(@angular/core@22.2.4(@angular/compiler@22.2.4)(rxjs@7.8.2)(zone.js@0.15.0))(@angular/platform-browser@22.2.4(@angular/common@22.2.4(@angular/core@22.2.4(@angular/compiler@22.2.4)(rxjs@7.8.2)(zone.js@0.15.0))(rxjs@7.8.2))(@angular/core@22.2.4(@angular/compiler@22.2.4)(rxjs@7.8.2)(zone.js@0.15.0)))(rxjs@7.8.2) + '@angular/ssr': 22.2.6(cd52d6d26dcd116ddb301cefc9e3063d) '@oxc-parser/binding-wasm32-wasi': 0.150.0 + istanbul-lib-instrument: 6.0.3(supports-color@10.2.2) lmdb: 3.5.6 postcss: 8.5.32 + rollup: 4.65.1 tailwindcss: 4.2.2 vitest: 5.0.5(@types/node@24.19.2)(@vitest/coverage-istanbul@5.0.5)(jsdom@27.4.0(supports-color@7.2.0))(msw@2.15.0(@types/node@24.19.2)(typescript@6.0.3))(vite@8.3.5(@types/node@24.19.2)(esbuild@0.28.2)(jiti@2.7.0)(sass-embedded@1.104.1)(sass@1.90.0)(terser@5.46.1)(tsx@4.23.15)(yaml@2.9.0)) transitivePeerDependencies: @@ -23872,12 +25000,62 @@ snapshots: - '@types/node' - chokidar + '@angular/common@20.1.8(@angular/core@20.1.8(@angular/compiler@20.1.8)(rxjs@7.8.2)(zone.js@0.15.0))(rxjs@7.8.2)': + dependencies: + '@angular/core': 20.1.8(@angular/compiler@20.1.8)(rxjs@7.8.2)(zone.js@0.15.0) + rxjs: 7.8.2 + tslib: 2.8.1 + + '@angular/common@21.2.26(@angular/core@21.2.26(@angular/compiler@21.2.26)(rxjs@7.8.2)(zone.js@0.16.1))(rxjs@7.8.2)': + dependencies: + '@angular/core': 21.2.26(@angular/compiler@21.2.26)(rxjs@7.8.2)(zone.js@0.16.1) + rxjs: 7.8.2 + tslib: 2.8.1 + '@angular/common@22.2.4(@angular/core@22.2.4(@angular/compiler@22.2.4)(rxjs@7.8.2)(zone.js@0.15.0))(rxjs@7.8.2)': dependencies: '@angular/core': 22.2.4(@angular/compiler@22.2.4)(rxjs@7.8.2)(zone.js@0.15.0) rxjs: 7.8.2 tslib: 2.8.1 + '@angular/common@22.2.4(@angular/core@22.2.4(@angular/compiler@22.2.4)(rxjs@7.8.2)(zone.js@0.16.1))(rxjs@7.8.2)': + dependencies: + '@angular/core': 22.2.4(@angular/compiler@22.2.4)(rxjs@7.8.2)(zone.js@0.16.1) + rxjs: 7.8.2 + tslib: 2.8.1 + + '@angular/compiler-cli@20.1.8(@angular/compiler@20.1.8)(supports-color@10.2.2)(typescript@5.8.3)': + dependencies: + '@angular/compiler': 20.1.8 + '@babel/core': 7.28.0(supports-color@10.2.2) + '@jridgewell/sourcemap-codec': 1.6.0 + chokidar: 5.0.0 + convert-source-map: 1.9.0 + reflect-metadata: 0.2.2 + semver: 7.8.5 + tslib: 2.8.1 + yargs: 18.2.0 + optionalDependencies: + typescript: 5.8.3 + transitivePeerDependencies: + - supports-color + + '@angular/compiler-cli@21.2.26(@angular/compiler@21.2.26)(supports-color@10.2.2)(typescript@5.9.3)': + dependencies: + '@angular/compiler': 21.2.26 + '@babel/core': 7.29.7(supports-color@10.2.2) + '@jridgewell/sourcemap-codec': 1.6.0 + chokidar: 5.0.0 + convert-source-map: 1.9.0 + reflect-metadata: 0.2.2 + semver: 7.8.5 + tslib: 2.8.1 + yargs: 18.2.0 + optionalDependencies: + typescript: 5.9.3 + transitivePeerDependencies: + - supports-color + '@angular/compiler-cli@22.2.4(@angular/compiler@22.2.4)(typescript@6.0.3)': dependencies: '@angular/compiler': 22.2.4 @@ -23892,10 +25070,34 @@ snapshots: optionalDependencies: typescript: 6.0.3 + '@angular/compiler@20.1.8': + dependencies: + tslib: 2.8.1 + + '@angular/compiler@21.2.26': + dependencies: + tslib: 2.8.1 + '@angular/compiler@22.2.4': dependencies: tslib: 2.8.1 + '@angular/core@20.1.8(@angular/compiler@20.1.8)(rxjs@7.8.2)(zone.js@0.15.0)': + dependencies: + rxjs: 7.8.2 + tslib: 2.8.1 + optionalDependencies: + '@angular/compiler': 20.1.8 + zone.js: 0.15.0 + + '@angular/core@21.2.26(@angular/compiler@21.2.26)(rxjs@7.8.2)(zone.js@0.16.1)': + dependencies: + rxjs: 7.8.2 + tslib: 2.8.1 + optionalDependencies: + '@angular/compiler': 21.2.26 + zone.js: 0.16.1 + '@angular/core@22.2.4(@angular/compiler@22.2.4)(rxjs@7.8.2)(zone.js@0.15.0)': dependencies: rxjs: 7.8.2 @@ -23904,11 +25106,19 @@ snapshots: '@angular/compiler': 22.2.4 zone.js: 0.15.0 - '@angular/forms@22.2.4(@angular/common@22.2.4(@angular/core@22.2.4(@angular/compiler@22.2.4)(rxjs@7.8.2)(zone.js@0.15.0))(rxjs@7.8.2))(@angular/core@22.2.4(@angular/compiler@22.2.4)(rxjs@7.8.2)(zone.js@0.15.0))(@angular/platform-browser@22.2.4(@angular/common@22.2.4(@angular/core@22.2.4(@angular/compiler@22.2.4)(rxjs@7.8.2)(zone.js@0.15.0))(rxjs@7.8.2))(@angular/core@22.2.4(@angular/compiler@22.2.4)(rxjs@7.8.2)(zone.js@0.15.0)))(rxjs@7.8.2)': + '@angular/core@22.2.4(@angular/compiler@22.2.4)(rxjs@7.8.2)(zone.js@0.16.1)': dependencies: - '@angular/common': 22.2.4(@angular/core@22.2.4(@angular/compiler@22.2.4)(rxjs@7.8.2)(zone.js@0.15.0))(rxjs@7.8.2) - '@angular/core': 22.2.4(@angular/compiler@22.2.4)(rxjs@7.8.2)(zone.js@0.15.0) - '@angular/platform-browser': 22.2.4(@angular/common@22.2.4(@angular/core@22.2.4(@angular/compiler@22.2.4)(rxjs@7.8.2)(zone.js@0.15.0))(rxjs@7.8.2))(@angular/core@22.2.4(@angular/compiler@22.2.4)(rxjs@7.8.2)(zone.js@0.15.0)) + rxjs: 7.8.2 + tslib: 2.8.1 + optionalDependencies: + '@angular/compiler': 22.2.4 + zone.js: 0.16.1 + + '@angular/forms@22.2.4(@angular/common@22.2.4(@angular/core@22.2.4(@angular/compiler@22.2.4)(rxjs@7.8.2)(zone.js@0.16.1))(rxjs@7.8.2))(@angular/core@22.2.4(@angular/compiler@22.2.4)(rxjs@7.8.2)(zone.js@0.16.1))(@angular/platform-browser@22.2.4(@angular/common@22.2.4(@angular/core@22.2.4(@angular/compiler@22.2.4)(rxjs@7.8.2)(zone.js@0.16.1))(rxjs@7.8.2))(@angular/core@22.2.4(@angular/compiler@22.2.4)(rxjs@7.8.2)(zone.js@0.16.1)))(rxjs@7.8.2)': + dependencies: + '@angular/common': 22.2.4(@angular/core@22.2.4(@angular/compiler@22.2.4)(rxjs@7.8.2)(zone.js@0.16.1))(rxjs@7.8.2) + '@angular/core': 22.2.4(@angular/compiler@22.2.4)(rxjs@7.8.2)(zone.js@0.16.1) + '@angular/platform-browser': 22.2.4(@angular/common@22.2.4(@angular/core@22.2.4(@angular/compiler@22.2.4)(rxjs@7.8.2)(zone.js@0.16.1))(rxjs@7.8.2))(@angular/core@22.2.4(@angular/compiler@22.2.4)(rxjs@7.8.2)(zone.js@0.16.1)) '@standard-schema/spec': 1.1.0 rxjs: 7.8.2 tslib: 2.8.1 @@ -23920,6 +25130,33 @@ snapshots: '@angular/core': 22.2.4(@angular/compiler@22.2.4)(rxjs@7.8.2)(zone.js@0.15.0) tslib: 2.8.1 + '@angular/platform-browser@22.2.4(@angular/common@22.2.4(@angular/core@22.2.4(@angular/compiler@22.2.4)(rxjs@7.8.2)(zone.js@0.16.1))(rxjs@7.8.2))(@angular/core@22.2.4(@angular/compiler@22.2.4)(rxjs@7.8.2)(zone.js@0.16.1))': + dependencies: + '@angular/common': 22.2.4(@angular/core@22.2.4(@angular/compiler@22.2.4)(rxjs@7.8.2)(zone.js@0.16.1))(rxjs@7.8.2) + '@angular/core': 22.2.4(@angular/compiler@22.2.4)(rxjs@7.8.2)(zone.js@0.16.1) + tslib: 2.8.1 + + '@angular/platform-server@22.2.4(@angular/common@22.2.4(@angular/core@22.2.4(@angular/compiler@22.2.4)(rxjs@7.8.2)(zone.js@0.15.0))(rxjs@7.8.2))(@angular/compiler@22.2.4)(@angular/core@22.2.4(@angular/compiler@22.2.4)(rxjs@7.8.2)(zone.js@0.15.0))(@angular/platform-browser@22.2.4(@angular/common@22.2.4(@angular/core@22.2.4(@angular/compiler@22.2.4)(rxjs@7.8.2)(zone.js@0.15.0))(rxjs@7.8.2))(@angular/core@22.2.4(@angular/compiler@22.2.4)(rxjs@7.8.2)(zone.js@0.15.0)))(rxjs@7.8.2)': + dependencies: + '@angular/common': 22.2.4(@angular/core@22.2.4(@angular/compiler@22.2.4)(rxjs@7.8.2)(zone.js@0.15.0))(rxjs@7.8.2) + '@angular/compiler': 22.2.4 + '@angular/core': 22.2.4(@angular/compiler@22.2.4)(rxjs@7.8.2)(zone.js@0.15.0) + '@angular/platform-browser': 22.2.4(@angular/common@22.2.4(@angular/core@22.2.4(@angular/compiler@22.2.4)(rxjs@7.8.2)(zone.js@0.15.0))(rxjs@7.8.2))(@angular/core@22.2.4(@angular/compiler@22.2.4)(rxjs@7.8.2)(zone.js@0.15.0)) + rxjs: 7.8.2 + tslib: 2.8.1 + xhr2: 0.2.1 + optional: true + + '@angular/platform-server@22.2.4(@angular/common@22.2.4(@angular/core@22.2.4(@angular/compiler@22.2.4)(rxjs@7.8.2)(zone.js@0.16.1))(rxjs@7.8.2))(@angular/compiler@22.2.4)(@angular/core@22.2.4(@angular/compiler@22.2.4)(rxjs@7.8.2)(zone.js@0.16.1))(@angular/platform-browser@22.2.4(@angular/common@22.2.4(@angular/core@22.2.4(@angular/compiler@22.2.4)(rxjs@7.8.2)(zone.js@0.16.1))(rxjs@7.8.2))(@angular/core@22.2.4(@angular/compiler@22.2.4)(rxjs@7.8.2)(zone.js@0.16.1)))(rxjs@7.8.2)': + dependencies: + '@angular/common': 22.2.4(@angular/core@22.2.4(@angular/compiler@22.2.4)(rxjs@7.8.2)(zone.js@0.16.1))(rxjs@7.8.2) + '@angular/compiler': 22.2.4 + '@angular/core': 22.2.4(@angular/compiler@22.2.4)(rxjs@7.8.2)(zone.js@0.16.1) + '@angular/platform-browser': 22.2.4(@angular/common@22.2.4(@angular/core@22.2.4(@angular/compiler@22.2.4)(rxjs@7.8.2)(zone.js@0.16.1))(rxjs@7.8.2))(@angular/core@22.2.4(@angular/compiler@22.2.4)(rxjs@7.8.2)(zone.js@0.16.1)) + rxjs: 7.8.2 + tslib: 2.8.1 + xhr2: 0.2.1 + '@angular/router@22.2.4(@angular/common@22.2.4(@angular/core@22.2.4(@angular/compiler@22.2.4)(rxjs@7.8.2)(zone.js@0.15.0))(rxjs@7.8.2))(@angular/core@22.2.4(@angular/compiler@22.2.4)(rxjs@7.8.2)(zone.js@0.15.0))(@angular/platform-browser@22.2.4(@angular/common@22.2.4(@angular/core@22.2.4(@angular/compiler@22.2.4)(rxjs@7.8.2)(zone.js@0.15.0))(rxjs@7.8.2))(@angular/core@22.2.4(@angular/compiler@22.2.4)(rxjs@7.8.2)(zone.js@0.15.0)))(rxjs@7.8.2)': dependencies: '@angular/common': 22.2.4(@angular/core@22.2.4(@angular/compiler@22.2.4)(rxjs@7.8.2)(zone.js@0.15.0))(rxjs@7.8.2) @@ -23928,6 +25165,35 @@ snapshots: rxjs: 7.8.2 tslib: 2.8.1 + '@angular/router@22.2.4(@angular/common@22.2.4(@angular/core@22.2.4(@angular/compiler@22.2.4)(rxjs@7.8.2)(zone.js@0.16.1))(rxjs@7.8.2))(@angular/core@22.2.4(@angular/compiler@22.2.4)(rxjs@7.8.2)(zone.js@0.16.1))(@angular/platform-browser@22.2.4(@angular/common@22.2.4(@angular/core@22.2.4(@angular/compiler@22.2.4)(rxjs@7.8.2)(zone.js@0.16.1))(rxjs@7.8.2))(@angular/core@22.2.4(@angular/compiler@22.2.4)(rxjs@7.8.2)(zone.js@0.16.1)))(rxjs@7.8.2)': + dependencies: + '@angular/common': 22.2.4(@angular/core@22.2.4(@angular/compiler@22.2.4)(rxjs@7.8.2)(zone.js@0.16.1))(rxjs@7.8.2) + '@angular/core': 22.2.4(@angular/compiler@22.2.4)(rxjs@7.8.2)(zone.js@0.16.1) + '@angular/platform-browser': 22.2.4(@angular/common@22.2.4(@angular/core@22.2.4(@angular/compiler@22.2.4)(rxjs@7.8.2)(zone.js@0.16.1))(rxjs@7.8.2))(@angular/core@22.2.4(@angular/compiler@22.2.4)(rxjs@7.8.2)(zone.js@0.16.1)) + rxjs: 7.8.2 + tslib: 2.8.1 + + '@angular/ssr@22.2.6(a1d20e1579b007a10175d052ea6e8746)': + dependencies: + '@angular/common': 22.2.4(@angular/core@22.2.4(@angular/compiler@22.2.4)(rxjs@7.8.2)(zone.js@0.16.1))(rxjs@7.8.2) + '@angular/core': 22.2.4(@angular/compiler@22.2.4)(rxjs@7.8.2)(zone.js@0.16.1) + '@angular/router': 22.2.4(@angular/common@22.2.4(@angular/core@22.2.4(@angular/compiler@22.2.4)(rxjs@7.8.2)(zone.js@0.16.1))(rxjs@7.8.2))(@angular/core@22.2.4(@angular/compiler@22.2.4)(rxjs@7.8.2)(zone.js@0.16.1))(@angular/platform-browser@22.2.4(@angular/common@22.2.4(@angular/core@22.2.4(@angular/compiler@22.2.4)(rxjs@7.8.2)(zone.js@0.16.1))(rxjs@7.8.2))(@angular/core@22.2.4(@angular/compiler@22.2.4)(rxjs@7.8.2)(zone.js@0.16.1)))(rxjs@7.8.2) + beasties: 0.5.4 + tslib: 2.8.1 + optionalDependencies: + '@angular/platform-server': 22.2.4(@angular/common@22.2.4(@angular/core@22.2.4(@angular/compiler@22.2.4)(rxjs@7.8.2)(zone.js@0.16.1))(rxjs@7.8.2))(@angular/compiler@22.2.4)(@angular/core@22.2.4(@angular/compiler@22.2.4)(rxjs@7.8.2)(zone.js@0.16.1))(@angular/platform-browser@22.2.4(@angular/common@22.2.4(@angular/core@22.2.4(@angular/compiler@22.2.4)(rxjs@7.8.2)(zone.js@0.16.1))(rxjs@7.8.2))(@angular/core@22.2.4(@angular/compiler@22.2.4)(rxjs@7.8.2)(zone.js@0.16.1)))(rxjs@7.8.2) + + '@angular/ssr@22.2.6(cd52d6d26dcd116ddb301cefc9e3063d)': + dependencies: + '@angular/common': 22.2.4(@angular/core@22.2.4(@angular/compiler@22.2.4)(rxjs@7.8.2)(zone.js@0.15.0))(rxjs@7.8.2) + '@angular/core': 22.2.4(@angular/compiler@22.2.4)(rxjs@7.8.2)(zone.js@0.15.0) + '@angular/router': 22.2.4(@angular/common@22.2.4(@angular/core@22.2.4(@angular/compiler@22.2.4)(rxjs@7.8.2)(zone.js@0.15.0))(rxjs@7.8.2))(@angular/core@22.2.4(@angular/compiler@22.2.4)(rxjs@7.8.2)(zone.js@0.15.0))(@angular/platform-browser@22.2.4(@angular/common@22.2.4(@angular/core@22.2.4(@angular/compiler@22.2.4)(rxjs@7.8.2)(zone.js@0.15.0))(rxjs@7.8.2))(@angular/core@22.2.4(@angular/compiler@22.2.4)(rxjs@7.8.2)(zone.js@0.15.0)))(rxjs@7.8.2) + beasties: 0.5.4 + tslib: 2.8.1 + optionalDependencies: + '@angular/platform-server': 22.2.4(@angular/common@22.2.4(@angular/core@22.2.4(@angular/compiler@22.2.4)(rxjs@7.8.2)(zone.js@0.15.0))(rxjs@7.8.2))(@angular/compiler@22.2.4)(@angular/core@22.2.4(@angular/compiler@22.2.4)(rxjs@7.8.2)(zone.js@0.15.0))(@angular/platform-browser@22.2.4(@angular/common@22.2.4(@angular/core@22.2.4(@angular/compiler@22.2.4)(rxjs@7.8.2)(zone.js@0.15.0))(rxjs@7.8.2))(@angular/core@22.2.4(@angular/compiler@22.2.4)(rxjs@7.8.2)(zone.js@0.15.0)))(rxjs@7.8.2) + optional: true + '@antfu/install-pkg@2.1.0': dependencies: package-manager-detector: 1.9.0 @@ -24211,6 +25477,26 @@ snapshots: '@babel/compat-data@8.0.5': {} + '@babel/core@7.28.0(supports-color@10.2.2)': + dependencies: + '@ampproject/remapping': 2.3.0 + '@babel/code-frame': 7.29.7 + '@babel/generator': 7.29.12 + '@babel/helper-compilation-targets': 7.29.7 + '@babel/helper-module-transforms': 7.29.7(@babel/core@7.28.0(supports-color@10.2.2))(supports-color@10.2.2) + '@babel/helpers': 7.29.7 + '@babel/parser': 7.29.12 + '@babel/template': 7.29.7 + '@babel/traverse': 7.29.12(supports-color@10.2.2) + '@babel/types': 7.29.11 + convert-source-map: 2.0.0 + debug: 4.4.3(supports-color@10.2.2) + gensync: 1.0.0-beta.2 + json5: 2.2.3 + semver: 6.3.1 + transitivePeerDependencies: + - supports-color + '@babel/core@7.29.7(supports-color@10.2.2)': dependencies: '@babel/code-frame': 7.29.7 @@ -24415,6 +25701,15 @@ snapshots: - supports-color optional: true + '@babel/helper-module-transforms@7.29.7(@babel/core@7.28.0(supports-color@10.2.2))(supports-color@10.2.2)': + dependencies: + '@babel/core': 7.28.0(supports-color@10.2.2) + '@babel/helper-module-imports': 7.29.7(supports-color@10.2.2) + '@babel/helper-validator-identifier': 7.29.7 + '@babel/traverse': 7.29.12(supports-color@10.2.2) + transitivePeerDependencies: + - supports-color + '@babel/helper-module-transforms@7.29.7(@babel/core@7.29.7(supports-color@10.2.2))(supports-color@10.2.2)': dependencies: '@babel/core': 7.29.7(supports-color@10.2.2) @@ -27522,6 +28817,41 @@ snapshots: '@mdn/browser-compat-data@6.1.5': {} + '@microsoft/api-extractor-model@7.29.6(@types/node@24.19.2)': + dependencies: + '@microsoft/tsdoc': 0.15.1 + '@microsoft/tsdoc-config': 0.17.1 + '@rushstack/node-core-library': 5.7.0(@types/node@24.19.2) + transitivePeerDependencies: + - '@types/node' + + '@microsoft/api-extractor@7.47.7(@types/node@24.19.2)': + dependencies: + '@microsoft/api-extractor-model': 7.29.6(@types/node@24.19.2) + '@microsoft/tsdoc': 0.15.1 + '@microsoft/tsdoc-config': 0.17.1 + '@rushstack/node-core-library': 5.7.0(@types/node@24.19.2) + '@rushstack/rig-package': 0.5.3 + '@rushstack/terminal': 0.14.0(@types/node@24.19.2) + '@rushstack/ts-command-line': 4.22.6(@types/node@24.19.2) + lodash: 4.17.23 + minimatch: 3.0.8 + resolve: 1.22.11 + semver: 7.5.4 + source-map: 0.6.1 + typescript: 5.4.2 + transitivePeerDependencies: + - '@types/node' + + '@microsoft/tsdoc-config@0.17.1': + dependencies: + '@microsoft/tsdoc': 0.15.1 + ajv: 8.12.0 + jju: 1.4.0 + resolve: 1.22.11 + + '@microsoft/tsdoc@0.15.1': {} + '@modelcontextprotocol/client@2.4.0': dependencies: '@modelcontextprotocol/core': 2.4.0 @@ -31833,6 +33163,40 @@ snapshots: '@rollup/rollup-win32-x64-msvc@4.65.1': optional: true + '@rushstack/node-core-library@5.7.0(@types/node@24.19.2)': + dependencies: + ajv: 8.13.0 + ajv-draft-04: 1.0.0(ajv@8.13.0) + ajv-formats: 3.0.1(ajv@8.13.0) + fs-extra: 7.0.1 + import-lazy: 4.0.0 + jju: 1.4.0 + resolve: 1.22.11 + semver: 7.5.4 + optionalDependencies: + '@types/node': 24.19.2 + + '@rushstack/rig-package@0.5.3': + dependencies: + resolve: 1.22.11 + strip-json-comments: 3.1.1 + + '@rushstack/terminal@0.14.0(@types/node@24.19.2)': + dependencies: + '@rushstack/node-core-library': 5.7.0(@types/node@24.19.2) + supports-color: 8.1.1 + optionalDependencies: + '@types/node': 24.19.2 + + '@rushstack/ts-command-line@4.22.6(@types/node@24.19.2)': + dependencies: + '@rushstack/terminal': 0.14.0(@types/node@24.19.2) + '@types/argparse': 1.0.38 + argparse: 1.0.10 + string-argv: 0.3.2 + transitivePeerDependencies: + - '@types/node' + '@schematics/angular@22.2.5(chokidar@5.0.0)': dependencies: '@angular-devkit/core': 22.2.5(chokidar@5.0.0) @@ -32655,10 +34019,10 @@ snapshots: optionalDependencies: '@vue/composition-api': 1.7.2(vue@3.5.44(typescript@6.0.3)) - '@testing-library/angular@19.6.0(@angular/core@22.2.4(@angular/compiler@22.2.4)(rxjs@7.8.2)(zone.js@0.15.0))(@angular/router@22.2.4(@angular/common@22.2.4(@angular/core@22.2.4(@angular/compiler@22.2.4)(rxjs@7.8.2)(zone.js@0.15.0))(rxjs@7.8.2))(@angular/core@22.2.4(@angular/compiler@22.2.4)(rxjs@7.8.2)(zone.js@0.15.0))(@angular/platform-browser@22.2.4(@angular/common@22.2.4(@angular/core@22.2.4(@angular/compiler@22.2.4)(rxjs@7.8.2)(zone.js@0.15.0))(rxjs@7.8.2))(@angular/core@22.2.4(@angular/compiler@22.2.4)(rxjs@7.8.2)(zone.js@0.15.0)))(rxjs@7.8.2))(@testing-library/dom@10.4.1)': + '@testing-library/angular@19.6.0(@angular/core@22.2.4(@angular/compiler@22.2.4)(rxjs@7.8.2)(zone.js@0.16.1))(@angular/router@22.2.4(@angular/common@22.2.4(@angular/core@22.2.4(@angular/compiler@22.2.4)(rxjs@7.8.2)(zone.js@0.16.1))(rxjs@7.8.2))(@angular/core@22.2.4(@angular/compiler@22.2.4)(rxjs@7.8.2)(zone.js@0.16.1))(@angular/platform-browser@22.2.4(@angular/common@22.2.4(@angular/core@22.2.4(@angular/compiler@22.2.4)(rxjs@7.8.2)(zone.js@0.16.1))(rxjs@7.8.2))(@angular/core@22.2.4(@angular/compiler@22.2.4)(rxjs@7.8.2)(zone.js@0.16.1)))(rxjs@7.8.2))(@testing-library/dom@10.4.1)': dependencies: - '@angular/core': 22.2.4(@angular/compiler@22.2.4)(rxjs@7.8.2)(zone.js@0.15.0) - '@angular/router': 22.2.4(@angular/common@22.2.4(@angular/core@22.2.4(@angular/compiler@22.2.4)(rxjs@7.8.2)(zone.js@0.15.0))(rxjs@7.8.2))(@angular/core@22.2.4(@angular/compiler@22.2.4)(rxjs@7.8.2)(zone.js@0.15.0))(@angular/platform-browser@22.2.4(@angular/common@22.2.4(@angular/core@22.2.4(@angular/compiler@22.2.4)(rxjs@7.8.2)(zone.js@0.15.0))(rxjs@7.8.2))(@angular/core@22.2.4(@angular/compiler@22.2.4)(rxjs@7.8.2)(zone.js@0.15.0)))(rxjs@7.8.2) + '@angular/core': 22.2.4(@angular/compiler@22.2.4)(rxjs@7.8.2)(zone.js@0.16.1) + '@angular/router': 22.2.4(@angular/common@22.2.4(@angular/core@22.2.4(@angular/compiler@22.2.4)(rxjs@7.8.2)(zone.js@0.16.1))(rxjs@7.8.2))(@angular/core@22.2.4(@angular/compiler@22.2.4)(rxjs@7.8.2)(zone.js@0.16.1))(@angular/platform-browser@22.2.4(@angular/common@22.2.4(@angular/core@22.2.4(@angular/compiler@22.2.4)(rxjs@7.8.2)(zone.js@0.16.1))(rxjs@7.8.2))(@angular/core@22.2.4(@angular/compiler@22.2.4)(rxjs@7.8.2)(zone.js@0.16.1)))(rxjs@7.8.2) '@testing-library/dom': 10.4.1 tslib: 2.8.1 @@ -32737,7 +34101,7 @@ snapshots: svelte: 5.57.1(@typescript-eslint/types@8.58.1) optionalDependencies: vite: 8.3.5(@types/node@24.19.2)(esbuild@0.28.2)(jiti@2.7.0)(sass-embedded@1.104.1)(sass@1.90.0)(terser@5.46.1)(tsx@4.23.15)(yaml@2.9.0) - vitest: 5.0.5(@types/node@24.19.2)(@vitest/coverage-istanbul@5.0.5)(jsdom@27.4.0(supports-color@10.2.2))(msw@2.15.0(@types/node@24.19.2)(typescript@6.0.3))(vite@8.3.5(@types/node@24.19.2)(esbuild@0.28.2)(jiti@2.7.0)(sass-embedded@1.104.1)(sass@1.90.0)(terser@5.46.1)(tsx@4.23.15)(yaml@2.9.0)) + vitest: 5.0.5(@types/node@24.19.2)(@vitest/coverage-istanbul@5.0.5)(jsdom@27.4.0(supports-color@7.2.0))(msw@2.15.0(@types/node@24.19.2)(typescript@6.0.3))(vite@8.3.5(@types/node@24.19.2)(esbuild@0.28.2)(jiti@2.7.0)(sass-embedded@1.104.1)(sass@1.90.0)(terser@5.46.1)(tsx@4.23.15)(yaml@2.9.0)) '@tsconfig/svelte@5.0.8': {} @@ -32749,6 +34113,8 @@ snapshots: dependencies: tslib: 2.8.1 + '@types/argparse@1.0.38': {} + '@types/aria-query@5.0.4': {} '@types/babel__core@7.20.5': @@ -33700,14 +35066,17 @@ snapshots: dependencies: vite: 8.3.5(@types/node@24.19.2)(esbuild@0.28.2)(jiti@2.7.0)(sass-embedded@1.104.1)(sass@1.104.1)(terser@5.46.1)(tsx@4.23.15)(yaml@2.9.0) - '@vitejs/plugin-basic-ssl@2.3.0(vite@8.3.5(@types/node@24.19.2)(esbuild@0.28.2)(jiti@2.7.0)(sass-embedded@1.104.1)(sass@1.90.0)(terser@5.46.1)(tsx@4.23.15)(yaml@2.9.0))': + '@vitejs/plugin-basic-ssl@2.3.0(vite@8.3.5(@types/node@24.19.2)(esbuild@0.28.2)(jiti@2.7.0)(sass-embedded@1.104.1)(sass@1.104.1)(terser@5.46.1)(tsx@4.23.15)(yaml@2.9.1))': dependencies: - vite: 8.3.5(@types/node@24.19.2)(esbuild@0.28.2)(jiti@2.7.0)(sass-embedded@1.104.1)(sass@1.90.0)(terser@5.46.1)(tsx@4.23.15)(yaml@2.9.0) + vite: 8.3.5(@types/node@24.19.2)(esbuild@0.28.2)(jiti@2.7.0)(sass-embedded@1.104.1)(sass@1.104.1)(terser@5.46.1)(tsx@4.23.15)(yaml@2.9.1) - '@vitejs/plugin-basic-ssl@2.3.0(vite@8.3.5(@types/node@24.19.2)(esbuild@0.28.2)(jiti@2.7.0)(sass-embedded@1.104.1)(sass@1.90.0)(terser@5.46.1)(tsx@4.23.15)(yaml@2.9.1))': + '@vitejs/plugin-basic-ssl@2.3.0(vite@8.3.5(@types/node@24.19.2)(esbuild@0.28.2)(jiti@2.7.0)(sass-embedded@1.104.1)(sass@1.104.1)(terser@5.51.2)(tsx@4.23.15)(yaml@2.9.1))': dependencies: - vite: 8.3.5(@types/node@24.19.2)(esbuild@0.28.2)(jiti@2.7.0)(sass-embedded@1.104.1)(sass@1.90.0)(terser@5.46.1)(tsx@4.23.15)(yaml@2.9.1) - optional: true + vite: 8.3.5(@types/node@24.19.2)(esbuild@0.28.2)(jiti@2.7.0)(sass-embedded@1.104.1)(sass@1.104.1)(terser@5.51.2)(tsx@4.23.15)(yaml@2.9.1) + + '@vitejs/plugin-basic-ssl@2.3.0(vite@8.3.5(@types/node@24.19.2)(esbuild@0.28.2)(jiti@2.7.0)(sass-embedded@1.104.1)(sass@1.90.0)(terser@5.46.1)(tsx@4.23.15)(yaml@2.9.0))': + dependencies: + vite: 8.3.5(@types/node@24.19.2)(esbuild@0.28.2)(jiti@2.7.0)(sass-embedded@1.104.1)(sass@1.90.0)(terser@5.46.1)(tsx@4.23.15)(yaml@2.9.0) '@vitejs/plugin-react@6.2.1(babel-plugin-react-compiler@1.0.0)(vite@8.3.5(@types/node@24.19.2)(esbuild@0.28.2)(jiti@2.7.0)(sass-embedded@1.104.1)(sass@1.90.0)(terser@5.46.1)(tsx@4.23.15)(yaml@2.9.0))': dependencies: @@ -33855,6 +35224,18 @@ snapshots: optionalDependencies: msw: 2.12.14(@types/node@24.19.2)(typescript@6.0.3) vite: 8.3.5(@types/node@24.19.2)(esbuild@0.28.2)(jiti@2.7.0)(sass-embedded@1.104.1)(sass@1.104.1)(terser@5.46.1)(tsx@4.23.15)(yaml@2.9.0) + optional: true + + '@vitest/mocker@5.0.5(msw@2.12.14(@types/node@24.19.2)(typescript@6.0.3))(vite@8.3.5(@types/node@24.19.2)(esbuild@0.28.2)(jiti@2.7.0)(sass-embedded@1.104.1)(sass@1.104.1)(terser@5.46.1)(tsx@4.23.15)(yaml@2.9.1))': + dependencies: + '@jridgewell/trace-mapping': 0.3.31 + '@vitest/spy': 5.0.5 + estree-walker: 3.0.3 + magic-string: 1.4.3 + optionalDependencies: + msw: 2.12.14(@types/node@24.19.2)(typescript@6.0.3) + vite: 8.3.5(@types/node@24.19.2)(esbuild@0.28.2)(jiti@2.7.0)(sass-embedded@1.104.1)(sass@1.104.1)(terser@5.46.1)(tsx@4.23.15)(yaml@2.9.1) + optional: true '@vitest/mocker@5.0.5(msw@2.12.14(@types/node@24.19.2)(typescript@6.0.3))(vite@8.3.5(@types/node@24.19.2)(esbuild@0.28.2)(jiti@2.7.0)(sass-embedded@1.104.1)(sass@1.90.0)(terser@5.46.1)(tsx@4.23.15)(yaml@2.9.0))': dependencies: @@ -33866,7 +35247,7 @@ snapshots: msw: 2.12.14(@types/node@24.19.2)(typescript@6.0.3) vite: 8.3.5(@types/node@24.19.2)(esbuild@0.28.2)(jiti@2.7.0)(sass-embedded@1.104.1)(sass@1.90.0)(terser@5.46.1)(tsx@4.23.15)(yaml@2.9.0) - '@vitest/mocker@5.0.5(msw@2.15.0(@types/node@24.19.2)(typescript@6.0.3))(vite@8.3.5(@types/node@24.19.2)(esbuild@0.28.2)(jiti@2.7.0)(sass-embedded@1.104.1)(sass@1.104.1)(terser@5.46.1)(tsx@4.23.15)(yaml@2.9.0))': + '@vitest/mocker@5.0.5(msw@2.15.0(@types/node@24.19.2)(typescript@6.0.3))(vite@8.3.5(@types/node@24.19.2)(esbuild@0.28.2)(jiti@2.7.0)(sass-embedded@1.104.1)(sass@1.104.1)(terser@5.46.1)(tsx@4.23.15)(yaml@2.9.1))': dependencies: '@jridgewell/trace-mapping': 0.3.31 '@vitest/spy': 5.0.5 @@ -33874,7 +35255,17 @@ snapshots: magic-string: 1.4.3 optionalDependencies: msw: 2.15.0(@types/node@24.19.2)(typescript@6.0.3) - vite: 8.3.5(@types/node@24.19.2)(esbuild@0.28.2)(jiti@2.7.0)(sass-embedded@1.104.1)(sass@1.104.1)(terser@5.46.1)(tsx@4.23.15)(yaml@2.9.0) + vite: 8.3.5(@types/node@24.19.2)(esbuild@0.28.2)(jiti@2.7.0)(sass-embedded@1.104.1)(sass@1.104.1)(terser@5.46.1)(tsx@4.23.15)(yaml@2.9.1) + + '@vitest/mocker@5.0.5(msw@2.15.0(@types/node@24.19.2)(typescript@6.0.3))(vite@8.3.5(@types/node@24.19.2)(esbuild@0.28.2)(jiti@2.7.0)(sass-embedded@1.104.1)(sass@1.104.1)(terser@5.51.2)(tsx@4.23.15)(yaml@2.9.1))': + dependencies: + '@jridgewell/trace-mapping': 0.3.31 + '@vitest/spy': 5.0.5 + estree-walker: 3.0.3 + magic-string: 1.4.3 + optionalDependencies: + msw: 2.15.0(@types/node@24.19.2)(typescript@6.0.3) + vite: 8.3.5(@types/node@24.19.2)(esbuild@0.28.2)(jiti@2.7.0)(sass-embedded@1.104.1)(sass@1.104.1)(terser@5.51.2)(tsx@4.23.15)(yaml@2.9.1) optional: true '@vitest/mocker@5.0.5(msw@2.15.0(@types/node@24.19.2)(typescript@6.0.3))(vite@8.3.5(@types/node@24.19.2)(esbuild@0.28.2)(jiti@2.7.0)(sass-embedded@1.104.1)(sass@1.90.0)(terser@5.46.1)(tsx@4.23.15)(yaml@2.9.0))': @@ -33897,7 +35288,6 @@ snapshots: optionalDependencies: msw: 2.15.0(@types/node@24.19.2)(typescript@6.0.3) vite: 8.3.5(@types/node@24.19.2)(esbuild@0.28.2)(jiti@2.7.0)(sass-embedded@1.104.1)(sass@1.90.0)(terser@5.46.1)(tsx@4.23.15)(yaml@2.9.1) - optional: true '@vitest/spy@5.0.5': {} @@ -34112,6 +35502,19 @@ snapshots: '@vue/devtools-shared@8.2.1': {} + '@vue/language-core@2.1.6(typescript@6.0.3)': + dependencies: + '@volar/language-core': 2.4.28 + '@vue/compiler-dom': 3.5.44 + '@vue/compiler-vue2': 2.7.16 + '@vue/shared': 3.5.44 + computeds: 0.0.1 + minimatch: 9.0.9 + muggle-string: 0.4.1 + path-browserify: 1.0.1 + optionalDependencies: + typescript: 6.0.3 + '@vue/language-core@2.2.12(typescript@6.0.3)': dependencies: '@volar/language-core': 2.4.15 @@ -34569,6 +35972,10 @@ snapshots: agent-cli-detector@0.1.7: {} + ajv-draft-04@1.0.0(ajv@8.13.0): + optionalDependencies: + ajv: 8.13.0 + ajv-draft-04@1.0.0(ajv@8.20.0): optionalDependencies: ajv: 8.20.0 @@ -34577,6 +35984,10 @@ snapshots: dependencies: ajv: 6.14.0 + ajv-formats@3.0.1(ajv@8.13.0): + optionalDependencies: + ajv: 8.13.0 + ajv-formats@3.0.1(ajv@8.20.0): optionalDependencies: ajv: 8.20.0 @@ -34601,6 +36012,20 @@ snapshots: json-schema-traverse: 0.4.1 uri-js: 4.4.1 + ajv@8.12.0: + dependencies: + fast-deep-equal: 3.1.3 + json-schema-traverse: 1.0.0 + require-from-string: 2.0.2 + uri-js: 4.4.1 + + ajv@8.13.0: + dependencies: + fast-deep-equal: 3.1.3 + json-schema-traverse: 1.0.0 + require-from-string: 2.0.2 + uri-js: 4.4.1 + ajv@8.20.0: dependencies: fast-deep-equal: 3.1.3 @@ -35857,6 +37282,8 @@ snapshots: transitivePeerDependencies: - supports-color + computeds@0.0.1: {} + concat-map@0.0.1: {} concat-stream@1.6.2: @@ -38036,6 +39463,12 @@ snapshots: fs-constants@1.0.0: {} + fs-extra@7.0.1: + dependencies: + graceful-fs: 4.2.11 + jsonfile: 4.0.0 + universalify: 0.1.2 + fs-write-stream-atomic@1.0.10: dependencies: graceful-fs: 4.2.11 @@ -38572,6 +40005,8 @@ snapshots: import-fresh@4.0.1: {} + import-lazy@4.0.0: {} + import-local@3.2.0: dependencies: pkg-dir: 4.2.0 @@ -39317,6 +40752,10 @@ snapshots: jsonc-parser@3.3.1: {} + jsonfile@4.0.0: + optionalDependencies: + graceful-fs: 4.2.11 + jsx-ast-utils@3.3.5: dependencies: array-includes: 3.1.9 @@ -39649,6 +41088,11 @@ snapshots: loader-utils@3.3.1: {} + local-pkg@0.5.1: + dependencies: + mlly: 1.8.2 + pkg-types: 1.3.1 + local-pkg@1.2.1: dependencies: mlly: 1.8.2 @@ -39694,6 +41138,8 @@ snapshots: lodash.uniq@4.5.0: {} + lodash@4.17.23: {} + lodash@4.18.1: {} log-symbols@2.2.0: @@ -39735,6 +41181,10 @@ snapshots: dependencies: yallist: 3.1.1 + lru-cache@6.0.0: + dependencies: + yallist: 4.0.0 + lunr@2.3.9: {} lz-string@1.5.0: {} @@ -40135,6 +41585,10 @@ snapshots: dependencies: brace-expansion: 5.0.12 + minimatch@3.0.8: + dependencies: + brace-expansion: 1.1.21 + minimatch@3.1.5: dependencies: brace-expansion: 1.1.21 @@ -43591,13 +45045,6 @@ snapshots: picocolors: 1.1.1 source-map-js: 1.2.2 - postcss@8.5.28: - dependencies: - nanoid: 3.3.20 - picocolors: 1.1.1 - source-map-js: 1.2.2 - optional: true - postcss@8.5.32: dependencies: nanoid: 3.3.20 @@ -44681,6 +46128,10 @@ snapshots: semver@6.3.1: {} + semver@7.5.4: + dependencies: + lru-cache: 6.0.0 + semver@7.8.4: {} semver@7.8.5: {} @@ -45174,6 +46625,8 @@ snapshots: strict-event-emitter@0.5.1: {} + string-argv@0.3.2: {} + string-ts@2.3.1: {} string-width@4.2.3: @@ -45731,6 +47184,10 @@ snapshots: ts-pattern@5.9.2: {} + tsconfck@3.1.6(typescript@6.0.3): + optionalDependencies: + typescript: 6.0.3 + tsconfig-paths@4.2.0: dependencies: json5: 2.2.3 @@ -45881,6 +47338,8 @@ snapshots: transitivePeerDependencies: - supports-color + typescript@5.4.2: {} + typescript@5.6.1-rc: {} typescript@5.7.3: {} @@ -46471,6 +47930,8 @@ snapshots: unist-util-is: 6.0.1 unist-util-visit-parents: 6.0.2 + universalify@0.1.2: {} + unload@2.4.1: {} unpipe@1.0.0: {} @@ -47015,6 +48476,25 @@ snapshots: typescript: 6.0.3 vue-tsc: 3.3.13(typescript@6.0.3) + vite-plugin-dts@4.2.3(@types/node@24.19.2)(rollup@4.65.1)(supports-color@10.2.2)(typescript@6.0.3)(vite@8.3.5(@types/node@24.19.2)(esbuild@0.28.2)(jiti@2.7.0)(sass-embedded@1.104.1)(sass@1.104.1)(terser@5.46.1)(tsx@4.23.15)(yaml@2.9.1)): + dependencies: + '@microsoft/api-extractor': 7.47.7(@types/node@24.19.2) + '@rollup/pluginutils': 5.3.0(rollup@4.65.1) + '@volar/typescript': 2.4.28(typescript@6.0.3) + '@vue/language-core': 2.1.6(typescript@6.0.3) + compare-versions: 6.1.1 + debug: 4.4.3(supports-color@10.2.2) + kolorist: 1.8.0 + local-pkg: 0.5.1 + magic-string: 0.30.21 + typescript: 6.0.3 + optionalDependencies: + vite: 8.3.5(@types/node@24.19.2)(esbuild@0.28.2)(jiti@2.7.0)(sass-embedded@1.104.1)(sass@1.104.1)(terser@5.46.1)(tsx@4.23.15)(yaml@2.9.1) + transitivePeerDependencies: + - '@types/node' + - rollup + - supports-color + vite-plugin-inspect@11.4.1(@nuxt/kit@4.6.3(@nuxt/schema@3.21.11)(confbox@0.3.1)(dotenv@17.3.1)(giget@3.3.1)(jiti@2.7.0)(magic-string@0.30.21)(mlly@1.8.2)(oxc-parser@0.143.0)(rolldown@1.2.15)(unplugin@3.4.0(esbuild@0.28.2)(rolldown@1.2.15)(rollup@4.65.1)(vite@8.3.5(@types/node@24.19.2)(esbuild@0.28.2)(jiti@2.7.0)(sass-embedded@1.104.1)(sass@1.104.1)(terser@5.46.1)(tsx@4.23.15)(yaml@2.9.1))(webpack@5.112.2)))(vite@8.3.5(@types/node@24.19.2)(esbuild@0.28.2)(jiti@2.7.0)(sass-embedded@1.104.1)(sass@1.104.1)(terser@5.46.1)(tsx@4.23.15)(yaml@2.9.1)): dependencies: ansis: 4.4.0 @@ -47233,6 +48713,17 @@ snapshots: stack-trace: 1.0.0-pre2 vite: 8.3.5(@types/node@24.19.2)(esbuild@0.28.2)(jiti@2.7.0)(sass-embedded@1.104.1)(sass@1.90.0)(terser@5.46.1)(tsx@4.23.15)(yaml@2.9.1) + vite-tsconfig-paths@5.1.4(supports-color@10.2.2)(typescript@6.0.3)(vite@8.3.5(@types/node@24.19.2)(esbuild@0.28.2)(jiti@2.7.0)(sass-embedded@1.104.1)(sass@1.104.1)(terser@5.46.1)(tsx@4.23.15)(yaml@2.9.1)): + dependencies: + debug: 4.4.3(supports-color@10.2.2) + globrex: 0.1.2 + tsconfck: 3.1.6(typescript@6.0.3) + optionalDependencies: + vite: 8.3.5(@types/node@24.19.2)(esbuild@0.28.2)(jiti@2.7.0)(sass-embedded@1.104.1)(sass@1.104.1)(terser@5.46.1)(tsx@4.23.15)(yaml@2.9.1) + transitivePeerDependencies: + - supports-color + - typescript + vite@7.3.7(@types/node@24.19.2)(jiti@2.7.0)(lightningcss@1.33.0)(sass-embedded@1.104.1)(sass@1.104.1)(terser@5.46.1)(tsx@4.23.15)(yaml@2.9.1): dependencies: esbuild: 0.28.2 @@ -47325,6 +48816,24 @@ snapshots: tsx: 4.23.15 yaml: 2.9.1 + vite@8.3.5(@types/node@24.19.2)(esbuild@0.28.2)(jiti@2.7.0)(sass-embedded@1.104.1)(sass@1.104.1)(terser@5.51.2)(tsx@4.23.15)(yaml@2.9.1): + dependencies: + lightningcss: 1.33.0 + picomatch: 4.0.7 + postcss: 8.5.32 + rolldown: 1.2.15 + tinyglobby: 0.2.17 + optionalDependencies: + '@types/node': 24.19.2 + esbuild: 0.28.2 + fsevents: 2.3.3 + jiti: 2.7.0 + sass: 1.104.1 + sass-embedded: 1.104.1 + terser: 5.51.2 + tsx: 4.23.15 + yaml: 2.9.1 + vite@8.3.5(@types/node@24.19.2)(esbuild@0.28.2)(jiti@2.7.0)(sass-embedded@1.104.1)(sass@1.90.0)(terser@5.46.1)(tsx@4.23.15)(yaml@2.9.0): dependencies: lightningcss: 1.33.0 @@ -47395,11 +48904,12 @@ snapshots: jsdom: 27.4.0(supports-color@10.2.2) transitivePeerDependencies: - msw + optional: true - vitest@5.0.5(@types/node@24.19.2)(@vitest/coverage-istanbul@5.0.5)(jsdom@27.4.0(supports-color@10.2.2))(msw@2.15.0(@types/node@24.19.2)(typescript@6.0.3))(vite@8.3.5(@types/node@24.19.2)(esbuild@0.28.2)(jiti@2.7.0)(sass-embedded@1.104.1)(sass@1.104.1)(terser@5.46.1)(tsx@4.23.15)(yaml@2.9.0)): + vitest@5.0.5(@types/node@24.19.2)(@vitest/coverage-istanbul@5.0.5)(jsdom@27.4.0(supports-color@10.2.2))(msw@2.12.14(@types/node@24.19.2)(typescript@6.0.3))(vite@8.3.5(@types/node@24.19.2)(esbuild@0.28.2)(jiti@2.7.0)(sass-embedded@1.104.1)(sass@1.104.1)(terser@5.46.1)(tsx@4.23.15)(yaml@2.9.1)): dependencies: '@types/chai': 5.2.3 - '@vitest/mocker': 5.0.5(msw@2.15.0(@types/node@24.19.2)(typescript@6.0.3))(vite@8.3.5(@types/node@24.19.2)(esbuild@0.28.2)(jiti@2.7.0)(sass-embedded@1.104.1)(sass@1.104.1)(terser@5.46.1)(tsx@4.23.15)(yaml@2.9.0)) + '@vitest/mocker': 5.0.5(msw@2.12.14(@types/node@24.19.2)(typescript@6.0.3))(vite@8.3.5(@types/node@24.19.2)(esbuild@0.28.2)(jiti@2.7.0)(sass-embedded@1.104.1)(sass@1.104.1)(terser@5.46.1)(tsx@4.23.15)(yaml@2.9.1)) chai: 6.3.0 es-module-lexer: 2.3.2 expect-type: 1.4.0 @@ -47410,7 +48920,7 @@ snapshots: tinybench: 6.2.2 tinyexec: 1.3.1 tinyglobby: 0.2.17 - vite: 8.3.5(@types/node@24.19.2)(esbuild@0.28.2)(jiti@2.7.0)(sass-embedded@1.104.1)(sass@1.104.1)(terser@5.46.1)(tsx@4.23.15)(yaml@2.9.0) + vite: 8.3.5(@types/node@24.19.2)(esbuild@0.28.2)(jiti@2.7.0)(sass-embedded@1.104.1)(sass@1.104.1)(terser@5.46.1)(tsx@4.23.15)(yaml@2.9.1) why-is-node-running: 3.2.1 optionalDependencies: '@types/node': 24.19.2 @@ -47420,10 +48930,10 @@ snapshots: - msw optional: true - vitest@5.0.5(@types/node@24.19.2)(@vitest/coverage-istanbul@5.0.5)(jsdom@27.4.0(supports-color@10.2.2))(msw@2.15.0(@types/node@24.19.2)(typescript@6.0.3))(vite@8.3.5(@types/node@24.19.2)(esbuild@0.28.2)(jiti@2.7.0)(sass-embedded@1.104.1)(sass@1.90.0)(terser@5.46.1)(tsx@4.23.15)(yaml@2.9.0)): + vitest@5.0.5(@types/node@24.19.2)(@vitest/coverage-istanbul@5.0.5)(jsdom@27.4.0(supports-color@10.2.2))(msw@2.15.0(@types/node@24.19.2)(typescript@6.0.3))(vite@8.3.5(@types/node@24.19.2)(esbuild@0.28.2)(jiti@2.7.0)(sass-embedded@1.104.1)(sass@1.104.1)(terser@5.46.1)(tsx@4.23.15)(yaml@2.9.1)): dependencies: '@types/chai': 5.2.3 - '@vitest/mocker': 5.0.5(msw@2.15.0(@types/node@24.19.2)(typescript@6.0.3))(vite@8.3.5(@types/node@24.19.2)(esbuild@0.28.2)(jiti@2.7.0)(sass-embedded@1.104.1)(sass@1.90.0)(terser@5.46.1)(tsx@4.23.15)(yaml@2.9.0)) + '@vitest/mocker': 5.0.5(msw@2.15.0(@types/node@24.19.2)(typescript@6.0.3))(vite@8.3.5(@types/node@24.19.2)(esbuild@0.28.2)(jiti@2.7.0)(sass-embedded@1.104.1)(sass@1.104.1)(terser@5.46.1)(tsx@4.23.15)(yaml@2.9.1)) chai: 6.3.0 es-module-lexer: 2.3.2 expect-type: 1.4.0 @@ -47434,7 +48944,30 @@ snapshots: tinybench: 6.2.2 tinyexec: 1.3.1 tinyglobby: 0.2.17 - vite: 8.3.5(@types/node@24.19.2)(esbuild@0.28.2)(jiti@2.7.0)(sass-embedded@1.104.1)(sass@1.90.0)(terser@5.46.1)(tsx@4.23.15)(yaml@2.9.0) + vite: 8.3.5(@types/node@24.19.2)(esbuild@0.28.2)(jiti@2.7.0)(sass-embedded@1.104.1)(sass@1.104.1)(terser@5.46.1)(tsx@4.23.15)(yaml@2.9.1) + why-is-node-running: 3.2.1 + optionalDependencies: + '@types/node': 24.19.2 + '@vitest/coverage-istanbul': 5.0.5(vitest@5.0.5) + jsdom: 27.4.0(supports-color@10.2.2) + transitivePeerDependencies: + - msw + + vitest@5.0.5(@types/node@24.19.2)(@vitest/coverage-istanbul@5.0.5)(jsdom@27.4.0(supports-color@10.2.2))(msw@2.15.0(@types/node@24.19.2)(typescript@6.0.3))(vite@8.3.5(@types/node@24.19.2)(esbuild@0.28.2)(jiti@2.7.0)(sass-embedded@1.104.1)(sass@1.104.1)(terser@5.51.2)(tsx@4.23.15)(yaml@2.9.1)): + dependencies: + '@types/chai': 5.2.3 + '@vitest/mocker': 5.0.5(msw@2.15.0(@types/node@24.19.2)(typescript@6.0.3))(vite@8.3.5(@types/node@24.19.2)(esbuild@0.28.2)(jiti@2.7.0)(sass-embedded@1.104.1)(sass@1.104.1)(terser@5.51.2)(tsx@4.23.15)(yaml@2.9.1)) + chai: 6.3.0 + es-module-lexer: 2.3.2 + expect-type: 1.4.0 + magic-string: 1.4.3 + obug: 3.0.0 + picomatch: 4.0.7 + std-env: 4.3.0 + tinybench: 6.2.2 + tinyexec: 1.3.1 + tinyglobby: 0.2.17 + vite: 8.3.5(@types/node@24.19.2)(esbuild@0.28.2)(jiti@2.7.0)(sass-embedded@1.104.1)(sass@1.104.1)(terser@5.51.2)(tsx@4.23.15)(yaml@2.9.1) why-is-node-running: 3.2.1 optionalDependencies: '@types/node': 24.19.2 @@ -47513,7 +49046,6 @@ snapshots: jsdom: 27.4.0(supports-color@7.2.0) transitivePeerDependencies: - msw - optional: true vlq@1.0.1: {} @@ -48196,6 +49728,8 @@ snapshots: xdg-basedir@5.1.0: {} + xhr2@0.2.1: {} + xml-name-validator@5.0.0: {} xml2js@0.6.0: @@ -48219,6 +49753,8 @@ snapshots: yallist@3.1.1: {} + yallist@4.0.0: {} + yallist@5.0.0: {} yaml-language-server@1.23.0: @@ -48368,4 +49904,6 @@ snapshots: zone.js@0.15.0: optional: true + zone.js@0.16.1: {} + zwitch@2.0.4: {} diff --git a/pnpm-workspace.yaml b/pnpm-workspace.yaml index 5bb17fa9219..decf464fcf8 100644 --- a/pnpm-workspace.yaml +++ b/pnpm-workspace.yaml @@ -53,10 +53,14 @@ catalog: # angular '@analogjs/vite-plugin-angular': ^2.7.5 + '@angular/build': ^22.2.5 '@angular/common': ^22.2.4 '@angular/compiler': ^22.2.4 + '@angular/compiler-cli': ^22.2.4 '@angular/core': ^22.2.4 '@angular/platform-browser': ^22.2.4 + '@angular/platform-server': ^22.2.4 + '@angular/router': ^22.2.4 '@testing-library/angular': ^19.6.0 packages: diff --git a/scripts/angular-types/README.md b/scripts/angular-types/README.md new file mode 100644 index 00000000000..b0f51c980b3 --- /dev/null +++ b/scripts/angular-types/README.md @@ -0,0 +1,22 @@ +# Angular compiler compatibility + +The `types-20`, `types-21`, and `types-22` projects under `integrations/angular` +run Angular's compiler with supported Angular/TypeScript pairs: 20.1/5.8, 21/5.9, +and 22/6.0. They check the three Angular packages' source, the adapter's existing +`.test-d.ts` fixtures, and a shared consumer with a strictly checked template. + +Each project's `paths` select its own Angular installation, including imports +from the shared package source. Without those mappings, TypeScript would resolve +the Angular 22 development dependencies beside the packages instead of the +Angular version under test. Framework-independent dependencies use their built +declarations; Nx builds those dependencies before running the check. + +Run all three checks from the repository root: + +```sh +pnpm nx run-many --target=test:types --projects='@tanstack/query-integration-angular-types-*' +``` + +Runtime tests and the package-local type checks continue to use the default +Angular 22/TypeScript 6 toolchain. Unsupported TypeScript previews remain in the +framework-independent packages' matrix, not the Angular projects. diff --git a/scripts/angular-types/consumer.ts b/scripts/angular-types/consumer.ts new file mode 100644 index 00000000000..123251d185c --- /dev/null +++ b/scripts/angular-types/consumer.ts @@ -0,0 +1,50 @@ +import { Component } from '@angular/core' +import { + QueryClient, + injectMutation, + injectQuery, + provideTanStackQuery, +} from '@tanstack/angular-query' +import { withDevtools } from '@tanstack/angular-query-devtools' +import { withPersistQueryClient } from '@tanstack/angular-query-persist-client' +import type { ApplicationConfig } from '@angular/core' + +export const appConfig: ApplicationConfig = { + providers: [ + provideTanStackQuery( + () => new QueryClient(), + withDevtools(() => ({ loadDevtools: false })), + withPersistQueryClient(() => ({ + persistOptions: { + persister: { + persistClient: () => {}, + restoreClient: () => undefined, + removeClient: () => {}, + }, + }, + })), + ), + ], +} + +@Component({ + standalone: true, + template: ` + @if (query.isSuccess()) { + {{ query.data().title }} + } + + `, +}) +export class AngularCompatibilityComponent { + readonly query = injectQuery(() => ({ + queryKey: ['angular-compatibility'], + queryFn: () => Promise.resolve({ title: 'Angular Query' }), + })) + + readonly mutation = injectMutation(() => ({ + mutationFn: (title: string) => Promise.resolve({ title }), + })) +} diff --git a/scripts/angular-types/tsconfig.json b/scripts/angular-types/tsconfig.json new file mode 100644 index 00000000000..4377e81ab45 --- /dev/null +++ b/scripts/angular-types/tsconfig.json @@ -0,0 +1,29 @@ +{ + "extends": "../../tsconfig.json", + "compilerOptions": { + "composite": false, + "incremental": false, + "noEmit": true, + "emitDeclarationOnly": false, + "declaration": false, + "declarationMap": false, + "customConditions": [], + "experimentalDecorators": true, + "target": "ES2022" + }, + "angularCompilerOptions": { + "strictTemplates": true, + "strictInjectionParameters": true + }, + "include": [ + "consumer.ts", + "../../packages/angular-query/src/**/*.ts", + "../../packages/angular-query-devtools/src/**/*.ts", + "../../packages/angular-query-persist-client/src/**/*.ts" + ], + "exclude": [ + "../../packages/**/src/**/*.test.ts", + "../../packages/**/src/**/test-utils.ts", + "../../packages/**/src/**/*.tmp.ts" + ] +} diff --git a/scripts/generate-docs.ts b/scripts/generate-docs.ts index 1a8f92d29fa..13c27557031 100644 --- a/scripts/generate-docs.ts +++ b/scripts/generate-docs.ts @@ -217,9 +217,9 @@ async function generatePackageReferenceDocs(pkg: PackageReferenceDocsConfig) { // look like every page was intentionally deleted. Fail loudly instead — TypeDoc reports the // underlying diagnostics on stderr. // - // The most likely cause is TS6305: `angular-query-experimental` reaches `@tanstack/query-devtools` - // through a TypeScript project reference, so it consumes that package's emitted `.d.ts` rather than - // its source (which is solid-js JSX and cannot be compiled under Angular's tsconfig). The + // One known cause is TS6305: a package that reaches `@tanstack/query-devtools` through a + // TypeScript project reference consumes that package's emitted `.d.ts` rather than its source + // (which is solid-js JSX and cannot be compiled under another framework's tsconfig). The // `generate-docs` script builds it first, so this should only surface if that build was skipped. if (!project) { throw new Error( @@ -915,13 +915,8 @@ async function addReferenceDetails(outputDir: string) { const packages: Array = [ { - entryPoints: [ - resolve(__dirname, '../packages/angular-query-experimental/src/index.ts'), - ], - tsconfig: resolve( - __dirname, - '../packages/angular-query-experimental/tsconfig.json', - ), + entryPoints: [resolve(__dirname, '../packages/angular-query/src/index.ts')], + tsconfig: resolve(__dirname, '../packages/angular-query/tsconfig.json'), outputDir: resolve(__dirname, '../docs/framework/angular/reference'), }, {