@trpc/react-query 10.0.0-proxy-beta.21
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/LICENSE +21 -0
- package/README.md +88 -0
- package/dist/createHooksInternal-b47ee704.mjs +392 -0
- package/dist/createHooksInternal-e8214d72.js +400 -0
- package/dist/createTRPCReact.d.ts +38 -0
- package/dist/createTRPCReact.d.ts.map +1 -0
- package/dist/getArrayQueryKey-062214e0.mjs +19 -0
- package/dist/getArrayQueryKey-a2092b3c.js +21 -0
- package/dist/index.d.ts +4 -0
- package/dist/index.d.ts.map +1 -0
- package/dist/index.js +58 -0
- package/dist/index.mjs +47 -0
- package/dist/internals/context.d.ts +99 -0
- package/dist/internals/context.d.ts.map +1 -0
- package/dist/internals/getArrayQueryKey.d.ts +9 -0
- package/dist/internals/getArrayQueryKey.d.ts.map +1 -0
- package/dist/internals/getQueryKey.d.ts +6 -0
- package/dist/internals/getQueryKey.d.ts.map +1 -0
- package/dist/interop.d.ts +10 -0
- package/dist/interop.d.ts.map +1 -0
- package/dist/queryClient-0569f6e0.mjs +7 -0
- package/dist/queryClient-83576230.js +9 -0
- package/dist/shared/hooks/createHooksInternal.d.ts +115 -0
- package/dist/shared/hooks/createHooksInternal.d.ts.map +1 -0
- package/dist/shared/index.d.ts +6 -0
- package/dist/shared/index.d.ts.map +1 -0
- package/dist/shared/index.js +18 -0
- package/dist/shared/index.mjs +7 -0
- package/dist/shared/proxy/decorationProxy.d.ts +8 -0
- package/dist/shared/proxy/decorationProxy.d.ts.map +1 -0
- package/dist/shared/proxy/utilsProxy.d.ts +80 -0
- package/dist/shared/proxy/utilsProxy.d.ts.map +1 -0
- package/dist/shared/queryClient.d.ts +16 -0
- package/dist/shared/queryClient.d.ts.map +1 -0
- package/dist/shared/types.d.ts +26 -0
- package/dist/shared/types.d.ts.map +1 -0
- package/dist/ssg/index.d.ts +5 -0
- package/dist/ssg/index.d.ts.map +1 -0
- package/dist/ssg/index.js +126 -0
- package/dist/ssg/index.mjs +121 -0
- package/dist/ssg/ssg.d.ts +23 -0
- package/dist/ssg/ssg.d.ts.map +1 -0
- package/dist/ssg/ssgProxy.d.ts +36 -0
- package/dist/ssg/ssgProxy.d.ts.map +1 -0
- package/package.json +75 -0
- package/shared/index.d.ts +1 -0
- package/shared/index.js +1 -0
- package/src/createTRPCReact.tsx +164 -0
- package/src/index.ts +4 -0
- package/src/internals/context.tsx +235 -0
- package/src/internals/getArrayQueryKey.test.ts +41 -0
- package/src/internals/getArrayQueryKey.ts +18 -0
- package/src/internals/getQueryKey.ts +10 -0
- package/src/interop.ts +25 -0
- package/src/shared/hooks/createHooksInternal.tsx +664 -0
- package/src/shared/index.ts +8 -0
- package/src/shared/proxy/decorationProxy.ts +33 -0
- package/src/shared/proxy/utilsProxy.ts +266 -0
- package/src/shared/queryClient.ts +20 -0
- package/src/shared/types.ts +27 -0
- package/src/ssg/index.ts +4 -0
- package/src/ssg/ssg.ts +138 -0
- package/src/ssg/ssgProxy.ts +105 -0
- package/ssg/index.d.ts +1 -0
- package/ssg/index.js +1 -0
|
@@ -0,0 +1,400 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
var shared = require('@trpc/server/shared');
|
|
4
|
+
var reactQuery = require('@tanstack/react-query');
|
|
5
|
+
var client = require('@trpc/client');
|
|
6
|
+
var React = require('react');
|
|
7
|
+
var getArrayQueryKey = require('./getArrayQueryKey-a2092b3c.js');
|
|
8
|
+
|
|
9
|
+
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
|
|
10
|
+
|
|
11
|
+
var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
|
|
12
|
+
|
|
13
|
+
/**
|
|
14
|
+
* We treat `undefined` as an input the same as omitting an `input`
|
|
15
|
+
* https://github.com/trpc/trpc/issues/2290
|
|
16
|
+
*/ function getQueryKey(path, input) {
|
|
17
|
+
return input === undefined ? [
|
|
18
|
+
path
|
|
19
|
+
] : [
|
|
20
|
+
path,
|
|
21
|
+
input
|
|
22
|
+
];
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
/**
|
|
26
|
+
* Create proxy for decorating procedures
|
|
27
|
+
* @internal
|
|
28
|
+
*/ function createReactProxyDecoration(name, hooks) {
|
|
29
|
+
return shared.createRecursiveProxy((opts)=>{
|
|
30
|
+
const args = opts.args;
|
|
31
|
+
const pathCopy = [
|
|
32
|
+
name,
|
|
33
|
+
...opts.path
|
|
34
|
+
];
|
|
35
|
+
// The last arg is for instance `.useMutation` or `.useQuery()`
|
|
36
|
+
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
|
|
37
|
+
const lastArg = pathCopy.pop();
|
|
38
|
+
// The `path` ends up being something like `post.byId`
|
|
39
|
+
const path = pathCopy.join('.');
|
|
40
|
+
if (lastArg === 'useMutation') {
|
|
41
|
+
return hooks[lastArg](path, ...args);
|
|
42
|
+
}
|
|
43
|
+
const [input, ...rest] = args;
|
|
44
|
+
const queryKey = getQueryKey(path, input);
|
|
45
|
+
return hooks[lastArg](queryKey, ...rest);
|
|
46
|
+
});
|
|
47
|
+
}
|
|
48
|
+
|
|
49
|
+
const contextProps = [
|
|
50
|
+
'client',
|
|
51
|
+
'ssrContext',
|
|
52
|
+
'ssrState',
|
|
53
|
+
'abortOnUnmount'
|
|
54
|
+
];
|
|
55
|
+
const TRPCContext = /*#__PURE__*/ React.createContext(null);
|
|
56
|
+
|
|
57
|
+
/**
|
|
58
|
+
* @internal
|
|
59
|
+
*/ function createReactQueryUtilsProxy(context) {
|
|
60
|
+
return shared.createFlatProxy((key)=>{
|
|
61
|
+
const contextName = key;
|
|
62
|
+
if (contextProps.includes(contextName)) {
|
|
63
|
+
return context[contextName];
|
|
64
|
+
}
|
|
65
|
+
return shared.createRecursiveProxy(({ path , args })=>{
|
|
66
|
+
const pathCopy = [
|
|
67
|
+
key,
|
|
68
|
+
...path
|
|
69
|
+
];
|
|
70
|
+
const utilName = pathCopy.pop();
|
|
71
|
+
const fullPath = pathCopy.join('.');
|
|
72
|
+
const getOpts = (name)=>{
|
|
73
|
+
if ([
|
|
74
|
+
'setData',
|
|
75
|
+
'setInfiniteData'
|
|
76
|
+
].includes(name)) {
|
|
77
|
+
const [updater, input, ...rest] = args;
|
|
78
|
+
const queryKey = getQueryKey(fullPath, input);
|
|
79
|
+
return {
|
|
80
|
+
queryKey,
|
|
81
|
+
updater,
|
|
82
|
+
rest
|
|
83
|
+
};
|
|
84
|
+
}
|
|
85
|
+
const [input1, ...rest1] = args;
|
|
86
|
+
const queryKey1 = getQueryKey(fullPath, input1);
|
|
87
|
+
return {
|
|
88
|
+
queryKey: queryKey1,
|
|
89
|
+
rest: rest1
|
|
90
|
+
};
|
|
91
|
+
};
|
|
92
|
+
const { queryKey , rest , updater } = getOpts(utilName);
|
|
93
|
+
const contextMap = {
|
|
94
|
+
fetch: ()=>context.fetchQuery(queryKey, ...rest),
|
|
95
|
+
fetchInfinite: ()=>context.fetchInfiniteQuery(queryKey, ...rest),
|
|
96
|
+
prefetch: ()=>context.prefetchQuery(queryKey, ...rest),
|
|
97
|
+
prefetchInfinite: ()=>context.prefetchInfiniteQuery(queryKey, ...rest),
|
|
98
|
+
invalidate: ()=>context.invalidateQueries(queryKey, ...rest),
|
|
99
|
+
refetch: ()=>context.refetchQueries(queryKey, ...rest),
|
|
100
|
+
cancel: ()=>context.cancelQuery(queryKey, ...rest),
|
|
101
|
+
setData: ()=>context.setQueryData(queryKey, updater, ...rest),
|
|
102
|
+
setInfiniteData: ()=>context.setInfiniteQueryData(queryKey, updater, ...rest),
|
|
103
|
+
getData: ()=>context.getQueryData(queryKey),
|
|
104
|
+
getInfiniteData: ()=>context.getInfiniteQueryData(queryKey)
|
|
105
|
+
};
|
|
106
|
+
return contextMap[utilName]();
|
|
107
|
+
});
|
|
108
|
+
});
|
|
109
|
+
}
|
|
110
|
+
|
|
111
|
+
function getClientArgs(pathAndInput, opts) {
|
|
112
|
+
const [path, input] = pathAndInput;
|
|
113
|
+
return [
|
|
114
|
+
path,
|
|
115
|
+
input,
|
|
116
|
+
opts?.trpc
|
|
117
|
+
];
|
|
118
|
+
}
|
|
119
|
+
/**
|
|
120
|
+
* Makes a stable reference of the `trpc` prop
|
|
121
|
+
*/ function useHookResult(value) {
|
|
122
|
+
const ref = React.useRef(value);
|
|
123
|
+
ref.current.path = value.path;
|
|
124
|
+
return ref.current;
|
|
125
|
+
}
|
|
126
|
+
/**
|
|
127
|
+
* Create strongly typed react hooks
|
|
128
|
+
* @internal
|
|
129
|
+
*/ function createHooksInternal(config) {
|
|
130
|
+
const mutationSuccessOverride = config?.unstable_overrides?.useMutation?.onSuccess ?? ((options)=>options.originalFn());
|
|
131
|
+
const Context = TRPCContext;
|
|
132
|
+
const createClient = (opts)=>{
|
|
133
|
+
return client.createTRPCClient(opts);
|
|
134
|
+
};
|
|
135
|
+
const TRPCProvider = (props)=>{
|
|
136
|
+
const { abortOnUnmount =false , client , queryClient , ssrContext } = props;
|
|
137
|
+
const [ssrState, setSSRState] = React.useState(props.ssrState ?? false);
|
|
138
|
+
React.useEffect(()=>{
|
|
139
|
+
// Only updating state to `mounted` if we are using SSR.
|
|
140
|
+
// This makes it so we don't have an unnecessary re-render when opting out of SSR.
|
|
141
|
+
setSSRState((state)=>state ? 'mounted' : false);
|
|
142
|
+
}, []);
|
|
143
|
+
return /*#__PURE__*/ React__default["default"].createElement(Context.Provider, {
|
|
144
|
+
value: {
|
|
145
|
+
abortOnUnmount,
|
|
146
|
+
queryClient,
|
|
147
|
+
client,
|
|
148
|
+
ssrContext: ssrContext || null,
|
|
149
|
+
ssrState,
|
|
150
|
+
fetchQuery: React.useCallback((pathAndInput, opts)=>{
|
|
151
|
+
return queryClient.fetchQuery(getArrayQueryKey.getArrayQueryKey(pathAndInput), ()=>client.query(...getClientArgs(pathAndInput, opts)), opts);
|
|
152
|
+
}, [
|
|
153
|
+
client,
|
|
154
|
+
queryClient
|
|
155
|
+
]),
|
|
156
|
+
fetchInfiniteQuery: React.useCallback((pathAndInput, opts)=>{
|
|
157
|
+
return queryClient.fetchInfiniteQuery(getArrayQueryKey.getArrayQueryKey(pathAndInput), ({ pageParam })=>{
|
|
158
|
+
const [path, input] = pathAndInput;
|
|
159
|
+
const actualInput = {
|
|
160
|
+
...input,
|
|
161
|
+
cursor: pageParam
|
|
162
|
+
};
|
|
163
|
+
return client.query(...getClientArgs([
|
|
164
|
+
path,
|
|
165
|
+
actualInput
|
|
166
|
+
], opts));
|
|
167
|
+
}, opts);
|
|
168
|
+
}, [
|
|
169
|
+
client,
|
|
170
|
+
queryClient
|
|
171
|
+
]),
|
|
172
|
+
prefetchQuery: React.useCallback((pathAndInput, opts)=>{
|
|
173
|
+
return queryClient.prefetchQuery(getArrayQueryKey.getArrayQueryKey(pathAndInput), ()=>client.query(...getClientArgs(pathAndInput, opts)), opts);
|
|
174
|
+
}, [
|
|
175
|
+
client,
|
|
176
|
+
queryClient
|
|
177
|
+
]),
|
|
178
|
+
prefetchInfiniteQuery: React.useCallback((pathAndInput, opts)=>{
|
|
179
|
+
return queryClient.prefetchInfiniteQuery(getArrayQueryKey.getArrayQueryKey(pathAndInput), ({ pageParam })=>{
|
|
180
|
+
const [path, input] = pathAndInput;
|
|
181
|
+
const actualInput = {
|
|
182
|
+
...input,
|
|
183
|
+
cursor: pageParam
|
|
184
|
+
};
|
|
185
|
+
return client.query(...getClientArgs([
|
|
186
|
+
path,
|
|
187
|
+
actualInput
|
|
188
|
+
], opts));
|
|
189
|
+
}, opts);
|
|
190
|
+
}, [
|
|
191
|
+
client,
|
|
192
|
+
queryClient
|
|
193
|
+
]),
|
|
194
|
+
invalidateQueries: React.useCallback((...args)=>{
|
|
195
|
+
const [queryKey, ...rest] = args;
|
|
196
|
+
return queryClient.invalidateQueries(getArrayQueryKey.getArrayQueryKey(queryKey), ...rest);
|
|
197
|
+
}, [
|
|
198
|
+
queryClient
|
|
199
|
+
]),
|
|
200
|
+
refetchQueries: React.useCallback((...args)=>{
|
|
201
|
+
const [queryKey, ...rest] = args;
|
|
202
|
+
return queryClient.refetchQueries(getArrayQueryKey.getArrayQueryKey(queryKey), ...rest);
|
|
203
|
+
}, [
|
|
204
|
+
queryClient
|
|
205
|
+
]),
|
|
206
|
+
cancelQuery: React.useCallback((pathAndInput)=>{
|
|
207
|
+
return queryClient.cancelQueries(getArrayQueryKey.getArrayQueryKey(pathAndInput));
|
|
208
|
+
}, [
|
|
209
|
+
queryClient
|
|
210
|
+
]),
|
|
211
|
+
setQueryData: React.useCallback((...args)=>{
|
|
212
|
+
const [queryKey, ...rest] = args;
|
|
213
|
+
return queryClient.setQueryData(getArrayQueryKey.getArrayQueryKey(queryKey), ...rest);
|
|
214
|
+
}, [
|
|
215
|
+
queryClient
|
|
216
|
+
]),
|
|
217
|
+
getQueryData: React.useCallback((...args)=>{
|
|
218
|
+
const [queryKey, ...rest] = args;
|
|
219
|
+
return queryClient.getQueryData(getArrayQueryKey.getArrayQueryKey(queryKey), ...rest);
|
|
220
|
+
}, [
|
|
221
|
+
queryClient
|
|
222
|
+
]),
|
|
223
|
+
setInfiniteQueryData: React.useCallback((...args)=>{
|
|
224
|
+
const [queryKey, ...rest] = args;
|
|
225
|
+
return queryClient.setQueryData(getArrayQueryKey.getArrayQueryKey(queryKey), ...rest);
|
|
226
|
+
}, [
|
|
227
|
+
queryClient
|
|
228
|
+
]),
|
|
229
|
+
getInfiniteQueryData: React.useCallback((...args)=>{
|
|
230
|
+
const [queryKey, ...rest] = args;
|
|
231
|
+
return queryClient.getQueryData(getArrayQueryKey.getArrayQueryKey(queryKey), ...rest);
|
|
232
|
+
}, [
|
|
233
|
+
queryClient
|
|
234
|
+
])
|
|
235
|
+
}
|
|
236
|
+
}, props.children);
|
|
237
|
+
};
|
|
238
|
+
function useContext() {
|
|
239
|
+
return React__default["default"].useContext(Context);
|
|
240
|
+
}
|
|
241
|
+
/**
|
|
242
|
+
* Hack to make sure errors return `status`='error` when doing SSR
|
|
243
|
+
* @link https://github.com/trpc/trpc/pull/1645
|
|
244
|
+
*/ function useSSRQueryOptionsIfNeeded(pathAndInput, opts) {
|
|
245
|
+
const { queryClient , ssrState } = useContext();
|
|
246
|
+
return ssrState && ssrState !== 'mounted' && queryClient.getQueryCache().find(getArrayQueryKey.getArrayQueryKey(pathAndInput))?.state.status === 'error' ? {
|
|
247
|
+
retryOnMount: false,
|
|
248
|
+
...opts
|
|
249
|
+
} : opts;
|
|
250
|
+
}
|
|
251
|
+
function useQuery(pathAndInput, opts) {
|
|
252
|
+
const { abortOnUnmount , client , ssrState , queryClient , prefetchQuery } = useContext();
|
|
253
|
+
if (typeof window === 'undefined' && ssrState === 'prepass' && opts?.trpc?.ssr !== false && opts?.enabled !== false && !queryClient.getQueryCache().find(getArrayQueryKey.getArrayQueryKey(pathAndInput))) {
|
|
254
|
+
void prefetchQuery(pathAndInput, opts);
|
|
255
|
+
}
|
|
256
|
+
const ssrOpts = useSSRQueryOptionsIfNeeded(pathAndInput, opts);
|
|
257
|
+
// request option should take priority over global
|
|
258
|
+
const shouldAbortOnUnmount = opts?.trpc?.abortOnUnmount ?? abortOnUnmount;
|
|
259
|
+
const hook = reactQuery.useQuery(getArrayQueryKey.getArrayQueryKey(pathAndInput), (queryFunctionContext)=>{
|
|
260
|
+
const actualOpts = {
|
|
261
|
+
...ssrOpts,
|
|
262
|
+
trpc: {
|
|
263
|
+
...ssrOpts?.trpc,
|
|
264
|
+
...shouldAbortOnUnmount ? {
|
|
265
|
+
signal: queryFunctionContext.signal
|
|
266
|
+
} : {}
|
|
267
|
+
}
|
|
268
|
+
};
|
|
269
|
+
return client.query(...getClientArgs(pathAndInput, actualOpts));
|
|
270
|
+
}, ssrOpts);
|
|
271
|
+
hook.trpc = useHookResult({
|
|
272
|
+
path: pathAndInput[0]
|
|
273
|
+
});
|
|
274
|
+
return hook;
|
|
275
|
+
}
|
|
276
|
+
function useMutation(path, opts) {
|
|
277
|
+
const { client } = useContext();
|
|
278
|
+
const queryClient = reactQuery.useQueryClient();
|
|
279
|
+
const hook = reactQuery.useMutation((input)=>{
|
|
280
|
+
const actualPath = Array.isArray(path) ? path[0] : path;
|
|
281
|
+
return client.mutation(...getClientArgs([
|
|
282
|
+
actualPath,
|
|
283
|
+
input
|
|
284
|
+
], opts));
|
|
285
|
+
}, {
|
|
286
|
+
...opts,
|
|
287
|
+
onSuccess (...args) {
|
|
288
|
+
const originalFn = ()=>opts?.onSuccess?.(...args);
|
|
289
|
+
return mutationSuccessOverride({
|
|
290
|
+
originalFn,
|
|
291
|
+
queryClient
|
|
292
|
+
});
|
|
293
|
+
}
|
|
294
|
+
});
|
|
295
|
+
hook.trpc = useHookResult({
|
|
296
|
+
path: Array.isArray(path) ? path[0] : path
|
|
297
|
+
});
|
|
298
|
+
return hook;
|
|
299
|
+
}
|
|
300
|
+
/* istanbul ignore next */ /**
|
|
301
|
+
* ⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️
|
|
302
|
+
* **Experimental.** API might change without major version bump
|
|
303
|
+
* ⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠
|
|
304
|
+
*/ function useSubscription(pathAndInput, opts) {
|
|
305
|
+
const enabled = opts?.enabled ?? true;
|
|
306
|
+
const queryKey = reactQuery.hashQueryKey(pathAndInput);
|
|
307
|
+
const { client } = useContext();
|
|
308
|
+
return React.useEffect(()=>{
|
|
309
|
+
if (!enabled) {
|
|
310
|
+
return;
|
|
311
|
+
}
|
|
312
|
+
const [path, input] = pathAndInput;
|
|
313
|
+
let isStopped = false;
|
|
314
|
+
const subscription = client.subscription(path, input ?? undefined, {
|
|
315
|
+
onStarted: ()=>{
|
|
316
|
+
if (!isStopped) {
|
|
317
|
+
opts.onStarted?.();
|
|
318
|
+
}
|
|
319
|
+
},
|
|
320
|
+
onData: (data)=>{
|
|
321
|
+
if (!isStopped) {
|
|
322
|
+
opts.onData(data);
|
|
323
|
+
}
|
|
324
|
+
},
|
|
325
|
+
onError: (err)=>{
|
|
326
|
+
if (!isStopped) {
|
|
327
|
+
opts.onError?.(err);
|
|
328
|
+
}
|
|
329
|
+
}
|
|
330
|
+
});
|
|
331
|
+
return ()=>{
|
|
332
|
+
isStopped = true;
|
|
333
|
+
subscription.unsubscribe();
|
|
334
|
+
};
|
|
335
|
+
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
336
|
+
}, [
|
|
337
|
+
queryKey,
|
|
338
|
+
enabled
|
|
339
|
+
]);
|
|
340
|
+
}
|
|
341
|
+
function useInfiniteQuery(pathAndInput, opts) {
|
|
342
|
+
const [path, input] = pathAndInput;
|
|
343
|
+
const { client , ssrState , prefetchInfiniteQuery , queryClient , abortOnUnmount , } = useContext();
|
|
344
|
+
if (typeof window === 'undefined' && ssrState === 'prepass' && opts?.trpc?.ssr !== false && opts?.enabled !== false && !queryClient.getQueryCache().find(getArrayQueryKey.getArrayQueryKey(pathAndInput))) {
|
|
345
|
+
void prefetchInfiniteQuery(pathAndInput, opts);
|
|
346
|
+
}
|
|
347
|
+
const ssrOpts = useSSRQueryOptionsIfNeeded(pathAndInput, opts);
|
|
348
|
+
// request option should take priority over global
|
|
349
|
+
const shouldAbortOnUnmount = opts?.trpc?.abortOnUnmount ?? abortOnUnmount;
|
|
350
|
+
const hook = reactQuery.useInfiniteQuery(getArrayQueryKey.getArrayQueryKey(pathAndInput), (queryFunctionContext)=>{
|
|
351
|
+
const actualOpts = {
|
|
352
|
+
...ssrOpts,
|
|
353
|
+
trpc: {
|
|
354
|
+
...ssrOpts?.trpc,
|
|
355
|
+
...shouldAbortOnUnmount ? {
|
|
356
|
+
signal: queryFunctionContext.signal
|
|
357
|
+
} : {}
|
|
358
|
+
}
|
|
359
|
+
};
|
|
360
|
+
const actualInput = {
|
|
361
|
+
...input ?? {},
|
|
362
|
+
cursor: queryFunctionContext.pageParam
|
|
363
|
+
};
|
|
364
|
+
return client.query(...getClientArgs([
|
|
365
|
+
path,
|
|
366
|
+
actualInput
|
|
367
|
+
], actualOpts));
|
|
368
|
+
}, ssrOpts);
|
|
369
|
+
hook.trpc = useHookResult({
|
|
370
|
+
path
|
|
371
|
+
});
|
|
372
|
+
return hook;
|
|
373
|
+
}
|
|
374
|
+
const useDehydratedState = (client, trpcState)=>{
|
|
375
|
+
const transformed = React.useMemo(()=>{
|
|
376
|
+
if (!trpcState) {
|
|
377
|
+
return trpcState;
|
|
378
|
+
}
|
|
379
|
+
return client.runtime.transformer.deserialize(trpcState);
|
|
380
|
+
}, [
|
|
381
|
+
trpcState,
|
|
382
|
+
client
|
|
383
|
+
]);
|
|
384
|
+
return transformed;
|
|
385
|
+
};
|
|
386
|
+
return {
|
|
387
|
+
Provider: TRPCProvider,
|
|
388
|
+
createClient,
|
|
389
|
+
useContext,
|
|
390
|
+
useQuery,
|
|
391
|
+
useMutation,
|
|
392
|
+
useSubscription,
|
|
393
|
+
useDehydratedState,
|
|
394
|
+
useInfiniteQuery
|
|
395
|
+
};
|
|
396
|
+
}
|
|
397
|
+
|
|
398
|
+
exports.createHooksInternal = createHooksInternal;
|
|
399
|
+
exports.createReactProxyDecoration = createReactProxyDecoration;
|
|
400
|
+
exports.createReactQueryUtilsProxy = createReactQueryUtilsProxy;
|
|
@@ -0,0 +1,38 @@
|
|
|
1
|
+
import { TRPCClientErrorLike } from '@trpc/client';
|
|
2
|
+
import { AnyMutationProcedure, AnyProcedure, AnyQueryProcedure, AnyRouter, AnySubscriptionProcedure, ProcedureRouterRecord, inferProcedureInput, inferProcedureOutput } from '@trpc/server';
|
|
3
|
+
import { inferObservableValue } from '@trpc/server/observable';
|
|
4
|
+
import { CreateReactUtilsProxy } from './shared';
|
|
5
|
+
import { CreateClient, CreateReactQueryHooks, TRPCProvider, UseDehydratedState, UseTRPCInfiniteQueryOptions, UseTRPCInfiniteQueryResult, UseTRPCMutationOptions, UseTRPCMutationResult, UseTRPCQueryOptions, UseTRPCQueryResult, UseTRPCSubscriptionOptions } from './shared/hooks/createHooksInternal';
|
|
6
|
+
import { CreateTRPCReactOptions } from './shared/types';
|
|
7
|
+
/**
|
|
8
|
+
* @internal
|
|
9
|
+
*/
|
|
10
|
+
export declare type DecorateProcedure<TProcedure extends AnyProcedure, TPath extends string> = TProcedure extends AnyQueryProcedure ? {
|
|
11
|
+
useQuery: <TQueryFnData = inferProcedureOutput<TProcedure>, TData = inferProcedureOutput<TProcedure>>(input: inferProcedureInput<TProcedure>, opts?: UseTRPCQueryOptions<TPath, inferProcedureInput<TProcedure>, TQueryFnData, TData, TRPCClientErrorLike<TProcedure>>) => UseTRPCQueryResult<TData, TRPCClientErrorLike<TProcedure>>;
|
|
12
|
+
} & (inferProcedureInput<TProcedure> extends {
|
|
13
|
+
cursor?: any;
|
|
14
|
+
} ? {
|
|
15
|
+
useInfiniteQuery: <_TQueryFnData = inferProcedureOutput<TProcedure>, TData = inferProcedureOutput<TProcedure>>(input: Omit<inferProcedureInput<TProcedure>, 'cursor'>, opts?: UseTRPCInfiniteQueryOptions<TPath, inferProcedureInput<TProcedure>, TData, TRPCClientErrorLike<TProcedure>>) => UseTRPCInfiniteQueryResult<TData, TRPCClientErrorLike<TProcedure>>;
|
|
16
|
+
} : {}) : TProcedure extends AnyMutationProcedure ? {
|
|
17
|
+
useMutation: <TContext = unknown>(opts?: UseTRPCMutationOptions<inferProcedureInput<TProcedure>, TRPCClientErrorLike<TProcedure>, inferProcedureOutput<TProcedure>, TContext>) => UseTRPCMutationResult<inferProcedureOutput<TProcedure>, TRPCClientErrorLike<TProcedure>, inferProcedureInput<TProcedure>, TContext>;
|
|
18
|
+
} : TProcedure extends AnySubscriptionProcedure ? {
|
|
19
|
+
useSubscription: (input: inferProcedureInput<TProcedure>, opts?: UseTRPCSubscriptionOptions<inferObservableValue<inferProcedureOutput<TProcedure>>, TRPCClientErrorLike<TProcedure>>) => void;
|
|
20
|
+
} : never;
|
|
21
|
+
/**
|
|
22
|
+
* @internal
|
|
23
|
+
*/
|
|
24
|
+
export declare type DecoratedProcedureRecord<TProcedures extends ProcedureRouterRecord, TPath extends string = ''> = {
|
|
25
|
+
[TKey in keyof TProcedures]: TProcedures[TKey] extends AnyRouter ? DecoratedProcedureRecord<TProcedures[TKey]['_def']['record'], `${TPath}${TKey & string}.`> : TProcedures[TKey] extends AnyProcedure ? DecorateProcedure<TProcedures[TKey], `${TPath}${TKey & string}`> : never;
|
|
26
|
+
};
|
|
27
|
+
export declare type CreateTRPCReact<TRouter extends AnyRouter, TSSRContext> = {
|
|
28
|
+
useContext(): CreateReactUtilsProxy<TRouter, TSSRContext>;
|
|
29
|
+
Provider: TRPCProvider<TRouter, TSSRContext>;
|
|
30
|
+
createClient: CreateClient<TRouter>;
|
|
31
|
+
useDehydratedState: UseDehydratedState<TRouter>;
|
|
32
|
+
} & DecoratedProcedureRecord<TRouter['_def']['record']>;
|
|
33
|
+
/**
|
|
34
|
+
* @internal
|
|
35
|
+
*/
|
|
36
|
+
export declare function createHooksInternalProxy<TRouter extends AnyRouter, TSSRContext = unknown>(trpc: CreateReactQueryHooks<TRouter, TSSRContext>): CreateTRPCReact<TRouter, TSSRContext>;
|
|
37
|
+
export declare function createTRPCReact<TRouter extends AnyRouter, TSSRContext = unknown>(opts?: CreateTRPCReactOptions<TRouter>): CreateTRPCReact<TRouter, TSSRContext>;
|
|
38
|
+
//# sourceMappingURL=createTRPCReact.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"createTRPCReact.d.ts","sourceRoot":"","sources":["../src/createTRPCReact.tsx"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* To allow easy interactions with groups of related queries, such as
|
|
3
|
+
* invalidating all queries of a router, we use an array as the path when
|
|
4
|
+
* storing in tanstack query. This function converts from the `.` separated
|
|
5
|
+
* path passed around internally by both the legacy and proxy implementation.
|
|
6
|
+
* https://github.com/trpc/trpc/issues/2611
|
|
7
|
+
*/ function getArrayQueryKey(queryKey) {
|
|
8
|
+
const queryKeyArrayed = Array.isArray(queryKey) ? queryKey : [
|
|
9
|
+
queryKey
|
|
10
|
+
];
|
|
11
|
+
const [path, ...input] = queryKeyArrayed;
|
|
12
|
+
const arrayPath = typeof path !== 'string' || path === '' ? [] : path.split('.');
|
|
13
|
+
return [
|
|
14
|
+
arrayPath,
|
|
15
|
+
...input
|
|
16
|
+
];
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
export { getArrayQueryKey as g };
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
/**
|
|
4
|
+
* To allow easy interactions with groups of related queries, such as
|
|
5
|
+
* invalidating all queries of a router, we use an array as the path when
|
|
6
|
+
* storing in tanstack query. This function converts from the `.` separated
|
|
7
|
+
* path passed around internally by both the legacy and proxy implementation.
|
|
8
|
+
* https://github.com/trpc/trpc/issues/2611
|
|
9
|
+
*/ function getArrayQueryKey(queryKey) {
|
|
10
|
+
const queryKeyArrayed = Array.isArray(queryKey) ? queryKey : [
|
|
11
|
+
queryKey
|
|
12
|
+
];
|
|
13
|
+
const [path, ...input] = queryKeyArrayed;
|
|
14
|
+
const arrayPath = typeof path !== 'string' || path === '' ? [] : path.split('.');
|
|
15
|
+
return [
|
|
16
|
+
arrayPath,
|
|
17
|
+
...input
|
|
18
|
+
];
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
exports.getArrayQueryKey = getArrayQueryKey;
|
package/dist/index.d.ts
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAC;AAE7B,OAAO,EAAE,eAAe,EAAE,KAAK,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAC1E,OAAO,EAAE,qBAAqB,EAAE,MAAM,WAAW,CAAC"}
|
package/dist/index.js
ADDED
|
@@ -0,0 +1,58 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
|
+
|
|
5
|
+
var client = require('@trpc/client');
|
|
6
|
+
var shared = require('@trpc/server/shared');
|
|
7
|
+
var React = require('react');
|
|
8
|
+
var createHooksInternal = require('./createHooksInternal-e8214d72.js');
|
|
9
|
+
require('@tanstack/react-query');
|
|
10
|
+
require('./getArrayQueryKey-a2092b3c.js');
|
|
11
|
+
|
|
12
|
+
/**
|
|
13
|
+
* @internal
|
|
14
|
+
*/ function createHooksInternalProxy(trpc) {
|
|
15
|
+
return shared.createFlatProxy((key)=>{
|
|
16
|
+
if (key === 'useContext') {
|
|
17
|
+
return ()=>{
|
|
18
|
+
const context = trpc.useContext();
|
|
19
|
+
// create a stable reference of the utils context
|
|
20
|
+
return React.useMemo(()=>{
|
|
21
|
+
return createHooksInternal.createReactQueryUtilsProxy(context);
|
|
22
|
+
}, [
|
|
23
|
+
context
|
|
24
|
+
]);
|
|
25
|
+
};
|
|
26
|
+
}
|
|
27
|
+
if (key in trpc) {
|
|
28
|
+
return trpc[key];
|
|
29
|
+
}
|
|
30
|
+
return createHooksInternal.createReactProxyDecoration(key, trpc);
|
|
31
|
+
});
|
|
32
|
+
}
|
|
33
|
+
function createTRPCReact(opts) {
|
|
34
|
+
const hooks = createHooksInternal.createHooksInternal(opts);
|
|
35
|
+
const proxy = createHooksInternalProxy(hooks);
|
|
36
|
+
return proxy;
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
// interop:
|
|
40
|
+
/**
|
|
41
|
+
* @deprecated use `createTRPCReact` instead
|
|
42
|
+
*/ function createReactQueryHooks() {
|
|
43
|
+
const trpc = createHooksInternal.createHooksInternal();
|
|
44
|
+
const proxy = createHooksInternalProxy(trpc);
|
|
45
|
+
return {
|
|
46
|
+
...trpc,
|
|
47
|
+
proxy
|
|
48
|
+
};
|
|
49
|
+
}
|
|
50
|
+
|
|
51
|
+
exports.createReactQueryHooks = createReactQueryHooks;
|
|
52
|
+
exports.createTRPCReact = createTRPCReact;
|
|
53
|
+
Object.keys(client).forEach(function (k) {
|
|
54
|
+
if (k !== 'default' && !exports.hasOwnProperty(k)) Object.defineProperty(exports, k, {
|
|
55
|
+
enumerable: true,
|
|
56
|
+
get: function () { return client[k]; }
|
|
57
|
+
});
|
|
58
|
+
});
|
package/dist/index.mjs
ADDED
|
@@ -0,0 +1,47 @@
|
|
|
1
|
+
export * from '@trpc/client';
|
|
2
|
+
import { createFlatProxy } from '@trpc/server/shared';
|
|
3
|
+
import { useMemo } from 'react';
|
|
4
|
+
import { c as createHooksInternal, a as createReactQueryUtilsProxy, b as createReactProxyDecoration } from './createHooksInternal-b47ee704.mjs';
|
|
5
|
+
import '@tanstack/react-query';
|
|
6
|
+
import './getArrayQueryKey-062214e0.mjs';
|
|
7
|
+
|
|
8
|
+
/**
|
|
9
|
+
* @internal
|
|
10
|
+
*/ function createHooksInternalProxy(trpc) {
|
|
11
|
+
return createFlatProxy((key)=>{
|
|
12
|
+
if (key === 'useContext') {
|
|
13
|
+
return ()=>{
|
|
14
|
+
const context = trpc.useContext();
|
|
15
|
+
// create a stable reference of the utils context
|
|
16
|
+
return useMemo(()=>{
|
|
17
|
+
return createReactQueryUtilsProxy(context);
|
|
18
|
+
}, [
|
|
19
|
+
context
|
|
20
|
+
]);
|
|
21
|
+
};
|
|
22
|
+
}
|
|
23
|
+
if (key in trpc) {
|
|
24
|
+
return trpc[key];
|
|
25
|
+
}
|
|
26
|
+
return createReactProxyDecoration(key, trpc);
|
|
27
|
+
});
|
|
28
|
+
}
|
|
29
|
+
function createTRPCReact(opts) {
|
|
30
|
+
const hooks = createHooksInternal(opts);
|
|
31
|
+
const proxy = createHooksInternalProxy(hooks);
|
|
32
|
+
return proxy;
|
|
33
|
+
}
|
|
34
|
+
|
|
35
|
+
// interop:
|
|
36
|
+
/**
|
|
37
|
+
* @deprecated use `createTRPCReact` instead
|
|
38
|
+
*/ function createReactQueryHooks() {
|
|
39
|
+
const trpc = createHooksInternal();
|
|
40
|
+
const proxy = createHooksInternalProxy(trpc);
|
|
41
|
+
return {
|
|
42
|
+
...trpc,
|
|
43
|
+
proxy
|
|
44
|
+
};
|
|
45
|
+
}
|
|
46
|
+
|
|
47
|
+
export { createReactQueryHooks, createTRPCReact };
|