@tanstack/angular-query-experimental 5.102.8 → 5.103.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/inject-query.d.ts CHANGED
@@ -11,113 +11,131 @@ export interface InjectQueryOptions {
11
11
  injector?: Injector;
12
12
  }
13
13
  /**
14
- * Injects a query: a declarative dependency on an asynchronous source of data that is tied to a unique key.
15
- *
16
- * **Basic example**
17
- * ```ts
18
- * class ServiceOrComponent {
19
- * query = injectQuery(() => ({
20
- * queryKey: ['repoData'],
21
- * queryFn: () =>
22
- * this.#http.get<Response>('https://api.github.com/repos/tanstack/query'),
23
- * }))
24
- * }
25
- * ```
14
+ * This overload is selected when `initialData` is set on the options returned by `injectQueryFn`, so the
15
+ * resulting `data` signal is never `undefined` (unless a `select` changes `TData` to include `undefined`).
26
16
  *
27
- * Similar to `computed` from Angular, the function passed to `injectQuery` will be run in the reactive context.
28
- * In the example below, the query will be automatically enabled and executed when the filter signal changes
29
- * to a truthy value. When the filter signal changes back to a falsy value, the query will be disabled.
30
- *
31
- * **Reactive example**
32
- * ```ts
33
- * class ServiceOrComponent {
34
- * filter = signal('')
17
+ * @see https://tanstack.com/query/latest/docs/framework/angular/guides/queries
18
+ * @see {@link queryOptions} to share these options between `injectQuery` and imperative APIs like
19
+ * `queryClient.fetchQuery`.
20
+ * @param injectQueryFn - A function returning the {@link DefinedInitialDataOptions} to use — everything you
21
+ * can pass to `injectQuery`, with `initialData` set. Similar to `computed` from Angular, this function runs
22
+ * in the reactive context, so signals read inside it (in `queryKey`, `enabled`, etc.) drive the query.
23
+ * @param options - Additional configuration
24
+ * @returns The query result, typed so that `data` is never `undefined` (unless a `select` changes `TData` to
25
+ * include `undefined`).
35
26
  *
36
- * todosQuery = injectQuery(() => ({
37
- * queryKey: ['todos', this.filter()],
38
- * queryFn: () => fetchTodos(this.filter()),
39
- * // Signals can be combined with expressions
40
- * enabled: !!this.filter(),
27
+ * @example
28
+ * ```angular-ts
29
+ * @Component({
30
+ * selector: 'posts',
31
+ * template: `
32
+ * <!-- `postsQuery.data()` is `Post[]`, never `undefined`, thanks to `initialData` — even if a
33
+ * refetch fails, so the list stays visible alongside the error. -->
34
+ * @if (postsQuery.isError()) {
35
+ * <span>Error: {{ postsQuery.error()?.message }}</span>
36
+ * }
37
+ * <ul>
38
+ * @for (post of postsQuery.data(); track post.id) {
39
+ * <li>{{ post.title }}</li>
40
+ * }
41
+ * </ul>
42
+ * `,
43
+ * })
44
+ * export class Posts {
45
+ * readonly postsQuery = injectQuery(() => ({
46
+ * queryKey: ['posts'],
47
+ * queryFn: fetchPosts,
48
+ * initialData: [],
41
49
  * }))
42
50
  * }
43
51
  * ```
44
- * @param injectQueryFn - A function that returns query options.
45
- * @param options - Additional configuration
46
- * @returns The query result.
47
- * @see https://tanstack.com/query/latest/docs/framework/angular/guides/queries
48
52
  */
49
53
  export declare function injectQuery<TQueryFnData = unknown, TError = DefaultError, TData = TQueryFnData, TQueryKey extends QueryKey = QueryKey>(injectQueryFn: () => DefinedInitialDataOptions<TQueryFnData, TError, TData, TQueryKey>, options?: InjectQueryOptions): DefinedCreateQueryResult<TData, TError>;
50
54
  /**
51
55
  * Injects a query: a declarative dependency on an asynchronous source of data that is tied to a unique key.
52
56
  *
53
- * **Basic example**
54
- * ```ts
55
- * class ServiceOrComponent {
56
- * query = injectQuery(() => ({
57
- * queryKey: ['repoData'],
58
- * queryFn: () =>
59
- * this.#http.get<Response>('https://api.github.com/repos/tanstack/query'),
57
+ * @see https://tanstack.com/query/latest/docs/framework/angular/guides/queries
58
+ * @see {@link queryOptions} to share these options between `injectQuery` and imperative APIs like
59
+ * `queryClient.fetchQuery`.
60
+ * @param injectQueryFn - A function returning the {@link UndefinedInitialDataOptions} to use — everything
61
+ * you can pass to `injectQuery`. Similar to `computed` from Angular, this function runs in the reactive
62
+ * context, so signals read inside it (in `queryKey`, `enabled`, etc.) drive the query.
63
+ * @param options - Additional configuration
64
+ * @returns The query result. `status()` is `'pending'` if there is no cached data to display, `'error'` if
65
+ * the last fetch attempt failed, or `'success'` if the query has data to display. `isPending`/`isSuccess`/
66
+ * `isError` are type-guard methods for convenience.
67
+ *
68
+ * @example
69
+ * ```angular-ts
70
+ * @Component({
71
+ * selector: 'posts',
72
+ * template: `
73
+ * @if (postsQuery.isPending()) {
74
+ * Loading...
75
+ * } @else if (postsQuery.isError()) {
76
+ * <span>Error: {{ postsQuery.error()?.message }}</span>
77
+ * } @else {
78
+ * <ul>
79
+ * @for (post of postsQuery.data(); track post.id) {
80
+ * <li>{{ post.title }}</li>
81
+ * }
82
+ * </ul>
83
+ * }
84
+ * `,
85
+ * })
86
+ * export class Posts {
87
+ * readonly postsQuery = injectQuery(() => ({
88
+ * queryKey: ['posts'],
89
+ * queryFn: fetchPosts,
60
90
  * }))
61
91
  * }
62
92
  * ```
63
93
  *
64
- * Similar to `computed` from Angular, the function passed to `injectQuery` will be run in the reactive context.
65
- * In the example below, the query will be automatically enabled and executed when the filter signal changes
66
- * to a truthy value. When the filter signal changes back to a falsy value, the query will be disabled.
67
- *
68
- * **Reactive example**
69
- * ```ts
70
- * class ServiceOrComponent {
71
- * filter = signal('')
94
+ * @example
95
+ * Similar to `computed` from Angular, the function passed to `injectQuery` runs in the reactive context. In
96
+ * the example below, the query is automatically enabled and executed when the filter signal changes to a
97
+ * truthy value. When the filter signal changes back to a falsy value, the query is disabled.
98
+ * ```angular-ts
99
+ * @Component({
100
+ * selector: 'posts',
101
+ * template: `
102
+ * <input [ngModel]="filter()" (ngModelChange)="filter.set($event)" />
103
+ * @if (postsQuery.isPending()) {
104
+ * Loading...
105
+ * } @else if (postsQuery.isError()) {
106
+ * <span>Error: {{ postsQuery.error()?.message }}</span>
107
+ * } @else {
108
+ * <ul>
109
+ * @for (post of postsQuery.data(); track post.id) {
110
+ * <li>{{ post.title }}</li>
111
+ * }
112
+ * </ul>
113
+ * }
114
+ * `,
115
+ * })
116
+ * export class Posts {
117
+ * readonly filter = signal('')
72
118
  *
73
- * todosQuery = injectQuery(() => ({
74
- * queryKey: ['todos', this.filter()],
75
- * queryFn: () => fetchTodos(this.filter()),
119
+ * readonly postsQuery = injectQuery(() => ({
120
+ * queryKey: ['posts', this.filter()],
121
+ * queryFn: () => fetchPosts(this.filter()),
76
122
  * // Signals can be combined with expressions
77
123
  * enabled: !!this.filter(),
78
124
  * }))
79
125
  * }
80
126
  * ```
81
- * @param injectQueryFn - A function that returns query options.
82
- * @param options - Additional configuration
83
- * @returns The query result.
84
- * @see https://tanstack.com/query/latest/docs/framework/angular/guides/queries
85
127
  */
