@trpc/next 9.16.0 → 10.0.0-alpha.2

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.
Files changed (13) hide show
  1. package/dist/declarations/src/index.d.ts +1 -0
  2. package/dist/declarations/src/index.d.ts.map +1 -1
  3. package/dist/declarations/src/setupNext.d.ts +50 -0
  4. package/dist/declarations/src/setupNext.d.ts.map +1 -0
  5. package/dist/declarations/src/withTRPC.d.ts +10 -6
  6. package/dist/declarations/src/withTRPC.d.ts.map +1 -1
  7. package/dist/trpc-next.cjs.dev.js +19 -3
  8. package/dist/trpc-next.cjs.prod.js +19 -3
  9. package/dist/trpc-next.esm.js +19 -4
  10. package/package.json +10 -10
  11. package/src/index.ts +1 -0
  12. package/src/setupNext.tsx +18 -0
  13. package/src/withTRPC.tsx +27 -23
package/dist/declarations/src/index.d.ts CHANGED
@@ -1,2 +1,3 @@
1
1
  export * from './withTRPC';
2
+ export * from './setupNext';
2
3
  //# sourceMappingURL=index.d.ts.map
package/dist/declarations/src/index.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"../../../src","sources":["index.ts"],"names":[],"mappings":"AAAA,cAAc,YAAY,CAAC"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"../../../src","sources":["index.ts"],"names":[],"mappings":"AAAA,cAAc,YAAY,CAAC;AAC3B,cAAc,aAAa,CAAC"}
package/dist/declarations/src/setupNext.d.ts ADDED
@@ -0,0 +1,50 @@
1
+ import { AnyRouter } from '@trpc/server';
2
+ import { WithTRPCNoSSROptions, WithTRPCSSROptions } from './withTRPC';
3
+ export declare function setupTRPC<TRouter extends AnyRouter>(opts: WithTRPCNoSSROptions<TRouter> | WithTRPCSSROptions<TRouter>): {
4
+ useContext: () => import("@trpc/react").TRPCContextState<TRouter, unknown>;
5
+ useInfiniteQuery: <TPath_1 extends { [TPath in keyof TRouter["_def"]["queries"]]: import("@trpc/server").inferProcedureInput<TRouter["_def"]["queries"][TPath]> extends {
6
+ cursor?: any;
7
+ } ? TPath : never; }[keyof TRouter["_def"]["queries"]] & string>(pathAndInput: [path: TPath_1, input: Omit<{ [TPath_2 in keyof TRouter["_def"]["queries"]]: {
8
+ input: import("@trpc/server").inferProcedureInput<TRouter["_def"]["queries"][TPath_2]>;
9
+ output: import("@trpc/server").ThenArg<ReturnType<TRouter["_def"]["queries"][TPath_2]["call"]>>;
10
+ }; }[TPath_1]["input"], "cursor">], opts?: import("@trpc/react").UseTRPCInfiniteQueryOptions<TPath_1, Omit<{ [TPath_2 in keyof TRouter["_def"]["queries"]]: {
11
+ input: import("@trpc/server").inferProcedureInput<TRouter["_def"]["queries"][TPath_2]>;
12
+ output: import("@trpc/server").ThenArg<ReturnType<TRouter["_def"]["queries"][TPath_2]["call"]>>;
13
+ }; }[TPath_1]["input"], "cursor">, { [TPath_2 in keyof TRouter["_def"]["queries"]]: {
14
+ input: import("@trpc/server").inferProcedureInput<TRouter["_def"]["queries"][TPath_2]>;
15
+ output: import("@trpc/server").ThenArg<ReturnType<TRouter["_def"]["queries"][TPath_2]["call"]>>;
16
+ }; }[TPath_1]["output"], import("@trpc/react").TRPCClientErrorLike<TRouter>> | undefined) => import("react-query").UseInfiniteQueryResult<{ [TPath_2 in keyof TRouter["_def"]["queries"]]: {
17
+ input: import("@trpc/server").inferProcedureInput<TRouter["_def"]["queries"][TPath_2]>;
18
+ output: import("@trpc/server").ThenArg<ReturnType<TRouter["_def"]["queries"][TPath_2]["call"]>>;
19
+ }; }[TPath_1]["output"], import("@trpc/react").TRPCClientErrorLike<TRouter>>;
20
+ useMutation: <TPath_3 extends keyof TRouter["_def"]["mutations"] & string>(path: TPath_3 | [TPath_3], opts?: import("@trpc/react").UseTRPCMutationOptions<{ [TPath_4 in keyof TRouter["_def"]["mutations"]]: {
21
+ input: import("@trpc/server").inferProcedureInput<TRouter["_def"]["mutations"][TPath_4]>;
22
+ output: import("@trpc/server").ThenArg<ReturnType<TRouter["_def"]["mutations"][TPath_4]["call"]>>;
23
+ }; }[TPath_3]["input"], import("@trpc/react").TRPCClientErrorLike<TRouter>, { [TPath_4 in keyof TRouter["_def"]["mutations"]]: {
24
+ input: import("@trpc/server").inferProcedureInput<TRouter["_def"]["mutations"][TPath_4]>;
25
+ output: import("@trpc/server").ThenArg<ReturnType<TRouter["_def"]["mutations"][TPath_4]["call"]>>;
26
+ }; }[TPath_3]["output"]> | undefined) => import("react-query").UseMutationResult<{ [TPath_4 in keyof TRouter["_def"]["mutations"]]: {
27
+ input: import("@trpc/server").inferProcedureInput<TRouter["_def"]["mutations"][TPath_4]>;
28
+ output: import("@trpc/server").ThenArg<ReturnType<TRouter["_def"]["mutations"][TPath_4]["call"]>>;
29
+ }; }[TPath_3]["output"], import("@trpc/react").TRPCClientErrorLike<TRouter>, { [TPath_4 in keyof TRouter["_def"]["mutations"]]: {
30
+ input: import("@trpc/server").inferProcedureInput<TRouter["_def"]["mutations"][TPath_4]>;
31
+ output: import("@trpc/server").ThenArg<ReturnType<TRouter["_def"]["mutations"][TPath_4]["call"]>>;
32
+ }; }[TPath_3]["input"], unknown>;
33
+ useQuery: <TPath_5 extends keyof TRouter["_def"]["queries"] & string>(pathAndInput: [path: TPath_5, ...args: import("@trpc/server").inferHandlerInput<TRouter["_def"]["queries"][TPath_5]>], opts?: import("@trpc/react").UseTRPCQueryOptions<TPath_5, { [TPath_2 in keyof TRouter["_def"]["queries"]]: {
34
+ input: import("@trpc/server").inferProcedureInput<TRouter["_def"]["queries"][TPath_2]>;
35
+ output: import("@trpc/server").ThenArg<ReturnType<TRouter["_def"]["queries"][TPath_2]["call"]>>;
36
+ }; }[TPath_5]["input"], { [TPath_2 in keyof TRouter["_def"]["queries"]]: {
37
+ input: import("@trpc/server").inferProcedureInput<TRouter["_def"]["queries"][TPath_2]>;
38
+ output: import("@trpc/server").ThenArg<ReturnType<TRouter["_def"]["queries"][TPath_2]["call"]>>;
39
+ }; }[TPath_5]["output"], import("@trpc/react").TRPCClientErrorLike<TRouter>> | undefined) => import("react-query").UseQueryResult<{ [TPath_2 in keyof TRouter["_def"]["queries"]]: {
40
+ input: import("@trpc/server").inferProcedureInput<TRouter["_def"]["queries"][TPath_2]>;
41
+ output: import("@trpc/server").ThenArg<ReturnType<TRouter["_def"]["queries"][TPath_2]["call"]>>;
42
+ }; }[TPath_5]["output"], import("@trpc/react").TRPCClientErrorLike<TRouter>>;
43
+ useSubscription: <TPath_6 extends keyof TRouter["_def"]["subscriptions"] & string, TOutput extends ReturnType<import("@trpc/server").ThenArg<ReturnType<TRouter["_def"]["subscriptions"][TPath_6]["call"]>>["output"]>>(pathAndInput: [path: TPath_6, ...args: import("@trpc/server").inferHandlerInput<TRouter["_def"]["subscriptions"][TPath_6]>], opts: {
44
+ enabled?: boolean | undefined;
45
+ error?: ((err: import("@trpc/react").TRPCClientErrorLike<TRouter>) => void) | undefined;
46
+ next: (data: TOutput) => void;
47
+ }) => void;
48
+ withTRPC: (AppOrPage: import("next").NextComponentType<any, any, any>) => import("next").NextComponentType<import("next").NextPageContext, {}, {}>;
49
+ };
50
+ //# sourceMappingURL=setupNext.d.ts.map
package/dist/declarations/src/setupNext.d.ts.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"setupNext.d.ts","sourceRoot":"../../../src","sources":["setupNext.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AACzC,OAAO,EAAE,oBAAoB,EAAE,kBAAkB,EAAY,MAAM,YAAY,CAAC;AAEhF,wBAAgB,SAAS,CAAC,OAAO,SAAS,SAAS,EACjD,IAAI,EAAE,oBAAoB,CAAC,OAAO,CAAC,GAAG,kBAAkB,CAAC,OAAO,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAYlE"}
package/dist/declarations/src/withTRPC.d.ts CHANGED
@@ -2,26 +2,30 @@
2
2
  * Heavily based on urql's ssr
