@raf-query/react 0.0.4 → 0.0.5

package/CHANGELOG.md

@@ -1,10 +1,18 @@
 # Changelog
 
+## [0.0.5](https://github.com/KATT/raf-query/compare/0.0.4...0.0.5) (2026-10-12)
+
+* **examples:** use Zod instead of Effect Schema ([#6](https://github.com/KATT/raf-query/issues/6)) ([7068cbe](https://github.com/KATT/raf-query/commit/7068cbe95e693787f22908b0ed678f6b7b05a550))
+
+### Bug Fixes
+
+* **react:** HydrationBoundary defers newer data for entries already on screen ([#5](https://github.com/KATT/raf-query/issues/5)) ([881a535](https://github.com/KATT/raf-query/commit/881a53544f65e2ffe858a0d010d7109427b93d55))
+
 ## [0.0.4](https://github.com/KATT/raf-query/compare/0.0.3...0.0.4) (2026-10-12)
 
 ### Features
 
-* @raf-query/core, @raf-query/react and the example apps ([#1](https://github.com/KATT/raf-query/issues/1)) ([3881014](https://github.com/KATT/raf-query/commit/3881014b7f07d17d733256e184b627ead1f5788b))
+- @raf-query/core, @raf-query/react and the example apps ([#1](https://github.com/KATT/raf-query/issues/1)) ([3881014](https://github.com/KATT/raf-query/commit/3881014b7f07d17d733256e184b627ead1f5788b))
 
 ## [0.0.3](https://github.com/KATT/raf-query/compare/0.0.2...0.0.3) (2026-10-12)
 

package/dist/hydrate.mjs

@@ -1,32 +1,63 @@
 "use client";
 import { useQueryClient } from "./provider.mjs";
 import { hashKey, hydrate } from "@raf-query/core";
-import { useState } from "react";
+import { useEffect, useState } from "react";
 //#region src/hydrate.tsx
 const hydratedByClient = /* @__PURE__ */ new WeakMap();
 /** Hashes of entries a client received through {@link Hydrate}. */
 function hydratedHashes(client) {
 	return hydratedByClient.get(client) ?? /* @__PURE__ */ new Set();
 }
+function markHydrated(client, state) {
+	let hashes = hydratedByClient.get(client);
+	if (!hashes) {
+		hashes = /* @__PURE__ */ new Set();
+		hydratedByClient.set(client, hashes);
+	}
+	for (const query of state.queries) hashes.add(hashKey(query.key));
+}
+/**
+* Entries the client has no data for, which children need during this
+* 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.getState().hasData).map((query) => query.hash));
+	const isShown = (query) => shown.has(hashKey(query.key));
+	return {
+		deferred: { queries: state.queries.filter(isShown) },
+		now: { queries: state.queries.filter((query) => !isShown(query)) }
+	};
+}
 /**
-* Writes dehydrated entries into the provided client before its children
-* render, so their reads find the data (or the server's pending request).
+* Writes dehydrated entries into the provided client. Entries the client has
+* no data for are written before its children render, so their reads find
+* the data (or the server's pending request). Newer data for entries already
+* on screen is written after commit, so a render React throws away (an
+* interrupted navigation) doesn't change the current page.
 * Rendered by `HydrationBoundary`; apps don't use it directly.
 */
 function Hydrate(props) {
 	const client = useQueryClient();
 	const state = props.state;
+	const options = props.options;
 	const [hydrated, setHydrated] = useState();
-	if (hydrated !== state) {
-		let hashes = hydratedByClient.get(client);
-		if (!hashes) {
-			hashes = /* @__PURE__ */ new Set();
-			hydratedByClient.set(client, hashes);
-		}
-		for (const query of state.queries) hashes.add(hashKey(query.key));
-		hydrate(client, state, props.options);
-		setHydrated(state);
+	if (hydrated?.state !== state) {
+		const parts = split(client, state);
+		markHydrated(client, state);
+		hydrate(client, parts.now, options);
+		setHydrated({
+			deferred: parts.deferred,
+			state
+		});
 	}
+	const deferred = hydrated?.deferred;
+	useEffect(() => {
+		if (deferred && deferred.queries.length > 0) hydrate(client, deferred, options);
+	}, [
+		client,
+		deferred,
+		options
+	]);
 	return props.children;
 }
 //#endregion

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@raf-query/react",
-  "version": "0.0.4",
+  "version": "0.0.5",
   "description": "React bindings for raf-query, a render-as-you-fetch query library",
   "keywords": [
     "query",
@@ -38,7 +38,7 @@
     "./tanstack-router": "./dist/tanstack-router.mjs"
   },
   "dependencies": {
-    "@raf-query/core": "0.0.4",
+    "@raf-query/core": "0.0.5",
     "effect": "^4.0.1"
   },
   "peerDependencies": {