86
128
  export declare function injectQuery<TQueryFnData = unknown, TError = DefaultError, TData = TQueryFnData, TQueryKey extends QueryKey = QueryKey>(injectQueryFn: () => UndefinedInitialDataOptions<TQueryFnData, TError, TData, TQueryKey>, options?: InjectQueryOptions): CreateQueryResult<TData, TError>;
87
129
  /**
88
- * Injects a query: a declarative dependency on an asynchronous source of data that is tied to a unique key.
89
- *
90
- * **Basic example**
91
- * ```ts
92
- * class ServiceOrComponent {
93
- * query = injectQuery(() => ({
94
- * queryKey: ['repoData'],
95
- * queryFn: () =>
96
- * this.#http.get<Response>('https://api.github.com/repos/tanstack/query'),
97
- * }))
98
- * }
99
- * ```
100
- *
101
- * Similar to `computed` from Angular, the function passed to `injectQuery` will be run in the reactive context.
102
- * In the example below, the query will be automatically enabled and executed when the filter signal changes
103
- * to a truthy value. When the filter signal changes back to a falsy value, the query will be disabled.
130
+ * This overload accepts the general {@link CreateQueryOptions} shape rather than the `initialData`-aware
131
+ * overloads above, so whether `data` is defined can't be inferred from the call site — useful when wrapping
132
+ * `injectQuery` in your own helper function that forwards caller-provided options.
104
133
  *
105
- * **Reactive example**
106
- * ```ts
107
- * class ServiceOrComponent {
108
- * filter = signal('')
109
- *
110
- * todosQuery = injectQuery(() => ({
111
- * queryKey: ['todos', this.filter()],
112
- * queryFn: () => fetchTodos(this.filter()),
113
- * // Signals can be combined with expressions
114
- * enabled: !!this.filter(),
115
- * }))
116
- * }
117
- * ```
118
- * @param injectQueryFn - A function that returns query options.
134
+ * @see https://tanstack.com/query/latest/docs/framework/angular/guides/queries
135
+ * @param injectQueryFn - A function that returns query options. Similar to `computed` from Angular, this
136
+ * function runs in the reactive context, so signals read inside it (in `queryKey`, `enabled`, etc.) drive
137
+ * the query.
119
138
  * @param options - Additional configuration
120
139
  * @returns The query result.
121
- * @see https://tanstack.com/query/latest/docs/framework/angular/guides/queries
122
140
  */
123
141
  export declare function injectQuery<TQueryFnData = unknown, TError = DefaultError, TData = TQueryFnData, TQueryKey extends QueryKey = QueryKey>(injectQueryFn: () => CreateQueryOptions<TQueryFnData, TError, TData, TQueryKey>, options?: InjectQueryOptions): CreateQueryResult<TData, TError>;