3
3
  * https://github.com/FormidableLabs/urql/blob/main/packages/next-urql/src/with-urql-client.ts
4
4
  */
5
- import { CreateTRPCClientOptions, TRPCClientError } from '@trpc/react';
5
+ import { TRPCClientError, CreateReactQueryHooksOptions } from '@trpc/react';
6
6
  import type { AnyRouter, ResponseMeta } from '@trpc/server';
7
7
  import { NextComponentType, NextPageContext } from 'next/dist/shared/lib/utils';
8
+ import type { CreateTRPCClientOptions } from '@trpc/client/src/internals/TRPCClient';
8
9
  import { QueryClient } from 'react-query';
9
10
  declare type QueryClientConfig = ConstructorParameters<typeof QueryClient>[0];
10
11
  export declare type WithTRPCConfig<TRouter extends AnyRouter> = CreateTRPCClientOptions<TRouter> & {
11
12
  queryClientConfig?: QueryClientConfig;
12
13
  };
13
- export declare function withTRPC<TRouter extends AnyRouter>(opts: {
14
+ interface WithTRPCOptions<TRouter extends AnyRouter> extends CreateReactQueryHooksOptions {
14
15
  config: (info: {
15
16
  ctx?: NextPageContext;
16
17
  }) => WithTRPCConfig<TRouter>;
17
- } & ({
18
- ssr?: false;
19
- } | {
18
+ }
19
+ export interface WithTRPCSSROptions<TRouter extends AnyRouter> extends WithTRPCOptions<TRouter> {
20
20
  ssr: true;
21
21
  responseMeta?: (opts: {
22
22
  ctx: NextPageContext;
23
23
  clientErrors: TRPCClientError<TRouter>[];
24
24
  }) => ResponseMeta;
25
- })): (AppOrPage: NextComponentType<any, any, any>) => NextComponentType;
25
+ }
26
+ export interface WithTRPCNoSSROptions<TRouter extends AnyRouter> extends WithTRPCOptions<TRouter> {
27
+ ssr?: false;
28
+ }
29
+ export declare function withTRPC<TRouter extends AnyRouter>(opts: WithTRPCNoSSROptions<TRouter> | WithTRPCSSROptions<TRouter>): (AppOrPage: NextComponentType<any, any, any>) => NextComponentType;
26
30
  export {};
