@tanstack/svelte-query 6.1.48 → 6.2.1

package/dist/useHydrate.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useHydrate.d.ts","sourceRoot":"","sources":["../src/useHydrate.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,cAAc,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAA;AAEvE,wBAAgB,UAAU,CACxB,KAAK,CAAC,EAAE,OAAO,EACf,OAAO,CAAC,EAAE,cAAc,EACxB,WAAW,CAAC,EAAE,WAAW,QAO1B"}
+{"version":3,"file":"useHydrate.d.ts","sourceRoot":"","sources":["../src/useHydrate.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,cAAc,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAA;AAEvE;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;AACH,wBAAgB,UAAU,CACxB,KAAK,CAAC,EAAE,OAAO,EACf,OAAO,CAAC,EAAE,cAAc,EACxB,WAAW,CAAC,EAAE,WAAW,QAO1B"}

package/dist/useHydrate.js

@@ -1,5 +1,33 @@
 import { hydrate } from '@tanstack/query-core';
 import { useQueryClient } from './useQueryClient.js';
+/**
+ * Adds a previously dehydrated `state` into the `queryClient` (from the nearest context, or the one
+ * passed explicitly). If the client already contains data, the new queries will be intelligently merged based
+ * on update timestamp. `HydrationBoundary` wraps this — use it directly only if you need to hydrate from your
+ * own component instead.
+ *
+ * @param state - The dehydrated state to hydrate into the cache, as produced by `dehydrate`.
+ * @param options - {@link HydrateOptions} to control the hydration.
+ * @param queryClient - Use this to use a custom `QueryClient`. Otherwise, the one from the nearest context will
+ * be used.
+ *
+ * @example
+ * Server-side prefetch handed off to the client via `dehydrate` — `dehydratedState` would typically come
+ * from a server load function that prefetched with `queryClient.query` and called `dehydrate(queryClient)`:
+ * ```svelte
+ * <script lang="ts">
+ *   import { HydrationBoundary } from '@tanstack/svelte-query'
+ *   import type { DehydratedState } from '@tanstack/svelte-query'
+ *   import Posts from './Posts.svelte'
+ *
+ *   let { dehydratedState }: { dehydratedState: DehydratedState } = $props()
+ * </script>
+ *
+ * <HydrationBoundary state={dehydratedState}>
+ *   <Posts />
+ * </HydrationBoundary>
+ * ```
+ */
 export function useHydrate(state, options, queryClient) {
     const client = useQueryClient(queryClient);
     if (state) {

package/dist/useIsFetching.svelte.d.ts

@@ -1,4 +1,39 @@
 import { ReactiveValue } from './containers.svelte.js';
 import type { QueryClient, QueryFilters } from '@tanstack/query-core';
+/**
+ * @param filters - {@link QueryFilters} to narrow down which queries to count. Omit to count every fetching
+ * query.
+ * @param queryClient - Use this to use a custom `QueryClient`. Otherwise, the one from the nearest context will
+ * be used.
+ * @returns A reactive value — read `.current` to get how many matching queries are currently fetching.
+ *
+ * @example
+ * ```svelte
+ * <script lang="ts">
+ *   import { useIsFetching } from '@tanstack/svelte-query'
+ *
+ *   // How many queries matching the posts prefix are fetching?
+ *   const isFetchingPosts = useIsFetching({ queryKey: ['posts'] })
+ * </script>
+ *
+ * {#if isFetchingPosts.current}
+ *   <span>Refreshing posts...</span>
+ * {/if}
+ * ```
+ *
+ * @example
+ * A global loading indicator for any query fetching in the background, not just the ones on screen:
+ * ```svelte
+ * <script lang="ts">
+ *   import { useIsFetching } from '@tanstack/svelte-query'
+ *
+ *   const isFetching = useIsFetching()
+ * </script>
+ *
+ * {#if isFetching.current}
+ *   <div>Queries are fetching in the background...</div>
+ * {/if}
+ * ```
+ */
 export declare function useIsFetching(filters?: QueryFilters, queryClient?: QueryClient): ReactiveValue<number>;
 //# sourceMappingURL=useIsFetching.svelte.d.ts.map

package/dist/useIsFetching.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useIsFetching.svelte.d.ts","sourceRoot":"","sources":["../src/useIsFetching.svelte.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,wBAAwB,CAAA;AAEtD,OAAO,KAAK,EAAE,WAAW,EAAE,YAAY,EAAE,MAAM,sBAAsB,CAAA;AAErE,wBAAgB,aAAa,CAC3B,OAAO,CAAC,EAAE,YAAY,EACtB,WAAW,CAAC,EAAE,WAAW,GACxB,aAAa,CAAC,MAAM,CAAC,CAQvB"}
+{"version":3,"file":"useIsFetching.svelte.d.ts","sourceRoot":"","sources":["../src/useIsFetching.svelte.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,wBAAwB,CAAA;AAEtD,OAAO,KAAK,EAAE,WAAW,EAAE,YAAY,EAAE,MAAM,sBAAsB,CAAA;AAErE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkCG;AACH,wBAAgB,aAAa,CAC3B,OAAO,CAAC,EAAE,YAAY,EACtB,WAAW,CAAC,EAAE,WAAW,GACxB,aAAa,CAAC,MAAM,CAAC,CAQvB"}

package/dist/useIsFetching.svelte.js

@@ -1,5 +1,40 @@
 import { ReactiveValue } from './containers.svelte.js';
 import { useQueryClient } from './useQueryClient.js';
+/**
+ * @param filters - {@link QueryFilters} to narrow down which queries to count. Omit to count every fetching
+ * query.
+ * @param queryClient - Use this to use a custom `QueryClient`. Otherwise, the one from the nearest context will
+ * be used.
+ * @returns A reactive value — read `.current` to get how many matching queries are currently fetching.
+ *
+ * @example
+ * ```svelte
+ * <script lang="ts">
+ *   import { useIsFetching } from '@tanstack/svelte-query'
+ *
+ *   // How many queries matching the posts prefix are fetching?
+ *   const isFetchingPosts = useIsFetching({ queryKey: ['posts'] })
+ * </script>
+ *
+ * {#if isFetchingPosts.current}
+ *   <span>Refreshing posts...</span>
+ * {/if}
+ * ```
+ *
+ * @example
+ * A global loading indicator for any query fetching in the background, not just the ones on screen:
+ * ```svelte
+ * <script lang="ts">
+ *   import { useIsFetching } from '@tanstack/svelte-query'
+ *
+ *   const isFetching = useIsFetching()
+ * </script>
+ *
+ * {#if isFetching.current}
+ *   <div>Queries are fetching in the background...</div>
+ * {/if}
+ * ```
+ */
 export function useIsFetching(filters, queryClient) {
     const client = useQueryClient(queryClient);
     const queryCache = client.getQueryCache();

package/dist/useIsMutating.svelte.d.ts

@@ -1,4 +1,27 @@
 import { ReactiveValue } from './containers.svelte.js';
 import type { MutationFilters, QueryClient } from '@tanstack/query-core';
+/**
+ * `useIsMutating` is an optional hook that returns the `number` of mutations that your application is
+ * running (useful for app-wide loading indicators).
+ *
+ * @param filters - {@link MutationFilters} to narrow down which mutations to count.
+ * @param queryClient - Use this to use a custom `QueryClient`. Otherwise, the one from the nearest context will
+ * be used.
+ * @returns A reactive value — read `.current` to get how many matching mutations are currently running.
+ *
+ * @example
+ * ```svelte
+ * <script lang="ts">
+ *   import { useIsMutating } from '@tanstack/svelte-query'
+ *
+ *   // How many mutations matching the posts prefix are in progress?
+ *   const isMutatingPosts = useIsMutating({ mutationKey: ['posts'] })
+ * </script>
+ *
+ * {#if isMutatingPosts.current}
+ *   <span>Saving posts...</span>
+ * {/if}
+ * ```
+ */
 export declare function useIsMutating(filters?: MutationFilters, queryClient?: QueryClient): ReactiveValue<number>;
 //# sourceMappingURL=useIsMutating.svelte.d.ts.map

package/dist/useIsMutating.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useIsMutating.svelte.d.ts","sourceRoot":"","sources":["../src/useIsMutating.svelte.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,aAAa,EAAE,MAAM,wBAAwB,CAAA;AACtD,OAAO,KAAK,EAAE,eAAe,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAA;AAExE,wBAAgB,aAAa,CAC3B,OAAO,CAAC,EAAE,eAAe,EACzB,WAAW,CAAC,EAAE,WAAW,GACxB,aAAa,CAAC,MAAM,CAAC,CAQvB"}
+{"version":3,"file":"useIsMutating.svelte.d.ts","sourceRoot":"","sources":["../src/useIsMutating.svelte.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,aAAa,EAAE,MAAM,wBAAwB,CAAA;AACtD,OAAO,KAAK,EAAE,eAAe,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAA;AAExE;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,wBAAgB,aAAa,CAC3B,OAAO,CAAC,EAAE,eAAe,EACzB,WAAW,CAAC,EAAE,WAAW,GACxB,aAAa,CAAC,MAAM,CAAC,CAQvB"}

package/dist/useIsMutating.svelte.js

@@ -1,5 +1,28 @@
 import { useQueryClient } from './useQueryClient.js';
 import { ReactiveValue } from './containers.svelte.js';
+/**
+ * `useIsMutating` is an optional hook that returns the `number` of mutations that your application is
+ * running (useful for app-wide loading indicators).
+ *
+ * @param filters - {@link MutationFilters} to narrow down which mutations to count.
+ * @param queryClient - Use this to use a custom `QueryClient`. Otherwise, the one from the nearest context will
+ * be used.
+ * @returns A reactive value — read `.current` to get how many matching mutations are currently running.
+ *
+ * @example
+ * ```svelte
+ * <script lang="ts">
+ *   import { useIsMutating } from '@tanstack/svelte-query'
+ *
+ *   // How many mutations matching the posts prefix are in progress?
+ *   const isMutatingPosts = useIsMutating({ mutationKey: ['posts'] })
+ * </script>
+ *
+ * {#if isMutatingPosts.current}
+ *   <span>Saving posts...</span>
+ * {/if}
+ * ```
+ */
 export function useIsMutating(filters, queryClient) {
     const client = useQueryClient(queryClient);
     const cache = client.getMutationCache();

package/dist/useMutationState.svelte.d.ts

@@ -1,4 +1,74 @@
 import type { Mutation, MutationState, QueryClient } from '@tanstack/query-core';
 import type { MutationStateOptions, MutationTypeFromResult } from './types.js';
+/**
+ * `useMutationState` gives you access to all mutations (matching the given `filters`), including ones that
+ * were created by a different component or hook instance, or even ones no longer mounted.
+ *
+ * @param options - The `filters` to narrow down matched mutations, and an optional `select` to transform the
+ * mutation state.
+ * @param queryClient - Use this to use a custom `QueryClient`. Otherwise, the one from the nearest context will
+ * be used.
+ * @returns An Array of whatever `select` returns for each matching mutation.
+ *
+ * @example
+ * Get all variables of all running mutations:
+ * ```svelte
+ * <script lang="ts">
+ *   import { useMutationState } from '@tanstack/svelte-query'
+ *
+ *   const pendingVariables = useMutationState({
+ *     filters: { status: 'pending' },
+ *     select: (mutation) => mutation.state.variables,
+ *   })
+ * </script>
+ *
+ * {pendingVariables.length} posts saving...
+ * ```
+ *
+ * @example
+ * Get all data for specific mutations via the `mutationKey`:
+ * ```svelte
+ * <script lang="ts">
+ *   import { createMutation, useMutationState } from '@tanstack/svelte-query'
+ *
+ *   const mutationKey = ['posts']
+ *
+ *   // Some mutation that we want to get the state for
+ *   const mutation = createMutation(() => ({
+ *     mutationKey,
+ *     mutationFn: createPosts,
+ *   }))
+ *
+ *   const savedPosts = useMutationState({
+ *     // this mutation key needs to match the mutation key of the given mutation (see above)
+ *     filters: { mutationKey, status: 'success' },
+ *     select: (mutation) => mutation.state.data,
+ *   })
+ * </script>
+ *
+ * <button onclick={() => mutation.mutate(['New Post'])}>
+ *   Create post ({savedPosts.length} saved so far)
+ * </button>
+ * ```
+ *
+ * @example
+ * Access the latest mutation data via the `mutationKey`. Each invocation of `mutate` adds a new entry to the
+ * mutation cache for `gcTime` milliseconds — check the last item that `useMutationState` returns to get the
+ * latest successful mutation (the `status: 'success'` filter above excludes pending/errored ones):
+ * ```svelte
+ * <script lang="ts">
+ *   import { useMutationState } from '@tanstack/svelte-query'
+ *
+ *   const savedPosts = useMutationState({
+ *     filters: { mutationKey: ['posts'], status: 'success' },
+ *     select: (mutation) => mutation.state.data,
+ *   })
+ *
+ *   const latestSavedPost = $derived(savedPosts[savedPosts.length - 1])
+ * </script>
+ *
+ * {latestSavedPost ? 'Saved' : 'Nothing saved yet'}
+ * ```
+ */
 export declare function useMutationState<TResult = MutationState, TMutation extends Mutation<any, any, any, any> = MutationTypeFromResult<TResult>>(options?: MutationStateOptions<TResult, TMutation>, queryClient?: QueryClient): Array<TResult>;
 //# sourceMappingURL=useMutationState.svelte.d.ts.map

package/dist/useMutationState.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useMutationState.svelte.d.ts","sourceRoot":"","sources":["../src/useMutationState.svelte.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EACV,QAAQ,EAER,aAAa,EACb,WAAW,EACZ,MAAM,sBAAsB,CAAA;AAC7B,OAAO,KAAK,EAAE,oBAAoB,EAAE,sBAAsB,EAAE,MAAM,YAAY,CAAA;AAoB9E,wBAAgB,gBAAgB,CAC9B,OAAO,GAAG,aAAa,EACvB,SAAS,SAAS,QAAQ,CAAC,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,CAAC,GAC5C,sBAAsB,CAAC,OAAO,CAAC,EAEjC,OAAO,GAAE,oBAAoB,CAAC,OAAO,EAAE,SAAS,CAAM,EACtD,WAAW,CAAC,EAAE,WAAW,GACxB,KAAK,CAAC,OAAO,CAAC,CA+BhB"}
+{"version":3,"file":"useMutationState.svelte.d.ts","sourceRoot":"","sources":["../src/useMutationState.svelte.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EACV,QAAQ,EAER,aAAa,EACb,WAAW,EACZ,MAAM,sBAAsB,CAAA;AAC7B,OAAO,KAAK,EAAE,oBAAoB,EAAE,sBAAsB,EAAE,MAAM,YAAY,CAAA;AAoB9E;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAqEG;AACH,wBAAgB,gBAAgB,CAC9B,OAAO,GAAG,aAAa,EACvB,SAAS,SAAS,QAAQ,CAAC,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,CAAC,GAC5C,sBAAsB,CAAC,OAAO,CAAC,EAEjC,OAAO,GAAE,oBAAoB,CAAC,OAAO,EAAE,SAAS,CAAM,EACtD,WAAW,CAAC,EAAE,WAAW,GACxB,KAAK,CAAC,OAAO,CAAC,CA+BhB"}

package/dist/useMutationState.svelte.js

@@ -7,6 +7,76 @@ function getResult(mutationCache, options) {
         ? options.select(mutation)
         : mutation.state));
 }
+/**
+ * `useMutationState` gives you access to all mutations (matching the given `filters`), including ones that
+ * were created by a different component or hook instance, or even ones no longer mounted.
+ *
+ * @param options - The `filters` to narrow down matched mutations, and an optional `select` to transform the
+ * mutation state.
+ * @param queryClient - Use this to use a custom `QueryClient`. Otherwise, the one from the nearest context will
+ * be used.
+ * @returns An Array of whatever `select` returns for each matching mutation.
+ *
+ * @example
+ * Get all variables of all running mutations:
+ * ```svelte
+ * <script lang="ts">
+ *   import { useMutationState } from '@tanstack/svelte-query'
+ *
+ *   const pendingVariables = useMutationState({
+ *     filters: { status: 'pending' },
+ *     select: (mutation) => mutation.state.variables,
+ *   })
+ * </script>
+ *
+ * {pendingVariables.length} posts saving...
+ * ```
+ *
+ * @example
+ * Get all data for specific mutations via the `mutationKey`:
+ * ```svelte
+ * <script lang="ts">
+ *   import { createMutation, useMutationState } from '@tanstack/svelte-query'
+ *
+ *   const mutationKey = ['posts']
+ *
+ *   // Some mutation that we want to get the state for
+ *   const mutation = createMutation(() => ({
+ *     mutationKey,
+ *     mutationFn: createPosts,
+ *   }))
+ *
+ *   const savedPosts = useMutationState({
+ *     // this mutation key needs to match the mutation key of the given mutation (see above)
+ *     filters: { mutationKey, status: 'success' },
+ *     select: (mutation) => mutation.state.data,
+ *   })
+ * </script>
+ *
+ * <button onclick={() => mutation.mutate(['New Post'])}>
+ *   Create post ({savedPosts.length} saved so far)
+ * </button>
+ * ```
+ *
+ * @example
+ * Access the latest mutation data via the `mutationKey`. Each invocation of `mutate` adds a new entry to the
+ * mutation cache for `gcTime` milliseconds — check the last item that `useMutationState` returns to get the
+ * latest successful mutation (the `status: 'success'` filter above excludes pending/errored ones):
+ * ```svelte
+ * <script lang="ts">
+ *   import { useMutationState } from '@tanstack/svelte-query'
+ *
+ *   const savedPosts = useMutationState({
+ *     filters: { mutationKey: ['posts'], status: 'success' },
+ *     select: (mutation) => mutation.state.data,
+ *   })
+ *
+ *   const latestSavedPost = $derived(savedPosts[savedPosts.length - 1])
+ * </script>
+ *
+ * {latestSavedPost ? 'Saved' : 'Nothing saved yet'}
+ * ```
+ */
 export function useMutationState(options = {}, queryClient) {
     const mutationCache = useQueryClient(queryClient).getMutationCache();
     const result = $state(getResult(mutationCache, options));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tanstack/svelte-query",
-  "version": "6.1.48",
+  "version": "6.2.1",
   "description": "Primitives for managing, caching and syncing asynchronous and remote data in Svelte",
   "author": "Lachlan Collins",
   "license": "MIT",
@@ -39,7 +39,7 @@
     "!src/__tests__"
   ],
   "dependencies": {
-    "@tanstack/query-core": "5.102.8"
+    "@tanstack/query-core": "5.103.1"
   },
   "devDependencies": {
     "@sveltejs/package": "^2.5.8",
@@ -57,7 +57,7 @@
   },
   "scripts": {
     "clean": "premove ./dist ./coverage ./.svelte-kit ./dist-ts",
-    "compile": "tsc --build",
+    "compile": "tsc --project tsconfig.json",
     "test:types": "svelte-check --tsconfig ./tsconfig.json",
     "test:eslint": "eslint --concurrency=auto ./src ./tests",
     "test:lib": "vitest",

package/src/context.ts

@@ -4,7 +4,13 @@ import type { Box } from './containers.svelte'
 
 const _contextKey = Symbol('QueryClient')
 
-/** Retrieves a Client from Svelte's context */
+/**
+ * Retrieves the `QueryClient` set on Svelte's context by `QueryClientProvider` (or by
+ * {@link setQueryClientContext} directly). This is what {@link useQueryClient} calls internally.
+ *
+ * @throws If no `QueryClient` was found in context.
+ * @returns The `QueryClient` set on context, whether by `QueryClientProvider` or {@link setQueryClientContext}.
+ */
 export const getQueryClientContext = (): QueryClient => {
   const client = getContext<QueryClient | undefined>(_contextKey)
   if (!client) {
@@ -16,7 +22,26 @@ export const getQueryClientContext = (): QueryClient => {
   return client
 }
 
-/** Sets a QueryClient on Svelte's context */
+/**
+ * Sets a `QueryClient` on Svelte's context, so it can be read with {@link getQueryClientContext} (or
+ * {@link useQueryClient}) from any descendant component. `QueryClientProvider` wraps this — use it directly
+ * only if you need to set the client from your own component instead.
+ *
+ * @param client - The `QueryClient` to make available to descendant components.
+ *
+ * @example
+ * ```svelte
+ * <script lang="ts">
+ *   import { QueryClient, QueryClientProvider } from '@tanstack/svelte-query'
+ *
+ *   const queryClient = new QueryClient()
+ * </script>
+ *
+ * <QueryClientProvider client={queryClient}>
+ *   ...
+ * </QueryClientProvider>
+ * ```
+ */
 export const setQueryClientContext = (client: QueryClient): void => {
   setContext(_contextKey, client)
 }

package/src/createInfiniteQuery.ts

@@ -11,8 +11,144 @@ import type {
   Accessor,
   CreateInfiniteQueryOptions,
   CreateInfiniteQueryResult,
+  DefinedCreateInfiniteQueryResult,
 } from './types.js'
+import type {
+  DefinedInitialDataInfiniteOptions,
+  UndefinedInitialDataInfiniteOptions,
+} from './infiniteQueryOptions.js'
+
+export function createInfiniteQuery<
+  TQueryFnData = unknown,
+  TError = DefaultError,
+  TData = InfiniteData<TQueryFnData>,
+  TQueryKey extends QueryKey = QueryKey,
+  TPageParam = unknown,
+>(
+  options: Accessor<
+    DefinedInitialDataInfiniteOptions<
+      TQueryFnData,
+      TError,
+      TData,
+      TQueryKey,
+      TPageParam
+    >
+  >,
+  queryClient?: Accessor<QueryClient>,
+): DefinedCreateInfiniteQueryResult<TData, TError>
 
+export function createInfiniteQuery<
+  TQueryFnData = unknown,
+  TError = DefaultError,
+  TData = InfiniteData<TQueryFnData>,
+  TQueryKey extends QueryKey = QueryKey,
+  TPageParam = unknown,
+>(
+  options: Accessor<
+    UndefinedInitialDataInfiniteOptions<
+      TQueryFnData,
+      TError,
+      TData,
+      TQueryKey,
+      TPageParam
+    >
+  >,
+  queryClient?: Accessor<QueryClient>,
+): CreateInfiniteQueryResult<TData, TError>
+
+/**
+ * @see {@link infiniteQueryOptions} to share these options between `createInfiniteQuery` and imperative APIs
+ * like `queryClient.infiniteQuery`.
+ * @param options - The {@link CreateInfiniteQueryOptions} to use — everything you can pass to
+ * `createInfiniteQuery`, wrapped in an {@link Accessor} so options can be reactive.
+ * @param queryClient - Use this to use a custom `QueryClient`. Otherwise, the one from the nearest context will
+ * be used.
+ * @returns The current query result, plus `fetchNextPage`/`fetchPreviousPage`/`hasNextPage`/`hasPreviousPage`
+ * to page through the query.
+ *
+ * @example
+ * Fetching the next page from a "Load More" button click:
+ * ```svelte
+ * <script lang="ts">
+ *   import { createInfiniteQuery } from '@tanstack/svelte-query'
+ *
+ *   const query = createInfiniteQuery(() => ({
+ *     queryKey: ['projects'],
+ *     queryFn: ({ pageParam }) => fetchProjects(pageParam),
+ *     initialPageParam: 0,
+ *     getNextPageParam: (lastPage) => lastPage.nextId,
+ *   }))
+ * </script>
+ *
+ * {#if query.isPending}
+ *   Loading...
+ * {:else if query.isError}
+ *   <span>Error: {query.error.message}</span>
+ * {:else}
+ *   <ul>
+ *     {#each query.data.pages as page}
+ *       {#each page.projects as project (project.id)}
+ *         <li>{project.name}</li>
+ *       {/each}
+ *     {/each}
+ *   </ul>
+ *   <button
+ *     onclick={() => query.fetchNextPage()}
+ *     disabled={!query.hasNextPage || query.isFetching}
+ *   >
+ *     {query.isFetchingNextPage
+ *       ? 'Loading more...'
+ *       : query.hasNextPage
+ *         ? 'Load More'
+ *         : 'Nothing more to load'}
+ *   </button>
+ * {/if}
+ * ```
+ *
+ * @example
+ * Fetching the next page automatically as the user scrolls, using an `IntersectionObserver` on a
+ * sentinel element after the list:
+ * ```svelte
+ * <script lang="ts">
+ *   import { createInfiniteQuery } from '@tanstack/svelte-query'
+ *
+ *   const query = createInfiniteQuery(() => ({
+ *     queryKey: ['projects'],
+ *     queryFn: ({ pageParam }) => fetchProjects(pageParam),
+ *     initialPageParam: 0,
+ *     getNextPageParam: (lastPage) => lastPage.nextId,
+ *   }))
+ *
+ *   let sentinel: HTMLDivElement | undefined = $state()
+ *
+ *   $effect(() => {
+ *     if (sentinel == null || !query.hasNextPage || query.isFetching) return
+ *
+ *     const observer = new IntersectionObserver(([entry]) => {
+ *       if (entry?.isIntersecting) query.fetchNextPage()
+ *     })
+ *     observer.observe(sentinel)
+ *
+ *     return () => observer.disconnect()
+ *   })
+ * </script>
+ *
+ * {#if query.isPending}
+ *   Loading...
+ * {:else if query.isError}
+ *   <span>Error: {query.error.message}</span>
+ * {:else}
+ *   <ul>
+ *     {#each query.data.pages as page}
+ *       {#each page.projects as project (project.id)}
+ *         <li>{project.name}</li>
+ *       {/each}
+ *     {/each}
+ *   </ul>
+ *   <div bind:this={sentinel}></div>
+ * {/if}
+ * ```
+ */
 export function createInfiniteQuery<
   TQueryFnData,
   TError = DefaultError,
@@ -30,10 +166,15 @@ export function createInfiniteQuery<
     >
   >,
   queryClient?: Accessor<QueryClient>,
-): CreateInfiniteQueryResult<TData, TError> {
+): CreateInfiniteQueryResult<TData, TError>
+
+export function createInfiniteQuery(
+  options: Accessor<CreateInfiniteQueryOptions>,
+  queryClient?: Accessor<QueryClient>,
+) {
   return createBaseQuery(
     options,
     InfiniteQueryObserver as typeof QueryObserver,
     queryClient,
-  ) as CreateInfiniteQueryResult<TData, TError>
+  )
 }