@@ -1 +1 @@
1
- {"version":3,"file":"inject-query.mjs","sources":["../src/inject-query.ts"],"sourcesContent":["import { QueryObserver } from '@tanstack/query-core'\nimport {\n Injector,\n assertInInjectionContext,\n inject,\n runInInjectionContext,\n} from '@angular/core'\nimport { createBaseQuery } from './create-base-query'\nimport type { DefaultError, QueryKey } from '@tanstack/query-core'\nimport type {\n CreateQueryOptions,\n CreateQueryResult,\n DefinedCreateQueryResult,\n} from './types'\nimport type {\n DefinedInitialDataOptions,\n UndefinedInitialDataOptions,\n} from './query-options'\n\nexport interface InjectQueryOptions {\n /**\n * The `Injector` in which to create the query.\n *\n * If this is not provided, the current injection context will be used instead (via `inject`).\n */\n injector?: Injector\n}\n\n/**\n * Injects a query: a declarative dependency on an asynchronous source of data that is tied to a unique key.\n *\n * **Basic example**\n * ```ts\n * class ServiceOrComponent {\n * query = injectQuery(() => ({\n * queryKey: ['repoData'],\n * queryFn: () =>\n * this.#http.get<Response>('https://api.github.com/repos/tanstack/query'),\n * }))\n * }\n * ```\n *\n * Similar to `computed` from Angular, the function passed to `injectQuery` will be run in the reactive context.\n * In the example below, the query will be automatically enabled and executed when the filter signal changes\n * to a truthy value. When the filter signal changes back to a falsy value, the query will be disabled.\n *\n * **Reactive example**\n * ```ts\n * class ServiceOrComponent {\n * filter = signal('')\n *\n * todosQuery = injectQuery(() => ({\n * queryKey: ['todos', this.filter()],\n * queryFn: () => fetchTodos(this.filter()),\n * // Signals can be combined with expressions\n * enabled: !!this.filter(),\n * }))\n * }\n * ```\n * @param injectQueryFn - A function that returns query options.\n * @param options - Additional configuration\n * @returns The query result.\n * @see https://tanstack.com/query/latest/docs/framework/angular/guides/queries\n */\nexport function injectQuery<\n TQueryFnData = unknown,\n TError = DefaultError,\n TData = TQueryFnData,\n TQueryKey extends QueryKey = QueryKey,\n>(\n injectQueryFn: () => DefinedInitialDataOptions<\n TQueryFnData,\n TError,\n TData,\n TQueryKey\n >,\n options?: InjectQueryOptions,\n): DefinedCreateQueryResult<TData, TError>\n\n/**\n * Injects a query: a declarative dependency on an asynchronous source of data that is tied to a unique key.\n *\n * **Basic example**\n * ```ts\n * class ServiceOrComponent {\n * query = injectQuery(() => ({\n * queryKey: ['repoData'],\n * queryFn: () =>\n * this.#http.get<Response>('https://api.github.com/repos/tanstack/query'),\n * }))\n * }\n * ```\n *\n * Similar to `computed` from Angular, the function passed to `injectQuery` will be run in the reactive context.\n * In the example below, the query will be automatically enabled and executed when the filter signal changes\n * to a truthy value. When the filter signal changes back to a falsy value, the query will be disabled.\n *\n * **Reactive example**\n * ```ts\n * class ServiceOrComponent {\n * filter = signal('')\n *\n * todosQuery = injectQuery(() => ({\n * queryKey: ['todos', this.filter()],\n * queryFn: () => fetchTodos(this.filter()),\n * // Signals can be combined with expressions\n * enabled: !!this.filter(),\n * }))\n * }\n * ```\n * @param injectQueryFn - A function that returns query options.\n * @param options - Additional configuration\n * @returns The query result.\n * @see https://tanstack.com/query/latest/docs/framework/angular/guides/queries\n */\nexport function injectQuery<\n TQueryFnData = unknown,\n TError = DefaultError,\n TData = TQueryFnData,\n TQueryKey extends QueryKey = QueryKey,\n>(\n injectQueryFn: () => UndefinedInitialDataOptions<\n TQueryFnData,\n TError,\n TData,\n TQueryKey\n >,\n options?: InjectQueryOptions,\n): CreateQueryResult<TData, TError>\n\n/**\n * Injects a query: a declarative dependency on an asynchronous source of data that is tied to a unique key.\n *\n * **Basic example**\n * ```ts\n * class ServiceOrComponent {\n * query = injectQuery(() => ({\n * queryKey: ['repoData'],\n * queryFn: () =>\n * this.#http.get<Response>('https://api.github.com/repos/tanstack/query'),\n * }))\n * }\n * ```\n *\n * Similar to `computed` from Angular, the function passed to `injectQuery` will be run in the reactive context.\n * In the example below, the query will be automatically enabled and executed when the filter signal changes\n * to a truthy value. When the filter signal changes back to a falsy value, the query will be disabled.\n *\n * **Reactive example**\n * ```ts\n * class ServiceOrComponent {\n * filter = signal('')\n *\n * todosQuery = injectQuery(() => ({\n * queryKey: ['todos', this.filter()],\n * queryFn: () => fetchTodos(this.filter()),\n * // Signals can be combined with expressions\n * enabled: !!this.filter(),\n * }))\n * }\n * ```\n * @param injectQueryFn - A function that returns query options.\n * @param options - Additional configuration\n * @returns The query result.\n * @see https://tanstack.com/query/latest/docs/framework/angular/guides/queries\n */\nexport function injectQuery<\n TQueryFnData = unknown,\n TError = DefaultError,\n TData = TQueryFnData,\n TQueryKey extends QueryKey = QueryKey,\n>(\n injectQueryFn: () => CreateQueryOptions<\n TQueryFnData,\n TError,\n TData,\n TQueryKey\n >,\n options?: InjectQueryOptions,\n): CreateQueryResult<TData, TError>\n\n/**\n * Injects a query: a declarative dependency on an asynchronous source of data that is tied to a unique key.\n *\n * **Basic example**\n * ```ts\n * class ServiceOrComponent {\n * query = injectQuery(() => ({\n * queryKey: ['repoData'],\n * queryFn: () =>\n * this.#http.get<Response>('https://api.github.com/repos/tanstack/query'),\n * }))\n * }\n * ```\n *\n * Similar to `computed` from Angular, the function passed to `injectQuery` will be run in the reactive context.\n * In the example below, the query will be automatically enabled and executed when the filter signal changes\n * to a truthy value. When the filter signal changes back to a falsy value, the query will be disabled.\n *\n * **Reactive example**\n * ```ts\n * class ServiceOrComponent {\n * filter = signal('')\n *\n * todosQuery = injectQuery(() => ({\n * queryKey: ['todos', this.filter()],\n * queryFn: () => fetchTodos(this.filter()),\n * // Signals can be combined with expressions\n * enabled: !!this.filter(),\n * }))\n * }\n * ```\n * @param injectQueryFn - A function that returns query options.\n * @param options - Additional configuration\n * @returns The query result.\n * @see https://tanstack.com/query/latest/docs/framework/angular/guides/queries\n */\nexport function injectQuery(\n injectQueryFn: () => CreateQueryOptions,\n options?: InjectQueryOptions,\n) {\n !options?.injector && assertInInjectionContext(injectQuery)\n return runInInjectionContext(options?.injector ?? inject(Injector), () =>\n createBaseQuery(injectQueryFn, QueryObserver),\n ) as unknown as CreateQueryResult\n}\n"],"names":[],"mappings":";;;AAyNO,SAAS,YACd,eACA,SACA;AACA,IAAC,mCAAS,aAAY,yBAAyB,WAAW;AAC1D,SAAO;AAAA,KAAsB,mCAAS,aAAY,OAAO,QAAQ;AAAA,IAAG,MAClE,gBAAgB,eAAe,aAAa;AAAA,EAAA;AAEhD;"}
1
+ {"version":3,"file":"inject-query.mjs","sources":["../src/inject-query.ts"],"sourcesContent":["import { QueryObserver } from '@tanstack/query-core'\nimport {\n Injector,\n assertInInjectionContext,\n inject,\n runInInjectionContext,\n} from '@angular/core'\nimport { createBaseQuery } from './create-base-query'\nimport type { DefaultError, QueryKey } from '@tanstack/query-core'\nimport type {\n CreateQueryOptions,\n CreateQueryResult,\n DefinedCreateQueryResult,\n} from './types'\nimport type {\n DefinedInitialDataOptions,\n UndefinedInitialDataOptions,\n} from './query-options'\n\nexport interface InjectQueryOptions {\n /**\n * The `Injector` in which to create the query.\n *\n * If this is not provided, the current injection context will be used instead (via `inject`).\n */\n injector?: Injector\n}\n\n/**\n * This overload is selected when `initialData` is set on the options returned by `injectQueryFn`, so the\n * resulting `data` signal is never `undefined` (unless a `select` changes `TData` to include `undefined`).\n *\n * @see https://tanstack.com/query/latest/docs/framework/angular/guides/queries\n * @see {@link queryOptions} to share these options between `injectQuery` and imperative APIs like\n * `queryClient.fetchQuery`.\n * @param injectQueryFn - A function returning the {@link DefinedInitialDataOptions} to use — everything you\n * can pass to `injectQuery`, with `initialData` set. Similar to `computed` from Angular, this function runs\n * in the reactive context, so signals read inside it (in `queryKey`, `enabled`, etc.) drive the query.\n * @param options - Additional configuration\n * @returns The query result, typed so that `data` is never `undefined` (unless a `select` changes `TData` to\n * include `undefined`).\n *\n * @example\n * ```angular-ts\n * @Component({\n * selector: 'posts',\n * template: `\n * <!-- `postsQuery.data()` is `Post[]`, never `undefined`, thanks to `initialData` — even if a\n * refetch fails, so the list stays visible alongside the error. -->\n * @if (postsQuery.isError()) {\n * <span>Error: {{ postsQuery.error()?.message }}</span>\n * }\n * <ul>\n * @for (post of postsQuery.data(); track post.id) {\n * <li>{{ post.title }}</li>\n * }\n * </ul>\n * `,\n * })\n * export class Posts {\n * readonly postsQuery = injectQuery(() => ({\n * queryKey: ['posts'],\n * queryFn: fetchPosts,\n * initialData: [],\n * }))\n * }\n * ```\n */\nexport function injectQuery<\n TQueryFnData = unknown,\n TError = DefaultError,\n TData = TQueryFnData,\n TQueryKey extends QueryKey = QueryKey,\n>(\n injectQueryFn: () => DefinedInitialDataOptions<\n TQueryFnData,\n TError,\n TData,\n TQueryKey\n >,\n options?: InjectQueryOptions,\n): DefinedCreateQueryResult<TData, TError>\n\n/**\n * Injects a query: a declarative dependency on an asynchronous source of data that is tied to a unique key.\n *\n * @see https://tanstack.com/query/latest/docs/framework/angular/guides/queries\n * @see {@link queryOptions} to share these options between `injectQuery` and imperative APIs like\n * `queryClient.fetchQuery`.\n * @param injectQueryFn - A function returning the {@link UndefinedInitialDataOptions} to use — everything\n * you can pass to `injectQuery`. Similar to `computed` from Angular, this function runs in the reactive\n * context, so signals read inside it (in `queryKey`, `enabled`, etc.) drive the query.\n * @param options - Additional configuration\n * @returns The query result. `status()` is `'pending'` if there is no cached data to display, `'error'` if\n * the last fetch attempt failed, or `'success'` if the query has data to display. `isPending`/`isSuccess`/\n * `isError` are type-guard methods for convenience.\n *\n * @example\n * ```angular-ts\n * @Component({\n * selector: 'posts',\n * template: `\n * @if (postsQuery.isPending()) {\n * Loading...\n * } @else if (postsQuery.isError()) {\n * <span>Error: {{ postsQuery.error()?.message }}</span>\n * } @else {\n * <ul>\n * @for (post of postsQuery.data(); track post.id) {\n * <li>{{ post.title }}</li>\n * }\n * </ul>\n * }\n * `,\n * })\n * export class Posts {\n * readonly postsQuery = injectQuery(() => ({\n * queryKey: ['posts'],\n * queryFn: fetchPosts,\n * }))\n * }\n * ```\n *\n * @example\n * Similar to `computed` from Angular, the function passed to `injectQuery` runs in the reactive context. In\n * the example below, the query is automatically enabled and executed when the filter signal changes to a\n * truthy value. When the filter signal changes back to a falsy value, the query is disabled.\n * ```angular-ts\n * @Component({\n * selector: 'posts',\n * template: `\n * <input [ngModel]=\"filter()\" (ngModelChange)=\"filter.set($event)\" />\n * @if (postsQuery.isPending()) {\n * Loading...\n * } @else if (postsQuery.isError()) {\n * <span>Error: {{ postsQuery.error()?.message }}</span>\n * } @else {\n * <ul>\n * @for (post of postsQuery.data(); track post.id) {\n * <li>{{ post.title }}</li>\n * }\n * </ul>\n * }\n * `,\n * })\n * export class Posts {\n * readonly filter = signal('')\n *\n * readonly postsQuery = injectQuery(() => ({\n * queryKey: ['posts', this.filter()],\n * queryFn: () => fetchPosts(this.filter()),\n * // Signals can be combined with expressions\n * enabled: !!this.filter(),\n * }))\n * }\n * ```\n */\nexport function injectQuery<\n TQueryFnData = unknown,\n TError = DefaultError,\n TData = TQueryFnData,\n TQueryKey extends QueryKey = QueryKey,\n>(\n injectQueryFn: () => UndefinedInitialDataOptions<\n TQueryFnData,\n TError,\n TData,\n TQueryKey\n >,\n options?: InjectQueryOptions,\n): CreateQueryResult<TData, TError>\n\n/**\n * This overload accepts the general {@link CreateQueryOptions} shape rather than the `initialData`-aware\n * overloads above, so whether `data` is defined can't be inferred from the call site — useful when wrapping\n * `injectQuery` in your own helper function that forwards caller-provided options.\n *\n * @see https://tanstack.com/query/latest/docs/framework/angular/guides/queries\n * @param injectQueryFn - A function that returns query options. Similar to `computed` from Angular, this\n * function runs in the reactive context, so signals read inside it (in `queryKey`, `enabled`, etc.) drive\n * the query.\n * @param options - Additional configuration\n * @returns The query result.\n */\nexport function injectQuery<\n TQueryFnData = unknown,\n TError = DefaultError,\n TData = TQueryFnData,\n TQueryKey extends QueryKey = QueryKey,\n>(\n injectQueryFn: () => CreateQueryOptions<\n TQueryFnData,\n TError,\n TData,\n TQueryKey\n >,\n options?: InjectQueryOptions,\n): CreateQueryResult<TData, TError>\n\nexport function injectQuery(\n injectQueryFn: () => CreateQueryOptions,\n options?: InjectQueryOptions,\n) {\n !options?.injector && assertInInjectionContext(injectQuery)\n return runInInjectionContext(options?.injector ?? inject(Injector), () =>\n createBaseQuery(injectQueryFn, QueryObserver),\n ) as unknown as CreateQueryResult\n}\n"],"names":[],"mappings":";;;AAuMO,SAAS,YACd,eACA,SACA;AACA,IAAC,mCAAS,aAAY,yBAAyB,WAAW;AAC1D,SAAO;AAAA,KAAsB,mCAAS,aAAY,OAAO,QAAQ;AAAA,IAAG,MAClE,gBAAgB,eAAe,aAAa;AAAA,EAAA;AAEhD;"}
@@ -1,39 +1,84 @@
1
1
  import { DefaultError, WithRequired } from '@tanstack/query-core';