27
31
  //# sourceMappingURL=withTRPC.d.ts.map
package/dist/declarations/src/withTRPC.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"withTRPC.d.ts","sourceRoot":"../../../src","sources":["withTRPC.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,EAGL,uBAAuB,EAEvB,eAAe,EAEhB,MAAM,aAAa,CAAC;AACrB,OAAO,KAAK,EAAE,SAAS,EAAe,YAAY,EAAE,MAAM,cAAc,CAAC;AACzE,OAAO,EAGL,iBAAiB,EACjB,eAAe,EAChB,MAAM,4BAA4B,CAAC;AAEpC,OAAO,EAAE,WAAW,EAAuB,MAAM,aAAa,CAAC;AAI/D,aAAK,iBAAiB,GAAG,qBAAqB,CAAC,OAAO,WAAW,CAAC,CAAC,CAAC,CAAC,CAAC;AAwBtE,oBAAY,cAAc,CAAC,OAAO,SAAS,SAAS,IAClD,uBAAuB,CAAC,OAAO,CAAC,GAAG;IACjC,iBAAiB,CAAC,EAAE,iBAAiB,CAAC;CACvC,CAAC;AAEJ,wBAAgB,QAAQ,CAAC,OAAO,SAAS,SAAS,EAChD,IAAI,EAAE;IACJ,MAAM,EAAE,CAAC,IAAI,EAAE;QAAE,GAAG,CAAC,EAAE,eAAe,CAAA;KAAE,KAAK,cAAc,CAAC,OAAO,CAAC,CAAC;CACtE,GAAG,CACA;IACE,GAAG,CAAC,EAAE,KAAK,CAAC;CACb,GACD;IACE,GAAG,EAAE,IAAI,CAAC;IACV,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE;QACpB,GAAG,EAAE,eAAe,CAAC;QACrB,YAAY,EAAE,eAAe,CAAC,OAAO,CAAC,EAAE,CAAC;KAC1C,KAAK,YAAY,CAAC;CACpB,CACJ,eAWkB,kBAAkB,GAAG,EAAE,GAAG,EAAE,GAAG,CAAC,KAAG,iBAAiB,CAwKxE"}
1
+ {"version":3,"file":"withTRPC.d.ts","sourceRoot":"../../../src","sources":["withTRPC.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,EAIL,eAAe,EAEf,4BAA4B,EAC7B,MAAM,aAAa,CAAC;AACrB,OAAO,KAAK,EAAE,SAAS,EAAe,YAAY,EAAE,MAAM,cAAc,CAAC;AACzE,OAAO,EAGL,iBAAiB,EACjB,eAAe,EAChB,MAAM,4BAA4B,CAAC;AACpC,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,uCAAuC,CAAC;AAErF,OAAO,EAAE,WAAW,EAAuB,MAAM,aAAa,CAAC;AAI/D,aAAK,iBAAiB,GAAG,qBAAqB,CAAC,OAAO,WAAW,CAAC,CAAC,CAAC,CAAC,CAAC;AAwBtE,oBAAY,cAAc,CAAC,OAAO,SAAS,SAAS,IAClD,uBAAuB,CAAC,OAAO,CAAC,GAAG;IACjC,iBAAiB,CAAC,EAAE,iBAAiB,CAAC;CACvC,CAAC;AAEJ,UAAU,eAAe,CAAC,OAAO,SAAS,SAAS,CACjD,SAAQ,4BAA4B;IACpC,MAAM,EAAE,CAAC,IAAI,EAAE;QAAE,GAAG,CAAC,EAAE,eAAe,CAAA;KAAE,KAAK,cAAc,CAAC,OAAO,CAAC,CAAC;CACtE;AAED,MAAM,WAAW,kBAAkB,CAAC,OAAO,SAAS,SAAS,CAC3D,SAAQ,eAAe,CAAC,OAAO,CAAC;IAChC,GAAG,EAAE,IAAI,CAAC;IACV,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE;QACpB,GAAG,EAAE,eAAe,CAAC;QACrB,YAAY,EAAE,eAAe,CAAC,OAAO,CAAC,EAAE,CAAC;KAC1C,KAAK,YAAY,CAAC;CACpB;AACD,MAAM,WAAW,oBAAoB,CAAC,OAAO,SAAS,SAAS,CAC7D,SAAQ,eAAe,CAAC,OAAO,CAAC;IAChC,GAAG,CAAC,EAAE,KAAK,CAAC;CACb;AAED,wBAAgB,QAAQ,CAAC,OAAO,SAAS,SAAS,EAChD,IAAI,EAAE,oBAAoB,CAAC,OAAO,CAAC,GAAG,kBAAkB,CAAC,OAAO,CAAC,eAW9C,kBAAkB,GAAG,EAAE,GAAG,EAAE,GAAG,CAAC,KAAG,iBAAiB,CAsKxE"}
package/dist/trpc-next.cjs.dev.js CHANGED
@@ -41,7 +41,7 @@ function transformQueryOrMutationCacheErrors(result) {
41
41
  function withTRPC(opts) {
42
42
  var getClientConfig = opts.config;
43
43
  return function (AppOrPage) {
44
- var trpc = react.createReactQueryHooks();
44
+ var trpc = react.createReactQueryHooks(opts);
45
45
 
46
46
  var WithTRPC = function WithTRPC(props) {
47
47
  var _props$pageProps;
@@ -68,7 +68,7 @@ function withTRPC(opts) {
68
68
  isPrepass = _useState2$.isPrepass,
69
69
  ssrContext = _useState2$.ssrContext;
70
70
 
71
- var hydratedState = trpc.useDehydratedState(trpcClient, (_props$pageProps = props.pageProps) === null || _props$pageProps === void 0 ? void 0 : _props$pageProps.trpcState);
71
+ var hydratedState = trpc.useDehydratedState((_props$pageProps = props.pageProps) === null || _props$pageProps === void 0 ? void 0 : _props$pageProps.trpcState);
72
72
  return /*#__PURE__*/React__default['default'].createElement(trpc.Provider, {
73
73
  client: trpcClient,
74
74
  queryClient: queryClient,
@@ -186,7 +186,7 @@ function withTRPC(opts) {
186
186
  mutations: dehydratedCache.mutations.map(transformQueryOrMutationCacheErrors)
187
187
  }); // dehydrate query client's state and add it to the props
188
188
 
189
- pageProps.trpcState = trpcClient.runtime.transformer.serialize(dehydratedCacheWithErrors);
189
+ pageProps.trpcState = opts.transformer ? opts.transformer.serialize(dehydratedCacheWithErrors) : dehydratedCacheWithErrors;
190
190
  appTreeProps = getAppTreeProps(pageProps);
191
191
  meta = (_opts$responseMeta = (_opts$responseMeta2 = opts.responseMeta) === null || _opts$responseMeta2 === void 0 ? void 0 : _opts$responseMeta2.call(opts, {
192
192
  ctx: ctx,
@@ -231,4 +231,20 @@ function withTRPC(opts) {
231
231
  };
232
232
  }
233
233
 
234
+ function setupTRPC(opts) {
235
+ var hooks = react.createReactQueryHooks(opts);
236
+
237
+ var _withTRPC = withTRPC(opts);
238
+
239
+ return {
240
+ useContext: hooks.useContext,
241
+ useInfiniteQuery: hooks.useInfiniteQuery,
242
+ useMutation: hooks.useMutation,
243
+ useQuery: hooks.useQuery,
244
+ useSubscription: hooks.useSubscription,
245
+ withTRPC: _withTRPC
246
+ };
247
+ }
248
+
249
+ exports.setupTRPC = setupTRPC;
234
250
  exports.withTRPC = withTRPC;
package/dist/trpc-next.cjs.prod.js CHANGED
@@ -41,7 +41,7 @@ function transformQueryOrMutationCacheErrors(result) {
41
41
  function withTRPC(opts) {
42
42
  var getClientConfig = opts.config;
43
43
  return function (AppOrPage) {
44
- var trpc = react.createReactQueryHooks();
44
+ var trpc = react.createReactQueryHooks(opts);
45
45
 
46
46
  var WithTRPC = function WithTRPC(props) {
47
47
  var _props$pageProps;
@@ -68,7 +68,7 @@ function withTRPC(opts) {
68
68
  isPrepass = _useState2$.isPrepass,
69
69
  ssrContext = _useState2$.ssrContext;
70
70
 
71
- var hydratedState = trpc.useDehydratedState(trpcClient, (_props$pageProps = props.pageProps) === null || _props$pageProps === void 0 ? void 0 : _props$pageProps.trpcState);
71
+ var hydratedState = trpc.useDehydratedState((_props$pageProps = props.pageProps) === null || _props$pageProps === void 0 ? void 0 : _props$pageProps.trpcState);
72
72
  return /*#__PURE__*/React__default['default'].createElement(trpc.Provider, {
73
73
  client: trpcClient,
74
74
  queryClient: queryClient,
@@ -186,7 +186,7 @@ function withTRPC(opts) {
186
186
  mutations: dehydratedCache.mutations.map(transformQueryOrMutationCacheErrors)
187
187
  }); // dehydrate query client's state and add it to the props
188
188
 
189
- pageProps.trpcState = trpcClient.runtime.transformer.serialize(dehydratedCacheWithErrors);
189
+ pageProps.trpcState = opts.transformer ? opts.transformer.serialize(dehydratedCacheWithErrors) : dehydratedCacheWithErrors;
190
190
  appTreeProps = getAppTreeProps(pageProps);
191
191
  meta = (_opts$responseMeta = (_opts$responseMeta2 = opts.responseMeta) === null || _opts$responseMeta2 === void 0 ? void 0 : _opts$responseMeta2.call(opts, {
192
192
  ctx: ctx,
@@ -231,4 +231,20 @@ function withTRPC(opts) {
231
231
  };
232
232
  }
233
233
 
234
+ function setupTRPC(opts) {
235
+ var hooks = react.createReactQueryHooks(opts);
236
+
237
+ var _withTRPC = withTRPC(opts);
238
+
239
+ return {
240
+ useContext: hooks.useContext,
241
+ useInfiniteQuery: hooks.useInfiniteQuery,
242
+ useMutation: hooks.useMutation,
243
+ useQuery: hooks.useQuery,
244
+ useSubscription: hooks.useSubscription,
245
+ withTRPC: _withTRPC
246
+ };
247
+ }
248
+
249
+ exports.setupTRPC = setupTRPC;
234
250
  exports.withTRPC = withTRPC;
package/dist/trpc-next.esm.js CHANGED
@@ -31,7 +31,7 @@ function transformQueryOrMutationCacheErrors(result) {
31
31
  function withTRPC(opts) {
32
32
  var getClientConfig = opts.config;
33
33
  return function (AppOrPage) {
34
- var trpc = createReactQueryHooks();
34
+ var trpc = createReactQueryHooks(opts);
35
35
 
36
36
  var WithTRPC = function WithTRPC(props) {
37
37
  var _props$pageProps;
@@ -58,7 +58,7 @@ function withTRPC(opts) {
58
58
  isPrepass = _useState2$.isPrepass,
59
59
  ssrContext = _useState2$.ssrContext;
60
60
 
61
- var hydratedState = trpc.useDehydratedState(trpcClient, (_props$pageProps = props.pageProps) === null || _props$pageProps === void 0 ? void 0 : _props$pageProps.trpcState);
61
+ var hydratedState = trpc.useDehydratedState((_props$pageProps = props.pageProps) === null || _props$pageProps === void 0 ? void 0 : _props$pageProps.trpcState);
62
62
  return /*#__PURE__*/React.createElement(trpc.Provider, {
63
63
  client: trpcClient,
64
64
  queryClient: queryClient,
@@ -176,7 +176,7 @@ function withTRPC(opts) {
176
176
  mutations: dehydratedCache.mutations.map(transformQueryOrMutationCacheErrors)
177
177
  }); // dehydrate query client's state and add it to the props
178
178
 
179
- pageProps.trpcState = trpcClient.runtime.transformer.serialize(dehydratedCacheWithErrors);
179
+ pageProps.trpcState = opts.transformer ? opts.transformer.serialize(dehydratedCacheWithErrors) : dehydratedCacheWithErrors;
180
180
  appTreeProps = getAppTreeProps(pageProps);
181
181
  meta = (_opts$responseMeta = (_opts$responseMeta2 = opts.responseMeta) === null || _opts$responseMeta2 === void 0 ? void 0 : _opts$responseMeta2.call(opts, {
182
182
  ctx: ctx,
@@ -221,4 +221,19 @@ function withTRPC(opts) {
221
221
  };
222
222
  }
223
223
 
224
- export { withTRPC };
224
+ function setupTRPC(opts) {
225
+ var hooks = createReactQueryHooks(opts);
226
+
227
+ var _withTRPC = withTRPC(opts);
228
+
229
+ return {
230
+ useContext: hooks.useContext,
231
+ useInfiniteQuery: hooks.useInfiniteQuery,
232
+ useMutation: hooks.useMutation,
233
+ useQuery: hooks.useQuery,
234
+ useSubscription: hooks.useSubscription,
235
+ withTRPC: _withTRPC
236
+ };
237
+ }
238
+
239
+ export { setupTRPC, withTRPC };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@trpc/next",
3
- "version": "9.16.0",
3
+ "version": "10.0.0-alpha.2",
4
4
  "description": "tRPC Next lib",
5
5
  "author": "KATT",
6
6
  "license": "MIT",
@@ -30,22 +30,22 @@
30
30
  }
31
31
  },
32
32
  "peerDependencies": {
33
- "@trpc/client": "9.16.0",
34
- "@trpc/react": "9.16.0",
35
- "@trpc/server": "9.16.0",
33
+ "@trpc/client": "10.0.0-alpha.2",
34
+ "@trpc/react": "10.0.0-alpha.2",
35
+ "@trpc/server": "10.0.0-alpha.2",
36
36
  "next": "*",
37
37
  "react": ">=16.8.0",
38
38
  "react-dom": ">=16.8.0",
39
- "react-query": "^3.0.0"
39
+ "react-query": "^3.31.0 || ^4.0.0-alpha.4"
40
40
  },
41
41
  "dependencies": {
42
42
  "@babel/runtime": "^7.9.0",
43
- "react-ssr-prepass": "^1.4.0"
43
+ "react-ssr-prepass": "^1.5.0"
44
44
  },
45
45
  "devDependencies": {
46
- "@trpc/client": "9.16.0",
47
- "@trpc/react": "9.16.0",
48
- "@trpc/server": "9.16.0",
46
+ "@trpc/client": "10.0.0-alpha.2",
47
+ "@trpc/react": "10.0.0-alpha.2",
48
+ "@trpc/server": "10.0.0-alpha.2",
49
49
  "@types/express": "^4.17.12",
50
50
  "express": "^4.17.1",
51
51
  "next": "^12.0.1",
@@ -57,5 +57,5 @@
57
57
  "publishConfig": {
58
58
  "access": "public"
59
59
  },
60
- "gitHead": "6829b38c6902b761a645a1cac0f571d5fb522e7c"
60
+ "gitHead": "4d72f1922cfb8a74e2bb03a29b39903418312728"
61
61
  }
package/src/index.ts CHANGED
@@ -1 +1,2 @@
1
1
  export * from './withTRPC';
2
+ export * from './setupNext';
package/src/setupNext.tsx ADDED
@@ -0,0 +1,18 @@
1
+ import { createReactQueryHooks } from '@trpc/react';
2
+ import { AnyRouter } from '@trpc/server';
3
+ import { WithTRPCNoSSROptions, WithTRPCSSROptions, withTRPC } from './withTRPC';
4
+
5
+ export function setupTRPC<TRouter extends AnyRouter>(
6
+ opts: WithTRPCNoSSROptions<TRouter> | WithTRPCSSROptions<TRouter>,
7
+ ) {
8
+ const hooks = createReactQueryHooks<TRouter>(opts);
9
+ const _withTRPC = withTRPC(opts);
10
+ return {
11
+ useContext: hooks.useContext,
12
+ useInfiniteQuery: hooks.useInfiniteQuery,
13
+ useMutation: hooks.useMutation,
14
+ useQuery: hooks.useQuery,
15
+ useSubscription: hooks.useSubscription,
16
+ withTRPC: _withTRPC,
17
+ };
18
+ }
package/src/withTRPC.tsx CHANGED
@@ -6,10 +6,10 @@
6
6
  import {
7
7
  createReactQueryHooks,
8
8
  createTRPCClient,
9
- CreateTRPCClientOptions,
10
9
  TRPCClient,
11
10
  TRPCClientError,
12
11
  TRPCClientErrorLike,
12
+ CreateReactQueryHooksOptions,
13
13
  } from '@trpc/react';
14
14
  import type { AnyRouter, Dict, Maybe, ResponseMeta } from '@trpc/server';
15
15
  import {
@@ -18,6 +18,7 @@ import {
18
18
  NextComponentType,
19
19
  NextPageContext,
20
20
  } from 'next/dist/shared/lib/utils';
21
+ import type { CreateTRPCClientOptions } from '@trpc/client/src/internals/TRPCClient';
21
22
  import React, { createElement, useState } from 'react';
22
23
  import { QueryClient, QueryClientProvider } from 'react-query';
23
24
  import { dehydrate, DehydratedState, Hydrate } from 'react-query/hydration';
@@ -52,21 +53,26 @@ export type WithTRPCConfig<TRouter extends AnyRouter> =
52
53
  queryClientConfig?: QueryClientConfig;
53
54
  };
54
55
 
56
+ interface WithTRPCOptions<TRouter extends AnyRouter>
57
+ extends CreateReactQueryHooksOptions {
58
+ config: (info: { ctx?: NextPageContext }) => WithTRPCConfig<TRouter>;
59
+ }
60
+
61
+ export interface WithTRPCSSROptions<TRouter extends AnyRouter>
62
+ extends WithTRPCOptions<TRouter> {
63
+ ssr: true;
64
+ responseMeta?: (opts: {
65
+ ctx: NextPageContext;
66
+ clientErrors: TRPCClientError<TRouter>[];
67
+ }) => ResponseMeta;
68
+ }
69
+ export interface WithTRPCNoSSROptions<TRouter extends AnyRouter>
70
+ extends WithTRPCOptions<TRouter> {
71
+ ssr?: false;
72
+ }
73
+
55
74
  export function withTRPC<TRouter extends AnyRouter>(
56
- opts: {
57
- config: (info: { ctx?: NextPageContext }) => WithTRPCConfig<TRouter>;
58
- } & (
59
- | {
60
- ssr?: false;
61
- }
62
- | {
63
- ssr: true;
64
- responseMeta?: (opts: {
65
- ctx: NextPageContext;
66
- clientErrors: TRPCClientError<TRouter>[];
67
- }) => ResponseMeta;
68
- }
69
- ),
75
+ opts: WithTRPCNoSSROptions<TRouter> | WithTRPCSSROptions<TRouter>,
70
76
  ) {
71
77
  const { config: getClientConfig } = opts;
72
78
 
@@ -78,7 +84,7 @@ export function withTRPC<TRouter extends AnyRouter>(
78
84
  ssrContext: NextPageContext;
79
85
  };
80
86
  return (AppOrPage: NextComponentType<any, any, any>): NextComponentType => {
81
- const trpc = createReactQueryHooks<TRouter, NextPageContext>();
87
+ const trpc = createReactQueryHooks<TRouter, NextPageContext>(opts);
82
88
 
83
89
  const WithTRPC = (
84
90
  props: AppPropsType & {
@@ -102,10 +108,7 @@ export function withTRPC<TRouter extends AnyRouter>(
102
108
  },
103
109
  );
104
110
 
105
- const hydratedState = trpc.useDehydratedState(
106
- trpcClient,
107
- props.pageProps?.trpcState,
108
- );
111
+ const hydratedState = trpc.useDehydratedState(props.pageProps?.trpcState);
109
112
 
110
113
  return (
111
114
  <trpc.Provider
@@ -154,6 +157,7 @@ export function withTRPC<TRouter extends AnyRouter>(
154
157
  if (typeof window !== 'undefined' || !opts.ssr) {
155
158
  return getAppTreeProps(pageProps);
156
159
  }
160
+
157
161
  const config = getClientConfig({ ctx });
158
162
  const trpcClient = createTRPCClient(config);
159
163
  const queryClient = new QueryClient(config.queryClientConfig);
@@ -207,9 +211,9 @@ export function withTRPC<TRouter extends AnyRouter>(
207
211
  ),
208
212
  };
209
213
  // dehydrate query client's state and add it to the props
210
- pageProps.trpcState = trpcClient.runtime.transformer.serialize(
211
- dehydratedCacheWithErrors,
212
- );
214
+ pageProps.trpcState = opts.transformer
215
+ ? opts.transformer.serialize(dehydratedCacheWithErrors)
216
+ : dehydratedCacheWithErrors;
213
217
 
214
218
  const appTreeProps = getAppTreeProps(pageProps);
215
219