@raf-query/react 0.1.16 → 0.1.17

package/CHANGELOG.md

@@ -1,10 +1,16 @@
 # Changelog
 
+## [0.1.17](https://github.com/KATT/raf-query/compare/0.1.16...0.1.17) (2026-10-13)
+
+### Performance Improvements
+
+* **react:** browser build of the TanStack Router integration ([#48](https://github.com/KATT/raf-query/issues/48)) ([75e78cf](https://github.com/KATT/raf-query/commit/75e78cf968c069188a2688ad3298fb4bee2e3b8c))
+
 ## [0.1.16](https://github.com/KATT/raf-query/compare/0.1.15...0.1.16) (2026-10-13)
 
 ### Bug Fixes
 
-* stale data always refreshes when switching pages ([#49](https://github.com/KATT/raf-query/issues/49)) ([68652cd](https://github.com/KATT/raf-query/commit/68652cdf6ea06ef86d277329098ee294dba98f21))
+- stale data always refreshes when switching pages ([#49](https://github.com/KATT/raf-query/issues/49)) ([68652cd](https://github.com/KATT/raf-query/commit/68652cdf6ea06ef86d277329098ee294dba98f21))
 
 ## [0.1.15](https://github.com/KATT/raf-query/compare/0.1.14...0.1.15) (2026-10-13)
 

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

@@ -0,0 +1,11 @@
+import { RouterIntegrationOptions } from "./tanstack-router-shared.mjs";
+import { AnyRouter } from "@tanstack/react-router";
+//#region src/tanstack-router-browser.d.ts
+/**
+ * The browser build of `@raf-query/react/tanstack-router` (the `browser`
+ * export condition): the client half only, so the server's dehydration
+ * stream stays out of the app bundle.
+ */
+export declare function setupRouterIntegration<TRouter extends AnyRouter>(options: RouterIntegrationOptions<TRouter>): void;
+//#endregion
+export type { RouterIntegrationOptions };

package/dist/tanstack-router-browser.mjs

@@ -0,0 +1,13 @@
+import { handleRedirects, setupClient } from "./tanstack-router-shared.mjs";
+//#region src/tanstack-router-browser.ts
+/**
+* The browser build of `@raf-query/react/tanstack-router` (the `browser`
+* export condition): the client half only, so the server's dehydration
+* stream stays out of the app bundle.
+*/
+function setupRouterIntegration(options) {
+	setupClient(options);
+	handleRedirects(options);
+}
+//#endregion
+export { setupRouterIntegration };

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

@@ -0,0 +1,13 @@
+import { QueryClient } from "./client.mjs";
+import { DehydrateOptions, DehydratedState, HydrateOptions } from "@raf-query/core";
+import { AnyRouter } from "@tanstack/react-router";
+//#region src/tanstack-router-shared.d.ts
+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;
+}
+//#endregion

package/dist/tanstack-router-shared.mjs

@@ -0,0 +1,48 @@
+import { hydrate } from "./client.mjs";
+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);
+}
+/**
+* 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);
+	}
+}
+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) => {
+			console.error("raf-query: reading the query stream failed", error);
+		});
+	};
+}
+function handleRedirects(options) {
+	if (!(options.handleRedirects ?? true)) return;
+	const router = options.router;
+	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);
+		}
+	});
+}
+//#endregion
+export { handleRedirects, setupClient };

package/dist/tanstack-router.d.mts

@@ -1,15 +1,6 @@
-import { QueryClient } from "./client.mjs";
-import { DehydrateOptions, HydrateOptions } from "@raf-query/core";
+import { RouterIntegrationOptions } from "./tanstack-router-shared.mjs";
 import { AnyRouter } from "@tanstack/react-router";
 //#region src/tanstack-router.d.ts
-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;
-}
 /**
  * Connects a query client to a TanStack Router (and TanStack Start) router:
  *
@@ -22,4 +13,5 @@ export interface RouterIntegrationOptions<TRouter extends AnyRouter> {
  * Call it in `getRouter`, which runs once per request on the server.
  */
 export declare function setupRouterIntegration<TRouter extends AnyRouter>(options: RouterIntegrationOptions<TRouter>): void;
-//#endregion
+//#endregion
+export type { RouterIntegrationOptions };

package/dist/tanstack-router.mjs

@@ -1,5 +1,5 @@
-import { Effect, Exit, Predicate, Scope, Stream } from "effect";
-import { isRedirect } from "@tanstack/react-router";
+import { handleRedirects, setupClient } from "./tanstack-router-shared.mjs";
+import { Effect, Exit, Scope, Stream } from "effect";
 //#region src/tanstack-router.ts
 const noop = () => {};
 function setupServer(options) {
@@ -39,25 +39,6 @@ function setupServer(options) {
 		};
 	};
 }
-function hasRafQueries(value) {
-	return Predicate.hasProperty(value, "raf") && Predicate.isObject(value.raf);
-}
-function setupClient(options) {
-	const router = options.router;
-	const cache = options.queryClient.effect;
-	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;
-		Effect.runSync(cache.hydrate(raf.initial, hydrateOptions));
-		Effect.runFork(cache.hydrateStream(Stream.fromReadableStream({
-			evaluate: () => raf.stream,
-			onError: (error) => error
-		}), hydrateOptions).pipe(Effect.catchCause((cause) => Effect.logError("raf-query: reading the query stream failed", cause))));
-	};
-}
 /**
 * Connects a query client to a TanStack Router (and TanStack Start) router:
 *
@@ -70,16 +51,9 @@ function setupClient(options) {
 * Call it in `getRouter`, which runs once per request on the server.
 */
 function setupRouterIntegration(options) {
-	const router = options.router;
-	if (router.isServer) setupServer(options);
+	if (options.router.isServer) setupServer(options);
 	else setupClient(options);
-	if (options.handleRedirects ?? true) 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);
-		}
-	});
+	handleRedirects(options);
 }
 //#endregion
 export { setupRouterIntegration };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@raf-query/react",
-  "version": "0.1.16",
+  "version": "0.1.17",
   "description": "React bindings for raf-query, a render-as-you-fetch query library",
   "keywords": [
     "query",
@@ -37,10 +37,18 @@
     "./devtools/production": "./dist/devtools-production.mjs",
     "./next": "./dist/next.mjs",
     "./rsc": "./dist/rsc.mjs",
-    "./tanstack-router": "./dist/tanstack-router.mjs"
+    "./tanstack-router": {
+      "workerd": "./dist/tanstack-router.mjs",
+      "worker": "./dist/tanstack-router.mjs",
+      "node": "./dist/tanstack-router.mjs",
+      "deno": "./dist/tanstack-router.mjs",
+      "bun": "./dist/tanstack-router.mjs",
+      "browser": "./dist/tanstack-router-browser.mjs",
+      "default": "./dist/tanstack-router.mjs"
+    }
   },
   "dependencies": {
-    "@raf-query/core": "0.1.16"
+    "@raf-query/core": "0.1.17"
   },
   "peerDependencies": {
     "@tanstack/react-router": "^1.170.0",