@raf-query/react 0.1.16 → 0.2.0

package/CHANGELOG.md

@@ -1,10 +1,24 @@
 # Changelog
 
+## [0.2.0](https://github.com/KATT/raf-query/compare/0.1.16...0.2.0) (2026-10-13)
+
+### ⚠ BREAKING CHANGES
+
+* **react:** qc.fetch / qc.ensure reject with an AbortError when cancelled ([#47](https://github.com/KATT/raf-query/issues/47))
+
+### Bug Fixes
+
+* **react:** qc.fetch / qc.ensure reject with an AbortError when cancelled ([#47](https://github.com/KATT/raf-query/issues/47)) ([53aa90b](https://github.com/KATT/raf-query/commit/53aa90b4b6068cff3998b189d3d563f338a3e564))
+
+### 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/README.md

@@ -751,23 +751,23 @@ When the last reader of a query unsubscribes during a background refetch, a `que
 
 `@raf-query/core`:
 
-| Export                                                       | Use                                                                                     |
-| ------------------------------------------------------------ | --------------------------------------------------------------------------------------- |
-| `QueryCache`                                                 | The cache service (`qc.effect`): `make`, `layer`, and the verbs as Effects              |
-| `Query`                                                      | Cache entries: `Query.fetch`, `Query.changes`, `Query.getUnsafe`, `Query.metaUnsafe`, … |
-| `Platform`                                                   | The page the cache watches (focus, network); swap it in tests                           |
-| `queryOptions(options)`                                      | Typed options for a query factory                                                       |
-| `infiniteQueryOptions(options)`                              | Typed options for a paged query factory                                                 |
-| `hashKey(key)`, `matchesKey(key, prefix)`                    | Key helpers                                                                             |
-| `QueryObserver`                                              | One reader's view of a query, with tracked results; for bindings                        |
-| `Query.CancelledError`                                       | Failure of a request whose entry was removed or cleared before it settled               |
-| `RedactedError`                                              | What a streamed pending query rejects with when its server request failed               |
-| `QueryHandle<TFactory>`                                      | Handle type for props                                                                   |
-| `EnsuredQueryHandle<TFactory>`                               | Handle type for props fed by `ensure`                                                   |
-| `Thenable<T>`                                                | Promise with `status` / `value` / `reason`, read by `use()`                             |
-| `DataOf<TFactory>`, `InputOf<TFactory>`, `ErrorOf<TFactory>` | A factory's data, input and error types                                                 |
-| `ServicesOf<TFactory>`                                       | The services a factory's `queryFn` Effect needs; `never` for promises                   |
-| `Register`, `QueryMeta`                                      | Augment `Register` with `queryMeta` to type [`meta`](#query-meta)                       |
+| Export                                                       | Use                                                                                                                                                                                        |
+| ------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| `QueryCache`                                                 | The cache service (`qc.effect`): `make`, `layer`, and the verbs as Effects                                                                                                                 |
+| `Query`                                                      | Cache entries: `Query.fetch`, `Query.changes`, `Query.getUnsafe`, `Query.metaUnsafe`, …                                                                                                    |
+| `Platform`                                                   | The page the cache watches (focus, network); swap it in tests                                                                                                                              |
+| `queryOptions(options)`                                      | Typed options for a query factory                                                                                                                                                          |
+| `infiniteQueryOptions(options)`                              | Typed options for a paged query factory                                                                                                                                                    |
+| `hashKey(key)`, `matchesKey(key, prefix)`                    | Key helpers                                                                                                                                                                                |
+| `QueryObserver`                                              | One reader's view of a query, with tracked results; for bindings                                                                                                                           |
+| `Query.CancelledError`                                       | Failure of an Effect request whose entry was removed or cleared before it settled. `qc.fetch` / `qc.ensure` reject with an `AbortError` `DOMException` instead, as an aborted `fetch` does |
+| `RedactedError`                                              | What a streamed pending query rejects with when its server request failed                                                                                                                  |
+| `QueryHandle<TFactory>`                                      | Handle type for props                                                                                                                                                                      |
+| `EnsuredQueryHandle<TFactory>`                               | Handle type for props fed by `ensure`                                                                                                                                                      |
+| `Thenable<T>`                                                | Promise with `status` / `value` / `reason`, read by `use()`                                                                                                                                |
+| `DataOf<TFactory>`, `InputOf<TFactory>`, `ErrorOf<TFactory>` | A factory's data, input and error types                                                                                                                                                    |
+| `ServicesOf<TFactory>`                                       | The services a factory's `queryFn` Effect needs; `never` for promises                                                                                                                      |
+| `Register`, `QueryMeta`                                      | Augment `Register` with `queryMeta` to type [`meta`](#query-meta)                                                                                                                          |
 
 `@raf-query/react` (plus all of the above):
 

package/dist/client.mjs

@@ -1,6 +1,6 @@
 import { unsafeCast } from "./cast.mjs";
 import { QueryCache } from "@raf-query/core";
-import { Context, Effect, Exit, Layer, Option, Scope } from "effect";
+import { Context, Effect, Exit, Layer, Option, Predicate, Scope } from "effect";
 //#region src/client.ts
 /**
 * A verb's Effect, run by a client. Its requirement is the factory's
@@ -11,6 +11,16 @@ function provided(effect) {
 	return unsafeCast(effect);
 }
 /**
+* Run a verb that waits on a request. A cancelled request rejects with an
+* `AbortError`, as an aborted `fetch` does, not with the Effect API's
+* `Query.CancelledError`.
+*/
+function runLoad(effect) {
+	return Effect.runPromise(effect).catch((error) => {
+		throw Predicate.isTagged(error, "CancelledError") ? new DOMException("The query was cancelled", "AbortError") : error;
+	});
+}
+/**
 * The query cache, with Promise methods. Create one per request on the
 * server and one per browser tab. `effect` is the same cache's Effect API.
 * Its verbs take factories whose `queryFn` needs at most `TServices`, the
@@ -57,11 +67,11 @@ var QueryClient = class {
 	* directly.
 	*/
 	ensure(factory, ...args) {
-		return Effect.runPromise(provided(this.effect.ensure(factory, ...args)));
+		return runLoad(provided(this.effect.ensure(factory, ...args)));
 	}
 	/** Like `ensure`, but resolves to the data. */
 	fetch(factory, ...args) {
-		return Effect.runPromise(provided(this.effect.fetch(factory, ...args)));
+		return runLoad(provided(this.effect.fetch(factory, ...args)));
 	}
 	/**
 	* Mark queries stale and refetch the ones being read. Resolves once those

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.2.0",
   "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.2.0"
   },
   "peerDependencies": {
     "@tanstack/react-router": "^1.170.0",