@trpc/next 10.0.0-alpha.44 → 10.0.0-alpha.47

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 (4) hide show
  1. package/dist/index.js +161 -220
  2. package/dist/index.mjs +161 -215
  3. package/package.json +10 -14
  4. package/dist/index.ts.js +0 -1
package/dist/index.js CHANGED
@@ -2,11 +2,6 @@
2
2
 
3
3
  Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
- var _toConsumableArray = require('@babel/runtime/helpers/toConsumableArray');
6
- var _asyncToGenerator = require('@babel/runtime/helpers/asyncToGenerator');
7
- var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
8
- var _defineProperty = require('@babel/runtime/helpers/defineProperty');
9
- var _regeneratorRuntime = require('@babel/runtime/regenerator');
10
5
  var reactQuery = require('@tanstack/react-query');
11
6
  var react = require('@trpc/react');
12
7
  var React = require('react');
@@ -14,246 +9,192 @@ var ssrPrepass = require('react-ssr-prepass');
14
9
 
15
10
  function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
16
11
 
17
- var _toConsumableArray__default = /*#__PURE__*/_interopDefaultLegacy(_toConsumableArray);
18
- var _asyncToGenerator__default = /*#__PURE__*/_interopDefaultLegacy(_asyncToGenerator);
19
- var _slicedToArray__default = /*#__PURE__*/_interopDefaultLegacy(_slicedToArray);
20
- var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
21
- var _regeneratorRuntime__default = /*#__PURE__*/_interopDefaultLegacy(_regeneratorRuntime);
22
12
  var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
23
13
  var ssrPrepass__default = /*#__PURE__*/_interopDefaultLegacy(ssrPrepass);
24
14
 