2
2
  import { CreateMutationOptions } from './types.js';
3
3
  /**
4
- * Allows sharing and re-using mutation options in a type-safe way.
4
+ * You can generally pass everything to `mutationOptions` that you can also pass to `injectMutation`. A
5
+ * `mutationKey` is required on this overload so the mutation can be looked up later, e.g. with
6
+ * `injectMutationState`.
5
7
  *
6
- * **Example**
8
+ * @see {@link injectMutation} to run the mutation these options describe.
9
+ * @param options - The mutation options to use, identical to what you'd pass to `injectMutation`, with a
10
+ * required `mutationKey`.
11
+ * @returns The same options object, unchanged.
7
12
  *
8
- * ```ts
13
+ * @example
14
+ * Looking the mutation up elsewhere via its `mutationKey`, e.g. for a global "saving…" indicator:
15
+ * ```angular-ts
16
+ * import { mutationOptions, injectMutationState } from '@tanstack/angular-query-experimental'
17
+ *
18
+ * const createPostOptions = mutationOptions({
19
+ * mutationKey: ['posts', 'create'],
20
+ * mutationFn: createPost,
21
+ * })
22
+ *
23
+ * @Component({
24
+ * selector: 'saving-indicator',
25
+ * template: `
26
+ * @if (isCreatingPost()) {
27
+ * <span>Saving…</span>
28
+ * }
29
+ * `,
30
+ * })
31
+ * export class SavingIndicator {
32
+ * readonly #pendingCreates = injectMutationState(() => ({
33
+ * filters: { mutationKey: createPostOptions.mutationKey, status: 'pending' },
34
+ * }))
35
+ * readonly isCreatingPost = computed(() => this.#pendingCreates().length > 0)
36
+ * }
37
+ * ```
38
+ */
39
+ export declare function mutationOptions<TData = unknown, TError = DefaultError, TVariables = void, TOnMutateResult = unknown>(options: WithRequired<CreateMutationOptions<TData, TError, TVariables, TOnMutateResult>, 'mutationKey'>): WithRequired<CreateMutationOptions<TData, TError, TVariables, TOnMutateResult>, 'mutationKey'>;
40
+ /**
41
+ * You can generally pass everything to `mutationOptions` that you can also pass to `injectMutation`. No
42
+ * `mutationKey` is required on this overload — use this when you don't need to target the mutation via a
43
+ * `mutationKey` filter later (e.g. with `injectMutationState`); it can still be observed through other
44
+ * filters, such as `status`.
45
+ *
46
+ * @see {@link injectMutation} to run the mutation these options describe.
47
+ * @param options - The mutation options to use, identical to what you'd pass to `injectMutation`, without a
48
+ * `mutationKey`.
49
+ * @returns The same options object, unchanged.
50
+ * @remarks See the other overload's example for looking a mutation up via `injectMutationState`.
51
+ *
52
+ * @example
53
+ * Sharing options across services, so `QueriesService` stays the single place a mutation is defined:
54
+ * ```angular-ts
55
+ * import { mutationOptions, injectMutation } from '@tanstack/angular-query-experimental'
56
+ *
57
+ * @Injectable({ providedIn: 'root' })
9
58
  * export class QueriesService {
10
- * private http = inject(HttpClient)
11
- * private queryClient = inject(QueryClient)
59
+ * readonly #queryClient = inject(QueryClient)
12
60
  *
13
61
  * updatePost(id: number) {
14
62
  * return mutationOptions({
15
- * mutationFn: (post: Post) => Promise.resolve(post),
16
- * mutationKey: ["updatePost", id],
17
- * onSuccess: (newPost) => {
18
- * // ^? newPost: Post
19
- * this.queryClient.setQueryData(["posts", id], newPost)
20
- * },
21
- * });
63
+ * mutationFn: (post: Partial<Post>) => putPost(id, post),
64
+ * onSuccess: (newPost) => this.#queryClient.setQueryData(['posts', id], newPost),
65
+ * })
22
66
  * }
23
67
  * }
24
68
  *
25
- * class ComponentOrService {
26
- * queries = inject(QueriesService)
27
- * id = signal(0)
28
- * mutation = injectMutation(() => this.queries.updatePost(this.id()))
69
+ * @Component({
70
+ * selector: 'post',
71
+ * template: `<button (click)="save()">Save</button>`,
72
+ * })
73
+ * export class Post {
74
+ * readonly queries = inject(QueriesService)
75
+ * readonly id = signal(0)
76
+ * readonly updatePostMutation = injectMutation(() => this.queries.updatePost(this.id()))
29
77
  *
30
78
  * save() {
31
- * this.mutation.mutate({ title: 'New Title' })
79
+ * this.updatePostMutation.mutate({ title: 'New Title' })
32
80
  * }
33
81
  * }
34
82
  * ```
35
- * @param options - The mutation options.
36
- * @returns Mutation options.
37
83
  */
