@tanstack/angular-query-experimental 5.103.1 → 5.103.3

package/src/index.ts

@@ -0,0 +1,60 @@
+/* istanbul ignore file */
+
+// Re-export core
+export * from '@tanstack/query-core'
+
+export * from './types'
+
+export type {
+  DefinedInitialDataOptions,
+  UndefinedInitialDataOptions,
+  UnusedSkipTokenOptions,
+} from './query-options'
+export { queryOptions } from './query-options'
+
+export type { CreateMutationOptions } from './types'
+export { mutationOptions } from './mutation-options'
+
+export type {
+  DefinedInitialDataInfiniteOptions,
+  UndefinedInitialDataInfiniteOptions,
+  UnusedSkipTokenInfiniteOptions,
+} 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 type { InjectMutationOptions } from './inject-mutation'
+export { injectMutation } from './inject-mutation'
+
+export type { InjectMutationStateOptions } from './inject-mutation-state'
+export { injectMutationState } from './inject-mutation-state'
+
+export type { QueriesOptions, QueriesResults } 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 {
+  provideAngularQuery,
+  provideQueryClient,
+  provideTanStackQuery,
+  queryFeature,
+} from './providers'

package/src/infinite-query-options.ts

@@ -0,0 +1,354 @@
+import type {
+  DefaultError,
+  InfiniteData,
+  InitialDataFunction,
+  NonUndefinedGuard,
+  OmitKeyof,
+  QueryKey,
+  QueryKeyWithDataTag,
+  SkipToken,
+} from '@tanstack/query-core'
+import type { CreateInfiniteQueryOptions } from './types'
+
+/**
+ * The options accepted by the `infiniteQueryOptions` overload selected when no `initialData` is set — `data`
+ * may be `undefined` while the query is `pending`.
+ *
+ * @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 `InfiniteData<TQueryFnData>`,
+ * the shape of all fetched pages plus their page params.
+ * @template TQueryKey - The type of your `queryKey`.
+ * @template TPageParam - The type of the parameter passed to `queryFn` to fetch a given page.
+ */
+export type UndefinedInitialDataInfiniteOptions<
+  TQueryFnData,
+  TError = DefaultError,
+  TData = InfiniteData<TQueryFnData>,
+  TQueryKey extends QueryKey = QueryKey,
+  TPageParam = unknown,
+> = CreateInfiniteQueryOptions<
+  TQueryFnData,
+  TError,
+  TData,
+  TQueryKey,
+  TPageParam
+> & {
+  /**
+   * 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.
+   */
+  initialData?:
+    | undefined
+    | NonUndefinedGuard<InfiniteData<TQueryFnData, TPageParam>>
+    | InitialDataFunction<
+        NonUndefinedGuard<InfiniteData<TQueryFnData, TPageParam>>
+      >
+}
+
+/**
+ * The options accepted by the `infiniteQueryOptions` overload selected when no `initialData` is set and
+ * `queryFn` is not `skipToken` — same as {@link UndefinedInitialDataInfiniteOptions}, but `queryFn` may not be
+ * `skipToken`.
+ *
+ * @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 `InfiniteData<TQueryFnData>`,
+ * the shape of all fetched pages plus their page params.
+ * @template TQueryKey - The type of your `queryKey`.
+ * @template TPageParam - The type of the parameter passed to `queryFn` to fetch a given page.
+ */
+export type UnusedSkipTokenInfiniteOptions<
+  TQueryFnData,
+  TError = DefaultError,
+  TData = InfiniteData<TQueryFnData>,
+  TQueryKey extends QueryKey = QueryKey,
+  TPageParam = unknown,
+> = OmitKeyof<
+  CreateInfiniteQueryOptions<
+    TQueryFnData,
+    TError,
+    TData,
+    TQueryKey,
+    TPageParam
+  >,
+  'queryFn'
+> & {
+  /**
+   * `skipToken` is not allowed as a value here — this overload is selected when no `initialData` is set. If
+   * you don't intend to run the query yet, set `enabled: false` — omitting `queryFn` alone still triggers a
+   * fetch that fails with "Missing queryFn" unless `enabled` is `false` or a default query function has been
+   * defined. A default query function only supplies `queryFn`; it doesn't defer the fetch on its own.
+   */
+  queryFn?: Exclude<
+    CreateInfiniteQueryOptions<
+      TQueryFnData,
+      TError,
+      TData,
+      TQueryKey,
+      TPageParam
+    >['queryFn'],
+    SkipToken | undefined
+  >
+}
+
+/**
+ * The options accepted by the `infiniteQueryOptions` overload selected when `initialData` is set — `data` is
+ * never `undefined` (unless a `select` changes `TData` to include `undefined`).
+ *
+ * @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 `InfiniteData<TQueryFnData>`,
+ * the shape of all fetched pages plus their page params.
+ * @template TQueryKey - The type of your `queryKey`.
+ * @template TPageParam - The type of the parameter passed to `queryFn` to fetch a given page.
+ */
+export type DefinedInitialDataInfiniteOptions<
+  TQueryFnData,
+  TError = DefaultError,
+  TData = InfiniteData<TQueryFnData>,
+  TQueryKey extends QueryKey = QueryKey,
+  TPageParam = unknown,
+> = CreateInfiniteQueryOptions<
+  TQueryFnData,
+  TError,
+  TData,
+  TQueryKey,
+  TPageParam
+> & {
+  /**
+   * 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.
+   */
+  initialData:
+    | NonUndefinedGuard<InfiniteData<TQueryFnData, TPageParam>>
+    | (() => NonUndefinedGuard<InfiniteData<TQueryFnData, TPageParam>>)
+    | undefined
+}
+
+/**
+ * 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
+ * `queryClient.fetchInfiniteQuery`. `options.queryKey` is required and is the query key to generate options
+ * for.
+ *
+ * This overload is selected when `initialData` is set.
+ *
+ * @see {@link injectInfiniteQuery} to run an infinite query with these options.
+ * @param options - The {@link DefinedInitialDataInfiniteOptions} to use — everything you can pass to
+ * `injectInfiniteQuery`, with `initialData` set.
+ * @returns The same options object, typed so that `queryKey` carries the inferred data type.
+ * @remarks See {@link injectInfiniteQuery} for examples that fetch further pages, from a button click or
+ * automatically as the user scrolls.
+ *
+ * @example
+ * ```angular-ts
+ * import { infiniteQueryOptions, injectInfiniteQuery } from '@tanstack/angular-query-experimental'
+ *
+ * export const projectsOptions = infiniteQueryOptions({
+ *   queryKey: ['projects'],
+ *   queryFn: ({ pageParam }) => fetchProjects(pageParam),
+ *   initialPageParam: 0,
+ *   getNextPageParam: (lastPage) => lastPage.nextId,
+ *   initialData: { pages: [], pageParams: [] },
+ * })
+ *
+ * @Component({
+ *   selector: 'projects',
+ *   template: `
+ *     <!-- `projectsQuery.data()` is never `undefined`, thanks to `initialData` — even if a
+ *     refetch fails, so the list stays visible alongside the error. -->
+ *     <ul>
+ *       @for (page of projectsQuery.data().pages; track $index) {
+ *         @for (project of page.projects; track project.id) {
+ *           <li>{{ project.name }}</li>
+ *         }
+ *       }
+ *     </ul>
+ *   `,
+ * })
+ * export class Projects {
+ *   readonly projectsQuery = injectInfiniteQuery(() => projectsOptions)
+ * }
+ * ```
+ */
+export function infiniteQueryOptions<
+  TQueryFnData,
+  TError = DefaultError,
+  TData = InfiniteData<TQueryFnData>,
+  TQueryKey extends QueryKey = QueryKey,
+  TPageParam = unknown,
+>(
+  options: DefinedInitialDataInfiniteOptions<
+    TQueryFnData,
+    TError,
+    TData,
+    TQueryKey,
+    TPageParam
+  >,
+): DefinedInitialDataInfiniteOptions<
+  TQueryFnData,
+  TError,
+  TData,
+  TQueryKey,
+  TPageParam
+> &
+  QueryKeyWithDataTag<TQueryKey, InfiniteData<TQueryFnData>, TError>
+
+/**
+ * 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
+ * `queryClient.fetchInfiniteQuery`. `options.queryKey` is required and is the query key to generate options
+ * for.
+ *
+ * @returns The same options object, typed so that `queryKey` carries the inferred data type.
+ * @remarks See {@link injectInfiniteQuery} for examples that fetch further pages, from a button click or
+ * automatically as the user scrolls.
+ *
+ * @example
+ * A parameterized factory, so the same options object can be reused per `postId`:
+ * ```angular-ts
+ * import { infiniteQueryOptions, injectInfiniteQuery } from '@tanstack/angular-query-experimental'
+ *
+ * export const commentsOptions = (postId: string) =>
+ *   infiniteQueryOptions({
+ *     queryKey: ['post', postId, 'comments'],
+ *     queryFn: ({ pageParam }) => fetchComments(postId, pageParam),
+ *     initialPageParam: 0,
+ *     getNextPageParam: (lastPage) => lastPage.nextId,
+ *   })
+ *
+ * @Component({
+ *   selector: 'comments',
+ *   template: `
+ *     @if (commentsQuery.isPending()) {
+ *       Loading...
+ *     } @else if (commentsQuery.isError()) {
+ *       <span>Error: {{ commentsQuery.error()?.message }}</span>
+ *     } @else {
+ *       <ul>
+ *         @for (page of commentsQuery.data().pages; track $index) {
+ *           @for (comment of page.comments; track comment.id) {
+ *             <li>{{ comment.text }}</li>
+ *           }
+ *         }
+ *       </ul>
+ *     }
+ *   `,
+ * })
+ * export class Comments {
+ *   readonly postId = signal('1')
+ *   readonly commentsQuery = injectInfiniteQuery(() => commentsOptions(this.postId()))
+ * }
+ * ```
+ *
+ * @see {@link injectInfiniteQuery} to run an infinite query with these options.
+ * @param options - The {@link UnusedSkipTokenInfiniteOptions} to use — everything you can pass to
+ * `injectInfiniteQuery`.
+ */
+export function infiniteQueryOptions<
+  TQueryFnData,
+  TError = DefaultError,
+  TData = InfiniteData<TQueryFnData>,
+  TQueryKey extends QueryKey = QueryKey,
+  TPageParam = unknown,
+>(
+  options: UnusedSkipTokenInfiniteOptions<
+    TQueryFnData,
+    TError,
+    TData,
+    TQueryKey,
+    TPageParam
+  >,
+): UnusedSkipTokenInfiniteOptions<
+  TQueryFnData,
+  TError,
+  TData,
+  TQueryKey,
+  TPageParam
+> &
+  QueryKeyWithDataTag<TQueryKey, InfiniteData<TQueryFnData>, TError>
+
+/**
+ * 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
+ * `queryClient.fetchInfiniteQuery`. `options.queryKey` is required and is the query key to generate options
+ * for.
+ *
+ * @returns The same options object, typed so that `queryKey` carries the inferred data type.
+ * @remarks See {@link injectInfiniteQuery} for examples that fetch further pages (from a button click or
+ * automatically as the user scrolls) and that use `skipToken` to disable the query until `postId` is set.
+ *
+ * @example
+ * A parameterized factory, so the same options object can be reused per `postId`:
+ * ```angular-ts
+ * import { infiniteQueryOptions, injectInfiniteQuery } from '@tanstack/angular-query-experimental'
+ *
+ * export const commentsOptions = (postId: string) =>
+ *   infiniteQueryOptions({
+ *     queryKey: ['post', postId, 'comments'],
+ *     queryFn: ({ pageParam }) => fetchComments(postId, pageParam),
+ *     initialPageParam: 0,
+ *     getNextPageParam: (lastPage) => lastPage.nextId,
+ *   })
+ *
+ * @Component({
+ *   selector: 'comments',
+ *   template: `
+ *     @if (commentsQuery.isPending()) {
+ *       Loading...
+ *     } @else if (commentsQuery.isError()) {
+ *       <span>Error: {{ commentsQuery.error()?.message }}</span>
+ *     } @else {
+ *       <ul>
+ *         @for (page of commentsQuery.data().pages; track $index) {
+ *           @for (comment of page.comments; track comment.id) {
+ *             <li>{{ comment.text }}</li>
+ *           }
+ *         }
+ *       </ul>
+ *     }
+ *   `,
+ * })
+ * export class Comments {
+ *   readonly postId = signal('1')
+ *   readonly commentsQuery = injectInfiniteQuery(() => commentsOptions(this.postId()))
+ * }
+ * ```
+ *
+ * @see {@link injectInfiniteQuery} to run an infinite query with these options.
+ * @param options - The {@link UndefinedInitialDataInfiniteOptions} to use — everything you can pass to
+ * `injectInfiniteQuery`.
+ */
+export function infiniteQueryOptions<
+  TQueryFnData,
+  TError = DefaultError,
+  TData = InfiniteData<TQueryFnData>,
+  TQueryKey extends QueryKey = QueryKey,
+  TPageParam = unknown,
+>(
+  options: UndefinedInitialDataInfiniteOptions<
+    TQueryFnData,
+    TError,
+    TData,
+    TQueryKey,
+    TPageParam
+  >,
+): UndefinedInitialDataInfiniteOptions<
+  TQueryFnData,
+  TError,
+  TData,
+  TQueryKey,
+  TPageParam
+> &
+  QueryKeyWithDataTag<TQueryKey, InfiniteData<TQueryFnData>, TError>
+
+export function infiniteQueryOptions(options: unknown) {
+  return options
+}