25
- 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; }
15
+ function extends_() {
16
+ extends_ = Object.assign || function (target) {
17
+ for (var i = 1; i < arguments.length; i++) {
18
+ var source = arguments[i];
26
19
 
27
- function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty__default["default"](target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
28
-
29
- function transformQueryOrMutationCacheErrors(result) {
30
- var error = result.state.error;
20
+ for (var key in source) {
21
+ if (Object.prototype.hasOwnProperty.call(source, key)) {
22
+ target[key] = source[key];
23
+ }
24
+ }
25
+ }
31
26
 
32
- if (error instanceof Error && error.name === 'TRPCClientError') {
33
- var newError = {
34
- message: error.message,
35
- data: error.data,
36
- shape: error.shape
37
- };
38
- return _objectSpread(_objectSpread({}, result), {}, {
39
- state: _objectSpread(_objectSpread({}, result.state), {}, {
40
- error: newError
41
- })
42
- });
43
- }
27
+ return target;
28
+ };
44
29
 
45
- return result;
30
+ return extends_.apply(this, arguments);
46
31
  }
47
32
 
48
- function withTRPC(opts) {
49
- var getClientConfig = opts.config;
50
- return function (AppOrPage) {
51
- var trpc = react.createReactQueryHooks();
52
-
53
- var WithTRPC = function WithTRPC(props) {
54
- var _props$pageProps;
55
-
56
- var _useState = React.useState(function () {
57
- if (props.trpc) {
58
- return props.trpc;
59
- }
33
+ function _extends() {
34
+ return extends_.apply(this, arguments);
35
+ }
60
36
 
61
- var config = getClientConfig({});
62
- var queryClient = new reactQuery.QueryClient(config.queryClientConfig);
63
- var trpcClient = trpc.createClient(config);
37
+ function transformQueryOrMutationCacheErrors(result) {
38
+ const error = result.state.error;
39
+ if (error instanceof Error && error.name === 'TRPCClientError') {
40
+ const newError = {
41
+ message: error.message,
42
+ data: error.data,
43
+ shape: error.shape
44
+ };
64
45
  return {
65
- queryClient: queryClient,
66
- trpcClient: trpcClient,
67
- ssrState: opts.ssr ? 'mounting' : false,
68
- ssrContext: null
46
+ ...result,
47
+ state: {
48
+ ...result.state,
49
+ error: newError
50
+ }
69
51
  };
70
- }),
71
- _useState2 = _slicedToArray__default["default"](_useState, 1),
72
- _useState2$ = _useState2[0],
73
- queryClient = _useState2$.queryClient,
74
- trpcClient = _useState2$.trpcClient,
75
- ssrState = _useState2$.ssrState,
76
- ssrContext = _useState2$.ssrContext;
77
-
78
- var hydratedState = trpc.useDehydratedState(trpcClient, (_props$pageProps = props.pageProps) === null || _props$pageProps === void 0 ? void 0 : _props$pageProps.trpcState);
79
- return /*#__PURE__*/React__default["default"].createElement(trpc.Provider, {
80
- client: trpcClient,
81
- queryClient: queryClient,
82
- ssrState: ssrState,
83
- ssrContext: ssrContext
84
- }, /*#__PURE__*/React__default["default"].createElement(reactQuery.QueryClientProvider, {
85
- client: queryClient
86
- }, /*#__PURE__*/React__default["default"].createElement(reactQuery.Hydrate, {
87
- state: hydratedState
88
- }, /*#__PURE__*/React__default["default"].createElement(AppOrPage, props))));
89
- };
90
-
91
- if (AppOrPage.getInitialProps || opts.ssr) {
92
- WithTRPC.getInitialProps = /*#__PURE__*/function () {
93
- var _ref = _asyncToGenerator__default["default"]( /*#__PURE__*/_regeneratorRuntime__default["default"].mark(function _callee(appOrPageCtx) {
94
- var _opts$responseMeta;
95
-
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
-
98
- return _regeneratorRuntime__default["default"].wrap(function _callee$(_context) {
99
- while (1) {
100
- switch (_context.prev = _context.next) {
101
- case 0:
102
- AppTree = appOrPageCtx.AppTree; // Determine if we are wrapping an App component or a Page component.
103
-
104
- isApp = !!appOrPageCtx.Component;
105
- ctx = isApp ? appOrPageCtx.ctx : appOrPageCtx; // Run the wrapped component's getInitialProps function.
106
-
107
- pageProps = {};
108
-
109
- if (!AppOrPage.getInitialProps) {
110
- _context.next = 10;
111
- break;
112
- }
113
-
114
- _context.next = 7;
115
- return AppOrPage.getInitialProps(appOrPageCtx);
116
-
117
- case 7:
118
- originalProps = _context.sent;
119
- originalPageProps = isApp ? (_originalProps$pagePr = originalProps.pageProps) !== null && _originalProps$pagePr !== void 0 ? _originalProps$pagePr : {} : originalProps;
120
- pageProps = _objectSpread(_objectSpread({}, originalPageProps), pageProps);
121
-
122
- case 10:
123
- getAppTreeProps = function getAppTreeProps(props) {
124
- return isApp ? {
125
- pageProps: props
52
+ }
53
+ return result;
54
+ }
55
+ function withTRPC(opts) {
56
+ const { config: getClientConfig } = opts;
57
+ return (AppOrPage)=>{
58
+ const trpc = react.createReactQueryHooks();
59
+ const WithTRPC = (props)=>{
60
+ const [{ queryClient , trpcClient , ssrState , ssrContext }] = React.useState(()=>{
61
+ if (props.trpc) {
62
+ return props.trpc;
63
+ }
64
+ const config = getClientConfig({});
65
+ const queryClient = new reactQuery.QueryClient(config.queryClientConfig);
66
+ const trpcClient = trpc.createClient(config);
67
+ return {
68
+ queryClient,
69
+ trpcClient,
70
+ ssrState: opts.ssr ? 'mounting' : false,
71
+ ssrContext: null
72
+ };
73
+ });
74
+ const hydratedState = trpc.useDehydratedState(trpcClient, props.pageProps?.trpcState);
75
+ return /*#__PURE__*/ React__default["default"].createElement(trpc.Provider, {
76
+ client: trpcClient,
77
+ queryClient: queryClient,
78
+ ssrState: ssrState,
79
+ ssrContext: ssrContext
80
+ }, /*#__PURE__*/ React__default["default"].createElement(reactQuery.QueryClientProvider, {
81
+ client: queryClient
82
+ }, /*#__PURE__*/ React__default["default"].createElement(reactQuery.Hydrate, {
83
+ state: hydratedState
84
+ }, /*#__PURE__*/ React__default["default"].createElement(AppOrPage, _extends({}, props)))));
85
+ };
86
+ if (AppOrPage.getInitialProps || opts.ssr) {
87
+ WithTRPC.getInitialProps = async (appOrPageCtx)=>{
88
+ const AppTree = appOrPageCtx.AppTree;
89
+ // Determine if we are wrapping an App component or a Page component.
90
+ const isApp = !!appOrPageCtx.Component;
91
+ const ctx = isApp ? appOrPageCtx.ctx : appOrPageCtx;
92
+ // Run the wrapped component's getInitialProps function.
93
+ let pageProps = {};
94
+ if (AppOrPage.getInitialProps) {
95
+ const originalProps = await AppOrPage.getInitialProps(appOrPageCtx);
96
+ const originalPageProps = isApp ? originalProps.pageProps ?? {} : originalProps;
97
+ pageProps = {
98
+ ...originalPageProps,
99
+ ...pageProps
100
+ };
101
+ }
102
+ const getAppTreeProps = (props)=>isApp ? {
103
+ pageProps: props
126
104
  } : props;
127
- };
128
-
129
- if (!(typeof window !== 'undefined' || !opts.ssr)) {
130
- _context.next = 13;
131
- break;
132
- }
133
-
134
- return _context.abrupt("return", getAppTreeProps(pageProps));
135
-
136
- case 13:
137
- config = getClientConfig({
138
- ctx: ctx
139
- });
140
- trpcClient = react.createTRPCClient(config);
141
- queryClient = new reactQuery.QueryClient(config.queryClientConfig);
142
- trpcProp = {
143
- config: config,
144
- trpcClient: trpcClient,
145
- queryClient: queryClient,
105
+ if (typeof window !== 'undefined' || !opts.ssr) {
106
+ return getAppTreeProps(pageProps);
107
+ }
108
+ const config = getClientConfig({
109
+ ctx
110
+ });
111
+ const trpcClient = react.createTRPCClient(config);
112
+ const queryClient = new reactQuery.QueryClient(config.queryClientConfig);
113
+ const trpcProp = {
114
+ config,
115
+ trpcClient,
116
+ queryClient,
146
117
  ssrState: 'prepass',
147
118
  ssrContext: ctx
148
- };
149
- prepassProps = {
150
- pageProps: pageProps,
119
+ };
120
+ const prepassProps = {
121
+ pageProps,
151
122
  trpc: trpcProp
152
- }; // Run the prepass step on AppTree. This will run all trpc queries on the server.
153
- // multiple prepass ensures that we can do batching on the server
154
-
155
- case 18:
156
-
157
- _context.next = 21;
158
- return ssrPrepass__default["default"]( /*#__PURE__*/React.createElement(AppTree, prepassProps));
159
-
160
- case 21:
161
- if (queryClient.isFetching()) {
162
- _context.next = 23;
163
- break;
164
- }
165
-
166
- return _context.abrupt("break", 27);
167
-
168
- case 23:
169
- _context.next = 25;
170
- return new Promise(function (resolve) {
171
- var unsub = queryClient.getQueryCache().subscribe(function (event) {
172
- if ((event === null || event === void 0 ? void 0 : event.query.getObserversCount()) === 0) {
173
- resolve();
174
- unsub();
175
- }
123
+ };
124
+ // Run the prepass step on AppTree. This will run all trpc queries on the server.
125
+ // multiple prepass ensures that we can do batching on the server
126
+ while(true){
127
+ // render full tree
128
+ await ssrPrepass__default["default"](/*#__PURE__*/ React.createElement(AppTree, prepassProps));
129
+ if (!queryClient.isFetching()) {
130
+ break;
131
+ }
132
+ // wait until the query cache has settled it's promises
133
+ await new Promise((resolve)=>{
134
+ const unsub = queryClient.getQueryCache().subscribe((event)=>{
135
+ if (event?.query.getObserversCount() === 0) {
136
+ resolve();
137
+ unsub();
138
+ }
139
+ });
176
140
  });
177
- });
178
-
179
- case 25:
180
- _context.next = 18;
181
- break;
182
-
183
- case 27:
184
- dehydratedCache = reactQuery.dehydrate(queryClient, {
185
- shouldDehydrateQuery: function shouldDehydrateQuery() {
186
- // makes sure errors are also dehydrated
187
- return true;
141
+ }
142
+ const dehydratedCache = reactQuery.dehydrate(queryClient, {
143
+ shouldDehydrateQuery () {
144
+ // makes sure errors are also dehydrated
145
+ return true;
188
146
  }
189
- }); // since error instances can't be serialized, let's make them into `TRPCClientErrorLike`-objects
190
-
191
- dehydratedCacheWithErrors = _objectSpread(_objectSpread({}, dehydratedCache), {}, {
147
+ });
148
+ // since error instances can't be serialized, let's make them into `TRPCClientErrorLike`-objects
149
+ const dehydratedCacheWithErrors = {
150
+ ...dehydratedCache,
192
151
  queries: dehydratedCache.queries.map(transformQueryOrMutationCacheErrors),
193
152
  mutations: dehydratedCache.mutations.map(transformQueryOrMutationCacheErrors)
194
- }); // dehydrate query client's state and add it to the props
195
-
196
- pageProps.trpcState = trpcClient.runtime.transformer.serialize(dehydratedCacheWithErrors);
197
- appTreeProps = getAppTreeProps(pageProps);
198
- meta = ((_opts$responseMeta = opts.responseMeta) === null || _opts$responseMeta === void 0 ? void 0 : _opts$responseMeta.call(opts, {
199
- ctx: ctx,
200
- clientErrors: [].concat(_toConsumableArray__default["default"](dehydratedCache.queries), _toConsumableArray__default["default"](dehydratedCache.mutations)).map(function (v) {
201
- return v.state.error;
202
- }).flatMap(function (err) {
203
- return err instanceof Error && err.name === 'TRPCClientError' ? [err] : [];
204
- })
205
- })) || {};
206
-
207
- for (_i = 0, _Object$entries = Object.entries(meta.headers || {}); _i < _Object$entries.length; _i++) {
208
- _Object$entries$_i = _slicedToArray__default["default"](_Object$entries[_i], 2), key = _Object$entries$_i[0], value = _Object$entries$_i[1];
209
-
153
+ };
154
+ // dehydrate query client's state and add it to the props
155
+ pageProps.trpcState = trpcClient.runtime.transformer.serialize(dehydratedCacheWithErrors);
156
+ const appTreeProps = getAppTreeProps(pageProps);
157
+ const meta = opts.responseMeta?.({
158
+ ctx,
159
+ clientErrors: [
160
+ ...dehydratedCache.queries,
161
+ ...dehydratedCache.mutations,
162
+ ].map((v)=>v.state.error).flatMap((err)=>err instanceof Error && err.name === 'TRPCClientError' ? [
163
+ err
164
+ ] : [])
165
+ }) || {};
166
+ for (const [key, value] of Object.entries(meta.headers || {})){
210
167
  if (typeof value === 'string') {
211
- (_ctx$res = ctx.res) === null || _ctx$res === void 0 ? void 0 : _ctx$res.setHeader(key, value);
168
+ ctx.res?.setHeader(key, value);
212
169
  }
213
- }
214
-
215
- if (meta.status && ctx.res) {
170
+ }
171
+ if (meta.status && ctx.res) {
216
172
  ctx.res.statusCode = meta.status;
217
- }
218
-
219
- return _context.abrupt("return", appTreeProps);
220
-
221
- case 35:
222
- case "end":
223
- return _context.stop();
224
- }
225
- }
226
- }, _callee);
227
- }));
228
-
229
- return function (_x) {
230
- return _ref.apply(this, arguments);
231
- };
232
- }();
233
- }
234
-
235
- var displayName = AppOrPage.displayName || AppOrPage.name || 'Component';
236
- WithTRPC.displayName = "withTRPC(".concat(displayName, ")");
237
- return WithTRPC;
238
- };
173
+ }
174
+ return appTreeProps;
175
+ };
176
+ }
177
+ const displayName = AppOrPage.displayName || AppOrPage.name || 'Component';
178
+ WithTRPC.displayName = `withTRPC(${displayName})`;
179
+ return WithTRPC;
180
+ };
239
181
  }
240
182
 
241
183
  function setupTRPC(opts) {
242
- var hooks = react.createReactQueryHooks();
243
- var proxy = react.createReactQueryHooksProxy(hooks); // TODO: maybe set TSSRContext to `never` when using `WithTRPCNoSSROptions`
244
-
245
- var _withTRPC = withTRPC(opts);
246
-
247
- return {
248
- proxy: proxy,
249
- useContext: hooks.useContext,
250
- useInfiniteQuery: hooks.useInfiniteQuery,
251
- useMutation: hooks.useMutation,
252
- useQuery: hooks.useQuery,
253
- useSubscription: hooks.useSubscription,
254
- withTRPC: _withTRPC,
255
- queries: hooks.queries
256
- };
184
+ const hooks = react.createReactQueryHooks();
185
+ const proxy = react.createReactQueryHooksProxy(hooks);
186
+ // TODO: maybe set TSSRContext to `never` when using `WithTRPCNoSSROptions`
187
+ const _withTRPC = withTRPC(opts);
188
+ return {
189
+ proxy,
190
+ useContext: hooks.useContext,
191
+ useInfiniteQuery: hooks.useInfiniteQuery,
192
+ useMutation: hooks.useMutation,
193
+ useQuery: hooks.useQuery,
194
+ useSubscription: hooks.useSubscription,
195
+ withTRPC: _withTRPC,
196
+ queries: hooks.queries
197
+ };
257
198
  }
258
199
 
259
200
  exports.setupTRPC = setupTRPC;
package/dist/index.mjs CHANGED
@@ -1,245 +1,191 @@
1
- import _toConsumableArray from '@babel/runtime/helpers/toConsumableArray';
2
- import _asyncToGenerator from '@babel/runtime/helpers/asyncToGenerator';
3
- import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
4
- import _defineProperty from '@babel/runtime/helpers/defineProperty';
5
- import _regeneratorRuntime from '@babel/runtime/regenerator';
6
1
  import { QueryClient, QueryClientProvider, Hydrate, dehydrate } from '@tanstack/react-query';
7
2
  import { createReactQueryHooks, createTRPCClient, createReactQueryHooksProxy } from '@trpc/react';
8
3
  import React, { useState, createElement } from 'react';
9
4
  import ssrPrepass from 'react-ssr-prepass';
10
5
 
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; }
6
+ function extends_() {
7
+ extends_ = Object.assign || function (target) {
8
+ for (var i = 1; i < arguments.length; i++) {
9
+ var source = arguments[i];
12
10
 
13
- function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
14
-
15
- function transformQueryOrMutationCacheErrors(result) {
16
- var error = result.state.error;
11
+ for (var key in source) {
12
+ if (Object.prototype.hasOwnProperty.call(source, key)) {
13
+ target[key] = source[key];
14
+ }
15
+ }
16
+ }
17
17
 
18
- if (error instanceof Error && error.name === 'TRPCClientError') {
19
- var newError = {
20
- message: error.message,
21
- data: error.data,
22
- shape: error.shape
23
- };
24
- return _objectSpread(_objectSpread({}, result), {}, {
25
- state: _objectSpread(_objectSpread({}, result.state), {}, {
26
- error: newError
27
- })
28
- });
29
- }
18
+ return target;
19
+ };
30
20
 
31
- return result;
21
+ return extends_.apply(this, arguments);
32
22
  }
33
23
 
34
- function withTRPC(opts) {
35
- var getClientConfig = opts.config;
36
- return function (AppOrPage) {
37
- var trpc = createReactQueryHooks();
38
-
39
- var WithTRPC = function WithTRPC(props) {
40
- var _props$pageProps;
41
-
42
- var _useState = useState(function () {
43
- if (props.trpc) {
44
- return props.trpc;
45
- }
24
+ function _extends() {
25
+ return extends_.apply(this, arguments);
26
+ }
46
27
 
47
- var config = getClientConfig({});
48
- var queryClient = new QueryClient(config.queryClientConfig);
49
- var trpcClient = trpc.createClient(config);
28
+ function transformQueryOrMutationCacheErrors(result) {
29
+ const error = result.state.error;
30
+ if (error instanceof Error && error.name === 'TRPCClientError') {
31
+ const newError = {
32
+ message: error.message,
33
+ data: error.data,
34
+ shape: error.shape
35
+ };
50
36
  return {
51
- queryClient: queryClient,
52
- trpcClient: trpcClient,
53
- ssrState: opts.ssr ? 'mounting' : false,
54
- ssrContext: null
37
+ ...result,
38
+ state: {
39
+ ...result.state,
40
+ error: newError
41
+ }
55
42
  };
56
- }),
57
- _useState2 = _slicedToArray(_useState, 1),
58
- _useState2$ = _useState2[0],
59
- queryClient = _useState2$.queryClient,
60
- trpcClient = _useState2$.trpcClient,
61
- ssrState = _useState2$.ssrState,
62
- ssrContext = _useState2$.ssrContext;
63
-
64
- var hydratedState = trpc.useDehydratedState(trpcClient, (_props$pageProps = props.pageProps) === null || _props$pageProps === void 0 ? void 0 : _props$pageProps.trpcState);
65
- return /*#__PURE__*/React.createElement(trpc.Provider, {
66
- client: trpcClient,
67
- queryClient: queryClient,
68
- ssrState: ssrState,
69
- ssrContext: ssrContext
70
- }, /*#__PURE__*/React.createElement(QueryClientProvider, {
71
- client: queryClient
72
- }, /*#__PURE__*/React.createElement(Hydrate, {
73
- state: hydratedState
74
- }, /*#__PURE__*/React.createElement(AppOrPage, props))));
75
- };
76
-
77
- if (AppOrPage.getInitialProps || opts.ssr) {
78
- WithTRPC.getInitialProps = /*#__PURE__*/function () {
79
- var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(appOrPageCtx) {
80
- var _opts$responseMeta;
81
-
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
-
84
- return _regeneratorRuntime.wrap(function _callee$(_context) {
85
- while (1) {
86
- switch (_context.prev = _context.next) {
87
- case 0:
88
- AppTree = appOrPageCtx.AppTree; // Determine if we are wrapping an App component or a Page component.
89
-
90
- isApp = !!appOrPageCtx.Component;
91
- ctx = isApp ? appOrPageCtx.ctx : appOrPageCtx; // Run the wrapped component's getInitialProps function.
92
-
93
- pageProps = {};
94
-
95
- if (!AppOrPage.getInitialProps) {
96
- _context.next = 10;
97
- break;
98
- }
99
-
100
- _context.next = 7;
101
- return AppOrPage.getInitialProps(appOrPageCtx);
102
-
103
- case 7:
104
- originalProps = _context.sent;
105
- originalPageProps = isApp ? (_originalProps$pagePr = originalProps.pageProps) !== null && _originalProps$pagePr !== void 0 ? _originalProps$pagePr : {} : originalProps;
106
- pageProps = _objectSpread(_objectSpread({}, originalPageProps), pageProps);
107
-
108
- case 10:
109
- getAppTreeProps = function getAppTreeProps(props) {
110
- return isApp ? {
111
- pageProps: props
43
+ }
44
+ return result;
45
+ }
46
+ function withTRPC(opts) {
47
+ const { config: getClientConfig } = opts;
48
+ return (AppOrPage)=>{
49
+ const trpc = createReactQueryHooks();
50
+ const WithTRPC = (props)=>{
51
+ const [{ queryClient , trpcClient , ssrState , ssrContext }] = useState(()=>{
52
+ if (props.trpc) {
53
+ return props.trpc;
54
+ }
55
+ const config = getClientConfig({});
56
+ const queryClient = new QueryClient(config.queryClientConfig);
57
+ const trpcClient = trpc.createClient(config);
58
+ return {
59
+ queryClient,
60
+ trpcClient,
61
+ ssrState: opts.ssr ? 'mounting' : false,
62
+ ssrContext: null
63
+ };
64
+ });
65
+ const hydratedState = trpc.useDehydratedState(trpcClient, props.pageProps?.trpcState);
66
+ return /*#__PURE__*/ React.createElement(trpc.Provider, {
67
+ client: trpcClient,
68
+ queryClient: queryClient,
69
+ ssrState: ssrState,
70
+ ssrContext: ssrContext
71
+ }, /*#__PURE__*/ React.createElement(QueryClientProvider, {
72
+ client: queryClient
73
+ }, /*#__PURE__*/ React.createElement(Hydrate, {
74
+ state: hydratedState
75
+ }, /*#__PURE__*/ React.createElement(AppOrPage, _extends({}, props)))));
76
+ };
77
+ if (AppOrPage.getInitialProps || opts.ssr) {
78
+ WithTRPC.getInitialProps = async (appOrPageCtx)=>{
79
+ const AppTree = appOrPageCtx.AppTree;
80
+ // Determine if we are wrapping an App component or a Page component.
81
+ const isApp = !!appOrPageCtx.Component;
82
+ const ctx = isApp ? appOrPageCtx.ctx : appOrPageCtx;
83
+ // Run the wrapped component's getInitialProps function.
84
+ let pageProps = {};
85
+ if (AppOrPage.getInitialProps) {
86
+ const originalProps = await AppOrPage.getInitialProps(appOrPageCtx);
87
+ const originalPageProps = isApp ? originalProps.pageProps ?? {} : originalProps;
88
+ pageProps = {
89
+ ...originalPageProps,
90
+ ...pageProps
91
+ };
92
+ }
93
+ const getAppTreeProps = (props)=>isApp ? {
94
+ pageProps: props
112
95
  } : props;
113
- };
114
-
115
- if (!(typeof window !== 'undefined' || !opts.ssr)) {
116
- _context.next = 13;
117
- break;
118
- }
119
-
120
- return _context.abrupt("return", getAppTreeProps(pageProps));
121
-
122
- case 13:
123
- config = getClientConfig({
124
- ctx: ctx
125
- });
126
- trpcClient = createTRPCClient(config);
127
- queryClient = new QueryClient(config.queryClientConfig);
128
- trpcProp = {
129
- config: config,
130
- trpcClient: trpcClient,
131
- queryClient: queryClient,
96
+ if (typeof window !== 'undefined' || !opts.ssr) {
97
+ return getAppTreeProps(pageProps);
98
+ }
99
+ const config = getClientConfig({
100
+ ctx
101
+ });
102
+ const trpcClient = createTRPCClient(config);
103
+ const queryClient = new QueryClient(config.queryClientConfig);
104
+ const trpcProp = {
105
+ config,
106
+ trpcClient,
107
+ queryClient,
132
108
  ssrState: 'prepass',
133
109
  ssrContext: ctx
134
- };
135
- prepassProps = {
136
- pageProps: pageProps,
110
+ };
111
+ const prepassProps = {
112
+ pageProps,
137
113
  trpc: trpcProp
138
- }; // Run the prepass step on AppTree. This will run all trpc queries on the server.
139
- // multiple prepass ensures that we can do batching on the server
140
-
141
- case 18:
142
-
143
- _context.next = 21;
144
- return ssrPrepass( /*#__PURE__*/createElement(AppTree, prepassProps));
145
-
146
- case 21:
147
- if (queryClient.isFetching()) {
148
- _context.next = 23;
149
- break;
150
- }
151
-
152
- return _context.abrupt("break", 27);
153
-
154
- case 23:
155
- _context.next = 25;
156
- return new Promise(function (resolve) {
157
- var unsub = queryClient.getQueryCache().subscribe(function (event) {
158
- if ((event === null || event === void 0 ? void 0 : event.query.getObserversCount()) === 0) {
159
- resolve();
160
- unsub();
161
- }
114
+ };
115
+ // Run the prepass step on AppTree. This will run all trpc queries on the server.
116
+ // multiple prepass ensures that we can do batching on the server
117
+ while(true){
118
+ // render full tree
119
+ await ssrPrepass(/*#__PURE__*/ createElement(AppTree, prepassProps));
120
+ if (!queryClient.isFetching()) {
121
+ break;
122
+ }
123
+ // wait until the query cache has settled it's promises
124
+ await new Promise((resolve)=>{
125
+ const unsub = queryClient.getQueryCache().subscribe((event)=>{
126
+ if (event?.query.getObserversCount() === 0) {
127
+ resolve();
128
+ unsub();
129
+ }
130
+ });
162
131
  });
163
- });
164
-
165
- case 25:
166
- _context.next = 18;
167
- break;
168
-
169
- case 27:
170
- dehydratedCache = dehydrate(queryClient, {
171
- shouldDehydrateQuery: function shouldDehydrateQuery() {
172
- // makes sure errors are also dehydrated
173
- return true;
132
+ }
133
+ const dehydratedCache = dehydrate(queryClient, {
134
+ shouldDehydrateQuery () {
135
+ // makes sure errors are also dehydrated
136
+ return true;
174
137
  }
175
- }); // since error instances can't be serialized, let's make them into `TRPCClientErrorLike`-objects
176
-
177
- dehydratedCacheWithErrors = _objectSpread(_objectSpread({}, dehydratedCache), {}, {
138
+ });
139
+ // since error instances can't be serialized, let's make them into `TRPCClientErrorLike`-objects
140
+ const dehydratedCacheWithErrors = {
141
+ ...dehydratedCache,
178
142
  queries: dehydratedCache.queries.map(transformQueryOrMutationCacheErrors),
179
143
  mutations: dehydratedCache.mutations.map(transformQueryOrMutationCacheErrors)
180
- }); // dehydrate query client's state and add it to the props
181
-
182
- pageProps.trpcState = trpcClient.runtime.transformer.serialize(dehydratedCacheWithErrors);
183
- appTreeProps = getAppTreeProps(pageProps);
184
- meta = ((_opts$responseMeta = opts.responseMeta) === null || _opts$responseMeta === void 0 ? void 0 : _opts$responseMeta.call(opts, {
185
- ctx: ctx,
186
- clientErrors: [].concat(_toConsumableArray(dehydratedCache.queries), _toConsumableArray(dehydratedCache.mutations)).map(function (v) {
187
- return v.state.error;
188
- }).flatMap(function (err) {
189
- return err instanceof Error && err.name === 'TRPCClientError' ? [err] : [];
190
- })
191
- })) || {};
192
-
193
- for (_i = 0, _Object$entries = Object.entries(meta.headers || {}); _i < _Object$entries.length; _i++) {
194
- _Object$entries$_i = _slicedToArray(_Object$entries[_i], 2), key = _Object$entries$_i[0], value = _Object$entries$_i[1];
195
-
144
+ };
145
+ // dehydrate query client's state and add it to the props
146
+ pageProps.trpcState = trpcClient.runtime.transformer.serialize(dehydratedCacheWithErrors);
147
+ const appTreeProps = getAppTreeProps(pageProps);
148
+ const meta = opts.responseMeta?.({
149
+ ctx,
150
+ clientErrors: [
151
+ ...dehydratedCache.queries,
152
+ ...dehydratedCache.mutations,
153
+ ].map((v)=>v.state.error).flatMap((err)=>err instanceof Error && err.name === 'TRPCClientError' ? [
154
+ err
155
+ ] : [])
156
+ }) || {};
157
+ for (const [key, value] of Object.entries(meta.headers || {})){
196
158
  if (typeof value === 'string') {
197
- (_ctx$res = ctx.res) === null || _ctx$res === void 0 ? void 0 : _ctx$res.setHeader(key, value);
159
+ ctx.res?.setHeader(key, value);
198
160
  }
199
- }
200
-
201
- if (meta.status && ctx.res) {
161
+ }
162
+ if (meta.status && ctx.res) {
202
163
  ctx.res.statusCode = meta.status;
203
- }
204
-
205
- return _context.abrupt("return", appTreeProps);
206
-
207
- case 35:
208
- case "end":
209
- return _context.stop();
210
- }
211
- }
212
- }, _callee);
213
- }));
214
-
215
- return function (_x) {
216
- return _ref.apply(this, arguments);
217
- };
218
- }();
219
- }
220
-
221
- var displayName = AppOrPage.displayName || AppOrPage.name || 'Component';
222
- WithTRPC.displayName = "withTRPC(".concat(displayName, ")");
223
- return WithTRPC;
224
- };
164
+ }
165
+ return appTreeProps;
166
+ };
167
+ }
168
+ const displayName = AppOrPage.displayName || AppOrPage.name || 'Component';
169
+ WithTRPC.displayName = `withTRPC(${displayName})`;
170
+ return WithTRPC;
171
+ };
225
172
  }
226
173
 
227
174
  function setupTRPC(opts) {
228
- var hooks = createReactQueryHooks();
229
- var proxy = createReactQueryHooksProxy(hooks); // TODO: maybe set TSSRContext to `never` when using `WithTRPCNoSSROptions`
230
-
231
- var _withTRPC = withTRPC(opts);
232
-
233
- return {
234
- proxy: proxy,
235
- useContext: hooks.useContext,
236
- useInfiniteQuery: hooks.useInfiniteQuery,
237
- useMutation: hooks.useMutation,
238
- useQuery: hooks.useQuery,
239
- useSubscription: hooks.useSubscription,
240
- withTRPC: _withTRPC,
241
- queries: hooks.queries
242
- };
175
+ const hooks = createReactQueryHooks();
176
+ const proxy = createReactQueryHooksProxy(hooks);
177
+ // TODO: maybe set TSSRContext to `never` when using `WithTRPCNoSSROptions`
178
+ const _withTRPC = withTRPC(opts);
179
+ return {
180
+ proxy,
181
+ useContext: hooks.useContext,
182
+ useInfiniteQuery: hooks.useInfiniteQuery,
183
+ useMutation: hooks.useMutation,
184
+ useQuery: hooks.useQuery,
185
+ useSubscription: hooks.useSubscription,
186
+ withTRPC: _withTRPC,
187
+ queries: hooks.queries
188
+ };
243
189
  }
244
190
 
245
191
  export { setupTRPC, withTRPC };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@trpc/next",
3
- "version": "10.0.0-alpha.44",
3
+ "version": "10.0.0-alpha.47",
4
4
  "description": "tRPC Next lib",
5
5
  "author": "KATT",
6
6
  "license": "MIT",
@@ -10,9 +10,6 @@
10
10
  "url": "git+https://github.com/trpc/trpc.git",
11
11
  "directory": "packages/next"
12
12
  },
13
- "scripts": {
14
- "build": "rollup -c"
15
- },
16
13
  "main": "dist/index.js",
17
14
  "module": "dist/index.mjs",
18
15
  "typings": "dist/index.d.ts",
@@ -24,9 +21,9 @@
24
21
  }
25
22
  },
26
23
  "files": [
27
- "README.md",
28
24
  "dist",
29
- "src"
25
+ "src",
26
+ "README.md"
30
27
  ],
31
28
  "eslintConfig": {
32
29
  "rules": {
@@ -39,22 +36,21 @@
39
36
  },
40
37
  "peerDependencies": {
41
38
  "@tanstack/react-query": "^4.0.10",
42
- "@trpc/client": "10.0.0-alpha.44",
43
- "@trpc/react": "10.0.0-alpha.44",
44
- "@trpc/server": "10.0.0-alpha.44",
39
+ "@trpc/client": "10.0.0-alpha.47",
40
+ "@trpc/react": "10.0.0-alpha.47",
41
+ "@trpc/server": "10.0.0-alpha.47",
45
42
  "next": "*",
46
43
  "react": ">=16.8.0",
47
44
  "react-dom": ">=16.8.0"
48
45
  },
49
46
  "dependencies": {
50
- "@babel/runtime": "^7.9.0",
51
47
  "react-ssr-prepass": "^1.5.0"
52
48
  },
53
49
  "devDependencies": {
54
50
  "@tanstack/react-query": "^4.0.10",
55
- "@trpc/client": "10.0.0-alpha.44",
56
- "@trpc/react": "10.0.0-alpha.44",
57
- "@trpc/server": "10.0.0-alpha.44",
51
+ "@trpc/client": "10.0.0-alpha.47",
52
+ "@trpc/react": "10.0.0-alpha.47",
53
+ "@trpc/server": "10.0.0-alpha.47",
58
54
  "@types/express": "^4.17.12",
59
55
  "express": "^4.17.1",
60
56
  "next": "^12.1.6",
@@ -65,5 +61,5 @@
65
61
  "publishConfig": {
66
62
  "access": "public"
67
63
  },
68
- "gitHead": "02ec6d14567380810f64ffbd82f18f8dcde07fd4"
64
+ "gitHead": "c7cfb976538a35e529053add9a6cbda8b94e521d"
69
65
  }
package/dist/index.ts.js DELETED
@@ -1 +0,0 @@
1
-