@raf-query/react 0.11.1 → 0.12.0

package/CHANGELOG.md

@@ -1,10 +1,20 @@
 # Changelog
 
+## [0.12.0](https://github.com/KATT/raf-query/compare/0.11.1...0.12.0) (2026-11-08)
+
+### ⚠ BREAKING CHANGES
+
+* greenfield rewrite on a promise kernel, with load() handles and opt-in behaviors ([#230](https://github.com/KATT/raf-query/issues/230))
+
+### Features
+
+* greenfield rewrite on a promise kernel, with load() handles and opt-in behaviors ([#230](https://github.com/KATT/raf-query/issues/230)) ([e2a6f85](https://github.com/KATT/raf-query/commit/e2a6f85297992dc8a5cdd3f871a54452393ae978))
+
 ## [0.11.1](https://github.com/KATT/raf-query/compare/0.11.0...0.11.1) (2026-10-17)
 
 ### Features
 
-* **core:** take throwOnError from the query's options (2/2) ([#214](https://github.com/KATT/raf-query/issues/214)) ([ef1f0fd](https://github.com/KATT/raf-query/commit/ef1f0fd8eda2a73f4c4c268e8a3a5cf91a0ba0d8)), references [#448](https://github.com/KATT/raf-query/issues/448)
+- **core:** take throwOnError from the query's options (2/2) ([#214](https://github.com/KATT/raf-query/issues/214)) ([ef1f0fd](https://github.com/KATT/raf-query/commit/ef1f0fd8eda2a73f4c4c268e8a3a5cf91a0ba0d8)), references [#448](https://github.com/KATT/raf-query/issues/448)
 
 ## [0.11.0](https://github.com/KATT/raf-query/compare/0.10.4...0.11.0) (2026-10-16)
 

package/README.md

@@ -10,28 +10,31 @@ Render-as-you-fetch data fetching for React: start queries in route loaders and
 ## Install
 
 ```bash
-npm install @raf-query/react effect
+npm install @raf-query/react
 ```
 
-Apps never import `effect` unless they write Effect code. Requires React 19.2 or newer.
+Requires React 19.2 or newer.
 
 ## Usage
 
 A query is a factory. The loader and the component call the same one. A paged list, such as comments, uses `infiniteQueryOptions`.
 
 ```tsx
-import { infiniteQueryOptions, queryOptions } from "@raf-query/react";
+import { group, infiniteQueryOptions, queryOptions } from "@raf-query/react";
+
+const posts = group("posts");
+const comments = group(posts, "comments");
 
 export function postQuery(input: { slug: string }) {
 	return queryOptions({
-		queryKey: ["post", input.slug],
+		queryKey: posts("bySlug", input.slug),
 		queryFn: () => getPost(input.slug),
 	});
 }
 
 export function commentsQuery(input: { slug: string }) {
 	return infiniteQueryOptions({
-		queryKey: ["comments", input.slug],
+		queryKey: comments(input.slug),
 		queryFn: (context) =>
 			listComments({ cursor: context.pageParam, slug: input.slug }),
 		initialPageParam: 0,
@@ -40,28 +43,36 @@ export function commentsQuery(input: { slug: string }) {
 }
 ```
 
-**`prefetch`** starts the request and returns a handle at once. The page renders now; `use()` suspends whatever is still loading, under its Suspense fallback.
+A loader names its queries in one `load` call. **`prefetch`** starts a request without waiting for it: the page renders now, and `use()` suspends whatever is still loading under its Suspense fallback. **`swr`** holds the navigation until the data is cached, so `use()` returns it without suspending. `useQuery` returns a thenable for every handle, because the cache can drop a query between the loader and the render.
 
 ```tsx
-import { type QueryHandle, useQuery } from "@raf-query/react";
+import {
+	load,
+	prefetch,
+	type QueryHandle,
+	swr,
+	useInfiniteQuery,
+	useQuery,
+} from "@raf-query/react";
 import { Suspense, use } from "react";
 
 export const Route = createFileRoute("/posts/$slug")({
-	loader: (args) => {
-		const qc = args.context.queryClient;
+	loader: async (args) => {
 		const { slug } = args.params;
-		return {
-			comments: qc.prefetch(commentsQuery, { slug }),
-			post: qc.prefetch(postQuery, { slug }),
-		};
+		const [handles] = await load(args.context.queryClient, {
+			post: swr(postQuery, { slug }),
+			comments: prefetch(commentsQuery, { slug }),
+		});
+		return handles;
 	},
 	component: PostPage,
 });
 
 function PostPage() {
 	const data = Route.useLoaderData();
-	const [postPromise] = useQuery(postQuery, data.post);
-	const post = use(postPromise);
+	const [postThenable] = useQuery(postQuery, data.post);
+	// The loader waited for it, so this doesn't suspend.
+	const post = use(postThenable);
 	return (
 		<article>
 			<h1>{post.title}</h1>
@@ -73,8 +84,8 @@ function PostPage() {
 }
 
 function Comments(props: { handle: QueryHandle<typeof commentsQuery> }) {
-	const [pagesPromise] = useQuery(commentsQuery, props.handle);
-	const pages = use(pagesPromise);
+	const [pagesThenable] = useInfiniteQuery(commentsQuery, props.handle);
+	const pages = use(pagesThenable);
 	return pages.pages
 		.flatMap((page) => page.items)
 		.map((comment) => (
@@ -85,50 +96,12 @@ function Comments(props: { handle: QueryHandle<typeof commentsQuery> }) {
 }
 ```
 
-**`ensure`** waits until the data is cached, so the navigation holds. `useQuery` returns the data itself for that handle, not a promise. Await the post and its comments together with [`allKeyed`](https://raf-query.katt.dev/docs/starting-queries#awaiting-several-queries) — a record of promises in, the same record out — so one wait never delays the other.
-
-```tsx
-import { allKeyed, useQuery } from "@raf-query/react";
-
-export const Route = createFileRoute("/posts/$slug")({
-	loader: (args) => {
-		const qc = args.context.queryClient;
-		const { slug } = args.params;
-		return allKeyed({
-			comments: qc.ensure(commentsQuery, { slug }),
-			post: qc.ensure(postQuery, { slug }),
-		});
-	},
-	component: PostPage,
-});
-
-function PostPage() {
-	const data = Route.useLoaderData();
-	// Both already waited, so these are the data itself.
-	const [post] = useQuery(postQuery, data.post);
-	const [pages] = useQuery(commentsQuery, data.comments);
-	return (
-		<article>
-			<h1>{post.title}</h1>
-			{pages.pages
-				.flatMap((page) => page.items)
-				.map((comment) => (
-					<p key={comment.id}>
-						<strong>{comment.author}</strong> {comment.body}
-					</p>
-				))}
-		</article>
-	);
-}
-```
-
 ## Entry points
 
-| Import                             | Use                                                                                                                                               |
-| ---------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `@raf-query/react`                 | `QueryClientProvider`, `QueryProvider`, `useQuery`, `useWaterfall`, `useIsFetching`, `HydrationBoundary`, and all of core, `QueryClient` included |
-| `@raf-query/react/tanstack-router` | [TanStack Start and Router](https://raf-query.katt.dev/docs/tanstack-start) SSR streaming                                                         |
-| `@raf-query/react/devtools`        | The [devtools](https://raf-query.katt.dev/docs/devtools) panel; omit the element to tree-shake it                                                 |
+| Import                             | Use                                                                                                                                                                                                                 |
+| ---------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `@raf-query/react`                 | `QueryClientProvider`, `useQuery`, `useInfiniteQuery`, `useIsFetching`, `HydrationBoundary`, `QueryDevtools`, and all of core (`group`, `dehydrate`, `hydrate`); what an app doesn't import stays out of its bundle |
+| `@raf-query/react/tanstack-router` | [TanStack Start and Router](https://raf-query.katt.dev/docs/tanstack-start) SSR streaming                                                                                                                           |
 
 ## License
 

package/dist/bind.d.mts

@@ -0,0 +1,19 @@
+import { QueryClient } from "@raf-query/core";
+import { RootOf } from "@raf-query/core/internal";
+//#region src/bind.d.ts
+/**
+ * `useQueryClient` typed with a root, so verbs called with the client it
+ * returns check factories and targets against that root. `T` is the
+ * client's type, or the type of a function that makes it. Bind once per app:
+ *
+ * ```ts
+ * // raf.ts
+ * export const useQueryClient = bindUseQueryClient<typeof makeQueryClient>();
+ * ```
+ *
+ * It returns `useQueryClient` itself; only the types change. It isn't a
+ * hook, so call it at module level. This module has no `"use client"`, so a
+ * server module can import the file that binds it.
+ */
+export declare function bindUseQueryClient<T>(): () => QueryClient<RootOf<T>>;
+//#endregion

package/dist/bind.mjs

@@ -0,0 +1,21 @@
+import { useQueryClient } from "./provider.mjs";
+//#region src/bind.ts
+/**
+* `useQueryClient` typed with a root, so verbs called with the client it
+* returns check factories and targets against that root. `T` is the
+* client's type, or the type of a function that makes it. Bind once per app:
+*
+* ```ts
+* // raf.ts
+* export const useQueryClient = bindUseQueryClient<typeof makeQueryClient>();
+* ```
+*
+* It returns `useQueryClient` itself; only the types change. It isn't a
+* hook, so call it at module level. This module has no `"use client"`, so a
+* server module can import the file that binds it.
+*/
+function bindUseQueryClient() {
+	return useQueryClient;
+}
+//#endregion
+export { bindUseQueryClient };

package/dist/browser-render.mjs

@@ -0,0 +1,46 @@
+import { rejected } from "@raf-query/core/internal";
+//#region src/browser-render.ts
+/**
+* The digest Next.js gives a boundary that renders only in the browser
+* (`next/dynamic` with `ssr: false`); it doesn't report those errors.
+*/
+const clientRendering = "BAILOUT_TO_CLIENT_SIDE_RENDERING";
+/**
+* What a server render's read rejects with when nothing on the server will
+* settle the query. `use()` throws it, React renders the nearest Suspense
+* fallback, and the browser renders the content.
+*/
+var BrowserRenderError = class extends Error {
+	digest = clientRendering;
+	name = "BrowserRenderError";
+};
+/** Server clients a server components' `HydrationBoundary` feeds. */
+const fedByServerComponents = /* @__PURE__ */ new WeakSet();
+/**
+* Mark a server render's client as fed by server components: from now on,
+* its renders leave a query nothing started to the browser instead of
+* fetching it, since nothing would send that request's data down.
+*/
+function markFedByServerComponents(client) {
+	if (client.isServer) fedByServerComponents.add(client);
+}
+/** Whether a render on `client` leaves a query nothing started to the browser. */
+function leavesUnstartedToBrowser(client) {
+	return fedByServerComponents.has(client);
+}
+const reads = /* @__PURE__ */ new WeakMap();
+/**
+* The read of an entry a server render won't settle: no data, no error and
+* no request in flight. It rejects, and the boundary that `use()`s it renders
+* in the browser.
+*/
+function browserRender(entry) {
+	let read = reads.get(entry);
+	if (!read) {
+		read = rejected(new BrowserRenderError(`Query ${entry.hash} loads in the browser: nothing started it on the server`));
+		reads.set(entry, read);
+	}
+	return read;
+}
+//#endregion
+export { browserRender, leavesUnstartedToBrowser, markFedByServerComponents };

package/dist/devtools.d.mts

@@ -1,2 +1,24 @@
-import { DevtoolsTheme, QueryDevtools, QueryDevtoolsPanel, QueryDevtoolsPanelProps, QueryDevtoolsProps } from "./devtools-panel.mjs";
-export { type DevtoolsTheme, QueryDevtools, QueryDevtoolsPanel, type QueryDevtoolsPanelProps, type QueryDevtoolsProps };
+import { QueryClient } from "@raf-query/core";
+import { CSSProperties } from "react";
+//#region src/devtools.d.ts
+export interface QueryDevtoolsPanelProps {
+  /** The client to inspect. Default: the nearest `QueryClientProvider`'s. */
+  readonly client?: QueryClient;
+  /** Shows a close button that calls this. */
+  readonly onClose?: () => void;
+  /** Styles for the panel's root element, e.g. its height. */
+  readonly style?: CSSProperties;
+}
+export interface QueryDevtoolsProps {
+  /** Corner of the toggle button. Default: `"bottom-right"`. */
+  readonly buttonPosition?: "bottom-left" | "bottom-right" | "top-left" | "top-right";
+  /** The client to inspect. Default: the nearest `QueryClientProvider`'s. */
+  readonly client?: QueryClient;
+  /** Open on the first render. */
+  readonly initialIsOpen?: boolean;
+}
+/** The devtools panel, to place in your own layout. */
+export declare function QueryDevtoolsPanel(props: QueryDevtoolsPanelProps): import("react").JSX.Element;
+/** A toggle button that opens the devtools panel over the page. */
+export declare function QueryDevtools(props: QueryDevtoolsProps): import("react").JSX.Element;
+//#endregion

package/dist/devtools.mjs

@@ -1,3 +1,238 @@
 "use client";
-import { QueryDevtools, QueryDevtoolsPanel } from "./devtools-panel.mjs";
+import { useOptionalQueryClient } from "./provider.mjs";
+import { fetchEntry, loadsOf, remove, reset } from "@raf-query/core/internal";
+import { useMemo, useState, useSyncExternalStore } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+//#region src/devtools.tsx
+function statusOf(entry) {
+	const state = entry.state;
+	if (state.isFetching) return "fetching";
+	if (state.status === "error") return "error";
+	return state.hasData ? entry.readers.size > 0 ? "active" : "inactive" : "pending";
+}
+function snapshotOf(client) {
+	return {
+		loads: loadsOf(client),
+		rows: [...client["~entries"].values()].map((entry) => ({
+			entry,
+			readers: entry.readers.size,
+			state: entry.state,
+			status: statusOf(entry),
+			updatedAt: entry.state.updatedAt
+		})).toSorted((a, b) => a.entry.hash.localeCompare(b.entry.hash))
+	};
+}
+function snapshotStore(client) {
+	let changed = false;
+	let snapshot = snapshotOf(client);
+	return {
+		read: () => {
+			if (changed) {
+				changed = false;
+				snapshot = snapshotOf(client);
+			}
+			return snapshot;
+		},
+		subscribe: (onChange) => {
+			changed = true;
+			return client.subscribe(() => {
+				changed = true;
+				onChange();
+			});
+		}
+	};
+}
+function useSnapshot(client) {
+	const store = useMemo(() => snapshotStore(client), [client]);
+	return useSyncExternalStore(store.subscribe, store.read, store.read);
+}
+const colors = {
+	active: "#16a34a",
+	error: "#dc2626",
+	fetching: "#2563eb",
+	inactive: "#6b7280",
+	pending: "#ca8a04"
+};
+function Panel(props) {
+	const snapshot = useSnapshot(props.client);
+	const [selected, setSelected] = useState();
+	const row = snapshot.rows.find((candidate) => candidate.entry.hash === selected);
+	return /* @__PURE__ */ jsxs("div", {
+		style: {
+			background: "#0b0d12",
+			color: "#e5e7eb",
+			display: "grid",
+			font: "12px/1.4 ui-monospace, monospace",
+			gridTemplateColumns: "minmax(0, 1fr) minmax(0, 1fr)",
+			height: 320,
+			...props.style
+		},
+		children: [/* @__PURE__ */ jsxs("div", {
+			style: {
+				borderRight: "1px solid #1f2937",
+				overflow: "auto"
+			},
+			children: [
+				/* @__PURE__ */ jsxs("div", {
+					style: {
+						display: "flex",
+						gap: 8,
+						padding: 8
+					},
+					children: [/* @__PURE__ */ jsxs("strong", { children: [
+						"Queries (",
+						snapshot.rows.length,
+						")"
+					] }), props.onClose ? /* @__PURE__ */ jsx("button", {
+						onClick: props.onClose,
+						style: { marginLeft: "auto" },
+						type: "button",
+						children: "Close"
+					}) : null]
+				}),
+				snapshot.rows.map((item) => /* @__PURE__ */ jsxs("button", {
+					onClick: () => setSelected(item.entry.hash),
+					style: {
+						background: item.entry.hash === selected ? "#1f2937" : "transparent",
+						border: 0,
+						color: "inherit",
+						display: "flex",
+						font: "inherit",
+						gap: 8,
+						padding: "4px 8px",
+						textAlign: "left",
+						width: "100%"
+					},
+					type: "button",
+					children: [
+						/* @__PURE__ */ jsx("span", {
+							style: {
+								color: colors[item.status],
+								minWidth: 64
+							},
+							children: item.status
+						}),
+						/* @__PURE__ */ jsx("span", {
+							style: { minWidth: 16 },
+							children: item.readers
+						}),
+						/* @__PURE__ */ jsx("span", {
+							style: {
+								overflow: "hidden",
+								textOverflow: "ellipsis"
+							},
+							children: item.entry.hash
+						})
+					]
+				}, item.entry.hash)),
+				/* @__PURE__ */ jsxs("div", {
+					style: {
+						borderTop: "1px solid #1f2937",
+						padding: 8
+					},
+					children: [/* @__PURE__ */ jsx("strong", { children: "Loads" }), snapshot.loads.toReversed().map((record) => /* @__PURE__ */ jsx("div", { children: record.entries.map((one) => `${one.name} (${one.kind})`).join(", ") }, record.startedAt + record.entries.map((one) => one.hash).join()))]
+				})
+			]
+		}), /* @__PURE__ */ jsx("div", {
+			style: {
+				overflow: "auto",
+				padding: 8
+			},
+			children: row ? /* @__PURE__ */ jsxs(Fragment, { children: [
+				/* @__PURE__ */ jsxs("div", {
+					style: {
+						display: "flex",
+						gap: 8,
+						marginBottom: 8
+					},
+					children: [
+						/* @__PURE__ */ jsx("button", {
+							onClick: () => void fetchEntry(row.entry, { restart: true }),
+							type: "button",
+							children: "Refetch"
+						}),
+						/* @__PURE__ */ jsx("button", {
+							onClick: () => void reset(row.entry),
+							type: "button",
+							children: "Reset"
+						}),
+						/* @__PURE__ */ jsx("button", {
+							onClick: () => remove(row.entry),
+							type: "button",
+							children: "Remove"
+						})
+					]
+				}),
+				/* @__PURE__ */ jsxs("div", { children: [
+					"Updated:",
+					" ",
+					row.updatedAt ? new Date(row.updatedAt).toLocaleTimeString() : "never"
+				] }),
+				/* @__PURE__ */ jsx("pre", {
+					style: { whiteSpace: "pre-wrap" },
+					children: JSON.stringify(row.state.error ?? row.state.data, null, 2)
+				})
+			] }) : /* @__PURE__ */ jsx("div", {
+				style: { color: "#6b7280" },
+				children: "Select a query"
+			})
+		})]
+	});
+}
+/** The devtools panel, to place in your own layout. */
+function QueryDevtoolsPanel(props) {
+	const nearest = useOptionalQueryClient();
+	const client = props.client ?? nearest;
+	if (!client) throw new Error("QueryDevtoolsPanel: pass `client`, or render it in a QueryClientProvider");
+	return /* @__PURE__ */ jsx(Panel, {
+		...props,
+		client
+	});
+}
+const corners = {
+	"bottom-left": {
+		bottom: 12,
+		left: 12
+	},
+	"bottom-right": {
+		bottom: 12,
+		right: 12
+	},
+	"top-left": {
+		left: 12,
+		top: 12
+	},
+	"top-right": {
+		right: 12,
+		top: 12
+	}
+};
+/** A toggle button that opens the devtools panel over the page. */
+function QueryDevtools(props) {
+	const [open, setOpen] = useState(props.initialIsOpen ?? false);
+	const corner = corners[props.buttonPosition ?? "bottom-right"];
+	return /* @__PURE__ */ jsx(Fragment, { children: open ? /* @__PURE__ */ jsx("div", {
+		style: {
+			bottom: 0,
+			left: 0,
+			position: "fixed",
+			right: 0,
+			zIndex: 99999
+		},
+		children: /* @__PURE__ */ jsx(QueryDevtoolsPanel, {
+			client: props.client,
+			onClose: () => setOpen(false)
+		})
+	}) : /* @__PURE__ */ jsx("button", {
+		onClick: () => setOpen(true),
+		style: {
+			...corner,
+			position: "fixed",
+			zIndex: 99999
+		},
+		type: "button",
+		children: "raf-query"
+	}) });
+}
+//#endregion
 export { QueryDevtools, QueryDevtoolsPanel };

package/dist/hydration-boundary/hydrate.mjs

@@ -1,6 +1,8 @@
 "use client";
 import { useQueryClient } from "../provider.mjs";
-import { Query, hashKey, hydrate } from "@raf-query/core";
+import { markFedByServerComponents } from "../browser-render.mjs";
+import { hydrate } from "@raf-query/core";
+import { hashKey } from "@raf-query/core/internal";
 import { useEffect, useState } from "react";
 //#region src/hydration-boundary/hydrate.tsx
 /**
@@ -8,11 +10,10 @@ import { useEffect, useState } from "react";
 * render, and entries it already shows, which must wait for a commit.
 */
 function split(client, state) {
-	const shown = new Set(client.getAll().filter((query) => Query.getUnsafe(query).hasData).map((query) => query.hash));
-	const isShown = (query) => shown.has(hashKey(query.key));
+	const isShown = (sent) => client["~entries"].get(hashKey(sent.queryKey))?.state.hasData === true;
 	return {
-		deferred: { queries: state.queries.filter(isShown) },
-		now: { queries: state.queries.filter((query) => !isShown(query)) }
+		deferred: { entries: state.entries.filter(isShown) },
+		now: { entries: state.entries.filter((sent) => !isShown(sent)) }
 	};
 }
 /**
@@ -25,12 +26,12 @@ function split(client, state) {
 */
 function Hydrate(props) {
 	const client = useQueryClient();
+	if (props.fromServerComponents) markFedByServerComponents(client);
 	const state = props.state;
-	const options = props.options;
 	const [hydrated, setHydrated] = useState();
 	if (hydrated?.state !== state) {
 		const parts = split(client, state);
-		hydrate(client, parts.now, options);
+		hydrate(client, parts.now);
 		setHydrated({
 			deferred: parts.deferred,
 			state
@@ -38,12 +39,8 @@ function Hydrate(props) {
 	}
 	const deferred = hydrated?.deferred;
 	useEffect(() => {
-		if (deferred && deferred.queries.length > 0) hydrate(client, deferred, options);
-	}, [
-		client,
-		deferred,
-		options
-	]);
+		if (deferred && deferred.entries.length > 0) hydrate(client, deferred);
+	}, [client, deferred]);
 	return props.children;
 }
 //#endregion

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

@@ -6,6 +6,10 @@ import { HydrationBoundaryProps } from "./hydration-boundary.mjs";
  * browser cache: pending entries cross as promises and stream in as they
  * settle, and entries an earlier boundary already sent in this request are
  * skipped. With `state`, writes that state, as the browser version does.
+ *
+ * It also marks the client components' server render: from there on, a read
+ * of a query nothing sent renders its Suspense fallback on the server and
+ * loads in the browser, instead of fetching where nothing would send it.
  */
 export declare function HydrationBoundary(props: HydrationBoundaryProps): import("react").JSX.Element;
 //#endregion

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

@@ -1,27 +1,36 @@
 import { Hydrate } from "./hydrate.mjs";
-import { sentHashes } from "./sent.mjs";
 import { dehydrate } from "@raf-query/core";
 import { jsx } from "react/jsx-runtime";
 //#region src/hydration-boundary/hydration-boundary-react-server.tsx
+const sentByClient = /* @__PURE__ */ new WeakMap();
+/**
+* Hashes of the request client's entries an earlier `HydrationBoundary`
+* already sent, so each entry crosses once per request.
+*/
+function sentHashes(client) {
+	const sent = sentByClient.get(client) ?? /* @__PURE__ */ new Set();
+	sentByClient.set(client, sent);
+	return sent;
+}
 /**
 * `HydrationBoundary` in server components (the `react-server` export
 * condition). With `client`, sends the request client's entries to the
 * browser cache: pending entries cross as promises and stream in as they
 * settle, and entries an earlier boundary already sent in this request are
 * skipped. With `state`, writes that state, as the browser version does.
+*
+* It also marks the client components' server render: from there on, a read
+* of a query nothing sent renders its Suspense fallback on the server and
+* loads in the browser, instead of fetching where nothing would send it.
 */
 function HydrationBoundary(props) {
-	if (props.client === void 0) return /* @__PURE__ */ jsx(Hydrate, {
-		options: props.options,
-		state: props.state,
-		children: props.children
-	});
 	const client = props.client;
-	const state = dehydrate(client, {
-		sent: sentHashes(client),
-		...props.options
+	const state = client === void 0 ? props.state : dehydrate(client, {
+		...props.options,
+		sent: sentHashes(client)
 	});
 	return /* @__PURE__ */ jsx(Hydrate, {
+		fromServerComponents: true,
 		state,
 		children: props.children
 	});