38
- export declare function mutationOptions<TData = unknown, TError = DefaultError, TVariables = void, TOnMutateResult = unknown>(options: WithRequired<CreateMutationOptions<TData, TError, TVariables, TOnMutateResult>, 'mutationKey'>): WithRequired<CreateMutationOptions<TData, TError, TVariables, TOnMutateResult>, 'mutationKey'>;
39
84
  export declare function mutationOptions<TData = unknown, TError = DefaultError, TVariables = void, TOnMutateResult = unknown>(options: Omit<CreateMutationOptions<TData, TError, TVariables, TOnMutateResult>, 'mutationKey'>): Omit<CreateMutationOptions<TData, TError, TVariables, TOnMutateResult>, 'mutationKey'>;
@@ -1 +1 @@
1
- {"version":3,"file":"mutation-options.mjs","sources":["../src/mutation-options.ts"],"sourcesContent":["import type { DefaultError, WithRequired } from '@tanstack/query-core'\nimport type { CreateMutationOptions } from './types'\n\n/**\n * Allows sharing and re-using mutation options in a type-safe way.\n *\n * **Example**\n *\n * ```ts\n * export class QueriesService {\n * private http = inject(HttpClient)\n * private queryClient = inject(QueryClient)\n *\n * updatePost(id: number) {\n * return mutationOptions({\n * mutationFn: (post: Post) => Promise.resolve(post),\n * mutationKey: [\"updatePost\", id],\n * onSuccess: (newPost) => {\n * // ^? newPost: Post\n * this.queryClient.setQueryData([\"posts\", id], newPost)\n * },\n * });\n * }\n * }\n *\n * class ComponentOrService {\n * queries = inject(QueriesService)\n * id = signal(0)\n * mutation = injectMutation(() => this.queries.updatePost(this.id()))\n *\n * save() {\n * this.mutation.mutate({ title: 'New Title' })\n * }\n * }\n * ```\n * @param options - The mutation options.\n * @returns Mutation options.\n */\nexport function mutationOptions<\n TData = unknown,\n TError = DefaultError,\n TVariables = void,\n TOnMutateResult = unknown,\n>(\n options: WithRequired<\n CreateMutationOptions<TData, TError, TVariables, TOnMutateResult>,\n 'mutationKey'\n >,\n): WithRequired<\n CreateMutationOptions<TData, TError, TVariables, TOnMutateResult>,\n 'mutationKey'\n>\nexport function mutationOptions<\n TData = unknown,\n TError = DefaultError,\n TVariables = void,\n TOnMutateResult = unknown,\n>(\n options: Omit<\n CreateMutationOptions<TData, TError, TVariables, TOnMutateResult>,\n 'mutationKey'\n >,\n): Omit<\n CreateMutationOptions<TData, TError, TVariables, TOnMutateResult>,\n 'mutationKey'\n>\n\n/**\n * Allows sharing and re-using mutation options in a type-safe way.\n *\n * **Example**\n *\n * ```ts\n * export class QueriesService {\n * private http = inject(HttpClient)\n * private queryClient = inject(QueryClient)\n *\n * updatePost(id: number) {\n * return mutationOptions({\n * mutationFn: (post: Post) => Promise.resolve(post),\n * mutationKey: [\"updatePost\", id],\n * onSuccess: (newPost) => {\n * // ^? newPost: Post\n * this.queryClient.setQueryData([\"posts\", id], newPost)\n * },\n * });\n * }\n * }\n *\n * class ComponentOrService {\n * queries = inject(QueriesService)\n * id = signal(0)\n * mutation = injectMutation(() => this.queries.updatePost(this.id()))\n *\n * save() {\n * this.mutation.mutate({ title: 'New Title' })\n * }\n * }\n * ```\n * @param options - The mutation options.\n * @returns Mutation options.\n */\nexport function mutationOptions<\n TData = unknown,\n TError = DefaultError,\n TVariables = void,\n TOnMutateResult = unknown,\n>(\n options: CreateMutationOptions<TData, TError, TVariables, TOnMutateResult>,\n): CreateMutationOptions<TData, TError, TVariables, TOnMutateResult> {\n return options\n}\n"],"names":[],"mappings":"AAsGO,SAAS,gBAMd,SACmE;AACnE,SAAO;AACT;"}
1
+ {"version":3,"file":"mutation-options.mjs","sources":["../src/mutation-options.ts"],"sourcesContent":["import type { DefaultError, WithRequired } from '@tanstack/query-core'\nimport type { CreateMutationOptions } from './types'\n\n/**\n * You can generally pass everything to `mutationOptions` that you can also pass to `injectMutation`. A\n * `mutationKey` is required on this overload so the mutation can be looked up later, e.g. with\n * `injectMutationState`.\n *\n * @see {@link injectMutation} to run the mutation these options describe.\n * @param options - The mutation options to use, identical to what you'd pass to `injectMutation`, with a\n * required `mutationKey`.\n * @returns The same options object, unchanged.\n *\n * @example\n * Looking the mutation up elsewhere via its `mutationKey`, e.g. for a global \"saving…\" indicator:\n * ```angular-ts\n * import { mutationOptions, injectMutationState } from '@tanstack/angular-query-experimental'\n *\n * const createPostOptions = mutationOptions({\n * mutationKey: ['posts', 'create'],\n * mutationFn: createPost,\n * })\n *\n * @Component({\n * selector: 'saving-indicator',\n * template: `\n * @if (isCreatingPost()) {\n * <span>Saving…</span>\n * }\n * `,\n * })\n * export class SavingIndicator {\n * readonly #pendingCreates = injectMutationState(() => ({\n * filters: { mutationKey: createPostOptions.mutationKey, status: 'pending' },\n * }))\n * readonly isCreatingPost = computed(() => this.#pendingCreates().length > 0)\n * }\n * ```\n */\nexport function mutationOptions<\n TData = unknown,\n TError = DefaultError,\n TVariables = void,\n TOnMutateResult = unknown,\n>(\n options: WithRequired<\n CreateMutationOptions<TData, TError, TVariables, TOnMutateResult>,\n 'mutationKey'\n >,\n): WithRequired<\n CreateMutationOptions<TData, TError, TVariables, TOnMutateResult>,\n 'mutationKey'\n>\n/**\n * You can generally pass everything to `mutationOptions` that you can also pass to `injectMutation`. No\n * `mutationKey` is required on this overload — use this when you don't need to target the mutation via a\n * `mutationKey` filter later (e.g. with `injectMutationState`); it can still be observed through other\n * filters, such as `status`.\n *\n * @see {@link injectMutation} to run the mutation these options describe.\n * @param options - The mutation options to use, identical to what you'd pass to `injectMutation`, without a\n * `mutationKey`.\n * @returns The same options object, unchanged.\n * @remarks See the other overload's example for looking a mutation up via `injectMutationState`.\n *\n * @example\n * Sharing options across services, so `QueriesService` stays the single place a mutation is defined:\n * ```angular-ts\n * import { mutationOptions, injectMutation } from '@tanstack/angular-query-experimental'\n *\n * @Injectable({ providedIn: 'root' })\n * export class QueriesService {\n * readonly #queryClient = inject(QueryClient)\n *\n * updatePost(id: number) {\n * return mutationOptions({\n * mutationFn: (post: Partial<Post>) => putPost(id, post),\n * onSuccess: (newPost) => this.#queryClient.setQueryData(['posts', id], newPost),\n * })\n * }\n * }\n *\n * @Component({\n * selector: 'post',\n * template: `<button (click)=\"save()\">Save</button>`,\n * })\n * export class Post {\n * readonly queries = inject(QueriesService)\n * readonly id = signal(0)\n * readonly updatePostMutation = injectMutation(() => this.queries.updatePost(this.id()))\n *\n * save() {\n * this.updatePostMutation.mutate({ title: 'New Title' })\n * }\n * }\n * ```\n */\nexport function mutationOptions<\n TData = unknown,\n TError = DefaultError,\n TVariables = void,\n TOnMutateResult = unknown,\n>(\n options: Omit<\n CreateMutationOptions<TData, TError, TVariables, TOnMutateResult>,\n 'mutationKey'\n >,\n): Omit<\n CreateMutationOptions<TData, TError, TVariables, TOnMutateResult>,\n 'mutationKey'\n>\nexport function mutationOptions<\n TData = unknown,\n TError = DefaultError,\n TVariables = void,\n TOnMutateResult = unknown,\n>(\n options: CreateMutationOptions<TData, TError, TVariables, TOnMutateResult>,\n): CreateMutationOptions<TData, TError, TVariables, TOnMutateResult> {\n return options\n}\n"],"names":[],"mappings":"AA+GO,SAAS,gBAMd,SACmE;AACnE,SAAO;AACT;"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@tanstack/angular-query-experimental",
3
- "version": "5.102.8",
3
+ "version": "5.103.1",
4
4
  "description": "Signals for managing, caching and syncing asynchronous and remote data in Angular",
5
5
  "author": "Arnoud de Vries",
6
6
  "license": "MIT",
@@ -61,10 +61,10 @@
61
61
  },