package/src/inject-infinite-query.ts

@@ -0,0 +1,296 @@
+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'
+
+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 set on the options returned by `injectInfiniteQueryFn`,
+ * so the resulting `data` signal is never `undefined` (unless a `select` changes `TData` to include `undefined`).
+ *
+ * @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`.
+ * @param injectInfiniteQueryFn - A function returning the {@link DefinedInitialDataInfiniteOptions} to use —
+ * everything you can pass to `injectInfiniteQuery`, with `initialData` set. 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<TQueryFnData>` shape.
+ *
+ * @example
+ * ```angular-ts
+ * @Component({
+ *   selector: 'projects',
+ *   template: `
+ *     <!-- `projectsQuery.data()` is never `undefined`, thanks to `initialData` — even if a
+ *     refetch fails, so the list stays visible alongside the error. -->
+ *     <ul>
+ *       @for (page of projectsQuery.data().pages; track $index) {
+ *         @for (project of page.projects; track project.id) {
+ *           <li>{{ project.name }}</li>
+ *         }
+ *       }
+ *     </ul>
+ *   `,
+ * })
+ * 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<TQueryFnData>,
+  TQueryKey extends QueryKey = QueryKey,
+  TPageParam = unknown,
+>(
+  injectInfiniteQueryFn: () => DefinedInitialDataInfiniteOptions<
+    TQueryFnData,
+    TError,
+    TData,
+    TQueryKey,
+    TPageParam
+  >,
+  options?: InjectInfiniteQueryOptions,
+): DefinedCreateInfiniteQueryResult<TData, TError>
+
+/**
+ * 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".
+ *
+ * @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`.
+ * @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<TQueryFnData>` shape.
+ *
+ * @example
+ * Fetching the next page from a button click:
+ * ```angular-ts
+ * @Component({
+ *   selector: 'projects-list',
+ *   template: `
+ *     <ul>
+ *       @for (page of projectsQuery.data()?.pages; track $index) {
+ *         @for (project of page.projects; track project.id) {
+ *           <li>{{ project.name }}</li>
+ *         }
+ *       }
+ *     </ul>
+ *     <button
+ *       [disabled]="!projectsQuery.hasNextPage() || projectsQuery.isFetching()"
+ *       (click)="projectsQuery.fetchNextPage()"
+ *     >
+ *       Load More
+ *     </button>
+ *   `,
+ * })
+ * 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: `
+ *     <ul>
+ *       @for (page of projectsQuery.data()?.pages; track $index) {
+ *         @for (project of page.projects; track project.id) {
+ *           <li>{{ project.name }}</li>
+ *         }
+ *       }
+ *     </ul>
+ *     <div #sentinel>{{ projectsQuery.isFetchingNextPage() ? 'Loading more...' : '' }}</div>
+ *   `,
+ * })
+ * export class ProjectsList {
+ *   readonly sentinel = viewChild<ElementRef<HTMLElement>>('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()) {
+ *       <span>Error: {{ commentsQuery.error()?.message }}</span>
+ *     } @else {
+ *       <ul>
+ *         @for (page of commentsQuery.data().pages; track $index) {
+ *           @for (comment of page.comments; track comment.id) {
+ *             <li>{{ comment.text }}</li>
+ *           }
+ *         }
+ *       </ul>
+ *     }
+ *   `,
+ * })
+ * export class Comments {
+ *   readonly postId = signal<string | undefined>(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<TQueryFnData>,
+  TQueryKey extends QueryKey = QueryKey,
+  TPageParam = unknown,
+>(
+  injectInfiniteQueryFn: () => UndefinedInitialDataInfiniteOptions<
+    TQueryFnData,
+    TError,
+    TData,
+    TQueryKey,
+    TPageParam
+  >,
+  options?: InjectInfiniteQueryOptions,
+): CreateInfiniteQueryResult<TData, TError>
+
+/**
+ * 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<TQueryFnData>,
+  TQueryKey extends QueryKey = QueryKey,
+  TPageParam = unknown,
+>(
+  injectInfiniteQueryFn: () => CreateInfiniteQueryOptions<
+    TQueryFnData,
+    TError,
+    TData,
+    TQueryKey,
+    TPageParam
+  >,
+  options?: InjectInfiniteQueryOptions,
+): CreateInfiniteQueryResult<TData, TError>
+
+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,
+    ),
+  )
+}