@trpc/react-query 11.0.0-alpha-tmp-app-router-example.365 → 11.0.0-alpha-tmp-app-router-example.369
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/dist/bundle-analysis.json +28 -28
- package/dist/rsc.d.ts +50 -6
- package/dist/rsc.d.ts.map +1 -1
- package/dist/rsc.js +65 -10
- package/dist/rsc.mjs +65 -10
- package/package.json +7 -7
- package/src/rsc.tsx +114 -18
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
|
-
"bundleSize":
|
|
3
|
-
"bundleOrigSize":
|
|
4
|
-
"bundleReduction":
|
|
2
|
+
"bundleSize": 32108,
|
|
3
|
+
"bundleOrigSize": 68273,
|
|
4
|
+
"bundleReduction": 52.97,
|
|
5
5
|
"modules": [
|
|
6
6
|
{
|
|
7
7
|
"id": "/src/shared/hooks/createHooksInternal.tsx",
|
|
@@ -14,7 +14,7 @@
|
|
|
14
14
|
"dependents": [
|
|
15
15
|
"/src/createTRPCReact.tsx"
|
|
16
16
|
],
|
|
17
|
-
"percent":
|
|
17
|
+
"percent": 42.8,
|
|
18
18
|
"reduction": 12.84
|
|
19
19
|
},
|
|
20
20
|
{
|
|
@@ -29,7 +29,7 @@
|
|
|
29
29
|
"/src/createTRPCQueryUtils.tsx",
|
|
30
30
|
"/src/shared/hooks/createHooksInternal.tsx"
|
|
31
31
|
],
|
|
32
|
-
"percent":
|
|
32
|
+
"percent": 11.78,
|
|
33
33
|
"reduction": 6.34
|
|
34
34
|
},
|
|
35
35
|
{
|
|
@@ -43,7 +43,7 @@
|
|
|
43
43
|
"dependents": [
|
|
44
44
|
"/src/server/index.ts"
|
|
45
45
|
],
|
|
46
|
-
"percent":
|
|
46
|
+
"percent": 11.44,
|
|
47
47
|
"reduction": 50.38
|
|
48
48
|
},
|
|
49
49
|
{
|
|
@@ -59,9 +59,21 @@
|
|
|
59
59
|
"dependents": [
|
|
60
60
|
"/src/shared/index.ts"
|
|
61
61
|
],
|
|
62
|
-
"percent":
|
|
62
|
+
"percent": 8.94,
|
|
63
63
|
"reduction": 74.38
|
|
64
64
|
},
|
|
65
|
+
{
|
|
66
|
+
"id": "/src/rsc.tsx",
|
|
67
|
+
"size": 2677,
|
|
68
|
+
"origSize": 4833,
|
|
69
|
+
"renderedExports": [
|
|
70
|
+
"createHydrationHelpers"
|
|
71
|
+
],
|
|
72
|
+
"removedExports": [],
|
|
73
|
+
"dependents": [],
|
|
74
|
+
"percent": 8.34,
|
|
75
|
+
"reduction": 44.61
|
|
76
|
+
},
|
|
65
77
|
{
|
|
66
78
|
"id": "/src/internals/getQueryKey.ts",
|
|
67
79
|
"size": 1999,
|
|
@@ -79,21 +91,9 @@
|
|
|
79
91
|
"/src/shared/proxy/useQueriesProxy.ts",
|
|
80
92
|
"/src/shared/hooks/createHooksInternal.tsx"
|
|
81
93
|
],
|
|
82
|
-
"percent": 6.
|
|
94
|
+
"percent": 6.23,
|
|
83
95
|
"reduction": 42.49
|
|
84
96
|
},
|
|
85
|
-
{
|
|
86
|
-
"id": "/src/rsc.tsx",
|
|
87
|
-
"size": 881,
|
|
88
|
-
"origSize": 2101,
|
|
89
|
-
"renderedExports": [
|
|
90
|
-
"createHydrationHelpers"
|
|
91
|
-
],
|
|
92
|
-
"removedExports": [],
|
|
93
|
-
"dependents": [],
|
|
94
|
-
"percent": 2.91,
|
|
95
|
-
"reduction": 58.07
|
|
96
|
-
},
|
|
97
97
|
{
|
|
98
98
|
"id": "/src/createTRPCReact.tsx",
|
|
99
99
|
"size": 850,
|
|
@@ -106,7 +106,7 @@
|
|
|
106
106
|
"dependents": [
|
|
107
107
|
"/src/index.ts"
|
|
108
108
|
],
|
|
109
|
-
"percent": 2.
|
|
109
|
+
"percent": 2.65,
|
|
110
110
|
"reduction": 89.28
|
|
111
111
|
},
|
|
112
112
|
{
|
|
@@ -120,7 +120,7 @@
|
|
|
120
120
|
"dependents": [
|
|
121
121
|
"/src/shared/index.ts"
|
|
122
122
|
],
|
|
123
|
-
"percent": 2.
|
|
123
|
+
"percent": 2.51,
|
|
124
124
|
"reduction": 23.16
|
|
125
125
|
},
|
|
126
126
|
{
|
|
@@ -135,7 +135,7 @@
|
|
|
135
135
|
"/src/shared/index.ts",
|
|
136
136
|
"/src/shared/hooks/createHooksInternal.tsx"
|
|
137
137
|
],
|
|
138
|
-
"percent": 1.
|
|
138
|
+
"percent": 1.77,
|
|
139
139
|
"reduction": 82.03
|
|
140
140
|
},
|
|
141
141
|
{
|
|
@@ -151,7 +151,7 @@
|
|
|
151
151
|
"/src/shared/hooks/createHooksInternal.tsx",
|
|
152
152
|
"/src/utils/createUtilityFunctions.ts"
|
|
153
153
|
],
|
|
154
|
-
"percent": 1.
|
|
154
|
+
"percent": 1.47,
|
|
155
155
|
"reduction": 17.31
|
|
156
156
|
},
|
|
157
157
|
{
|
|
@@ -165,7 +165,7 @@
|
|
|
165
165
|
"dependents": [
|
|
166
166
|
"/src/shared/hooks/createHooksInternal.tsx"
|
|
167
167
|
],
|
|
168
|
-
"percent": 0.
|
|
168
|
+
"percent": 0.69,
|
|
169
169
|
"reduction": 36.21
|
|
170
170
|
},
|
|
171
171
|
{
|
|
@@ -179,7 +179,7 @@
|
|
|
179
179
|
"dependents": [
|
|
180
180
|
"/src/index.ts"
|
|
181
181
|
],
|
|
182
|
-
"percent": 0.
|
|
182
|
+
"percent": 0.5,
|
|
183
183
|
"reduction": 66.6
|
|
184
184
|
},
|
|
185
185
|
{
|
|
@@ -197,7 +197,7 @@
|
|
|
197
197
|
"/src/shared/proxy/utilsProxy.ts",
|
|
198
198
|
"/src/shared/hooks/createHooksInternal.tsx"
|
|
199
199
|
],
|
|
200
|
-
"percent": 0.
|
|
200
|
+
"percent": 0.48,
|
|
201
201
|
"reduction": 97.59
|
|
202
202
|
},
|
|
203
203
|
{
|
|
@@ -211,7 +211,7 @@
|
|
|
211
211
|
"dependents": [
|
|
212
212
|
"/src/shared/index.ts"
|
|
213
213
|
],
|
|
214
|
-
"percent": 0.
|
|
214
|
+
"percent": 0.4,
|
|
215
215
|
"reduction": 74.9
|
|
216
216
|
},
|
|
217
217
|
{
|
package/dist/rsc.d.ts
CHANGED
|
@@ -1,14 +1,58 @@
|
|
|
1
1
|
import { type QueryClient } from '@tanstack/react-query';
|
|
2
|
+
import type { TRPCClientError } from '@trpc/client';
|
|
3
|
+
import type { inferTransformedProcedureOutput } from '@trpc/server';
|
|
2
4
|
import { type AnyRouter, type inferProcedureInput, type RouterRecord } from '@trpc/server/unstable-core-do-not-import';
|
|
3
|
-
import type { AnyProcedure, inferProcedureOutput, RouterCaller, TypeError } from '@trpc/server/unstable-core-do-not-import';
|
|
5
|
+
import type { AnyProcedure, AnyRootTypes, inferProcedureOutput, inferRouterRootTypes, RouterCaller, TypeError } from '@trpc/server/unstable-core-do-not-import';
|
|
4
6
|
import * as React from 'react';
|
|
5
|
-
type
|
|
6
|
-
type
|
|
7
|
-
|
|
7
|
+
import type { TRPCFetchInfiniteQueryOptions, TRPCFetchQueryOptions } from './shared';
|
|
8
|
+
type DecorateProcedure<TRoot extends AnyRootTypes, TProcedure extends AnyProcedure> = {
|
|
9
|
+
(input: inferProcedureInput<TProcedure>): Promise<inferProcedureOutput<TProcedure>>;
|
|
10
|
+
prefetch: (input: inferProcedureInput<TProcedure>, opts?: TRPCFetchQueryOptions<inferTransformedProcedureOutput<TRoot, TProcedure>, TRPCClientError<TRoot>>) => Promise<void>;
|
|
11
|
+
prefetchInfinite: (input: inferProcedureInput<TProcedure>, opts?: TRPCFetchInfiniteQueryOptions<inferProcedureInput<TProcedure>, inferTransformedProcedureOutput<TRoot, TProcedure>, TRPCClientError<TRoot>>) => Promise<void>;
|
|
8
12
|
};
|
|
9
|
-
type
|
|
13
|
+
type DecorateRouterRecord<TRoot extends AnyRootTypes, TRecord extends RouterRecord> = {
|
|
14
|
+
[TKey in keyof TRecord]: TRecord[TKey] extends AnyProcedure ? DecorateProcedure<TRoot, TRecord[TKey]> : TRecord[TKey] extends RouterRecord ? DecorateRouterRecord<TRoot, TRecord[TKey]> : never;
|
|
15
|
+
};
|
|
16
|
+
type Caller<TRouter extends AnyRouter> = ReturnType<RouterCaller<inferRouterRootTypes<TRouter>, TRouter['_def']['record']>>;
|
|
10
17
|
export declare function createHydrationHelpers<TRouter extends AnyRouter>(caller: AnyRouter extends TRouter ? TypeError<'Generic parameter missing in `createHydrationHelpers<HERE>`'> : Caller<TRouter>, getQueryClient: () => QueryClient): {
|
|
11
|
-
|
|
18
|
+
/***
|
|
19
|
+
* Wrapped caller with prefetch helpers
|
|
20
|
+
* Can be used as a regular [server-side caller](https://trpc.io/docs/server/server-side-calls)
|
|
21
|
+
* or using prefetch helpers to put the promise into the QueryClient cache
|
|
22
|
+
* @example
|
|
23
|
+
* ```ts
|
|
24
|
+
* const data = await trpc.post.get("postId");
|
|
25
|
+
*
|
|
26
|
+
* // or
|
|
27
|
+
* void trpc.post.get.prefetch("postId");
|
|
28
|
+
* ```
|
|
29
|
+
*/
|
|
30
|
+
trpc: DecorateRouterRecord<inferRouterRootTypes<TRouter>, TRouter["_def"]["record"]>;
|
|
31
|
+
/**
|
|
32
|
+
* HoC to hydrate the query client for a client component
|
|
33
|
+
* to pick up the prefetched promise and skip an initial
|
|
34
|
+
* client-side fetch.
|
|
35
|
+
* @example
|
|
36
|
+
* ```tsx
|
|
37
|
+
* // MyRSC.tsx
|
|
38
|
+
* const MyRSC = ({ params }) => {
|
|
39
|
+
* void trpc.post.get.prefetch(params.postId);
|
|
40
|
+
*
|
|
41
|
+
* return (
|
|
42
|
+
* <HydrateClient>
|
|
43
|
+
* <MyCC postId={params.postId} />
|
|
44
|
+
* </HydrateClient>
|
|
45
|
+
* );
|
|
46
|
+
* };
|
|
47
|
+
*
|
|
48
|
+
* // MyCC.tsx
|
|
49
|
+
* "use client"
|
|
50
|
+
* const MyCC = ({ postId }) => {
|
|
51
|
+
* const { data: post } = trpc.post.get.useQuery(postId);
|
|
52
|
+
* return <div>{post.title}</div>;
|
|
53
|
+
* };
|
|
54
|
+
* ```
|
|
55
|
+
*/
|
|
12
56
|
HydrateClient: (props: {
|
|
13
57
|
children: React.ReactNode;
|
|
14
58
|
}) => React.JSX.Element;
|
package/dist/rsc.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"rsc.d.ts","sourceRoot":"","sources":["../src/rsc.tsx"],"names":[],"mappings":"AAAA,OAAO,EAGL,KAAK,WAAW,EACjB,MAAM,uBAAuB,CAAC;AAC/B,OAAO,EAEL,KAAK,SAAS,EACd,KAAK,mBAAmB,EACxB,KAAK,YAAY,EAClB,MAAM,0CAA0C,CAAC;AAClD,OAAO,KAAK,EACV,YAAY,EACZ,oBAAoB,EACpB,YAAY,EACZ,SAAS,EACV,MAAM,0CAA0C,CAAC;AAClD,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"rsc.d.ts","sourceRoot":"","sources":["../src/rsc.tsx"],"names":[],"mappings":"AAAA,OAAO,EAGL,KAAK,WAAW,EACjB,MAAM,uBAAuB,CAAC;AAC/B,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AACpD,OAAO,KAAK,EAAE,+BAA+B,EAAE,MAAM,cAAc,CAAC;AACpE,OAAO,EAEL,KAAK,SAAS,EACd,KAAK,mBAAmB,EACxB,KAAK,YAAY,EAClB,MAAM,0CAA0C,CAAC;AAClD,OAAO,KAAK,EACV,YAAY,EACZ,YAAY,EACZ,oBAAoB,EACpB,oBAAoB,EAEpB,YAAY,EACZ,SAAS,EACV,MAAM,0CAA0C,CAAC;AAClD,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EACV,6BAA6B,EAC7B,qBAAqB,EACtB,MAAM,UAAU,CAAC;AAIlB,KAAK,iBAAiB,CACpB,KAAK,SAAS,YAAY,EAC1B,UAAU,SAAS,YAAY,IAC7B;IACF,CAAC,KAAK,EAAE,mBAAmB,CAAC,UAAU,CAAC,GAAG,OAAO,CAC/C,oBAAoB,CAAC,UAAU,CAAC,CACjC,CAAC;IACF,QAAQ,EAAE,CACR,KAAK,EAAE,mBAAmB,CAAC,UAAU,CAAC,EACtC,IAAI,CAAC,EAAE,qBAAqB,CAC1B,+BAA+B,CAAC,KAAK,EAAE,UAAU,CAAC,EAClD,eAAe,CAAC,KAAK,CAAC,CACvB,KACE,OAAO,CAAC,IAAI,CAAC,CAAC;IACnB,gBAAgB,EAAE,CAChB,KAAK,EAAE,mBAAmB,CAAC,UAAU,CAAC,EACtC,IAAI,CAAC,EAAE,6BAA6B,CAClC,mBAAmB,CAAC,UAAU,CAAC,EAC/B,+BAA+B,CAAC,KAAK,EAAE,UAAU,CAAC,EAClD,eAAe,CAAC,KAAK,CAAC,CACvB,KACE,OAAO,CAAC,IAAI,CAAC,CAAC;CACpB,CAAC;AAEF,KAAK,oBAAoB,CACvB,KAAK,SAAS,YAAY,EAC1B,OAAO,SAAS,YAAY,IAC1B;KACD,IAAI,IAAI,MAAM,OAAO,GAAG,OAAO,CAAC,IAAI,CAAC,SAAS,YAAY,GACvD,iBAAiB,CAAC,KAAK,EAAE,OAAO,CAAC,IAAI,CAAC,CAAC,GACvC,OAAO,CAAC,IAAI,CAAC,SAAS,YAAY,GAClC,oBAAoB,CAAC,KAAK,EAAE,OAAO,CAAC,IAAI,CAAC,CAAC,GAC1C,KAAK;CACV,CAAC;AAEF,KAAK,MAAM,CAAC,OAAO,SAAS,SAAS,IAAI,UAAU,CACjD,YAAY,CAAC,oBAAoB,CAAC,OAAO,CAAC,EAAE,OAAO,CAAC,MAAM,CAAC,CAAC,QAAQ,CAAC,CAAC,CACvE,CAAC;AAEF,wBAAgB,sBAAsB,CAAC,OAAO,SAAS,SAAS,EAC9D,MAAM,EAAE,SAAS,SAAS,OAAO,GAC7B,SAAS,CAAC,6DAA6D,CAAC,GACxE,MAAM,CAAC,OAAO,CAAC,EACnB,cAAc,EAAE,MAAM,WAAW;IAqD/B;;;;;;;;;;;OAWG;;IAEH;;;;;;;;;;;;;;;;;;;;;;;;OAwBG;2BAlDyB;QAAE,QAAQ,EAAE,MAAM,SAAS,CAAA;KAAE;EAqD5D"}
|
package/dist/rsc.js
CHANGED
|
@@ -24,27 +24,82 @@ function _interopNamespaceDefault(e) {
|
|
|
24
24
|
|
|
25
25
|
var React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
|
|
26
26
|
|
|
27
|
+
const HELPERS = [
|
|
28
|
+
'prefetch',
|
|
29
|
+
'prefetchInfinite'
|
|
30
|
+
];
|
|
27
31
|
function createHydrationHelpers(caller, getQueryClient) {
|
|
28
32
|
const wrappedProxy = unstableCoreDoNotImport.createRecursiveProxy(async ({ path , args })=>{
|
|
29
|
-
const proc = path.reduce(
|
|
30
|
-
|
|
31
|
-
const
|
|
33
|
+
const proc = path.reduce((acc, key)=>// @ts-expect-error - ??
|
|
34
|
+
HELPERS.includes(key) ? acc : acc[key], caller);
|
|
35
|
+
const input = args[0];
|
|
32
36
|
const promise = proc(input);
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
+
const helper = path.pop();
|
|
38
|
+
if (helper === 'prefetch') {
|
|
39
|
+
const args1 = args[1];
|
|
40
|
+
return getQueryClient().prefetchQuery({
|
|
41
|
+
...args1,
|
|
42
|
+
queryKey: getQueryKey.getQueryKeyInternal(path, input, 'query'),
|
|
43
|
+
queryFn: ()=>promise
|
|
44
|
+
});
|
|
45
|
+
}
|
|
46
|
+
if (helper === 'prefetchInfinite') {
|
|
47
|
+
const args11 = args[1];
|
|
48
|
+
return getQueryClient().prefetchInfiniteQuery({
|
|
49
|
+
...args11,
|
|
50
|
+
queryKey: getQueryKey.getQueryKeyInternal(path, input, 'infinite'),
|
|
51
|
+
queryFn: ()=>promise,
|
|
52
|
+
initialPageParam: args11?.initialCursor ?? null
|
|
53
|
+
});
|
|
54
|
+
}
|
|
37
55
|
return promise;
|
|
38
56
|
});
|
|
39
57
|
function HydrateClient(props) {
|
|
40
|
-
const dehydratedState = reactQuery.dehydrate(getQueryClient());
|
|
58
|
+
const dehydratedState = reactQuery.dehydrate(getQueryClient());
|
|
59
|
+
// TODO: transform?? We can't transform promises i don't think...
|
|
60
|
+
// since that is handled by React internally
|
|
41
61
|
return /*#__PURE__*/ React__namespace.createElement(reactQuery.HydrationBoundary, {
|
|
42
62
|
state: dehydratedState
|
|
43
63
|
}, props.children);
|
|
44
64
|
}
|
|
45
65
|
return {
|
|
46
|
-
|
|
47
|
-
|
|
66
|
+
/***
|
|
67
|
+
* Wrapped caller with prefetch helpers
|
|
68
|
+
* Can be used as a regular [server-side caller](https://trpc.io/docs/server/server-side-calls)
|
|
69
|
+
* or using prefetch helpers to put the promise into the QueryClient cache
|
|
70
|
+
* @example
|
|
71
|
+
* ```ts
|
|
72
|
+
* const data = await trpc.post.get("postId");
|
|
73
|
+
*
|
|
74
|
+
* // or
|
|
75
|
+
* void trpc.post.get.prefetch("postId");
|
|
76
|
+
* ```
|
|
77
|
+
*/ trpc: wrappedProxy,
|
|
78
|
+
/**
|
|
79
|
+
* HoC to hydrate the query client for a client component
|
|
80
|
+
* to pick up the prefetched promise and skip an initial
|
|
81
|
+
* client-side fetch.
|
|
82
|
+
* @example
|
|
83
|
+
* ```tsx
|
|
84
|
+
* // MyRSC.tsx
|
|
85
|
+
* const MyRSC = ({ params }) => {
|
|
86
|
+
* void trpc.post.get.prefetch(params.postId);
|
|
87
|
+
*
|
|
88
|
+
* return (
|
|
89
|
+
* <HydrateClient>
|
|
90
|
+
* <MyCC postId={params.postId} />
|
|
91
|
+
* </HydrateClient>
|
|
92
|
+
* );
|
|
93
|
+
* };
|
|
94
|
+
*
|
|
95
|
+
* // MyCC.tsx
|
|
96
|
+
* "use client"
|
|
97
|
+
* const MyCC = ({ postId }) => {
|
|
98
|
+
* const { data: post } = trpc.post.get.useQuery(postId);
|
|
99
|
+
* return <div>{post.title}</div>;
|
|
100
|
+
* };
|
|
101
|
+
* ```
|
|
102
|
+
*/ HydrateClient
|
|
48
103
|
};
|
|
49
104
|
}
|
|
50
105
|
|
package/dist/rsc.mjs
CHANGED
|
@@ -3,27 +3,82 @@ import { createRecursiveProxy } from '@trpc/server/unstable-core-do-not-import';
|
|
|
3
3
|
import * as React from 'react';
|
|
4
4
|
import { getQueryKeyInternal } from './internals/getQueryKey.mjs';
|
|
5
5
|
|
|
6
|
+
const HELPERS = [
|
|
7
|
+
'prefetch',
|
|
8
|
+
'prefetchInfinite'
|
|
9
|
+
];
|
|
6
10
|
function createHydrationHelpers(caller, getQueryClient) {
|
|
7
11
|
const wrappedProxy = createRecursiveProxy(async ({ path , args })=>{
|
|
8
|
-
const proc = path.reduce(
|
|
9
|
-
|
|
10
|
-
const
|
|
12
|
+
const proc = path.reduce((acc, key)=>// @ts-expect-error - ??
|
|
13
|
+
HELPERS.includes(key) ? acc : acc[key], caller);
|
|
14
|
+
const input = args[0];
|
|
11
15
|
const promise = proc(input);
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
+
const helper = path.pop();
|
|
17
|
+
if (helper === 'prefetch') {
|
|
18
|
+
const args1 = args[1];
|
|
19
|
+
return getQueryClient().prefetchQuery({
|
|
20
|
+
...args1,
|
|
21
|
+
queryKey: getQueryKeyInternal(path, input, 'query'),
|
|
22
|
+
queryFn: ()=>promise
|
|
23
|
+
});
|
|
24
|
+
}
|
|
25
|
+
if (helper === 'prefetchInfinite') {
|
|
26
|
+
const args11 = args[1];
|
|
27
|
+
return getQueryClient().prefetchInfiniteQuery({
|
|
28
|
+
...args11,
|
|
29
|
+
queryKey: getQueryKeyInternal(path, input, 'infinite'),
|
|
30
|
+
queryFn: ()=>promise,
|
|
31
|
+
initialPageParam: args11?.initialCursor ?? null
|
|
32
|
+
});
|
|
33
|
+
}
|
|
16
34
|
return promise;
|
|
17
35
|
});
|
|
18
36
|
function HydrateClient(props) {
|
|
19
|
-
const dehydratedState = dehydrate(getQueryClient());
|
|
37
|
+
const dehydratedState = dehydrate(getQueryClient());
|
|
38
|
+
// TODO: transform?? We can't transform promises i don't think...
|
|
39
|
+
// since that is handled by React internally
|
|
20
40
|
return /*#__PURE__*/ React.createElement(HydrationBoundary, {
|
|
21
41
|
state: dehydratedState
|
|
22
42
|
}, props.children);
|
|
23
43
|
}
|
|
24
44
|
return {
|
|
25
|
-
|
|
26
|
-
|
|
45
|
+
/***
|
|
46
|
+
* Wrapped caller with prefetch helpers
|
|
47
|
+
* Can be used as a regular [server-side caller](https://trpc.io/docs/server/server-side-calls)
|
|
48
|
+
* or using prefetch helpers to put the promise into the QueryClient cache
|
|
49
|
+
* @example
|
|
50
|
+
* ```ts
|
|
51
|
+
* const data = await trpc.post.get("postId");
|
|
52
|
+
*
|
|
53
|
+
* // or
|
|
54
|
+
* void trpc.post.get.prefetch("postId");
|
|
55
|
+
* ```
|
|
56
|
+
*/ trpc: wrappedProxy,
|
|
57
|
+
/**
|
|
58
|
+
* HoC to hydrate the query client for a client component
|
|
59
|
+
* to pick up the prefetched promise and skip an initial
|
|
60
|
+
* client-side fetch.
|
|
61
|
+
* @example
|
|
62
|
+
* ```tsx
|
|
63
|
+
* // MyRSC.tsx
|
|
64
|
+
* const MyRSC = ({ params }) => {
|
|
65
|
+
* void trpc.post.get.prefetch(params.postId);
|
|
66
|
+
*
|
|
67
|
+
* return (
|
|
68
|
+
* <HydrateClient>
|
|
69
|
+
* <MyCC postId={params.postId} />
|
|
70
|
+
* </HydrateClient>
|
|
71
|
+
* );
|
|
72
|
+
* };
|
|
73
|
+
*
|
|
74
|
+
* // MyCC.tsx
|
|
75
|
+
* "use client"
|
|
76
|
+
* const MyCC = ({ postId }) => {
|
|
77
|
+
* const { data: post } = trpc.post.get.useQuery(postId);
|
|
78
|
+
* return <div>{post.title}</div>;
|
|
79
|
+
* };
|
|
80
|
+
* ```
|
|
81
|
+
*/ HydrateClient
|
|
27
82
|
};
|
|
28
83
|
}
|
|
29
84
|
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@trpc/react-query",
|
|
3
|
-
"version": "11.0.0-alpha-tmp-app-router-example.
|
|
3
|
+
"version": "11.0.0-alpha-tmp-app-router-example.369+840e1867d",
|
|
4
4
|
"description": "The tRPC React library",
|
|
5
5
|
"author": "KATT",
|
|
6
6
|
"license": "MIT",
|
|
@@ -63,16 +63,16 @@
|
|
|
63
63
|
}
|
|
64
64
|
},
|
|
65
65
|
"peerDependencies": {
|
|
66
|
-
"@tanstack/react-query": "^5.
|
|
67
|
-
"@trpc/client": "11.0.0-alpha-tmp-app-router-example.
|
|
68
|
-
"@trpc/server": "11.0.0-alpha-tmp-app-router-example.
|
|
66
|
+
"@tanstack/react-query": "^5.25.0",
|
|
67
|
+
"@trpc/client": "11.0.0-alpha-tmp-app-router-example.369+840e1867d",
|
|
68
|
+
"@trpc/server": "11.0.0-alpha-tmp-app-router-example.369+840e1867d",
|
|
69
69
|
"react": ">=18.2.0",
|
|
70
70
|
"react-dom": ">=18.2.0"
|
|
71
71
|
},
|
|
72
72
|
"devDependencies": {
|
|
73
73
|
"@tanstack/react-query": "^5.40.0",
|
|
74
|
-
"@trpc/client": "11.0.0-alpha-tmp-app-router-example.
|
|
75
|
-
"@trpc/server": "11.0.0-alpha-tmp-app-router-example.
|
|
74
|
+
"@trpc/client": "11.0.0-alpha-tmp-app-router-example.369+840e1867d",
|
|
75
|
+
"@trpc/server": "11.0.0-alpha-tmp-app-router-example.369+840e1867d",
|
|
76
76
|
"@types/express": "^4.17.17",
|
|
77
77
|
"@types/node": "^20.10.0",
|
|
78
78
|
"@types/react": "^18.3.1",
|
|
@@ -92,5 +92,5 @@
|
|
|
92
92
|
"funding": [
|
|
93
93
|
"https://trpc.io/sponsor"
|
|
94
94
|
],
|
|
95
|
-
"gitHead": "
|
|
95
|
+
"gitHead": "840e1867d43beb0d68bbd9a758c14d8d0233c426"
|
|
96
96
|
}
|
package/src/rsc.tsx
CHANGED
|
@@ -3,6 +3,8 @@ import {
|
|
|
3
3
|
HydrationBoundary,
|
|
4
4
|
type QueryClient,
|
|
5
5
|
} from '@tanstack/react-query';
|
|
6
|
+
import type { TRPCClientError } from '@trpc/client';
|
|
7
|
+
import type { inferTransformedProcedureOutput } from '@trpc/server';
|
|
6
8
|
import {
|
|
7
9
|
createRecursiveProxy,
|
|
8
10
|
type AnyRouter,
|
|
@@ -11,27 +13,59 @@ import {
|
|
|
11
13
|
} from '@trpc/server/unstable-core-do-not-import';
|
|
12
14
|
import type {
|
|
13
15
|
AnyProcedure,
|
|
16
|
+
AnyRootTypes,
|
|
14
17
|
inferProcedureOutput,
|
|
18
|
+
inferRouterRootTypes,
|
|
19
|
+
Maybe,
|
|
15
20
|
RouterCaller,
|
|
16
21
|
TypeError,
|
|
17
22
|
} from '@trpc/server/unstable-core-do-not-import';
|
|
18
23
|
import * as React from 'react';
|
|
19
24
|
import { getQueryKeyInternal } from './internals/getQueryKey';
|
|
25
|
+
import type {
|
|
26
|
+
TRPCFetchInfiniteQueryOptions,
|
|
27
|
+
TRPCFetchQueryOptions,
|
|
28
|
+
} from './shared';
|
|
29
|
+
|
|
30
|
+
const HELPERS = ['prefetch', 'prefetchInfinite'];
|
|
20
31
|
|
|
21
|
-
type DecorateProcedure<
|
|
22
|
-
|
|
23
|
-
|
|
32
|
+
type DecorateProcedure<
|
|
33
|
+
TRoot extends AnyRootTypes,
|
|
34
|
+
TProcedure extends AnyProcedure,
|
|
35
|
+
> = {
|
|
36
|
+
(input: inferProcedureInput<TProcedure>): Promise<
|
|
37
|
+
inferProcedureOutput<TProcedure>
|
|
38
|
+
>;
|
|
39
|
+
prefetch: (
|
|
40
|
+
input: inferProcedureInput<TProcedure>,
|
|
41
|
+
opts?: TRPCFetchQueryOptions<
|
|
42
|
+
inferTransformedProcedureOutput<TRoot, TProcedure>,
|
|
43
|
+
TRPCClientError<TRoot>
|
|
44
|
+
>,
|
|
45
|
+
) => Promise<void>;
|
|
46
|
+
prefetchInfinite: (
|
|
47
|
+
input: inferProcedureInput<TProcedure>,
|
|
48
|
+
opts?: TRPCFetchInfiniteQueryOptions<
|
|
49
|
+
inferProcedureInput<TProcedure>,
|
|
50
|
+
inferTransformedProcedureOutput<TRoot, TProcedure>,
|
|
51
|
+
TRPCClientError<TRoot>
|
|
52
|
+
>,
|
|
53
|
+
) => Promise<void>;
|
|
54
|
+
};
|
|
24
55
|
|
|
25
|
-
type DecorateRouterRecord<
|
|
56
|
+
type DecorateRouterRecord<
|
|
57
|
+
TRoot extends AnyRootTypes,
|
|
58
|
+
TRecord extends RouterRecord,
|
|
59
|
+
> = {
|
|
26
60
|
[TKey in keyof TRecord]: TRecord[TKey] extends AnyProcedure
|
|
27
|
-
? DecorateProcedure<TRecord[TKey]>
|
|
61
|
+
? DecorateProcedure<TRoot, TRecord[TKey]>
|
|
28
62
|
: TRecord[TKey] extends RouterRecord
|
|
29
|
-
? DecorateRouterRecord<TRecord[TKey]>
|
|
63
|
+
? DecorateRouterRecord<TRoot, TRecord[TKey]>
|
|
30
64
|
: never;
|
|
31
65
|
};
|
|
32
66
|
|
|
33
67
|
type Caller<TRouter extends AnyRouter> = ReturnType<
|
|
34
|
-
RouterCaller<TRouter
|
|
68
|
+
RouterCaller<inferRouterRootTypes<TRouter>, TRouter['_def']['record']>
|
|
35
69
|
>;
|
|
36
70
|
|
|
37
71
|
export function createHydrationHelpers<TRouter extends AnyRouter>(
|
|
@@ -40,26 +74,48 @@ export function createHydrationHelpers<TRouter extends AnyRouter>(
|
|
|
40
74
|
: Caller<TRouter>,
|
|
41
75
|
getQueryClient: () => QueryClient,
|
|
42
76
|
) {
|
|
77
|
+
type RootTypes = inferRouterRootTypes<TRouter>;
|
|
43
78
|
const wrappedProxy = createRecursiveProxy(async ({ path, args }) => {
|
|
44
79
|
const proc = path.reduce(
|
|
45
|
-
|
|
46
|
-
|
|
80
|
+
(acc, key) =>
|
|
81
|
+
// @ts-expect-error - ??
|
|
82
|
+
HELPERS.includes(key) ? acc : acc[key],
|
|
47
83
|
caller,
|
|
48
|
-
) as unknown as DecorateProcedure<AnyProcedure>;
|
|
84
|
+
) as unknown as DecorateProcedure<RootTypes, AnyProcedure>;
|
|
49
85
|
|
|
50
|
-
const
|
|
86
|
+
const input = args[0];
|
|
51
87
|
const promise = proc(input);
|
|
52
88
|
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
89
|
+
const helper = path.pop();
|
|
90
|
+
if (helper === 'prefetch') {
|
|
91
|
+
const args1 = args[1] as Maybe<
|
|
92
|
+
TRPCFetchInfiniteQueryOptions<any, any, any>
|
|
93
|
+
>;
|
|
94
|
+
return getQueryClient().prefetchQuery({
|
|
95
|
+
...args1,
|
|
96
|
+
queryKey: getQueryKeyInternal(path, input, 'query'),
|
|
97
|
+
queryFn: () => promise,
|
|
98
|
+
});
|
|
99
|
+
}
|
|
100
|
+
if (helper === 'prefetchInfinite') {
|
|
101
|
+
const args1 = args[1] as Maybe<
|
|
102
|
+
TRPCFetchInfiniteQueryOptions<any, any, any>
|
|
103
|
+
>;
|
|
104
|
+
return getQueryClient().prefetchInfiniteQuery({
|
|
105
|
+
...args1,
|
|
106
|
+
queryKey: getQueryKeyInternal(path, input, 'infinite'),
|
|
107
|
+
queryFn: () => promise,
|
|
108
|
+
initialPageParam: args1?.initialCursor ?? null,
|
|
109
|
+
});
|
|
110
|
+
}
|
|
57
111
|
|
|
58
112
|
return promise;
|
|
59
|
-
}) as DecorateRouterRecord<TRouter['_def']['record']>;
|
|
113
|
+
}) as DecorateRouterRecord<RootTypes, TRouter['_def']['record']>;
|
|
60
114
|
|
|
61
115
|
function HydrateClient(props: { children: React.ReactNode }) {
|
|
62
|
-
const dehydratedState = dehydrate(getQueryClient());
|
|
116
|
+
const dehydratedState = dehydrate(getQueryClient());
|
|
117
|
+
// TODO: transform?? We can't transform promises i don't think...
|
|
118
|
+
// since that is handled by React internally
|
|
63
119
|
|
|
64
120
|
return (
|
|
65
121
|
<HydrationBoundary state={dehydratedState}>
|
|
@@ -68,5 +124,45 @@ export function createHydrationHelpers<TRouter extends AnyRouter>(
|
|
|
68
124
|
);
|
|
69
125
|
}
|
|
70
126
|
|
|
71
|
-
return {
|
|
127
|
+
return {
|
|
128
|
+
/***
|
|
129
|
+
* Wrapped caller with prefetch helpers
|
|
130
|
+
* Can be used as a regular [server-side caller](https://trpc.io/docs/server/server-side-calls)
|
|
131
|
+
* or using prefetch helpers to put the promise into the QueryClient cache
|
|
132
|
+
* @example
|
|
133
|
+
* ```ts
|
|
134
|
+
* const data = await trpc.post.get("postId");
|
|
135
|
+
*
|
|
136
|
+
* // or
|
|
137
|
+
* void trpc.post.get.prefetch("postId");
|
|
138
|
+
* ```
|
|
139
|
+
*/
|
|
140
|
+
trpc: wrappedProxy,
|
|
141
|
+
/**
|
|
142
|
+
* HoC to hydrate the query client for a client component
|
|
143
|
+
* to pick up the prefetched promise and skip an initial
|
|
144
|
+
* client-side fetch.
|
|
145
|
+
* @example
|
|
146
|
+
* ```tsx
|
|
147
|
+
* // MyRSC.tsx
|
|
148
|
+
* const MyRSC = ({ params }) => {
|
|
149
|
+
* void trpc.post.get.prefetch(params.postId);
|
|
150
|
+
*
|
|
151
|
+
* return (
|
|
152
|
+
* <HydrateClient>
|
|
153
|
+
* <MyCC postId={params.postId} />
|
|
154
|
+
* </HydrateClient>
|
|
155
|
+
* );
|
|
156
|
+
* };
|
|
157
|
+
*
|
|
158
|
+
* // MyCC.tsx
|
|
159
|
+
* "use client"
|
|
160
|
+
* const MyCC = ({ postId }) => {
|
|
161
|
+
* const { data: post } = trpc.post.get.useQuery(postId);
|
|
162
|
+
* return <div>{post.title}</div>;
|
|
163
|
+
* };
|
|
164
|
+
* ```
|
|
165
|
+
*/
|
|
166
|
+
HydrateClient,
|
|
167
|
+
};
|
|
72
168
|
}
|