62
62
  "sideEffects": false,
63
63
  "dependencies": {
64
- "@tanstack/query-core": "5.102.8"
64
+ "@tanstack/query-core": "5.103.1"
65
65
  },
66
66
  "optionalDependencies": {
67
- "@tanstack/query-devtools": "5.102.8"
67
+ "@tanstack/query-devtools": "5.103.1"
68
68
  },
69
69
  "peerDependencies": {
70
70
  "@angular/common": ">=16.0.0",
package/providers.d.ts CHANGED
@@ -2,39 +2,45 @@ import { InjectionToken, Provider } from '@angular/core';
2
2
  import { QueryClient } from '@tanstack/query-core';
3
3
  /**
4
4
  * Usually {@link provideTanStackQuery} is used once to set up TanStack Query and the
5
- * {@link https://tanstack.com/query/latest/docs/reference/QueryClient|QueryClient}
6
- * for the entire application. Internally it calls `provideQueryClient`.
7
- * You can use `provideQueryClient` to provide a different `QueryClient` instance for a part
8
- * of the application or for unit testing purposes.
5
+ * [`QueryClient`](https://tanstack.com/query/latest/docs/reference/QueryClient) for the entire application —
6
+ * it calls `provideQueryClient` internally. Use `provideQueryClient` directly to provide a different
7
+ * `QueryClient` instance for part of the application, or for unit testing.
9
8
  * @param queryClient - A `QueryClient` instance, or an `InjectionToken` which provides a `QueryClient`.
10
- * @returns a provider object that can be used to provide the `QueryClient` instance.
9
+ * @returns A provider object that can be used to provide the `QueryClient` instance.
10
+ *
11
+ * @example
12
+ * Providing a test-only `QueryClient` in a component test, without wiring up `provideTanStackQuery`'s other
13
+ * defaults:
14
+ * ```ts
15
+ * TestBed.configureTestingModule({
16
+ * providers: [provideQueryClient(new QueryClient())],
17
+ * })
18
+ * ```
11
19
  */
12
20
  export declare function provideQueryClient(queryClient: QueryClient | InjectionToken<QueryClient>): Provider;
13
21
  /**
14
- * Sets up providers necessary to enable TanStack Query functionality for Angular applications.
15
- *
16
- * Allows configuring a `QueryClient` and optional features such as developer tools.
22
+ * Sets up providers necessary to enable TanStack Query functionality for Angular applications. Allows
23
+ * configuring a `QueryClient` and optional features such as developer tools.
17
24
  *
18
- * **Example - standalone**
25
+ * @see https://tanstack.com/query/v5/docs/framework/angular/quick-start
26
+ * @see {@link withDevtools}
27
+ * @param queryClient - A `QueryClient` instance, or an `InjectionToken` which provides a `QueryClient`.
28
+ * @param features - Optional features to configure additional Query functionality.
29
+ * @returns A set of providers to set up TanStack Query.
19
30
  *
31
+ * @example
20
32
  * ```ts
21
- * import {
22
- * provideTanStackQuery,
23
- * QueryClient,
24
- * } from '@tanstack/angular-query-experimental'
33
+ * import { provideTanStackQuery, QueryClient } from '@tanstack/angular-query-experimental'
25
34
  *
26
35
  * bootstrapApplication(AppComponent, {
27
36
  * providers: [provideTanStackQuery(new QueryClient())],
28
37
  * })
29
38
  * ```
30
39
  *
31
- * **Example - NgModule-based**
32
- *
40
+ * @example
41
+ * The same, in an `NgModule`-based application:
33
42
  * ```ts
34
- * import {
35
- * provideTanStackQuery,
36
- * QueryClient,
37
- * } from '@tanstack/angular-query-experimental'
43
+ * import { provideTanStackQuery, QueryClient } from '@tanstack/angular-query-experimental'
38
44
  *
39
45
  * @NgModule({
40
46
  * declarations: [AppComponent],
@@ -45,26 +51,26 @@ export declare function provideQueryClient(queryClient: QueryClient | InjectionT
45
51
  * export class AppModule {}
46
52
  * ```
47
53
  *
48
- * You can also enable optional developer tools by adding `withDevtools`. By
49
- * default the tools will then be loaded when your app is in development mode.
54
+ * @example
55
+ * Enabling optional developer tools by adding `withDevtools` — by default, the tools are then loaded when
56
+ * your app is in development mode:
50
57
  * ```ts
51
58
  * import {
52
59
  * provideTanStackQuery,
53
- * withDevtools
60
+ * withDevtools,
54
61
  * QueryClient,
55
62
  * } from '@tanstack/angular-query-experimental'
56
63
  *
57
- * bootstrapApplication(AppComponent,
58
- * {
59
- * providers: [
60
- * provideTanStackQuery(new QueryClient(), withDevtools())
61
- * ]
62
- * }
63
- * )
64
+ * bootstrapApplication(AppComponent, {
65
+ * providers: [provideTanStackQuery(new QueryClient(), withDevtools())],
66
+ * })
64
67
  * ```
65
68
  *
66
- * **Example: using an InjectionToken**
67
- *
69
+ * @example
70
+ * Using an `InjectionToken` for the `QueryClient` — an advanced optimization that lets TanStack Query be
71
+ * absent from the main application bundle, useful for including it on lazy-loaded routes only while still
72
+ * sharing a `QueryClient`. This is a small optimization; for most applications it's preferable to provide
73
+ * the `QueryClient` in the main application config, as in the examples above:
68
74
  * ```ts
69
75
  * export const MY_QUERY_CLIENT = new InjectionToken('', {
70
76
  * factory: () => new QueryClient(),
@@ -73,24 +79,15 @@ export declare function provideQueryClient(queryClient: QueryClient | InjectionT
73
79
  * // In a lazy loaded route or lazy loaded component's providers array:
74
80
  * providers: [provideTanStackQuery(MY_QUERY_CLIENT)]
75
81
  * ```
76
- * Using an InjectionToken for the QueryClient is an advanced optimization which allows TanStack Query to be absent from the main application bundle.
77
- * This can be beneficial if you want to include TanStack Query on lazy loaded routes only while still sharing a `QueryClient`.
78
- *
79
- * Note that this is a small optimization and for most applications it's preferable to provide the `QueryClient` in the main application config.
80
- * @param queryClient - A `QueryClient` instance, or an `InjectionToken` which provides a `QueryClient`.
81
- * @param features - Optional features to configure additional Query functionality.
82
- * @returns A set of providers to set up TanStack Query.
83
- * @see https://tanstack.com/query/v5/docs/framework/angular/quick-start
84
- * @see withDevtools
85
82
  */
86
83
  export declare function provideTanStackQuery(queryClient: QueryClient | InjectionToken<QueryClient>, ...features: Array<QueryFeatures>): Array<Provider>;
87
84
  /**
88
85
  * Sets up providers necessary to enable TanStack Query functionality for Angular applications.
89
86
  *
90
87
  * Allows configuring a `QueryClient`.
88
+ * @see https://tanstack.com/query/v5/docs/framework/angular/quick-start
91
89
  * @param queryClient - A `QueryClient` instance.
92
90
  * @returns A set of providers to set up TanStack Query.
93
- * @see https://tanstack.com/query/v5/docs/framework/angular/quick-start
94
91
  * @deprecated Use `provideTanStackQuery` instead.
95
92
  */
96
93
  export declare function provideAngularQuery(queryClient: QueryClient): Array<Provider>;
@@ -105,8 +102,8 @@ export interface QueryFeature<TFeatureKind extends QueryFeatureKind> {
105
102
  }
106
103
  /**
107
104
  * Helper function to create an object that represents a Query feature.
108
- * @param kind -
109
- * @param providers -
105
+ * @param kind - The kind of feature, e.g. `'Devtools'`.
106
+ * @param providers - The Angular providers this feature contributes to `provideTanStackQuery`.
110
107
  * @returns A Query feature.
111
108
  */
112
109
  export declare function queryFeature<TFeatureKind extends QueryFeatureKind>(kind: TFeatureKind, providers: Array<Provider>): QueryFeature<TFeatureKind>;
package/providers.mjs.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"providers.mjs","sources":["../src/providers.ts"],"sourcesContent":["import { DestroyRef, InjectionToken, inject } from '@angular/core'\nimport { QueryClient } from '@tanstack/query-core'\nimport type { Provider } from '@angular/core'\n\n/**\n * Usually {@link provideTanStackQuery} is used once to set up TanStack Query and the\n * {@link https://tanstack.com/query/latest/docs/reference/QueryClient|QueryClient}\n * for the entire application. Internally it calls `provideQueryClient`.\n * You can use `provideQueryClient` to provide a different `QueryClient` instance for a part\n * of the application or for unit testing purposes.\n * @param queryClient - A `QueryClient` instance, or an `InjectionToken` which provides a `QueryClient`.\n * @returns a provider object that can be used to provide the `QueryClient` instance.\n */\nexport function provideQueryClient(\n queryClient: QueryClient | InjectionToken<QueryClient>,\n): Provider {\n return {\n provide: QueryClient,\n useFactory: () => {\n const client =\n queryClient instanceof InjectionToken\n ? inject(queryClient)\n : queryClient\n // Unmount the query client on injector destroy\n inject(DestroyRef).onDestroy(() => client.unmount())\n client.mount()\n return client\n },\n }\n}\n\n/**\n * Sets up providers necessary to enable TanStack Query functionality for Angular applications.\n *\n * Allows configuring a `QueryClient` and optional features such as developer tools.\n *\n * **Example - standalone**\n *\n * ```ts\n * import {\n * provideTanStackQuery,\n * QueryClient,\n * } from '@tanstack/angular-query-experimental'\n *\n * bootstrapApplication(AppComponent, {\n * providers: [provideTanStackQuery(new QueryClient())],\n * })\n * ```\n *\n * **Example - NgModule-based**\n *\n * ```ts\n * import {\n * provideTanStackQuery,\n * QueryClient,\n * } from '@tanstack/angular-query-experimental'\n *\n * @NgModule({\n * declarations: [AppComponent],\n * imports: [BrowserModule],\n * providers: [provideTanStackQuery(new QueryClient())],\n * bootstrap: [AppComponent],\n * })\n * export class AppModule {}\n * ```\n *\n * You can also enable optional developer tools by adding `withDevtools`. By\n * default the tools will then be loaded when your app is in development mode.\n * ```ts\n * import {\n * provideTanStackQuery,\n * withDevtools\n * QueryClient,\n * } from '@tanstack/angular-query-experimental'\n *\n * bootstrapApplication(AppComponent,\n * {\n * providers: [\n * provideTanStackQuery(new QueryClient(), withDevtools())\n * ]\n * }\n * )\n * ```\n *\n * **Example: using an InjectionToken**\n *\n * ```ts\n * export const MY_QUERY_CLIENT = new InjectionToken('', {\n * factory: () => new QueryClient(),\n * })\n *\n * // In a lazy loaded route or lazy loaded component's providers array:\n * providers: [provideTanStackQuery(MY_QUERY_CLIENT)]\n * ```\n * Using an InjectionToken for the QueryClient is an advanced optimization which allows TanStack Query to be absent from the main application bundle.\n * This can be beneficial if you want to include TanStack Query on lazy loaded routes only while still sharing a `QueryClient`.\n *\n * Note that this is a small optimization and for most applications it's preferable to provide the `QueryClient` in the main application config.\n * @param queryClient - A `QueryClient` instance, or an `InjectionToken` which provides a `QueryClient`.\n * @param features - Optional features to configure additional Query functionality.\n * @returns A set of providers to set up TanStack Query.\n * @see https://tanstack.com/query/v5/docs/framework/angular/quick-start\n * @see withDevtools\n */\nexport function provideTanStackQuery(\n queryClient: QueryClient | InjectionToken<QueryClient>,\n ...features: Array<QueryFeatures>\n): Array<Provider> {\n return [\n provideQueryClient(queryClient),\n features.map((feature) => feature.ɵproviders),\n ]\n}\n\n/**\n * Sets up providers necessary to enable TanStack Query functionality for Angular applications.\n *\n * Allows configuring a `QueryClient`.\n * @param queryClient - A `QueryClient` instance.\n * @returns A set of providers to set up TanStack Query.\n * @see https://tanstack.com/query/v5/docs/framework/angular/quick-start\n * @deprecated Use `provideTanStackQuery` instead.\n */\nexport function provideAngularQuery(queryClient: QueryClient): Array<Provider> {\n return provideTanStackQuery(queryClient)\n}\n\nconst queryFeatures = ['Devtools', 'PersistQueryClient'] as const\n\ntype QueryFeatureKind = (typeof queryFeatures)[number]\n\n/**\n * Helper type to represent a Query feature.\n */\nexport interface QueryFeature<TFeatureKind extends QueryFeatureKind> {\n ɵkind: TFeatureKind\n ɵproviders: Array<Provider>\n}\n\n/**\n * Helper function to create an object that represents a Query feature.\n * @param kind -\n * @param providers -\n * @returns A Query feature.\n */\nexport function queryFeature<TFeatureKind extends QueryFeatureKind>(\n kind: TFeatureKind,\n providers: Array<Provider>,\n): QueryFeature<TFeatureKind> {\n return { ɵkind: kind, ɵproviders: providers }\n}\n\n/**\n * A type alias that represents a feature which enables developer tools.\n * The type is used to describe the return value of the `withDevtools` function.\n * @see {@link withDevtools}\n */\nexport type DevtoolsFeature = QueryFeature<'Devtools'>\n\n/**\n * A type alias that represents a feature which enables persistence.\n * The type is used to describe the return value of the `withPersistQueryClient` function.\n */\nexport type PersistQueryClientFeature = QueryFeature<'PersistQueryClient'>\n\n/**\n * A type alias that represents all Query features available for use with `provideTanStackQuery`.\n * Features can be enabled by adding special functions to the `provideTanStackQuery` call.\n * See documentation for each symbol to find corresponding function name. See also `provideTanStackQuery`\n * documentation on how to use those functions.\n * @see {@link provideTanStackQuery}\n */\nexport type QueryFeatures = DevtoolsFeature | PersistQueryClientFeature\n"],"names":[],"mappings":";;AAaO,SAAS,mBACd,aACU;AACV,SAAO;AAAA,IACL,SAAS;AAAA,IACT,YAAY,MAAM;AAChB,YAAM,SACJ,uBAAuB,iBACnB,OAAO,WAAW,IAClB;AAEN,aAAO,UAAU,EAAE,UAAU,MAAM,OAAO,SAAS;AACnD,aAAO,MAAA;AACP,aAAO;AAAA,IACT;AAAA,EAAA;AAEJ;AA2EO,SAAS,qBACd,gBACG,UACc;AACjB,SAAO;AAAA,IACL,mBAAmB,WAAW;AAAA,IAC9B,SAAS,IAAI,CAAC,YAAY,QAAQ,UAAU;AAAA,EAAA;AAEhD;AAWO,SAAS,oBAAoB,aAA2C;AAC7E,SAAO,qBAAqB,WAAW;AACzC;AAoBO,SAAS,aACd,MACA,WAC4B;AAC5B,SAAO,EAAE,OAAO,MAAM,YAAY,UAAA;AACpC;"}
1
+ {"version":3,"file":"providers.mjs","sources":["../src/providers.ts"],"sourcesContent":["import { DestroyRef, InjectionToken, inject } from '@angular/core'\nimport { QueryClient } from '@tanstack/query-core'\nimport type { Provider } from '@angular/core'\n\n/**\n * Usually {@link provideTanStackQuery} is used once to set up TanStack Query and the\n * [`QueryClient`](https://tanstack.com/query/latest/docs/reference/QueryClient) for the entire application —\n * it calls `provideQueryClient` internally. Use `provideQueryClient` directly to provide a different\n * `QueryClient` instance for part of the application, or for unit testing.\n * @param queryClient - A `QueryClient` instance, or an `InjectionToken` which provides a `QueryClient`.\n * @returns A provider object that can be used to provide the `QueryClient` instance.\n *\n * @example\n * Providing a test-only `QueryClient` in a component test, without wiring up `provideTanStackQuery`'s other\n * defaults:\n * ```ts\n * TestBed.configureTestingModule({\n * providers: [provideQueryClient(new QueryClient())],\n * })\n * ```\n */\nexport function provideQueryClient(\n queryClient: QueryClient | InjectionToken<QueryClient>,\n): Provider {\n return {\n provide: QueryClient,\n useFactory: () => {\n const client =\n queryClient instanceof InjectionToken\n ? inject(queryClient)\n : queryClient\n // Unmount the query client on injector destroy\n inject(DestroyRef).onDestroy(() => client.unmount())\n client.mount()\n return client\n },\n }\n}\n\n/**\n * Sets up providers necessary to enable TanStack Query functionality for Angular applications. Allows\n * configuring a `QueryClient` and optional features such as developer tools.\n *\n * @see https://tanstack.com/query/v5/docs/framework/angular/quick-start\n * @see {@link withDevtools}\n * @param queryClient - A `QueryClient` instance, or an `InjectionToken` which provides a `QueryClient`.\n * @param features - Optional features to configure additional Query functionality.\n * @returns A set of providers to set up TanStack Query.\n *\n * @example\n * ```ts\n * import { provideTanStackQuery, QueryClient } from '@tanstack/angular-query-experimental'\n *\n * bootstrapApplication(AppComponent, {\n * providers: [provideTanStackQuery(new QueryClient())],\n * })\n * ```\n *\n * @example\n * The same, in an `NgModule`-based application:\n * ```ts\n * import { provideTanStackQuery, QueryClient } from '@tanstack/angular-query-experimental'\n *\n * @NgModule({\n * declarations: [AppComponent],\n * imports: [BrowserModule],\n * providers: [provideTanStackQuery(new QueryClient())],\n * bootstrap: [AppComponent],\n * })\n * export class AppModule {}\n * ```\n *\n * @example\n * Enabling optional developer tools by adding `withDevtools` — by default, the tools are then loaded when\n * your app is in development mode:\n * ```ts\n * import {\n * provideTanStackQuery,\n * withDevtools,\n * QueryClient,\n * } from '@tanstack/angular-query-experimental'\n *\n * bootstrapApplication(AppComponent, {\n * providers: [provideTanStackQuery(new QueryClient(), withDevtools())],\n * })\n * ```\n *\n * @example\n * Using an `InjectionToken` for the `QueryClient` — an advanced optimization that lets TanStack Query be\n * absent from the main application bundle, useful for including it on lazy-loaded routes only while still\n * sharing a `QueryClient`. This is a small optimization; for most applications it's preferable to provide\n * the `QueryClient` in the main application config, as in the examples above:\n * ```ts\n * export const MY_QUERY_CLIENT = new InjectionToken('', {\n * factory: () => new QueryClient(),\n * })\n *\n * // In a lazy loaded route or lazy loaded component's providers array:\n * providers: [provideTanStackQuery(MY_QUERY_CLIENT)]\n * ```\n */\nexport function provideTanStackQuery(\n queryClient: QueryClient | InjectionToken<QueryClient>,\n ...features: Array<QueryFeatures>\n): Array<Provider> {\n return [\n provideQueryClient(queryClient),\n features.map((feature) => feature.ɵproviders),\n ]\n}\n\n/**\n * Sets up providers necessary to enable TanStack Query functionality for Angular applications.\n *\n * Allows configuring a `QueryClient`.\n * @see https://tanstack.com/query/v5/docs/framework/angular/quick-start\n * @param queryClient - A `QueryClient` instance.\n * @returns A set of providers to set up TanStack Query.\n * @deprecated Use `provideTanStackQuery` instead.\n */\nexport function provideAngularQuery(queryClient: QueryClient): Array<Provider> {\n return provideTanStackQuery(queryClient)\n}\n\nconst queryFeatures = ['Devtools', 'PersistQueryClient'] as const\n\ntype QueryFeatureKind = (typeof queryFeatures)[number]\n\n/**\n * Helper type to represent a Query feature.\n */\nexport interface QueryFeature<TFeatureKind extends QueryFeatureKind> {\n ɵkind: TFeatureKind\n ɵproviders: Array<Provider>\n}\n\n/**\n * Helper function to create an object that represents a Query feature.\n * @param kind - The kind of feature, e.g. `'Devtools'`.\n * @param providers - The Angular providers this feature contributes to `provideTanStackQuery`.\n * @returns A Query feature.\n */\nexport function queryFeature<TFeatureKind extends QueryFeatureKind>(\n kind: TFeatureKind,\n providers: Array<Provider>,\n): QueryFeature<TFeatureKind> {\n return { ɵkind: kind, ɵproviders: providers }\n}\n\n/**\n * A type alias that represents a feature which enables developer tools.\n * The type is used to describe the return value of the `withDevtools` function.\n * @see {@link withDevtools}\n */\nexport type DevtoolsFeature = QueryFeature<'Devtools'>\n\n/**\n * A type alias that represents a feature which enables persistence.\n * The type is used to describe the return value of the `withPersistQueryClient` function.\n */\nexport type PersistQueryClientFeature = QueryFeature<'PersistQueryClient'>\n\n/**\n * A type alias that represents all Query features available for use with `provideTanStackQuery`.\n * Features can be enabled by adding special functions to the `provideTanStackQuery` call.\n * See documentation for each symbol to find corresponding function name. See also `provideTanStackQuery`\n * documentation on how to use those functions.\n * @see {@link provideTanStackQuery}\n */\nexport type QueryFeatures = DevtoolsFeature | PersistQueryClientFeature\n"],"names":[],"mappings":";;AAqBO,SAAS,mBACd,aACU;AACV,SAAO;AAAA,IACL,SAAS;AAAA,IACT,YAAY,MAAM;AAChB,YAAM,SACJ,uBAAuB,iBACnB,OAAO,WAAW,IAClB;AAEN,aAAO,UAAU,EAAE,UAAU,MAAM,OAAO,SAAS;AACnD,aAAO,MAAA;AACP,aAAO;AAAA,IACT;AAAA,EAAA;AAEJ;AAgEO,SAAS,qBACd,gBACG,UACc;AACjB,SAAO;AAAA,IACL,mBAAmB,WAAW;AAAA,IAC9B,SAAS,IAAI,CAAC,YAAY,QAAQ,UAAU;AAAA,EAAA;AAEhD;AAWO,SAAS,oBAAoB,aAA2C;AAC7E,SAAO,qBAAqB,WAAW;AACzC;AAoBO,SAAS,aACd,MACA,WAC4B;AAC5B,SAAO,EAAE,OAAO,MAAM,YAAY,UAAA;AACpC;"}