@raf-query/react 0.11.1 → 0.12.0

package/dist/hydration-boundary/hydration-boundary.d.mts

@@ -1,4 +1,4 @@
-import { DehydrateOptions, DehydratedState, HydrateOptions, QueryClient } from "@raf-query/core";
+import { DehydrateOptions, DehydratedState, QueryClient } from "@raf-query/core";
 import { ReactNode } from "react";
 //#region src/hydration-boundary/hydration-boundary.d.ts
 export type HydrationBoundaryProps = {
@@ -13,8 +13,8 @@ export type HydrationBoundaryProps = {
 } | {
   readonly children?: ReactNode;
   readonly client?: never;
-  readonly options?: HydrateOptions;
-  /** A loader's `dehydrate(qc)`. */
+  readonly options?: never;
+  /** A loader's `dehydrate(client)`. */
   readonly state: DehydratedState;
 };
 /**
@@ -27,38 +27,18 @@ export type HydrationBoundaryProps = {
  * through the package's `react-server` export condition.
  *
  * ```tsx
- * const qc = getQueryClient();
- * const comments = qc.prefetch(commentsQuery, { slug });
+ * const client = getQueryClient();
+ * const [handles] = await load(client, { comments: prefetch(commentsQuery, { slug }) });
  * return (
- *   <HydrationBoundary client={qc}>
- *     <Comments handle={comments} />
+ *   <HydrationBoundary client={client}>
+ *     <Comments handle={handles.comments} />
  *   </HydrationBoundary>
  * );
  * ```
  *
  * With loaders, such as React Router Framework Mode, pass the `state` the
- * loader dehydrated:
- *
- * ```tsx
- * export async function loader(args: Route.LoaderArgs) {
- *   const qc = new QueryClient();
- *   const post = await qc.ensure(postQuery, { slug: args.params.slug });
- *   return { dehydratedState: dehydrate(qc), post };
- * }
- *
- * export default function Page(props: Route.ComponentProps) {
- *   const { dehydratedState, post } = props.loaderData;
- *   return (
- *     <HydrationBoundary state={dehydratedState}>
- *       <Post handle={post} />
- *     </HydrationBoundary>
- *   );
- * }
- * ```
- *
- * Pending entries cross as promises when the framework's serializer
- * supports them (React Router's Single Fetch does). Nested boundaries
- * are fine: each only writes what its `state` holds.
+ * loader dehydrated. Pending entries cross as promises when the framework's
+ * serializer supports them (React Router's Single Fetch does).
  */
 export declare function HydrationBoundary(props: HydrationBoundaryProps): import("react").JSX.Element;
 //#endregion

package/dist/hydration-boundary/hydration-boundary.mjs

@@ -12,43 +12,22 @@ import { jsx } from "react/jsx-runtime";
 * through the package's `react-server` export condition.
 *
 * ```tsx
-* const qc = getQueryClient();
-* const comments = qc.prefetch(commentsQuery, { slug });
+* const client = getQueryClient();
+* const [handles] = await load(client, { comments: prefetch(commentsQuery, { slug }) });
 * return (
-*   <HydrationBoundary client={qc}>
-*     <Comments handle={comments} />
+*   <HydrationBoundary client={client}>
+*     <Comments handle={handles.comments} />
 *   </HydrationBoundary>
 * );
 * ```
 *
 * With loaders, such as React Router Framework Mode, pass the `state` the
-* loader dehydrated:
-*
-* ```tsx
-* export async function loader(args: Route.LoaderArgs) {
-*   const qc = new QueryClient();
-*   const post = await qc.ensure(postQuery, { slug: args.params.slug });
-*   return { dehydratedState: dehydrate(qc), post };
-* }
-*
-* export default function Page(props: Route.ComponentProps) {
-*   const { dehydratedState, post } = props.loaderData;
-*   return (
-*     <HydrationBoundary state={dehydratedState}>
-*       <Post handle={post} />
-*     </HydrationBoundary>
-*   );
-* }
-* ```
-*
-* Pending entries cross as promises when the framework's serializer
-* supports them (React Router's Single Fetch does). Nested boundaries
-* are fine: each only writes what its `state` holds.
+* loader dehydrated. Pending entries cross as promises when the framework's
+* serializer supports them (React Router's Single Fetch does).
 */
 function HydrationBoundary(props) {
 	if (props.state === void 0) throw new Error("HydrationBoundary needs `state` here. `client` works only in server components.");
 	return /* @__PURE__ */ jsx(Hydrate, {
-		options: props.options,
 		state: props.state,
 		children: props.children
 	});

package/dist/index-react-server.d.mts

@@ -1,9 +1,10 @@
-import { QueryClientProvider, useQueryClient } from "./provider.mjs";
-import { QueryProvider } from "./query-provider/query-provider.mjs";
-import { useIsFetching } from "./use-is-fetching.mjs";
-import { UseQueryResult, UseQueryResultWithData, useQuery } from "./use-query.mjs";
-import { useWaterfall } from "./use-waterfall.mjs";
+import { QueryDevtools, QueryDevtoolsPanel, QueryDevtoolsPanelProps, QueryDevtoolsProps } from "./devtools.mjs";
+import { QueryClientProvider } from "./provider.mjs";
+import { QueryState, QueryValue, UseQueryOptions } from "./use-query.mjs";
+import { InfiniteQueryState, PageControls } from "./use-infinite-query.mjs";
 import "./index-shared.mjs";
+import { HydrationBoundaryProps } from "./hydration-boundary/hydration-boundary.mjs";
 import { HydrationBoundary } from "./hydration-boundary/hydration-boundary-react-server.mjs";
+import { bindUseQueryClient, useInfiniteQuery, useIsFetching, useQuery, useQueryClient } from "./react-server-hooks.mjs";
 export * from "@raf-query/core";
-export { HydrationBoundary, QueryClientProvider, QueryProvider, type UseQueryResult, type UseQueryResultWithData, useIsFetching, useQuery, useQueryClient, useWaterfall };
+export { HydrationBoundary, type HydrationBoundaryProps, type InfiniteQueryState, type PageControls, QueryClientProvider, QueryDevtools, QueryDevtoolsPanel, type QueryDevtoolsPanelProps, type QueryDevtoolsProps, type QueryState, type QueryValue, type UseQueryOptions, bindUseQueryClient, useInfiniteQuery, useIsFetching, useQuery, useQueryClient };

package/dist/index-react-server.mjs

@@ -1,8 +1,6 @@
-import { QueryClientProvider, useQueryClient } from "./provider.mjs";
-import { QueryProvider } from "./query-provider/query-provider.mjs";
-import { useIsFetching } from "./use-is-fetching.mjs";
-import { useQuery } from "./use-query.mjs";
-import { useWaterfall } from "./use-waterfall.mjs";
+import { QueryClientProvider } from "./provider.mjs";
+import { QueryDevtools, QueryDevtoolsPanel } from "./devtools.mjs";
 import { HydrationBoundary } from "./hydration-boundary/hydration-boundary-react-server.mjs";
+import { bindUseQueryClient, useInfiniteQuery, useIsFetching, useQuery, useQueryClient } from "./react-server-hooks.mjs";
 export * from "@raf-query/core";
-export { HydrationBoundary, QueryClientProvider, QueryProvider, useIsFetching, useQuery, useQueryClient, useWaterfall };
+export { HydrationBoundary, QueryClientProvider, QueryDevtools, QueryDevtoolsPanel, bindUseQueryClient, useInfiniteQuery, useIsFetching, useQuery, useQueryClient };

package/dist/index-shared.d.mts

@@ -1,7 +1,6 @@
-import { QueryClientProvider, useQueryClient } from "./provider.mjs";
-import { QueryProvider } from "./query-provider/query-provider.mjs";
-import { useIsFetching } from "./use-is-fetching.mjs";
-import { UseQueryResult, UseQueryResultWithData, useQuery } from "./use-query.mjs";
-import { useWaterfall } from "./use-waterfall.mjs";
+import { QueryDevtools, QueryDevtoolsPanel, QueryDevtoolsPanelProps, QueryDevtoolsProps } from "./devtools.mjs";
+import { QueryClientProvider } from "./provider.mjs";
+import { QueryState, QueryValue, UseQueryOptions } from "./use-query.mjs";
+import { InfiniteQueryState, PageControls } from "./use-infinite-query.mjs";
 export * from "@raf-query/core";
-export { QueryClientProvider, QueryProvider, type UseQueryResult, type UseQueryResultWithData, useIsFetching, useQuery, useQueryClient, useWaterfall };
+export { type InfiniteQueryState, type PageControls, QueryClientProvider, QueryDevtools, QueryDevtoolsPanel, type QueryDevtoolsPanelProps, type QueryDevtoolsProps, type QueryState, type QueryValue, type UseQueryOptions };

package/dist/index-shared.mjs

@@ -1,7 +1,4 @@
-import { QueryClientProvider, useQueryClient } from "./provider.mjs";
-import { QueryProvider } from "./query-provider/query-provider.mjs";
-import { useIsFetching } from "./use-is-fetching.mjs";
-import { useQuery } from "./use-query.mjs";
-import { useWaterfall } from "./use-waterfall.mjs";
+import { QueryClientProvider } from "./provider.mjs";
+import { QueryDevtools, QueryDevtoolsPanel } from "./devtools.mjs";
 export * from "@raf-query/core";
-export { QueryClientProvider, QueryProvider, useIsFetching, useQuery, useQueryClient, useWaterfall };
+export { QueryClientProvider, QueryDevtools, QueryDevtoolsPanel };

package/dist/index.d.mts

@@ -1,9 +1,10 @@
+import { QueryDevtools, QueryDevtoolsPanel, QueryDevtoolsPanelProps, QueryDevtoolsProps } from "./devtools.mjs";
 import { QueryClientProvider, useQueryClient } from "./provider.mjs";
-import { QueryProvider } from "./query-provider/query-provider.mjs";
-import { useIsFetching } from "./use-is-fetching.mjs";
-import { UseQueryResult, UseQueryResultWithData, useQuery } from "./use-query.mjs";
-import { useWaterfall } from "./use-waterfall.mjs";
+import { QueryState, QueryValue, UseQueryOptions, useQuery } from "./use-query.mjs";
+import { InfiniteQueryState, PageControls, useInfiniteQuery } from "./use-infinite-query.mjs";
 import "./index-shared.mjs";
-import { HydrationBoundary } from "./hydration-boundary/hydration-boundary.mjs";
+import { HydrationBoundary, HydrationBoundaryProps } from "./hydration-boundary/hydration-boundary.mjs";
+import { useIsFetching } from "./use-is-fetching.mjs";
+import { bindUseQueryClient } from "./bind.mjs";
 export * from "@raf-query/core";
-export { HydrationBoundary, QueryClientProvider, QueryProvider, type UseQueryResult, type UseQueryResultWithData, useIsFetching, useQuery, useQueryClient, useWaterfall };
+export { HydrationBoundary, type HydrationBoundaryProps, type InfiniteQueryState, type PageControls, QueryClientProvider, QueryDevtools, QueryDevtoolsPanel, type QueryDevtoolsPanelProps, type QueryDevtoolsProps, type QueryState, type QueryValue, type UseQueryOptions, bindUseQueryClient, useInfiniteQuery, useIsFetching, useQuery, useQueryClient };

package/dist/index.mjs

@@ -1,8 +1,9 @@
 import { QueryClientProvider, useQueryClient } from "./provider.mjs";
-import { QueryProvider } from "./query-provider/query-provider.mjs";
+import { QueryDevtools, QueryDevtoolsPanel } from "./devtools.mjs";
+import { bindUseQueryClient } from "./bind.mjs";
+import { HydrationBoundary } from "./hydration-boundary/hydration-boundary.mjs";
 import { useIsFetching } from "./use-is-fetching.mjs";
 import { useQuery } from "./use-query.mjs";
-import { useWaterfall } from "./use-waterfall.mjs";
-import { HydrationBoundary } from "./hydration-boundary/hydration-boundary.mjs";
+import { useInfiniteQuery } from "./use-infinite-query.mjs";
 export * from "@raf-query/core";
-export { HydrationBoundary, QueryClientProvider, QueryProvider, useIsFetching, useQuery, useQueryClient, useWaterfall };
+export { HydrationBoundary, QueryClientProvider, QueryDevtools, QueryDevtoolsPanel, bindUseQueryClient, useInfiniteQuery, useIsFetching, useQuery, useQueryClient };

package/dist/provider.d.mts

@@ -2,13 +2,13 @@ import { QueryClient } from "@raf-query/core";
 import { ReactNode } from "react";
 //#region src/provider.d.ts
 /**
- * Provides a client to the tree, and refetches its read, stale queries on
- * window focus and reconnect while mounted.
+ * Provides a client to the tree, and runs its features (focus and
+ * reconnect refetching, polling, …) while mounted.
  */
 export declare function QueryClientProvider(props: {
   readonly children?: ReactNode;
-  readonly client: QueryClient<unknown>;
+  readonly client: QueryClient;
 }): import("react").JSX.Element;
 /** The client from the nearest {@link QueryClientProvider}. */
-export declare function useQueryClient(): QueryClient<unknown>;
+export declare function useQueryClient(): QueryClient;
 //#endregion

package/dist/provider.mjs

@@ -1,19 +1,16 @@
 "use client";
+import { mount } from "@raf-query/core/internal";
 import { createContext, use, useEffect } from "react";
 import { jsx } from "react/jsx-runtime";
 //#region src/provider.tsx
-/**
-* A hook can't know which services the provider's client has, so its verbs
-* take any factory here.
-*/
 const QueryClientContext = createContext(null);
 /**
-* Provides a client to the tree, and refetches its read, stale queries on
-* window focus and reconnect while mounted.
+* Provides a client to the tree, and runs its features (focus and
+* reconnect refetching, polling, …) while mounted.
 */
 function QueryClientProvider(props) {
 	const client = props.client;
-	useEffect(() => client.mount(), [client]);
+	useEffect(() => mount(client), [client]);
 	return /* @__PURE__ */ jsx(QueryClientContext, {
 		value: client,
 		children: props.children
@@ -25,7 +22,7 @@ function useOptionalQueryClient() {
 }
 /** The client from the nearest {@link QueryClientProvider}. */
 function useQueryClient() {
-	const client = use(QueryClientContext);
+	const client = useOptionalQueryClient();
 	if (!client) throw new Error("useQueryClient: no QueryClientProvider above this component");
 	return client;
 }

package/dist/react-server-hooks.d.mts

@@ -0,0 +1,17 @@
+import { useQueryClient as useQueryClient$1 } from "./provider.mjs";
+import { useQuery as useQuery$1 } from "./use-query.mjs";
+import { useInfiniteQuery as useInfiniteQuery$1 } from "./use-infinite-query.mjs";
+import { useIsFetching as useIsFetching$1 } from "./use-is-fetching.mjs";
+import { QueryClient } from "@raf-query/core";
+import { RootOf } from "@raf-query/core/internal";
+//#region src/react-server-hooks.d.ts
+export declare const useQuery: typeof useQuery$1;
+export declare const useInfiniteQuery: typeof useInfiniteQuery$1;
+export declare const useIsFetching: typeof useIsFetching$1;
+export declare const useQueryClient: typeof useQueryClient$1;
+/**
+ * `bindUseQueryClient` runs at module level in a file server modules may
+ * import too, so it works here and returns the throwing `useQueryClient`.
+ */
+export declare function bindUseQueryClient<T>(): () => QueryClient<RootOf<T>>;
+//#endregion

package/dist/react-server-hooks.mjs

@@ -0,0 +1,19 @@
+//#region src/react-server-hooks.ts
+function clientOnly(name) {
+	return () => {
+		throw new Error(`${name} reads in client components: move this into a file with "use client". Server components start queries with load() and send them with <HydrationBoundary>.`);
+	};
+}
+const useQuery = /* @__PURE__ */ clientOnly("useQuery");
+const useInfiniteQuery = /* @__PURE__ */ clientOnly("useInfiniteQuery");
+const useIsFetching = /* @__PURE__ */ clientOnly("useIsFetching");
+const useQueryClient = /* @__PURE__ */ clientOnly("useQueryClient");
+/**
+* `bindUseQueryClient` runs at module level in a file server modules may
+* import too, so it works here and returns the throwing `useQueryClient`.
+*/
+function bindUseQueryClient() {
+	return useQueryClient;
+}
+//#endregion
+export { bindUseQueryClient, useInfiniteQuery, useIsFetching, useQuery, useQueryClient };

package/dist/tanstack-router-shared.d.mts

@@ -1,14 +1,12 @@
-import { DehydrateOptions, DehydratedState, HydrateOptions, QueryClient, QueryHandle } from "@raf-query/core";
+import { DehydrateOptions, DehydratedState, QueryClient, QueryHandle } from "@raf-query/core";
 import { AnyRouter } from "@tanstack/react-router";
 //#region src/tanstack-router-shared.d.ts
 declare module "@tanstack/react-router" {
   interface SerializableExtensions {
     /**
-     * Handles are `{ key, input, data? }`, which the router's serializer
-     * sends as is (`data` is dehydrated anyway, so it is serializable). Its
-     * type check can't see that on its own: keys are
-     * `ReadonlyArray<unknown>`, and the handle type names its factory.
-     * So `beforeLoad` can put handles in route context.
+     * Handles are plain `{ queryKey, input }`, which the router's serializer
+     * sends as is. Its type check can't see that on its own: the handle
+     * type names its factory. So loaders can return handles.
      */
     rafQueryHandle: QueryHandle;
   }
@@ -17,7 +15,6 @@ export interface RouterIntegrationOptions<TRouter extends AnyRouter> {
   readonly dehydrateOptions?: DehydrateOptions;
   /** Navigate when a `queryFn` throws `redirect()`. Default `true`. */
   readonly handleRedirects?: boolean;
-  readonly hydrateOptions?: HydrateOptions;
   readonly queryClient: QueryClient;
   readonly router: TRouter;
 }

package/dist/tanstack-router-shared.mjs

@@ -1,34 +1,22 @@
 import { hydrate } from "@raf-query/core";
-import { Predicate } from "effect";
 import { isRedirect } from "@tanstack/react-router";
 //#region src/tanstack-router-shared.ts
 function hasRafQueries(value) {
-	return Predicate.hasProperty(value, "raf") && Predicate.isObject(value.raf);
+	return typeof value === "object" && value !== null && "raf" in value;
 }
-/**
-* Hydrate each state as the server's stream delivers it. Reads the stream
-* directly: `Stream.fromReadableStream` + `QueryCache.hydrateStream` would
-* put Effect's `Stream` and `Queue` in the browser bundle.
-*/
-async function hydrateEach(client, stream, options) {
-	const reader = stream.getReader();
-	for (;;) {
-		const next = await reader.read();
-		if (next.done) return;
-		hydrate(client, next.value, options);
-	}
+/** Hydrate each state as the server's stream delivers it. */
+async function hydrateEach(client, stream) {
+	for await (const state of stream) hydrate(client, state);
 }
 function setupClient(options) {
 	const router = options.router;
 	const client = options.queryClient;
-	const hydrateOptions = options.hydrateOptions;
 	const originalHydrate = router.options.hydrate;
 	router.options.hydrate = async (dehydrated) => {
 		await originalHydrate?.(dehydrated);
 		if (!hasRafQueries(dehydrated)) return;
-		const raf = dehydrated.raf;
-		hydrate(client, raf.initial, hydrateOptions);
-		hydrateEach(client, raf.stream, hydrateOptions).catch((error) => {
+		hydrate(client, dehydrated.raf.initial);
+		hydrateEach(client, dehydrated.raf.stream).catch((error) => {
 			console.error("raf-query: reading the query stream failed", error);
 		});
 	};
@@ -36,11 +24,13 @@ function setupClient(options) {
 function handleRedirects(options) {
 	if (!(options.handleRedirects ?? true)) return;
 	const router = options.router;
+	const handled = /* @__PURE__ */ new WeakSet();
 	options.queryClient.subscribe((event) => {
-		if (event.type === "failed" && isRedirect(event.error)) {
-			const redirect = event.error;
-			redirect.options._fromLocation = router.stores.location.get();
-			router.navigate(router.resolveRedirect(redirect).options);
+		const error = event.entry.state.error;
+		if (event.type === "updated" && isRedirect(error) && !handled.has(error)) {
+			handled.add(error);
+			error.options._fromLocation = router.stores.location.get();
+			router.navigate(router.resolveRedirect(error).options);
 		}
 	});
 }

package/dist/tanstack-router.d.mts

@@ -5,8 +5,8 @@ import { AnyRouter } from "@tanstack/react-router";
  * Connects a query client to a TanStack Router (and TanStack Start) router:
  *
  * - During SSR, sends the cache to the browser with the router's dehydrated
- *   state, then streams entries as they start or settle. Pending entries
- *   cross as promises, so the browser resumes them instead of refetching.
+ *   state, then streams entries as they start. Pending entries cross as
+ *   promises, so the browser resumes them instead of refetching.
  * - Clears the request's cache when the response finishes.
  * - Turns `redirect()` thrown from a `queryFn` into a navigation.
  *

package/dist/tanstack-router.mjs

@@ -1,17 +1,17 @@
 import { handleRedirects, setupClient } from "./tanstack-router-shared.mjs";
-import { Effect, Exit, Scope, Stream } from "effect";
+import { dehydrateStream, removeAll } from "@raf-query/core";
 //#region src/tanstack-router.ts
 const noop = () => {};
 function setupServer(options) {
 	const router = options.router;
-	const queryClient = options.queryClient;
+	const client = options.queryClient;
 	const originalDehydrate = router.options.dehydrate;
 	let finish = noop;
 	let cleanedUp = false;
 	const teardown = () => {
 		cleanedUp = true;
 		finish();
-		queryClient.clear();
+		removeAll(client);
 	};
 	router.serverSsrLifecycle = {
 		...router.serverSsrLifecycle,
@@ -20,21 +20,17 @@ function setupServer(options) {
 	router.options.dehydrate = async () => {
 		const dehydrated = await originalDehydrate?.();
 		if (cleanedUp) {
-			queryClient.clear();
+			removeAll(client);
 			return;
 		}
-		const scope = Scope.makeUnsafe();
-		const stream = Effect.runSync(queryClient.effect.dehydrateStream(options.dehydrateOptions).pipe(Scope.provide(scope)));
-		finish = () => {
-			finish = noop;
-			Effect.runSync(Scope.close(scope, Exit.void));
-		};
-		router.serverSsr?.onRenderFinished(() => finish());
+		const stream = dehydrateStream(client, options.dehydrateOptions);
+		finish = () => stream.close();
+		router.serverSsr?.onRenderFinished(() => stream.close());
 		return {
 			...dehydrated,
 			raf: {
 				initial: stream.initial,
-				stream: Stream.toReadableStream(stream.updates)
+				stream: stream.updates
 			}
 		};
 	};
@@ -43,8 +39,8 @@ function setupServer(options) {
 * Connects a query client to a TanStack Router (and TanStack Start) router:
 *
 * - During SSR, sends the cache to the browser with the router's dehydrated
-*   state, then streams entries as they start or settle. Pending entries
-*   cross as promises, so the browser resumes them instead of refetching.
+*   state, then streams entries as they start. Pending entries cross as
+*   promises, so the browser resumes them instead of refetching.
 * - Clears the request's cache when the response finishes.
 * - Turns `redirect()` thrown from a `queryFn` into a navigation.
 *

package/dist/tracked.d.mts

@@ -0,0 +1 @@
+import { Thenable } from "@raf-query/core";

package/dist/tracked.mjs

@@ -0,0 +1,65 @@
+//#region src/tracked.ts
+function createTracker() {
+	return {
+		actions: /* @__PURE__ */ new Map(),
+		proxy: void 0,
+		rendered: void 0,
+		tracked: /* @__PURE__ */ new Set()
+	};
+}
+function renderedOf(tracker) {
+	return tracker.rendered;
+}
+/** A function that calls the latest render's, so it keeps its identity across renders. */
+function stableAction(tracker, name) {
+	let action = tracker.actions.get(name);
+	if (!action) {
+		action = (...args) => {
+			const latest = renderedOf(tracker).actions[name];
+			return latest(...args);
+		};
+		tracker.actions.set(name, action);
+	}
+	return action;
+}
+function proxyOf(tracker, read) {
+	return new Proxy({
+		...read.fields,
+		...read.actions
+	}, { get(_, key) {
+		const name = String(key);
+		if (read.actions[name]) return stableAction(tracker, name);
+		tracker.tracked.add(name);
+		return renderedOf(tracker).fields[name];
+	} });
+}
+/** Functions are stable, so only data fields count as changes. */
+function trackedChanged(tracker, next) {
+	const previous = renderedOf(tracker).fields;
+	return [...tracker.tracked].some((name) => !Object.is(previous[name], next.fields[name]));
+}
+/**
+* The state a render returns: the same object as the last render's unless
+* a field the component read changed. Reads go through to this render's
+* fields, so a field first read now is current, and is tracked from now on.
+*/
+function trackedState(tracker, read, refresh) {
+	if (tracker.proxy === void 0 || trackedChanged(tracker, read)) tracker.proxy = proxyOf(tracker, read);
+	tracker.rendered = {
+		...read,
+		refresh,
+		status: read.source.status
+	};
+	return tracker.proxy;
+}
+/**
+* Whether a write changed what the component rendered: the thenable or its
+* outcome, or a field it read. Fields it never read don't re-render it.
+*/
+function renderedChanged(tracker) {
+	const rendered = renderedOf(tracker);
+	const next = rendered.refresh();
+	return next.source !== rendered.source || next.source.status !== rendered.status || trackedChanged(tracker, next);
+}
+//#endregion
+export { createTracker, renderedChanged, trackedState };

package/dist/use-infinite-query.d.mts

@@ -0,0 +1,27 @@
+import { QueryState, QueryValue, UseQueryOptions } from "./use-query.mjs";
+import { InfiniteQueryFactory, QueryHandle } from "@raf-query/core";
+//#region src/use-infinite-query.d.ts
+/** The paging half of what `useInfiniteQuery` returns. */
+export interface PageControls {
+  /** Load the page after the last one. Resolves when it's there. */
+  fetchNextPage(): Promise<void>;
+  /** Load the page before the first one. Resolves when it's there. */
+  fetchPreviousPage(): Promise<void>;
+  readonly hasNextPage: boolean;
+  readonly hasPreviousPage: boolean;
+  readonly isFetchingNextPage: boolean;
+  readonly isFetchingPreviousPage: boolean;
+}
+/** What `useInfiniteQuery` returns next to the data. */
+export interface InfiniteQueryState<TFactory extends InfiniteQueryFactory = InfiniteQueryFactory> extends PageControls, QueryState<TFactory> {}
+/**
+ * Read a paged query (`infiniteQueryOptions`) by its handle. The data is
+ * `{ pages, pageParams }`, and its state loads more pages.
+ *
+ * ```tsx
+ * const [pagesThenable, pagesState] = useInfiniteQuery(commentsQuery, handles.comments);
+ * const pages = use(pagesThenable);
+ * ```
+ */
+export declare function useInfiniteQuery<TFactory extends InfiniteQueryFactory>(factory: TFactory, handle: QueryHandle<TFactory>, options?: UseQueryOptions): readonly [QueryValue<TFactory>, InfiniteQueryState<TFactory>];
+//#endregion

package/dist/use-infinite-query.mjs

@@ -0,0 +1,35 @@
+import { settled, useQueryRead } from "./use-query.mjs";
+import { fetchEntry, pageParamAfter } from "@raf-query/core/internal";
+//#region src/use-infinite-query.ts
+function hasPage(entry, state, direction) {
+	return state.hasData && pageParamAfter(entry.options, state.data, direction) !== void 0;
+}
+function pageFields(entry, state) {
+	return {
+		actions: {
+			fetchNextPage: () => settled(fetchEntry(entry, { direction: "next" })),
+			fetchPreviousPage: () => settled(fetchEntry(entry, { direction: "previous" }))
+		},
+		fields: {
+			hasNextPage: hasPage(entry, state, "next"),
+			hasPreviousPage: hasPage(entry, state, "previous"),
+			isFetchingNextPage: state.fetchingDirection === "next",
+			isFetchingPreviousPage: state.fetchingDirection === "previous"
+		}
+	};
+}
+/**
+* Read a paged query (`infiniteQueryOptions`) by its handle. The data is
+* `{ pages, pageParams }`, and its state loads more pages.
+*
+* ```tsx
+* const [pagesThenable, pagesState] = useInfiniteQuery(commentsQuery, handles.comments);
+* const pages = use(pagesThenable);
+* ```
+*/
+function useInfiniteQuery(factory, handle, options) {
+	const read = useQueryRead(factory, handle, options, pageFields);
+	return [read.thenable, read.controls];
+}
+//#endregion
+export { useInfiniteQuery };

package/dist/use-is-fetching.d.mts

@@ -1,20 +1,10 @@
-import { QueryCache } from "@raf-query/core";
+import { Group } from "@raf-query/core";
+import { AnyFactory, AnyTarget } from "@raf-query/core/internal";
 //#region src/use-is-fetching.d.ts
 /**
- * How many queries have a request in flight: all of them, or those matching
- * `filter`. Re-renders when the count changes. It's `0` on the server and
- * while hydrating, so the server's HTML and the browser's first render agree.
- *
- * You probably don't need this. Prefer the router's pending UI for
- * navigations (`useRouterState` / `pendingComponent` in TanStack Router,
- * `useLinkStatus` in Next.js) and per-query `controls.isFetching` for
- * background refetches. Kept for TanStack Query compatibility when you want
- * one global count of every in-flight request:
- *
- * ```tsx
- * const fetching = useIsFetching();
- * return fetching > 0 ? <ProgressBar /> : null;
- * ```
+ * How many queries have a request in flight: all of them, or a factory's,
+ * a group's or a target's. For a global loading indicator. Always `0` on
+ * the server and while hydrating, so the HTML matches the first browser render.
  */
-export declare function useIsFetching(filter?: QueryCache.Filter): number;
+export declare function useIsFetching(target?: AnyFactory | AnyTarget | Group): number;
 //#endregion