@trpc/next 10.0.0-alpha.4 → 10.0.0-alpha.42

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 (10) hide show
  1. package/README.md +84 -1
  2. package/dist/index.js +17 -14
  3. package/dist/index.mjs +18 -15
  4. package/dist/setupNext.d.ts +35 -34
  5. package/dist/setupNext.d.ts.map +1 -1
  6. package/dist/withTRPC.d.ts +5 -5
  7. package/dist/withTRPC.d.ts.map +1 -1
  8. package/package.json +19 -15
  9. package/src/setupNext.tsx +14 -6
  10. package/src/withTRPC.tsx +34 -26
package/README.md CHANGED
@@ -1,3 +1,86 @@
1
+ <p align="center">
2
+ <a href="https://trpc.io/"><img src="../../www/static/img/logo-text.svg" alt="tRPC" height="130"/></a>
3
+ </p>
4
+
5
+ <p align="center">
6
+ <strong>End-to-end typesafe APIs made easy</strong>
7
+ </p>
8
+
9
+ <p align="center">
10
+ <!-- TODO: replace with new version GIF -->
11
+ <img src="https://storage.googleapis.com/trpc/trpcgif.gif" alt="Demo" />
12
+ </p>
13
+
1
14
  # `@trpc/next`
2
15
 
3
- https://trpc.io
16
+ > Connect a tRPC router to Next.js.
17
+
18
+ ## Documentation
19
+
20
+ Full documentation for `@trpc/next` can be found [here](https://trpc.io/docs/nextjs)
21
+
22
+ ## Installation
23
+
24
+ ```bash
25
+ # npm
26
+ npm install @trpc/next @trpc/react react-query
27
+
28
+ # Yarn
29
+ yarn add @trpc/next @trpc/react react-query
30
+
31
+ # pnpm
32
+ pnpm add @trpc/next @trpc/react react-query
33
+ ```
34
+
35
+ ## Basic Example
36
+
37
+ Setup tRPC in `utils/trpc.ts`.
38
+
39
+ ```ts
40
+ import { setupTRPC } from '@trpc/next';
41
+ // Import the router type from your server file
42
+ import type { AppRouter } from '../pages/api/[trpc].ts';
43
+
44
+ export const trpc = setupTRPC<AppRouter>({
45
+ config() {
46
+ return {
47
+ url: 'http://localhost:3000/api/trpc',
48
+ };
49
+ },
50
+ ssr: true,
51
+ });
52
+ ```
53
+
54
+ Hook up tRPC inside `_app.tsx`.
55
+
56
+ ```ts
57
+ import { trpc } from '~/utils/trpc';
58
+
59
+ const App = ({ Component, pageProps }) => {
60
+ return <Component {...pageProps} />;
61
+ };
62
+
63
+ export default trpc.withTRPC(App);
64
+ ```
65
+
66
+ Now you can query your API in any component.
67
+
68
+ ```ts
69
+ import { trpc } from '~/utils/trpc';
70
+
71
+ export function Hello() {
72
+ const { data, error, status } = trpc.proxy.greeting.useQuery({
73
+ name: 'tRPC',
74
+ });
75
+
76
+ if (error) {
77
+ return <p>{error.message}</p>;
78
+ }
79
+
80
+ if (status !== 'success') {
81
+ return <p>Loading...</p>;
82
+ }
83
+
84
+ return <div>{data && <p>{data.greeting}</p>}</div>;
85
+ }
86
+ ```
package/dist/index.js CHANGED
@@ -7,9 +7,9 @@ var _asyncToGenerator = require('@babel/runtime/helpers/asyncToGenerator');
7
7
  var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
8
8
  var _defineProperty = require('@babel/runtime/helpers/defineProperty');
9
9
  var _regeneratorRuntime = require('@babel/runtime/regenerator');
10
+ var reactQuery = require('@tanstack/react-query');
10
11
  var react = require('@trpc/react');
11
12
  var React = require('react');
12
- var reactQuery = require('react-query');
13
13
  var ssrPrepass = require('react-ssr-prepass');
14
14
 
15
15
  function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
@@ -48,7 +48,7 @@ function transformQueryOrMutationCacheErrors(result) {
48
48
  function withTRPC(opts) {
49
49
  var getClientConfig = opts.config;
50
50
  return function (AppOrPage) {
51
- var trpc = react.createReactQueryHooks(opts);
51
+ var trpc = react.createReactQueryHooks();
52
52
 
53
53
  var WithTRPC = function WithTRPC(props) {
54
54
  var _props$pageProps;
@@ -64,7 +64,7 @@ function withTRPC(opts) {
64
64
  return {
65
65
  queryClient: queryClient,
66
66
  trpcClient: trpcClient,
67
- isPrepass: false,
67
+ ssrState: opts.ssr ? 'mounting' : false,
68
68
  ssrContext: null
69
69
  };
70
70
  }),
@@ -72,14 +72,14 @@ function withTRPC(opts) {
72
72
  _useState2$ = _useState2[0],
73
73
  queryClient = _useState2$.queryClient,
74
74
  trpcClient = _useState2$.trpcClient,
75
- isPrepass = _useState2$.isPrepass,
75
+ ssrState = _useState2$.ssrState,
76
76
  ssrContext = _useState2$.ssrContext;
77
77
 
78
- var hydratedState = trpc.useDehydratedState((_props$pageProps = props.pageProps) === null || _props$pageProps === void 0 ? void 0 : _props$pageProps.trpcState);
78
+ var hydratedState = trpc.useDehydratedState(trpcClient, (_props$pageProps = props.pageProps) === null || _props$pageProps === void 0 ? void 0 : _props$pageProps.trpcState);
79
79
  return /*#__PURE__*/React__default["default"].createElement(trpc.Provider, {
80
80
  client: trpcClient,
81
81
  queryClient: queryClient,
82
- isPrepass: isPrepass,
82
+ ssrState: ssrState,
83
83
  ssrContext: ssrContext
84
84
  }, /*#__PURE__*/React__default["default"].createElement(reactQuery.QueryClientProvider, {
85
85
  client: queryClient
@@ -91,7 +91,7 @@ function withTRPC(opts) {
91
91
  if (AppOrPage.getInitialProps || opts.ssr) {
92
92
  WithTRPC.getInitialProps = /*#__PURE__*/function () {
93
93
  var _ref = _asyncToGenerator__default["default"]( /*#__PURE__*/_regeneratorRuntime__default["default"].mark(function _callee(appOrPageCtx) {
94
- var _opts$responseMeta, _opts$responseMeta2;
94
+ var _opts$responseMeta;
95
95
 
96
96
  var AppTree, isApp, ctx, pageProps, _originalProps$pagePr, originalProps, originalPageProps, getAppTreeProps, config, trpcClient, queryClient, trpcProp, prepassProps, dehydratedCache, dehydratedCacheWithErrors, appTreeProps, meta, _i, _Object$entries, _Object$entries$_i, key, value, _ctx$res;
97
97
 
@@ -143,7 +143,7 @@ function withTRPC(opts) {
143
143
  config: config,
144
144
  trpcClient: trpcClient,
145
145
  queryClient: queryClient,
146
- isPrepass: true,
146
+ ssrState: 'prepass',
147
147
  ssrContext: ctx
148
148
  };
149
149
  prepassProps = {
@@ -193,18 +193,18 @@ function withTRPC(opts) {
193
193
  mutations: dehydratedCache.mutations.map(transformQueryOrMutationCacheErrors)
194
194
  }); // dehydrate query client's state and add it to the props
195
195
 
196
- pageProps.trpcState = opts.transformer ? opts.transformer.serialize(dehydratedCacheWithErrors) : dehydratedCacheWithErrors;
196
+ pageProps.trpcState = trpcClient.runtime.transformer.serialize(dehydratedCacheWithErrors);
197
197
  appTreeProps = getAppTreeProps(pageProps);
198
- meta = (_opts$responseMeta = (_opts$responseMeta2 = opts.responseMeta) === null || _opts$responseMeta2 === void 0 ? void 0 : _opts$responseMeta2.call(opts, {
198
+ meta = ((_opts$responseMeta = opts.responseMeta) === null || _opts$responseMeta === void 0 ? void 0 : _opts$responseMeta.call(opts, {
199
199
  ctx: ctx,
200
200
  clientErrors: [].concat(_toConsumableArray__default["default"](dehydratedCache.queries), _toConsumableArray__default["default"](dehydratedCache.mutations)).map(function (v) {
201
201
  return v.state.error;
202
202
  }).flatMap(function (err) {
203
203
  return err instanceof Error && err.name === 'TRPCClientError' ? [err] : [];
204
204
  })
205
- })) !== null && _opts$responseMeta !== void 0 ? _opts$responseMeta : {};
205
+ })) || {};
206
206
 
207
- for (_i = 0, _Object$entries = Object.entries(meta); _i < _Object$entries.length; _i++) {
207
+ for (_i = 0, _Object$entries = Object.entries(meta.headers || {}); _i < _Object$entries.length; _i++) {
208
208
  _Object$entries$_i = _slicedToArray__default["default"](_Object$entries[_i], 2), key = _Object$entries$_i[0], value = _Object$entries$_i[1];
209
209
 
210
210
  if (typeof value === 'string') {
@@ -239,17 +239,20 @@ function withTRPC(opts) {
239
239
  }
240
240
 
241
241
  function setupTRPC(opts) {
242
- var hooks = react.createReactQueryHooks(opts);
242
+ var hooks = react.createReactQueryHooks();
243
+ var proxy = react.createReactQueryHooksProxy(hooks); // TODO: maybe set TSSRContext to `never` when using `WithTRPCNoSSROptions`
243
244
 
244
245
  var _withTRPC = withTRPC(opts);
245
246
 
246
247
  return {
248
+ proxy: proxy,
247
249
  useContext: hooks.useContext,
248
250
  useInfiniteQuery: hooks.useInfiniteQuery,
249
251
  useMutation: hooks.useMutation,
250
252
  useQuery: hooks.useQuery,
251
253
  useSubscription: hooks.useSubscription,
252
- withTRPC: _withTRPC
254
+ withTRPC: _withTRPC,
255
+ queries: hooks.queries
253
256
  };
254
257
  }
255
258
 
package/dist/index.mjs CHANGED
@@ -3,9 +3,9 @@ import _asyncToGenerator from '@babel/runtime/helpers/asyncToGenerator';
3
3
  import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
4
4
  import _defineProperty from '@babel/runtime/helpers/defineProperty';
5
5
  import _regeneratorRuntime from '@babel/runtime/regenerator';
6
- import { createReactQueryHooks, createTRPCClient } from '@trpc/react';
6
+ import { QueryClient, QueryClientProvider, Hydrate, dehydrate } from '@tanstack/react-query';
7
+ import { createReactQueryHooks, createTRPCClient, createReactQueryHooksProxy } from '@trpc/react';
7
8
  import React, { useState, createElement } from 'react';
8
- import { QueryClient, QueryClientProvider, Hydrate, dehydrate } from 'react-query';
9
9
  import ssrPrepass from 'react-ssr-prepass';
10
10
 
11
11
  function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
@@ -34,7 +34,7 @@ function transformQueryOrMutationCacheErrors(result) {
34
34
  function withTRPC(opts) {
35
35
  var getClientConfig = opts.config;
36
36
  return function (AppOrPage) {
37
- var trpc = createReactQueryHooks(opts);
37
+ var trpc = createReactQueryHooks();
38
38
 
39
39
  var WithTRPC = function WithTRPC(props) {
40
40
  var _props$pageProps;
@@ -50,7 +50,7 @@ function withTRPC(opts) {
50
50
  return {
51
51
  queryClient: queryClient,
52
52
  trpcClient: trpcClient,
53
- isPrepass: false,
53
+ ssrState: opts.ssr ? 'mounting' : false,
54
54
  ssrContext: null
55
55
  };
56
56
  }),
@@ -58,14 +58,14 @@ function withTRPC(opts) {
58
58
  _useState2$ = _useState2[0],
59
59
  queryClient = _useState2$.queryClient,
60
60
  trpcClient = _useState2$.trpcClient,
61
- isPrepass = _useState2$.isPrepass,
61
+ ssrState = _useState2$.ssrState,
62
62
  ssrContext = _useState2$.ssrContext;
63
63
 
64
- var hydratedState = trpc.useDehydratedState((_props$pageProps = props.pageProps) === null || _props$pageProps === void 0 ? void 0 : _props$pageProps.trpcState);
64
+ var hydratedState = trpc.useDehydratedState(trpcClient, (_props$pageProps = props.pageProps) === null || _props$pageProps === void 0 ? void 0 : _props$pageProps.trpcState);
65
65
  return /*#__PURE__*/React.createElement(trpc.Provider, {
66
66
  client: trpcClient,
67
67
  queryClient: queryClient,
68
- isPrepass: isPrepass,
68
+ ssrState: ssrState,
69
69
  ssrContext: ssrContext
70
70
  }, /*#__PURE__*/React.createElement(QueryClientProvider, {
71
71
  client: queryClient
@@ -77,7 +77,7 @@ function withTRPC(opts) {
77
77
  if (AppOrPage.getInitialProps || opts.ssr) {
78
78
  WithTRPC.getInitialProps = /*#__PURE__*/function () {
79
79
  var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(appOrPageCtx) {
80
- var _opts$responseMeta, _opts$responseMeta2;
80
+ var _opts$responseMeta;
81
81
 
82
82
  var AppTree, isApp, ctx, pageProps, _originalProps$pagePr, originalProps, originalPageProps, getAppTreeProps, config, trpcClient, queryClient, trpcProp, prepassProps, dehydratedCache, dehydratedCacheWithErrors, appTreeProps, meta, _i, _Object$entries, _Object$entries$_i, key, value, _ctx$res;
83
83
 
@@ -129,7 +129,7 @@ function withTRPC(opts) {
129
129
  config: config,
130
130
  trpcClient: trpcClient,
131
131
  queryClient: queryClient,
132
- isPrepass: true,
132
+ ssrState: 'prepass',
133
133
  ssrContext: ctx
134
134
  };
135
135
  prepassProps = {
@@ -179,18 +179,18 @@ function withTRPC(opts) {
179
179
  mutations: dehydratedCache.mutations.map(transformQueryOrMutationCacheErrors)
180
180
  }); // dehydrate query client's state and add it to the props
181
181
 
182
- pageProps.trpcState = opts.transformer ? opts.transformer.serialize(dehydratedCacheWithErrors) : dehydratedCacheWithErrors;
182
+ pageProps.trpcState = trpcClient.runtime.transformer.serialize(dehydratedCacheWithErrors);
183
183
  appTreeProps = getAppTreeProps(pageProps);
184
- meta = (_opts$responseMeta = (_opts$responseMeta2 = opts.responseMeta) === null || _opts$responseMeta2 === void 0 ? void 0 : _opts$responseMeta2.call(opts, {
184
+ meta = ((_opts$responseMeta = opts.responseMeta) === null || _opts$responseMeta === void 0 ? void 0 : _opts$responseMeta.call(opts, {
185
185
  ctx: ctx,
186
186
  clientErrors: [].concat(_toConsumableArray(dehydratedCache.queries), _toConsumableArray(dehydratedCache.mutations)).map(function (v) {
187
187
  return v.state.error;
188
188
  }).flatMap(function (err) {
189
189
  return err instanceof Error && err.name === 'TRPCClientError' ? [err] : [];
190
190
  })
191
- })) !== null && _opts$responseMeta !== void 0 ? _opts$responseMeta : {};
191
+ })) || {};
192
192
 
193
- for (_i = 0, _Object$entries = Object.entries(meta); _i < _Object$entries.length; _i++) {
193
+ for (_i = 0, _Object$entries = Object.entries(meta.headers || {}); _i < _Object$entries.length; _i++) {
194
194
  _Object$entries$_i = _slicedToArray(_Object$entries[_i], 2), key = _Object$entries$_i[0], value = _Object$entries$_i[1];
195
195
 
196
196
  if (typeof value === 'string') {
@@ -225,17 +225,20 @@ function withTRPC(opts) {
225
225
  }
226
226
 
227
227
  function setupTRPC(opts) {
228
- var hooks = createReactQueryHooks(opts);
228
+ var hooks = createReactQueryHooks();
229
+ var proxy = createReactQueryHooksProxy(hooks); // TODO: maybe set TSSRContext to `never` when using `WithTRPCNoSSROptions`
229
230
 
230
231
  var _withTRPC = withTRPC(opts);
231
232
 
232
233
  return {
234
+ proxy: proxy,
233
235
  useContext: hooks.useContext,
234
236
  useInfiniteQuery: hooks.useInfiniteQuery,
235
237
  useMutation: hooks.useMutation,
236
238
  useQuery: hooks.useQuery,
237
239
  useSubscription: hooks.useSubscription,
238
- withTRPC: _withTRPC
240
+ withTRPC: _withTRPC,
241
+ queries: hooks.queries
239
242
  };
240
243
  }
241
244
 
package/dist/setupNext.d.ts CHANGED
@@ -1,50 +1,51 @@
1
1
  import { AnyRouter } from '@trpc/server';
2
+ import { NextPageContext } from 'next/types';
2
3
  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_3 extends { [TPath in keyof TRouter["_def"]["queries"]]: import("@trpc/server").inferProcedureInput<TRouter["_def"]["queries"][TPath]> extends {
4
+ export declare function setupTRPC<TRouter extends AnyRouter, TSSRContext extends NextPageContext = NextPageContext>(opts: WithTRPCNoSSROptions<TRouter> | WithTRPCSSROptions<TRouter>): {
5
+ proxy: {
6
+ useContext(): import("@trpc/react").DecoratedProcedureUtilsRecord<TRouter>;
7
+ } & import("@trpc/react").DecoratedProcedureRecord<TRouter["_def"]["record"], "">;
8
+ useContext: () => import("@trpc/react/dist/createReactQueryHooks").TRPCContextState<TRouter, TSSRContext>;
9
+ useInfiniteQuery: <TPath_3 extends (TRouter["_def"]["queries"] extends infer T ? { [TPath in keyof T]: import("@trpc/server").inferProcedureInput<TRouter["_def"]["queries"][TPath]> extends {
6
10
  cursor?: any;
7
- } ? TPath : never; }[keyof TRouter["_def"]["queries"]] & string>(pathAndInput: [path: TPath_3, input: Omit<{ [TPath_1 in keyof TRouter["_def"]["queries"]]: {
11
+ } ? TPath : never; } : never)[keyof TRouter["_def"]["queries"]] & string>(pathAndInput: [path: TPath_3, input: Omit<(TRouter["_def"]["queries"] extends infer T_1 ? { [TPath_1 in keyof T_1]: {
8
12
  input: import("@trpc/server").inferProcedureInput<TRouter["_def"]["queries"][TPath_1]>;
9
- output: import("@trpc/server").ThenArg<ReturnType<TRouter["_def"]["queries"][TPath_1]["call"]>>;
10
- }; }[TPath_3]["input"], "cursor">], opts?: import("@trpc/react").UseTRPCInfiniteQueryOptions<TPath_3, Omit<{ [TPath_1 in keyof TRouter["_def"]["queries"]]: {
13
+ output: import("@trpc/server").inferProcedureOutput<TRouter["_def"]["queries"][TPath_1]>;
14
+ }; } : never)[TPath_3]["input"], "cursor">], opts?: import("@trpc/react/dist/createReactQueryHooks").UseTRPCInfiniteQueryOptions<TPath_3, Omit<(TRouter["_def"]["queries"] extends infer T_1 ? { [TPath_1 in keyof T_1]: {
11
15
  input: import("@trpc/server").inferProcedureInput<TRouter["_def"]["queries"][TPath_1]>;
12
- output: import("@trpc/server").ThenArg<ReturnType<TRouter["_def"]["queries"][TPath_1]["call"]>>;
13
- }; }[TPath_3]["input"], "cursor">, { [TPath_1 in keyof TRouter["_def"]["queries"]]: {
16
+ output: import("@trpc/server").inferProcedureOutput<TRouter["_def"]["queries"][TPath_1]>;
17
+ }; } : never)[TPath_3]["input"], "cursor">, (TRouter["_def"]["queries"] extends infer T_1 ? { [TPath_1 in keyof T_1]: {
14
18
  input: import("@trpc/server").inferProcedureInput<TRouter["_def"]["queries"][TPath_1]>;
15
- output: import("@trpc/server").ThenArg<ReturnType<TRouter["_def"]["queries"][TPath_1]["call"]>>;
16
- }; }[TPath_3]["output"], import("@trpc/react").TRPCClientErrorLike<TRouter>> | undefined) => import("react-query").UseInfiniteQueryResult<{ [TPath_1 in keyof TRouter["_def"]["queries"]]: {
19
+ output: import("@trpc/server").inferProcedureOutput<TRouter["_def"]["queries"][TPath_1]>;
20
+ }; } : never)[TPath_3]["output"], import("@trpc/react").TRPCClientErrorLike<TRouter>> | undefined) => import("@tanstack/react-query").UseInfiniteQueryResult<(TRouter["_def"]["queries"] extends infer T_1 ? { [TPath_1 in keyof T_1]: {
17
21
  input: import("@trpc/server").inferProcedureInput<TRouter["_def"]["queries"][TPath_1]>;
18
- output: import("@trpc/server").ThenArg<ReturnType<TRouter["_def"]["queries"][TPath_1]["call"]>>;
19
- }; }[TPath_3]["output"], import("@trpc/react").TRPCClientErrorLike<TRouter>>;
20
- useMutation: <TPath_1 extends keyof TRouter["_def"]["mutations"] & string>(path: TPath_1 | [TPath_1], opts?: import("@trpc/react").UseTRPCMutationOptions<{ [TPath_2 in keyof TRouter["_def"]["mutations"]]: {
22
+ output: import("@trpc/server").inferProcedureOutput<TRouter["_def"]["queries"][TPath_1]>;
23
+ }; } : never)[TPath_3]["output"], import("@trpc/react").TRPCClientErrorLike<TRouter>>;
24
+ useMutation: <TPath_1 extends keyof TRouter["_def"]["mutations"] & string, TContext = unknown>(path: TPath_1 | [TPath_1], opts?: import("@trpc/react/dist/createReactQueryHooks").UseTRPCMutationOptions<(TRouter["_def"]["mutations"] extends infer T_2 ? { [TPath_2 in keyof T_2]: {
21
25
  input: import("@trpc/server").inferProcedureInput<TRouter["_def"]["mutations"][TPath_2]>;
22
- output: import("@trpc/server").ThenArg<ReturnType<TRouter["_def"]["mutations"][TPath_2]["call"]>>;
23
- }; }[TPath_1]["input"], import("@trpc/react").TRPCClientErrorLike<TRouter>, { [TPath_2 in keyof TRouter["_def"]["mutations"]]: {
26
+ output: import("@trpc/server").inferProcedureOutput<TRouter["_def"]["mutations"][TPath_2]>;
27
+ }; } : never)[TPath_1]["input"], import("@trpc/react").TRPCClientErrorLike<TRouter>, (TRouter["_def"]["mutations"] extends infer T_2 ? { [TPath_2 in keyof T_2]: {
24
28
  input: import("@trpc/server").inferProcedureInput<TRouter["_def"]["mutations"][TPath_2]>;
25
- output: import("@trpc/server").ThenArg<ReturnType<TRouter["_def"]["mutations"][TPath_2]["call"]>>;
26
- }; }[TPath_1]["output"]> | undefined) => import("react-query").UseMutationResult<{ [TPath_2 in keyof TRouter["_def"]["mutations"]]: {
29
+ output: import("@trpc/server").inferProcedureOutput<TRouter["_def"]["mutations"][TPath_2]>;
30
+ }; } : never)[TPath_1]["output"], TContext> | undefined) => import("@tanstack/react-query").UseMutationResult<(TRouter["_def"]["mutations"] extends infer T_2 ? { [TPath_2 in keyof T_2]: {
27
31
  input: import("@trpc/server").inferProcedureInput<TRouter["_def"]["mutations"][TPath_2]>;
28
- output: import("@trpc/server").ThenArg<ReturnType<TRouter["_def"]["mutations"][TPath_2]["call"]>>;
29
- }; }[TPath_1]["output"], import("@trpc/react").TRPCClientErrorLike<TRouter>, { [TPath_2 in keyof TRouter["_def"]["mutations"]]: {
32
+ output: import("@trpc/server").inferProcedureOutput<TRouter["_def"]["mutations"][TPath_2]>;
33
+ }; } : never)[TPath_1]["output"], import("@trpc/react").TRPCClientErrorLike<TRouter>, (TRouter["_def"]["mutations"] extends infer T_2 ? { [TPath_2 in keyof T_2]: {
30
34
  input: import("@trpc/server").inferProcedureInput<TRouter["_def"]["mutations"][TPath_2]>;
31
- output: import("@trpc/server").ThenArg<ReturnType<TRouter["_def"]["mutations"][TPath_2]["call"]>>;
32
- }; }[TPath_1]["input"], unknown>;
33
- useQuery: <TPath_4 extends keyof TRouter["_def"]["queries"] & string>(pathAndInput: [path: TPath_4, ...args: import("@trpc/server").inferHandlerInput<TRouter["_def"]["queries"][TPath_4]>], opts?: import("@trpc/react").UseTRPCQueryOptions<TPath_4, { [TPath_1 in keyof TRouter["_def"]["queries"]]: {
35
+ output: import("@trpc/server").inferProcedureOutput<TRouter["_def"]["mutations"][TPath_2]>;
36
+ }; } : never)[TPath_1]["input"], TContext>;
37
+ useQuery: <TPath_4 extends keyof TRouter["_def"]["queries"] & string, TQueryFnData = (TRouter["_def"]["queries"] extends infer T_1 ? { [TPath_1 in keyof T_1]: {
34
38
  input: import("@trpc/server").inferProcedureInput<TRouter["_def"]["queries"][TPath_1]>;
35
- output: import("@trpc/server").ThenArg<ReturnType<TRouter["_def"]["queries"][TPath_1]["call"]>>;
36
- }; }[TPath_4]["input"], { [TPath_1 in keyof TRouter["_def"]["queries"]]: {
39
+ output: import("@trpc/server").inferProcedureOutput<TRouter["_def"]["queries"][TPath_1]>;
40
+ }; } : never)[TPath_4]["output"], TData = (TRouter["_def"]["queries"] extends infer T_1 ? { [TPath_1 in keyof T_1]: {
37
41
  input: import("@trpc/server").inferProcedureInput<TRouter["_def"]["queries"][TPath_1]>;
38
- output: import("@trpc/server").ThenArg<ReturnType<TRouter["_def"]["queries"][TPath_1]["call"]>>;
39
- }; }[TPath_4]["output"], import("@trpc/react").TRPCClientErrorLike<TRouter>> | undefined) => import("react-query").UseQueryResult<{ [TPath_1 in keyof TRouter["_def"]["queries"]]: {
42
+ output: import("@trpc/server").inferProcedureOutput<TRouter["_def"]["queries"][TPath_1]>;
43
+ }; } : never)[TPath_4]["output"]>(pathAndInput: [path: TPath_4, ...args: import("@trpc/server").ProcedureArgs<import("@trpc/server").inferProcedureParams<TRouter["_def"]["queries"][TPath_4]>>], opts?: import("@trpc/react/dist/createReactQueryHooks").UseTRPCQueryOptions<TPath_4, (TRouter["_def"]["queries"] extends infer T_1 ? { [TPath_1 in keyof T_1]: {
40
44
  input: import("@trpc/server").inferProcedureInput<TRouter["_def"]["queries"][TPath_1]>;
41
- output: import("@trpc/server").ThenArg<ReturnType<TRouter["_def"]["queries"][TPath_1]["call"]>>;
42
- }; }[TPath_4]["output"], import("@trpc/react").TRPCClientErrorLike<TRouter>>;
43
- useSubscription: <TPath_2 extends keyof TRouter["_def"]["subscriptions"] & string, TOutput extends ReturnType<import("@trpc/server").ThenArg<ReturnType<TRouter["_def"]["subscriptions"][TPath_2]["call"]>>["output"]>>(pathAndInput: [path: TPath_2, ...args: import("@trpc/server").inferHandlerInput<TRouter["_def"]["subscriptions"][TPath_2]>], 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, {}, {}>;
45
+ output: import("@trpc/server").inferProcedureOutput<TRouter["_def"]["queries"][TPath_1]>;
46
+ }; } : never)[TPath_4]["input"], TQueryFnData, TData, import("@trpc/react").TRPCClientErrorLike<TRouter>> | undefined) => import("@tanstack/react-query").UseQueryResult<TData, import("@trpc/react").TRPCClientErrorLike<TRouter>>;
47
+ useSubscription: <TPath_2 extends keyof TRouter["_def"]["subscriptions"] & string, TOutput extends import("@trpc/server/observable").inferObservableValue<import("@trpc/server").inferProcedureOutput<TRouter["_def"]["subscriptions"][TPath_2]>>>(pathAndInput: [path: TPath_2, ...args: import("@trpc/server").ProcedureArgs<import("@trpc/server").inferProcedureParams<TRouter["_def"]["subscriptions"][TPath_2]>>], opts: import("@trpc/react/dist/createReactQueryHooks").UseTRPCSubscriptionOptions<import("@trpc/server/observable").inferObservableValue<import("@trpc/server").inferProcedureOutput<TRouter["_def"]["subscriptions"][TPath_2]>>, import("@trpc/server").inferProcedureClientError<TRouter["_def"]["subscriptions"][TPath_2]>>) => void;
48
+ withTRPC: (AppOrPage: import("next/types").NextComponentType<any, any, any>) => import("next/types").NextComponentType<NextPageContext, {}, {}>;
49
+ queries: TRouter["_def"]["queries"];
49
50
  };
50
51
  //# sourceMappingURL=setupNext.d.ts.map
package/dist/setupNext.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"setupNext.d.ts","sourceRoot":"","sources":["../src/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"}
1
+ {"version":3,"file":"setupNext.d.ts","sourceRoot":"","sources":["../src/setupNext.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AACzC,OAAO,EAAE,eAAe,EAAE,MAAM,YAAY,CAAC;AAC7C,OAAO,EAAE,oBAAoB,EAAE,kBAAkB,EAAY,MAAM,YAAY,CAAC;AAEhF,wBAAgB,SAAS,CACvB,OAAO,SAAS,SAAS,EACzB,WAAW,SAAS,eAAe,GAAG,eAAe,EACrD,IAAI,EAAE,oBAAoB,CAAC,OAAO,CAAC,GAAG,kBAAkB,CAAC,OAAO,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAiBlE"}
package/dist/withTRPC.d.ts CHANGED
@@ -2,16 +2,16 @@
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 { TRPCClientError, CreateReactQueryHooksOptions } from '@trpc/react';
5
+ import { QueryClient } from '@tanstack/react-query';
6
+ import type { CreateTRPCClientOptions } from '@trpc/client/src/internals/TRPCClient';
7
+ import { TRPCClientError } from '@trpc/react';
6
8
  import type { AnyRouter, ResponseMeta } from '@trpc/server';
7
9
  import { NextComponentType, NextPageContext } from 'next/dist/shared/lib/utils';
8
- import type { CreateTRPCClientOptions } from '@trpc/client/src/internals/TRPCClient';
9
- import { QueryClient } from 'react-query';
10
10
  declare type QueryClientConfig = ConstructorParameters<typeof QueryClient>[0];
11
11
  export declare type WithTRPCConfig<TRouter extends AnyRouter> = CreateTRPCClientOptions<TRouter> & {
12
12
  queryClientConfig?: QueryClientConfig;
13
13
  };
14
- interface WithTRPCOptions<TRouter extends AnyRouter> extends CreateReactQueryHooksOptions {
14
+ interface WithTRPCOptions<TRouter extends AnyRouter> {
15
15
  config: (info: {
16
16
  ctx?: NextPageContext;
17
17
  }) => WithTRPCConfig<TRouter>;
@@ -26,6 +26,6 @@ export interface WithTRPCSSROptions<TRouter extends AnyRouter> extends WithTRPCO
26
26
  export interface WithTRPCNoSSROptions<TRouter extends AnyRouter> extends WithTRPCOptions<TRouter> {
27
27
  ssr?: false;
28
28
  }
29
- export declare function withTRPC<TRouter extends AnyRouter>(opts: WithTRPCNoSSROptions<TRouter> | WithTRPCSSROptions<TRouter>): (AppOrPage: NextComponentType<any, any, any>) => NextComponentType;
29
+ export declare function withTRPC<TRouter extends AnyRouter, TSSRContext extends NextPageContext = NextPageContext>(opts: WithTRPCNoSSROptions<TRouter> | WithTRPCSSROptions<TRouter>): (AppOrPage: NextComponentType<any, any, any>) => NextComponentType;
30
30
  export {};
31
31
  //# sourceMappingURL=withTRPC.d.ts.map
package/dist/withTRPC.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"withTRPC.d.ts","sourceRoot":"","sources":["../src/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"}
1
+ {"version":3,"file":"withTRPC.d.ts","sourceRoot":"","sources":["../src/withTRPC.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AACH,OAAO,EAGL,WAAW,EAGZ,MAAM,uBAAuB,CAAC;AAC/B,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,uCAAuC,CAAC;AACrF,OAAO,EAEL,eAAe,EAIhB,MAAM,aAAa,CAAC;AACrB,OAAO,KAAK,EAAE,SAAS,EAAe,YAAY,EAAE,MAAM,cAAc,CAAC;AACzE,OAAO,EAGL,iBAAiB,EACjB,eAAe,EAChB,MAAM,4BAA4B,CAAC;AAIpC,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;IACjD,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,CACtB,OAAO,SAAS,SAAS,EACzB,WAAW,SAAS,eAAe,GAAG,eAAe,EACrD,IAAI,EAAE,oBAAoB,CAAC,OAAO,CAAC,GAAG,kBAAkB,CAAC,OAAO,CAAC,eAU9C,kBAAkB,GAAG,EAAE,GAAG,EAAE,GAAG,CAAC,KAAG,iBAAiB,CA2KxE"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@trpc/next",
3
- "version": "10.0.0-alpha.4",
3
+ "version": "10.0.0-alpha.42",
4
4
  "description": "tRPC Next lib",
5
5
  "author": "KATT",
6
6
  "license": "MIT",
@@ -30,36 +30,40 @@
30
30
  ],
31
31
  "eslintConfig": {
32
32
  "rules": {
33
- "react-hooks/exhaustive-deps": "error"
33
+ "react-hooks/exhaustive-deps": "error",
34
+ "no-restricted-imports": [
35
+ "error",
36
+ "@trpc/next"
37
+ ]
34
38
  }
35
39
  },
36
40
  "peerDependencies": {
37
- "@trpc/client": "10.0.0-alpha.4",
38
- "@trpc/react": "10.0.0-alpha.4",
39
- "@trpc/server": "10.0.0-alpha.4",
41
+ "@tanstack/react-query": "^4.0.10",
42
+ "@trpc/client": "10.0.0-alpha.42",
43
+ "@trpc/react": "10.0.0-alpha.42",
44
+ "@trpc/server": "10.0.0-alpha.42",
40
45
  "next": "*",
41
46
  "react": ">=16.8.0",
42
- "react-dom": ">=16.8.0",
43
- "react-query": "^3.31.0 || ^4.0.0-alpha.4"
47
+ "react-dom": ">=16.8.0"
44
48
  },
45
49
  "dependencies": {
46
50
  "@babel/runtime": "^7.9.0",
47
51
  "react-ssr-prepass": "^1.5.0"
48
52
  },
49
53
  "devDependencies": {
50
- "@trpc/client": "10.0.0-alpha.4",
51
- "@trpc/react": "10.0.0-alpha.4",
52
- "@trpc/server": "10.0.0-alpha.4",
54
+ "@tanstack/react-query": "^4.0.10",
55
+ "@trpc/client": "10.0.0-alpha.42",
56
+ "@trpc/react": "10.0.0-alpha.42",
57
+ "@trpc/server": "10.0.0-alpha.42",
53
58
  "@types/express": "^4.17.12",
54
59
  "express": "^4.17.1",
55
- "next": "^12.0.1",
56
- "react": "^17.0.2",
57
- "react-dom": "^17.0.2",
58
- "react-query": "^3.27.0",
60
+ "next": "^12.1.6",
61
+ "react": "^18.1.0",
62
+ "react-dom": "^18.1.0",
59
63
  "zod": "^3.0.0"
60
64
  },
61
65
  "publishConfig": {
62
66
  "access": "public"
63
67
  },
64
- "gitHead": "ef9f7f1d36a26339b96069bba001ea0fe5768bb3"
68
+ "gitHead": "d5909785e8d024ef7869d9f5423dbe3bfd80cd59"
65
69
  }
package/src/setupNext.tsx CHANGED
@@ -1,18 +1,26 @@
1
- import { createReactQueryHooks } from '@trpc/react';
1
+ import { createReactQueryHooks, createReactQueryHooksProxy } from '@trpc/react';
2
2
  import { AnyRouter } from '@trpc/server';
3
+ import { NextPageContext } from 'next/types';
3
4
  import { WithTRPCNoSSROptions, WithTRPCSSROptions, withTRPC } from './withTRPC';
4
5
 
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);
6
+ export function setupTRPC<
7
+ TRouter extends AnyRouter,
8
+ TSSRContext extends NextPageContext = NextPageContext,
9
+ >(opts: WithTRPCNoSSROptions<TRouter> | WithTRPCSSROptions<TRouter>) {
10
+ const hooks = createReactQueryHooks<TRouter, TSSRContext>();
11
+ const proxy = createReactQueryHooksProxy<TRouter, TSSRContext>(hooks);
12
+
13
+ // TODO: maybe set TSSRContext to `never` when using `WithTRPCNoSSROptions`
14
+ const _withTRPC = withTRPC<TRouter, TSSRContext>(opts);
15
+
10
16
  return {
17
+ proxy,
11
18
  useContext: hooks.useContext,
12
19
  useInfiniteQuery: hooks.useInfiniteQuery,
13
20
  useMutation: hooks.useMutation,
14
21
  useQuery: hooks.useQuery,
15
22
  useSubscription: hooks.useSubscription,
16
23
  withTRPC: _withTRPC,
24
+ queries: hooks.queries,
17
25
  };
18
26
  }
package/src/withTRPC.tsx CHANGED
@@ -2,14 +2,20 @@
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
-
6
5
  import {
7
- createReactQueryHooks,
8
- createTRPCClient,
6
+ DehydratedState,
7
+ Hydrate,
8
+ QueryClient,
9
+ QueryClientProvider,
10
+ dehydrate,
11
+ } from '@tanstack/react-query';
12
+ import type { CreateTRPCClientOptions } from '@trpc/client/src/internals/TRPCClient';
13
+ import {
9
14
  TRPCClient,
10
15
  TRPCClientError,
11
16
  TRPCClientErrorLike,
12
- CreateReactQueryHooksOptions,
17
+ createReactQueryHooks,
18
+ createTRPCClient,
13
19
  } from '@trpc/react';
14
20
  import type { AnyRouter, Dict, Maybe, ResponseMeta } from '@trpc/server';
15
21
  import {
@@ -18,10 +24,7 @@ import {
18
24
  NextComponentType,
19
25
  NextPageContext,
20
26
  } from 'next/dist/shared/lib/utils';
21
- import type { CreateTRPCClientOptions } from '@trpc/client/src/internals/TRPCClient';
22
27
  import React, { createElement, useState } from 'react';
23
- import { QueryClient, QueryClientProvider } from 'react-query';
24
- import { dehydrate, DehydratedState, Hydrate } from 'react-query';
25
28
  import ssrPrepass from 'react-ssr-prepass';
26
29
 
27
30
  type QueryClientConfig = ConstructorParameters<typeof QueryClient>[0];
@@ -53,8 +56,7 @@ export type WithTRPCConfig<TRouter extends AnyRouter> =
53
56
  queryClientConfig?: QueryClientConfig;
54
57
  };
55
58
 
56
- interface WithTRPCOptions<TRouter extends AnyRouter>
57
- extends CreateReactQueryHooksOptions {
59
+ interface WithTRPCOptions<TRouter extends AnyRouter> {
58
60
  config: (info: { ctx?: NextPageContext }) => WithTRPCConfig<TRouter>;
59
61
  }
60
62
 
@@ -71,50 +73,55 @@ export interface WithTRPCNoSSROptions<TRouter extends AnyRouter>
71
73
  ssr?: false;
72
74
  }
73
75
 
74
- export function withTRPC<TRouter extends AnyRouter>(
75
- opts: WithTRPCNoSSROptions<TRouter> | WithTRPCSSROptions<TRouter>,
76
- ) {
76
+ export function withTRPC<
77
+ TRouter extends AnyRouter,
78
+ TSSRContext extends NextPageContext = NextPageContext,
79
+ >(opts: WithTRPCNoSSROptions<TRouter> | WithTRPCSSROptions<TRouter>) {
77
80
  const { config: getClientConfig } = opts;
78
81
 
79
82
  type TRPCPrepassProps = {
80
83
  config: WithTRPCConfig<TRouter>;
81
84
  queryClient: QueryClient;
82
85
  trpcClient: TRPCClient<TRouter>;
83
- isPrepass: true;
84
- ssrContext: NextPageContext;
86
+ ssrState: 'prepass';
87
+ ssrContext: TSSRContext;
85
88
  };
86
89
  return (AppOrPage: NextComponentType<any, any, any>): NextComponentType => {
87
- const trpc = createReactQueryHooks<TRouter, NextPageContext>(opts);
90
+ const trpc = createReactQueryHooks<TRouter, TSSRContext>();
88
91
 
89
92
  const WithTRPC = (
90
93
  props: AppPropsType & {
91
94
  trpc?: TRPCPrepassProps;
92
95
  },
93
96
  ) => {
94
- const [{ queryClient, trpcClient, isPrepass, ssrContext }] = useState(
97
+ const [{ queryClient, trpcClient, ssrState, ssrContext }] = useState(
95
98
  () => {
96
99
  if (props.trpc) {
97
100
  return props.trpc;
98
101
  }
102
+
99
103
  const config = getClientConfig({});
100
104
  const queryClient = new QueryClient(config.queryClientConfig);
101
105
  const trpcClient = trpc.createClient(config);
102
106
  return {
103
107
  queryClient,
104
108
  trpcClient,
105
- isPrepass: false,
109
+ ssrState: opts.ssr ? ('mounting' as const) : (false as const),
106
110
  ssrContext: null,
107
111
  };
108
112
  },
109
113
  );
110
114
 
111
- const hydratedState = trpc.useDehydratedState(props.pageProps?.trpcState);
115
+ const hydratedState = trpc.useDehydratedState(
116
+ trpcClient,
117
+ props.pageProps?.trpcState,
118
+ );
112
119
 
113
120
  return (
114
121
  <trpc.Provider
115
122
  client={trpcClient}
116
123
  queryClient={queryClient}
117
- isPrepass={isPrepass}
124
+ ssrState={ssrState}
118
125
  ssrContext={ssrContext}
119
126
  >
120
127
  <QueryClientProvider client={queryClient}>
@@ -166,8 +173,8 @@ export function withTRPC<TRouter extends AnyRouter>(
166
173
  config,
167
174
  trpcClient,
168
175
  queryClient,
169
- isPrepass: true,
170
- ssrContext: ctx,
176
+ ssrState: 'prepass',
177
+ ssrContext: ctx as TSSRContext,
171
178
  };
172
179
  const prepassProps = {
173
180
  pageProps,
@@ -210,10 +217,11 @@ export function withTRPC<TRouter extends AnyRouter>(
210
217
  transformQueryOrMutationCacheErrors,
211
218
  ),
212
219
  };
220
+
213
221
  // dehydrate query client's state and add it to the props
214
- pageProps.trpcState = opts.transformer
215
- ? opts.transformer.serialize(dehydratedCacheWithErrors)
216
- : dehydratedCacheWithErrors;
222
+ pageProps.trpcState = trpcClient.runtime.transformer.serialize(
223
+ dehydratedCacheWithErrors,
224
+ );
217
225
 
218
226
  const appTreeProps = getAppTreeProps(pageProps);
219
227
 
@@ -230,9 +238,9 @@ export function withTRPC<TRouter extends AnyRouter>(
230
238
  ? [err as TRPCClientError<TRouter>]
231
239
  : [],
232
240
  ),
233
- }) ?? {};
241
+ }) || {};
234
242
 
235
- for (const [key, value] of Object.entries(meta)) {
243
+ for (const [key, value] of Object.entries(meta.headers || {})) {
236
244
  if (typeof value === 'string') {
237
245
  ctx.res?.setHeader(key, value);
238
246
  }