@raf-query/react 0.9.2 → 0.10.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +17 -1
- package/README.md +5 -7
- package/dist/{hydrate.mjs → hydration-boundary/hydrate.mjs} +3 -3
- package/dist/hydration-boundary/hydration-boundary-react-server.d.mts +11 -0
- package/dist/hydration-boundary/hydration-boundary-react-server.mjs +30 -0
- package/dist/hydration-boundary/hydration-boundary.d.mts +65 -0
- package/dist/{react-router.mjs → hydration-boundary/hydration-boundary.mjs} +22 -4
- package/dist/{sent.mjs → hydration-boundary/sent.mjs} +1 -1
- package/dist/index-react-server.d.mts +11 -0
- package/dist/index-react-server.mjs +10 -0
- package/dist/index-shared.d.mts +9 -0
- package/dist/index-shared.mjs +9 -0
- package/dist/index.d.mts +4 -1
- package/dist/index.mjs +3 -1
- package/dist/{browser-requests.mjs → query-provider/browser-requests.mjs} +1 -1
- package/dist/{query-provider.d.mts → query-provider/query-provider.d.mts} +2 -2
- package/dist/{query-provider.mjs → query-provider/query-provider.mjs} +3 -3
- package/dist/use-query.mjs +1 -1
- package/dist/use-waterfall.d.mts +1 -1
- package/dist/use-waterfall.mjs +2 -2
- package/package.json +6 -5
- package/dist/react-router.d.mts +0 -35
- package/dist/rsc.d.mts +0 -28
- package/dist/rsc.mjs +0 -34
package/CHANGELOG.md
CHANGED
|
@@ -1,10 +1,26 @@
|
|
|
1
1
|
# Changelog
|
|
2
2
|
|
|
3
|
+
## [0.10.0](https://github.com/KATT/raf-query/compare/0.9.2...0.10.0) (2026-10-16)
|
|
4
|
+
|
|
5
|
+
### ⚠ BREAKING CHANGES
|
|
6
|
+
|
|
7
|
+
* **react:** import HydrationBoundary from @raf-query/react in RSC and React Router ([#175](https://github.com/KATT/raf-query/issues/175))
|
|
8
|
+
* **react:** import QueryProvider from @raf-query/react ([#177](https://github.com/KATT/raf-query/issues/177))
|
|
9
|
+
|
|
10
|
+
### Features
|
|
11
|
+
|
|
12
|
+
* **react:** import HydrationBoundary from @raf-query/react in RSC and React Router ([#175](https://github.com/KATT/raf-query/issues/175)) ([244705c](https://github.com/KATT/raf-query/commit/244705c74841d280a596195dec5cf5e5d5617fe5))
|
|
13
|
+
* **react:** import QueryProvider from @raf-query/react ([#177](https://github.com/KATT/raf-query/issues/177)) ([fb4fceb](https://github.com/KATT/raf-query/commit/fb4fcebb404906b4a9d5716a1d45cb33c82da2fb)), references [#175](https://github.com/KATT/raf-query/issues/175) [#175](https://github.com/KATT/raf-query/issues/175) [#175](https://github.com/KATT/raf-query/issues/175) [#175](https://github.com/KATT/raf-query/issues/175)
|
|
14
|
+
|
|
15
|
+
### Code Refactoring
|
|
16
|
+
|
|
17
|
+
* **react:** group the HydrationBoundary and QueryProvider files in folders ([#186](https://github.com/KATT/raf-query/issues/186)) ([ad07bb4](https://github.com/KATT/raf-query/commit/ad07bb45ca77fc797cd6b8432685e58f43907258)), references [#175](https://github.com/KATT/raf-query/issues/175)
|
|
18
|
+
|
|
3
19
|
## [0.9.2](https://github.com/KATT/raf-query/compare/0.9.1...0.9.2) (2026-10-15)
|
|
4
20
|
|
|
5
21
|
### Bug Fixes
|
|
6
22
|
|
|
7
|
-
|
|
23
|
+
- **core:** keep handles of factories with the same signature apart ([#167](https://github.com/KATT/raf-query/issues/167)) ([5894bcb](https://github.com/KATT/raf-query/commit/5894bcbcc382c60e9c04768c0e178bf0996f4b45))
|
|
8
24
|
|
|
9
25
|
## [0.9.1](https://github.com/KATT/raf-query/compare/0.9.0...0.9.1) (2026-10-15)
|
|
10
26
|
|
package/README.md
CHANGED
|
@@ -124,13 +124,11 @@ function PostPage() {
|
|
|
124
124
|
|
|
125
125
|
## Entry points
|
|
126
126
|
|
|
127
|
-
| Import | Use
|
|
128
|
-
| ---------------------------------- |
|
|
129
|
-
| `@raf-query/react` | `QueryClient`, `QueryClientProvider`, `useQuery`, `useWaterfall`, `useIsFetching`, and all of core |
|
|
130
|
-
| `@raf-query/react/tanstack-router` | [TanStack Start and Router](https://raf-query.katt.dev/docs/tanstack-start) SSR streaming
|
|
131
|
-
| `@raf-query/react/
|
|
132
|
-
| `@raf-query/react/react-router` | [React Router](https://raf-query.katt.dev/docs/react-router) Framework Mode loaders |
|
|
133
|
-
| `@raf-query/react/devtools` | The [devtools](https://raf-query.katt.dev/docs/devtools) panel; omit the element to tree-shake it |
|
|
127
|
+
| Import | Use |
|
|
128
|
+
| ---------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------- |
|
|
129
|
+
| `@raf-query/react` | `QueryClient`, `QueryClientProvider`, `QueryProvider`, `useQuery`, `useWaterfall`, `useIsFetching`, `HydrationBoundary`, and all of core |
|
|
130
|
+
| `@raf-query/react/tanstack-router` | [TanStack Start and Router](https://raf-query.katt.dev/docs/tanstack-start) SSR streaming |
|
|
131
|
+
| `@raf-query/react/devtools` | The [devtools](https://raf-query.katt.dev/docs/devtools) panel; omit the element to tree-shake it |
|
|
134
132
|
|
|
135
133
|
## License
|
|
136
134
|
|
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
import { hydrate } from "
|
|
3
|
-
import { useQueryClient } from "
|
|
2
|
+
import { hydrate } from "../client.mjs";
|
|
3
|
+
import { useQueryClient } from "../provider.mjs";
|
|
4
4
|
import { Query, hashKey } from "@raf-query/core";
|
|
5
5
|
import { useEffect, useState } from "react";
|
|
6
|
-
//#region src/hydrate.tsx
|
|
6
|
+
//#region src/hydration-boundary/hydrate.tsx
|
|
7
7
|
/**
|
|
8
8
|
* Entries the client has no data for, which children need during this
|
|
9
9
|
* render, and entries it already shows, which must wait for a commit.
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import { HydrationBoundaryProps } from "./hydration-boundary.mjs";
|
|
2
|
+
//#region src/hydration-boundary/hydration-boundary-react-server.d.ts
|
|
3
|
+
/**
|
|
4
|
+
* `HydrationBoundary` in server components (the `react-server` export
|
|
5
|
+
* condition). With `client`, sends the request client's entries to the
|
|
6
|
+
* browser cache: pending entries cross as promises and stream in as they
|
|
7
|
+
* settle, and entries an earlier boundary already sent in this request are
|
|
8
|
+
* skipped. With `state`, writes that state, as the browser version does.
|
|
9
|
+
*/
|
|
10
|
+
export declare function HydrationBoundary(props: HydrationBoundaryProps): import("react").JSX.Element;
|
|
11
|
+
//#endregion
|
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
import { dehydrate } from "../client.mjs";
|
|
2
|
+
import { Hydrate } from "./hydrate.mjs";
|
|
3
|
+
import { sentHashes } from "./sent.mjs";
|
|
4
|
+
import { jsx } from "react/jsx-runtime";
|
|
5
|
+
//#region src/hydration-boundary/hydration-boundary-react-server.tsx
|
|
6
|
+
/**
|
|
7
|
+
* `HydrationBoundary` in server components (the `react-server` export
|
|
8
|
+
* condition). With `client`, sends the request client's entries to the
|
|
9
|
+
* browser cache: pending entries cross as promises and stream in as they
|
|
10
|
+
* settle, and entries an earlier boundary already sent in this request are
|
|
11
|
+
* skipped. With `state`, writes that state, as the browser version does.
|
|
12
|
+
*/
|
|
13
|
+
function HydrationBoundary(props) {
|
|
14
|
+
if (props.client === void 0) return /* @__PURE__ */ jsx(Hydrate, {
|
|
15
|
+
options: props.options,
|
|
16
|
+
state: props.state,
|
|
17
|
+
children: props.children
|
|
18
|
+
});
|
|
19
|
+
const client = props.client;
|
|
20
|
+
const state = dehydrate(client, {
|
|
21
|
+
sent: sentHashes(client),
|
|
22
|
+
...props.options
|
|
23
|
+
});
|
|
24
|
+
return /* @__PURE__ */ jsx(Hydrate, {
|
|
25
|
+
state,
|
|
26
|
+
children: props.children
|
|
27
|
+
});
|
|
28
|
+
}
|
|
29
|
+
//#endregion
|
|
30
|
+
export { HydrationBoundary };
|
|
@@ -0,0 +1,65 @@
|
|
|
1
|
+
import { QueryClient } from "../client.mjs";
|
|
2
|
+
import { DehydrateOptions, DehydratedState, HydrateOptions } from "@raf-query/core";
|
|
3
|
+
import { ReactNode } from "react";
|
|
4
|
+
//#region src/hydration-boundary/hydration-boundary.d.ts
|
|
5
|
+
export type HydrationBoundaryProps = {
|
|
6
|
+
readonly children?: ReactNode;
|
|
7
|
+
/**
|
|
8
|
+
* The request's server client (e.g. from React's `cache()`). Server
|
|
9
|
+
* components only.
|
|
10
|
+
*/
|
|
11
|
+
readonly client: QueryClient;
|
|
12
|
+
readonly options?: DehydrateOptions;
|
|
13
|
+
readonly state?: never;
|
|
14
|
+
} | {
|
|
15
|
+
readonly children?: ReactNode;
|
|
16
|
+
readonly client?: never;
|
|
17
|
+
readonly options?: HydrateOptions;
|
|
18
|
+
/** A loader's `dehydrate(qc)`. */
|
|
19
|
+
readonly state: DehydratedState;
|
|
20
|
+
};
|
|
21
|
+
/**
|
|
22
|
+
* Writes server data into the browser (or SSR) client.
|
|
23
|
+
*
|
|
24
|
+
* In a server component, pass the request's `client`. Its entries go
|
|
25
|
+
* through the RSC payload: pending entries cross as promises and stream in
|
|
26
|
+
* as they settle, and entries an earlier boundary already sent in this
|
|
27
|
+
* request are skipped. Server components get that build of the component
|
|
28
|
+
* through the package's `react-server` export condition.
|
|
29
|
+
*
|
|
30
|
+
* ```tsx
|
|
31
|
+
* const qc = getQueryClient();
|
|
32
|
+
* const comments = qc.prefetch(commentsQuery, { slug });
|
|
33
|
+
* return (
|
|
34
|
+
* <HydrationBoundary client={qc}>
|
|
35
|
+
* <Comments handle={comments} />
|
|
36
|
+
* </HydrationBoundary>
|
|
37
|
+
* );
|
|
38
|
+
* ```
|
|
39
|
+
*
|
|
40
|
+
* With loaders, such as React Router Framework Mode, pass the `state` the
|
|
41
|
+
* loader dehydrated:
|
|
42
|
+
*
|
|
43
|
+
* ```tsx
|
|
44
|
+
* export async function loader(args: Route.LoaderArgs) {
|
|
45
|
+
* const qc = new QueryClient();
|
|
46
|
+
* const post = await qc.ensure(postQuery, { slug: args.params.slug });
|
|
47
|
+
* return { dehydratedState: dehydrate(qc), post };
|
|
48
|
+
* }
|
|
49
|
+
*
|
|
50
|
+
* export default function Page(props: Route.ComponentProps) {
|
|
51
|
+
* const { dehydratedState, post } = props.loaderData;
|
|
52
|
+
* return (
|
|
53
|
+
* <HydrationBoundary state={dehydratedState}>
|
|
54
|
+
* <Post handle={post} />
|
|
55
|
+
* </HydrationBoundary>
|
|
56
|
+
* );
|
|
57
|
+
* }
|
|
58
|
+
* ```
|
|
59
|
+
*
|
|
60
|
+
* Pending entries cross as promises when the framework's serializer
|
|
61
|
+
* supports them (React Router's Single Fetch does). Nested boundaries
|
|
62
|
+
* are fine: each only writes what its `state` holds.
|
|
63
|
+
*/
|
|
64
|
+
export declare function HydrationBoundary(props: HydrationBoundaryProps): import("react").JSX.Element;
|
|
65
|
+
//#endregion
|
|
@@ -1,11 +1,28 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
import { Hydrate } from "./hydrate.mjs";
|
|
3
3
|
import { jsx } from "react/jsx-runtime";
|
|
4
|
-
//#region src/
|
|
4
|
+
//#region src/hydration-boundary/hydration-boundary.tsx
|
|
5
5
|
/**
|
|
6
|
-
* Writes
|
|
7
|
-
*
|
|
8
|
-
*
|
|
6
|
+
* Writes server data into the browser (or SSR) client.
|
|
7
|
+
*
|
|
8
|
+
* In a server component, pass the request's `client`. Its entries go
|
|
9
|
+
* through the RSC payload: pending entries cross as promises and stream in
|
|
10
|
+
* as they settle, and entries an earlier boundary already sent in this
|
|
11
|
+
* request are skipped. Server components get that build of the component
|
|
12
|
+
* through the package's `react-server` export condition.
|
|
13
|
+
*
|
|
14
|
+
* ```tsx
|
|
15
|
+
* const qc = getQueryClient();
|
|
16
|
+
* const comments = qc.prefetch(commentsQuery, { slug });
|
|
17
|
+
* return (
|
|
18
|
+
* <HydrationBoundary client={qc}>
|
|
19
|
+
* <Comments handle={comments} />
|
|
20
|
+
* </HydrationBoundary>
|
|
21
|
+
* );
|
|
22
|
+
* ```
|
|
23
|
+
*
|
|
24
|
+
* With loaders, such as React Router Framework Mode, pass the `state` the
|
|
25
|
+
* loader dehydrated:
|
|
9
26
|
*
|
|
10
27
|
* ```tsx
|
|
11
28
|
* export async function loader(args: Route.LoaderArgs) {
|
|
@@ -29,6 +46,7 @@ import { jsx } from "react/jsx-runtime";
|
|
|
29
46
|
* are fine: each only writes what its `state` holds.
|
|
30
47
|
*/
|
|
31
48
|
function HydrationBoundary(props) {
|
|
49
|
+
if (props.state === void 0) throw new Error("HydrationBoundary needs `state` here. `client` works only in server components.");
|
|
32
50
|
return /* @__PURE__ */ jsx(Hydrate, {
|
|
33
51
|
options: props.options,
|
|
34
52
|
state: props.state,
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import { QueryClient, QueryClientConfig, dehydrate, hydrate } from "./client.mjs";
|
|
2
|
+
import { Settled, allKeyed } from "./all-keyed.mjs";
|
|
3
|
+
import { QueryClientProvider, useQueryClient } from "./provider.mjs";
|
|
4
|
+
import { QueryProvider } from "./query-provider/query-provider.mjs";
|
|
5
|
+
import { useIsFetching } from "./use-is-fetching.mjs";
|
|
6
|
+
import { HasTypedError, PagingControls, QueryControls, ThrowsOnError, UseQueryControls, UseQueryOptions, UseQueryResult, UseQueryResultWithData, UseQueryThrowOptions, useQuery } from "./use-query.mjs";
|
|
7
|
+
import { useWaterfall } from "./use-waterfall.mjs";
|
|
8
|
+
import "./index-shared.mjs";
|
|
9
|
+
import { HydrationBoundary } from "./hydration-boundary/hydration-boundary-react-server.mjs";
|
|
10
|
+
export * from "@raf-query/core";
|
|
11
|
+
export { type HasTypedError, HydrationBoundary, type PagingControls, QueryClient, type QueryClientConfig, QueryClientProvider, type QueryControls, QueryProvider, type Settled, type ThrowsOnError, type UseQueryControls, type UseQueryOptions, type UseQueryResult, type UseQueryResultWithData, type UseQueryThrowOptions, allKeyed, dehydrate, hydrate, useIsFetching, useQuery, useQueryClient, useWaterfall };
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import { allKeyed } from "./all-keyed.mjs";
|
|
2
|
+
import { QueryClient, dehydrate, hydrate } from "./client.mjs";
|
|
3
|
+
import { QueryClientProvider, useQueryClient } from "./provider.mjs";
|
|
4
|
+
import { QueryProvider } from "./query-provider/query-provider.mjs";
|
|
5
|
+
import { useIsFetching } from "./use-is-fetching.mjs";
|
|
6
|
+
import { useQuery } from "./use-query.mjs";
|
|
7
|
+
import { useWaterfall } from "./use-waterfall.mjs";
|
|
8
|
+
import { HydrationBoundary } from "./hydration-boundary/hydration-boundary-react-server.mjs";
|
|
9
|
+
export * from "@raf-query/core";
|
|
10
|
+
export { HydrationBoundary, QueryClient, QueryClientProvider, QueryProvider, allKeyed, dehydrate, hydrate, useIsFetching, useQuery, useQueryClient, useWaterfall };
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import { QueryClient, QueryClientConfig, dehydrate, hydrate } from "./client.mjs";
|
|
2
|
+
import { Settled, allKeyed } from "./all-keyed.mjs";
|
|
3
|
+
import { QueryClientProvider, useQueryClient } from "./provider.mjs";
|
|
4
|
+
import { QueryProvider } from "./query-provider/query-provider.mjs";
|
|
5
|
+
import { useIsFetching } from "./use-is-fetching.mjs";
|
|
6
|
+
import { HasTypedError, PagingControls, QueryControls, ThrowsOnError, UseQueryControls, UseQueryOptions, UseQueryResult, UseQueryResultWithData, UseQueryThrowOptions, useQuery } from "./use-query.mjs";
|
|
7
|
+
import { useWaterfall } from "./use-waterfall.mjs";
|
|
8
|
+
export * from "@raf-query/core";
|
|
9
|
+
export { type HasTypedError, type PagingControls, QueryClient, type QueryClientConfig, QueryClientProvider, type QueryControls, QueryProvider, type Settled, type ThrowsOnError, type UseQueryControls, type UseQueryOptions, type UseQueryResult, type UseQueryResultWithData, type UseQueryThrowOptions, allKeyed, dehydrate, hydrate, useIsFetching, useQuery, useQueryClient, useWaterfall };
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import { allKeyed } from "./all-keyed.mjs";
|
|
2
|
+
import { QueryClient, dehydrate, hydrate } from "./client.mjs";
|
|
3
|
+
import { QueryClientProvider, useQueryClient } from "./provider.mjs";
|
|
4
|
+
import { QueryProvider } from "./query-provider/query-provider.mjs";
|
|
5
|
+
import { useIsFetching } from "./use-is-fetching.mjs";
|
|
6
|
+
import { useQuery } from "./use-query.mjs";
|
|
7
|
+
import { useWaterfall } from "./use-waterfall.mjs";
|
|
8
|
+
export * from "@raf-query/core";
|
|
9
|
+
export { QueryClient, QueryClientProvider, QueryProvider, allKeyed, dehydrate, hydrate, useIsFetching, useQuery, useQueryClient, useWaterfall };
|
package/dist/index.d.mts
CHANGED
|
@@ -1,8 +1,11 @@
|
|
|
1
1
|
import { QueryClient, QueryClientConfig, dehydrate, hydrate } from "./client.mjs";
|
|
2
2
|
import { Settled, allKeyed } from "./all-keyed.mjs";
|
|
3
3
|
import { QueryClientProvider, useQueryClient } from "./provider.mjs";
|
|
4
|
+
import { QueryProvider } from "./query-provider/query-provider.mjs";
|
|
4
5
|
import { useIsFetching } from "./use-is-fetching.mjs";
|
|
5
6
|
import { HasTypedError, PagingControls, QueryControls, ThrowsOnError, UseQueryControls, UseQueryOptions, UseQueryResult, UseQueryResultWithData, UseQueryThrowOptions, useQuery } from "./use-query.mjs";
|
|
6
7
|
import { useWaterfall } from "./use-waterfall.mjs";
|
|
8
|
+
import "./index-shared.mjs";
|
|
9
|
+
import { HydrationBoundary } from "./hydration-boundary/hydration-boundary.mjs";
|
|
7
10
|
export * from "@raf-query/core";
|
|
8
|
-
export { type HasTypedError, type PagingControls, QueryClient, type QueryClientConfig, QueryClientProvider, type QueryControls, type Settled, type ThrowsOnError, type UseQueryControls, type UseQueryOptions, type UseQueryResult, type UseQueryResultWithData, type UseQueryThrowOptions, allKeyed, dehydrate, hydrate, useIsFetching, useQuery, useQueryClient, useWaterfall };
|
|
11
|
+
export { type HasTypedError, HydrationBoundary, type PagingControls, QueryClient, type QueryClientConfig, QueryClientProvider, type QueryControls, QueryProvider, type Settled, type ThrowsOnError, type UseQueryControls, type UseQueryOptions, type UseQueryResult, type UseQueryResultWithData, type UseQueryThrowOptions, allKeyed, dehydrate, hydrate, useIsFetching, useQuery, useQueryClient, useWaterfall };
|
package/dist/index.mjs
CHANGED
|
@@ -1,8 +1,10 @@
|
|
|
1
1
|
import { allKeyed } from "./all-keyed.mjs";
|
|
2
2
|
import { QueryClient, dehydrate, hydrate } from "./client.mjs";
|
|
3
3
|
import { QueryClientProvider, useQueryClient } from "./provider.mjs";
|
|
4
|
+
import { QueryProvider } from "./query-provider/query-provider.mjs";
|
|
4
5
|
import { useIsFetching } from "./use-is-fetching.mjs";
|
|
5
6
|
import { useQuery } from "./use-query.mjs";
|
|
6
7
|
import { useWaterfall } from "./use-waterfall.mjs";
|
|
8
|
+
import { HydrationBoundary } from "./hydration-boundary/hydration-boundary.mjs";
|
|
7
9
|
export * from "@raf-query/core";
|
|
8
|
-
export { QueryClient, QueryClientProvider, allKeyed, dehydrate, hydrate, useIsFetching, useQuery, useQueryClient, useWaterfall };
|
|
10
|
+
export { HydrationBoundary, QueryClient, QueryClientProvider, QueryProvider, allKeyed, dehydrate, hydrate, useIsFetching, useQuery, useQueryClient, useWaterfall };
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { Query } from "@raf-query/core";
|
|
2
|
-
//#region src/browser-requests.ts
|
|
2
|
+
//#region src/query-provider/browser-requests.ts
|
|
3
3
|
/**
|
|
4
4
|
* The digest Next.js gives a boundary that renders only in the browser
|
|
5
5
|
* (`next/dynamic` with `ssr: false`); it doesn't report those errors.
|
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
import { QueryClientConfig } from "
|
|
1
|
+
import { QueryClientConfig } from "../client.mjs";
|
|
2
2
|
import { ReactNode } from "react";
|
|
3
|
-
//#region src/query-provider.d.ts
|
|
3
|
+
//#region src/query-provider/query-provider.d.ts
|
|
4
4
|
/**
|
|
5
5
|
* The query client provider for React Server Components apps. Creates one
|
|
6
6
|
* client per server render and one per browser tab. The server render
|
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
import { QueryClient } from "
|
|
3
|
-
import { QueryClientProvider } from "
|
|
2
|
+
import { QueryClient } from "../client.mjs";
|
|
3
|
+
import { QueryClientProvider } from "../provider.mjs";
|
|
4
4
|
import { requestInBrowserOnly } from "./browser-requests.mjs";
|
|
5
5
|
import { useState } from "react";
|
|
6
6
|
import { jsx } from "react/jsx-runtime";
|
|
7
|
-
//#region src/query-provider.tsx
|
|
7
|
+
//#region src/query-provider/query-provider.tsx
|
|
8
8
|
/**
|
|
9
9
|
* The query client provider for React Server Components apps. Creates one
|
|
10
10
|
* client per server render and one per browser tab. The server render
|
package/dist/use-query.mjs
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
import { useQueryClient } from "./provider.mjs";
|
|
3
|
-
import { assertSent } from "./browser-requests.mjs";
|
|
3
|
+
import { assertSent } from "./query-provider/browser-requests.mjs";
|
|
4
4
|
import { Query, QueryObserver, fulfilled, pending } from "@raf-query/core";
|
|
5
5
|
import { Effect, Result } from "effect";
|
|
6
6
|
import { use, useEffect, useState, useSyncExternalStore } from "react";
|
package/dist/use-waterfall.d.mts
CHANGED
|
@@ -5,7 +5,7 @@ import { InputArgs, QueryFactory, QueryHandle } from "@raf-query/core";
|
|
|
5
5
|
* at render time (an id from a parent query's data). Each call is a request
|
|
6
6
|
* waterfall: prefer starting the query in a loader or server component.
|
|
7
7
|
* Like `prefetch` in a loader, it refetches stale cached data in the
|
|
8
|
-
* background, once per mount and input. Under
|
|
8
|
+
* background, once per mount and input. Under `QueryProvider` it
|
|
9
9
|
* starts nothing on the server: the reader's Suspense boundary renders its
|
|
10
10
|
* fallback there, and the query loads in the browser.
|
|
11
11
|
*
|
package/dist/use-waterfall.mjs
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
import { useQueryClient } from "./provider.mjs";
|
|
3
|
-
import { startsRequests } from "./browser-requests.mjs";
|
|
3
|
+
import { startsRequests } from "./query-provider/browser-requests.mjs";
|
|
4
4
|
import { Query } from "@raf-query/core";
|
|
5
5
|
import { useState } from "react";
|
|
6
6
|
//#region src/use-waterfall.ts
|
|
@@ -15,7 +15,7 @@ const waitedFor = /* @__PURE__ */ new WeakSet();
|
|
|
15
15
|
* at render time (an id from a parent query's data). Each call is a request
|
|
16
16
|
* waterfall: prefer starting the query in a loader or server component.
|
|
17
17
|
* Like `prefetch` in a loader, it refetches stale cached data in the
|
|
18
|
-
* background, once per mount and input. Under
|
|
18
|
+
* background, once per mount and input. Under `QueryProvider` it
|
|
19
19
|
* starts nothing on the server: the reader's Suspense boundary renders its
|
|
20
20
|
* fallback there, and the query loads in the browser.
|
|
21
21
|
*
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@raf-query/react",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.10.0",
|
|
4
4
|
"description": "React bindings for raf-query, a render-as-you-fetch query library",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"query",
|
|
@@ -32,10 +32,11 @@
|
|
|
32
32
|
"type": "module",
|
|
33
33
|
"sideEffects": false,
|
|
34
34
|
"exports": {
|
|
35
|
-
".":
|
|
35
|
+
".": {
|
|
36
|
+
"react-server": "./dist/index-react-server.mjs",
|
|
37
|
+
"default": "./dist/index.mjs"
|
|
38
|
+
},
|
|
36
39
|
"./devtools": "./dist/devtools.mjs",
|
|
37
|
-
"./rsc": "./dist/rsc.mjs",
|
|
38
|
-
"./react-router": "./dist/react-router.mjs",
|
|
39
40
|
"./tanstack-router": {
|
|
40
41
|
"workerd": "./dist/tanstack-router.mjs",
|
|
41
42
|
"worker": "./dist/tanstack-router.mjs",
|
|
@@ -47,7 +48,7 @@
|
|
|
47
48
|
}
|
|
48
49
|
},
|
|
49
50
|
"dependencies": {
|
|
50
|
-
"@raf-query/core": "0.
|
|
51
|
+
"@raf-query/core": "0.10.0"
|
|
51
52
|
},
|
|
52
53
|
"peerDependencies": {
|
|
53
54
|
"@tanstack/react-router": "^1.170.0",
|
package/dist/react-router.d.mts
DELETED
|
@@ -1,35 +0,0 @@
|
|
|
1
|
-
import { DehydratedState, HydrateOptions } from "@raf-query/core";
|
|
2
|
-
import { ReactNode } from "react";
|
|
3
|
-
//#region src/react-router.d.ts
|
|
4
|
-
/**
|
|
5
|
-
* Writes a loader's dehydrated cache into the browser (or SSR) client.
|
|
6
|
-
* Use it with React Router Framework Mode: start queries in the loader,
|
|
7
|
-
* `dehydrate` the request's client, and pass that state here.
|
|
8
|
-
*
|
|
9
|
-
* ```tsx
|
|
10
|
-
* export async function loader(args: Route.LoaderArgs) {
|
|
11
|
-
* const qc = new QueryClient();
|
|
12
|
-
* const post = await qc.ensure(postQuery, { slug: args.params.slug });
|
|
13
|
-
* return { dehydratedState: dehydrate(qc), post };
|
|
14
|
-
* }
|
|
15
|
-
*
|
|
16
|
-
* export default function Page(props: Route.ComponentProps) {
|
|
17
|
-
* const { dehydratedState, post } = props.loaderData;
|
|
18
|
-
* return (
|
|
19
|
-
* <HydrationBoundary state={dehydratedState}>
|
|
20
|
-
* <Post handle={post} />
|
|
21
|
-
* </HydrationBoundary>
|
|
22
|
-
* );
|
|
23
|
-
* }
|
|
24
|
-
* ```
|
|
25
|
-
*
|
|
26
|
-
* Pending entries cross as promises when the framework's serializer
|
|
27
|
-
* supports them (React Router's Single Fetch does). Nested boundaries
|
|
28
|
-
* are fine: each only writes what its `state` holds.
|
|
29
|
-
*/
|
|
30
|
-
export declare function HydrationBoundary(props: {
|
|
31
|
-
readonly children?: ReactNode;
|
|
32
|
-
readonly options?: HydrateOptions;
|
|
33
|
-
readonly state: DehydratedState;
|
|
34
|
-
}): import("react").JSX.Element;
|
|
35
|
-
//#endregion
|
package/dist/rsc.d.mts
DELETED
|
@@ -1,28 +0,0 @@
|
|
|
1
|
-
import { QueryClient } from "./client.mjs";
|
|
2
|
-
import { QueryProvider } from "./query-provider.mjs";
|
|
3
|
-
import { DehydrateOptions } from "@raf-query/core";
|
|
4
|
-
import { ReactNode } from "react";
|
|
5
|
-
//#region src/rsc.d.ts
|
|
6
|
-
/**
|
|
7
|
-
* Server component: sends the request client's entries to the browser cache.
|
|
8
|
-
* Pending entries cross as promises and stream in as they settle. Entries an
|
|
9
|
-
* earlier boundary already sent in this request are skipped.
|
|
10
|
-
*
|
|
11
|
-
* ```tsx
|
|
12
|
-
* const qc = getQueryClient();
|
|
13
|
-
* const comments = qc.prefetch(commentsQuery, { slug });
|
|
14
|
-
* return (
|
|
15
|
-
* <HydrationBoundary client={qc}>
|
|
16
|
-
* <Comments handle={comments} />
|
|
17
|
-
* </HydrationBoundary>
|
|
18
|
-
* );
|
|
19
|
-
* ```
|
|
20
|
-
*/
|
|
21
|
-
export declare function HydrationBoundary(props: {
|
|
22
|
-
readonly children?: ReactNode;
|
|
23
|
-
/** The request's server client (e.g. from React's `cache()`). */
|
|
24
|
-
readonly client: QueryClient;
|
|
25
|
-
readonly options?: DehydrateOptions;
|
|
26
|
-
}): import("react").JSX.Element;
|
|
27
|
-
//#endregion
|
|
28
|
-
export { QueryProvider };
|
package/dist/rsc.mjs
DELETED
|
@@ -1,34 +0,0 @@
|
|
|
1
|
-
import { dehydrate } from "./client.mjs";
|
|
2
|
-
import { Hydrate } from "./hydrate.mjs";
|
|
3
|
-
import { sentHashes } from "./sent.mjs";
|
|
4
|
-
import { QueryProvider } from "./query-provider.mjs";
|
|
5
|
-
import { jsx } from "react/jsx-runtime";
|
|
6
|
-
//#region src/rsc.tsx
|
|
7
|
-
/**
|
|
8
|
-
* Server component: sends the request client's entries to the browser cache.
|
|
9
|
-
* Pending entries cross as promises and stream in as they settle. Entries an
|
|
10
|
-
* earlier boundary already sent in this request are skipped.
|
|
11
|
-
*
|
|
12
|
-
* ```tsx
|
|
13
|
-
* const qc = getQueryClient();
|
|
14
|
-
* const comments = qc.prefetch(commentsQuery, { slug });
|
|
15
|
-
* return (
|
|
16
|
-
* <HydrationBoundary client={qc}>
|
|
17
|
-
* <Comments handle={comments} />
|
|
18
|
-
* </HydrationBoundary>
|
|
19
|
-
* );
|
|
20
|
-
* ```
|
|
21
|
-
*/
|
|
22
|
-
function HydrationBoundary(props) {
|
|
23
|
-
const client = props.client;
|
|
24
|
-
const state = dehydrate(client, {
|
|
25
|
-
sent: sentHashes(client),
|
|
26
|
-
...props.options
|
|
27
|
-
});
|
|
28
|
-
return /* @__PURE__ */ jsx(Hydrate, {
|
|
29
|
-
state,
|
|
30
|
-
children: props.children
|
|
31
|
-
});
|
|
32
|
-
}
|
|
33
|
-
//#endregion
|
|
34
|
-
export { HydrationBoundary, QueryProvider };
|