@trpc/next 10.0.0-alpha.8 → 10.0.0-proxy-alpha.53

package/README.md

@@ -1,3 +1,86 @@
+<p align="center">
+  <a href="https://trpc.io/"><img src="../../www/static/img/logo-text.svg" alt="tRPC" height="130"/></a>
+</p>
+
+<p align="center">
+  <strong>End-to-end typesafe APIs made easy</strong>
+</p>
+
+<p align="center">
+  <!-- TODO: replace with new version GIF -->
+  <img src="https://storage.googleapis.com/trpc/trpcgif.gif" alt="Demo" />
+</p>
+
 # `@trpc/next`
 
-https://trpc.io
+> Connect a tRPC router to Next.js.
+
+## Documentation
+
+Full documentation for `@trpc/next` can be found [here](https://trpc.io/docs/nextjs)
+
+## Installation
+
+```bash
+# npm
+npm install @trpc/next @trpc/react react-query
+
+# Yarn
+yarn add @trpc/next @trpc/react react-query
+
+# pnpm
+pnpm add @trpc/next @trpc/react react-query
+```
+
+## Basic Example
+
+Setup tRPC in `utils/trpc.ts`.
+
+```ts
+import { setupTRPC } from '@trpc/next';
+// Import the router type from your server file
+import type { AppRouter } from '../pages/api/[trpc].ts';
+
+export const trpc = setupTRPC<AppRouter>({
+  config() {
+    return {
+      url: 'http://localhost:3000/api/trpc',
+    };
+  },
+  ssr: true,
+});
+```
+
+Hook up tRPC inside `_app.tsx`.
+
+```ts
+import { trpc } from '~/utils/trpc';
+
+const App = ({ Component, pageProps }) => {
+  return <Component {...pageProps} />;
+};
+
+export default trpc.withTRPC(App);
+```
+
+Now you can query your API in any component.
+
+```ts
+import { trpc } from '~/utils/trpc';
+
+export function Hello() {
+  const { data, error, status } = trpc.proxy.greeting.useQuery({
+    name: 'tRPC',
+  });
+
+  if (error) {
+    return <p>{error.message}</p>;
+  }
+
+  if (status !== 'success') {
+    return <p>Loading...</p>;
+  }
+
+  return <div>{data && <p>{data.greeting}</p>}</div>;
+}
+```

package/dist/index.js

@@ -2,255 +2,199 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var _toConsumableArray = require('@babel/runtime/helpers/toConsumableArray');
-var _asyncToGenerator = require('@babel/runtime/helpers/asyncToGenerator');
-var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
-var _defineProperty = require('@babel/runtime/helpers/defineProperty');
-var _regeneratorRuntime = require('@babel/runtime/regenerator');
+var reactQuery = require('@tanstack/react-query');
 var react = require('@trpc/react');
 var React = require('react');
-var reactQuery = require('react-query');
 var ssrPrepass = require('react-ssr-prepass');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
-var _toConsumableArray__default = /*#__PURE__*/_interopDefaultLegacy(_toConsumableArray);
-var _asyncToGenerator__default = /*#__PURE__*/_interopDefaultLegacy(_asyncToGenerator);
-var _slicedToArray__default = /*#__PURE__*/_interopDefaultLegacy(_slicedToArray);
-var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
-var _regeneratorRuntime__default = /*#__PURE__*/_interopDefaultLegacy(_regeneratorRuntime);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var ssrPrepass__default = /*#__PURE__*/_interopDefaultLegacy(ssrPrepass);
 
-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; }
+function extends_() {
+  extends_ = Object.assign || function (target) {
+    for (var i = 1; i < arguments.length; i++) {
+      var source = arguments[i];
 
-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; }
-
-function transformQueryOrMutationCacheErrors(result) {
-  var error = result.state.error;
+      for (var key in source) {
+        if (Object.prototype.hasOwnProperty.call(source, key)) {
+          target[key] = source[key];
+        }
+      }
+    }
 
-  if (error instanceof Error && error.name === 'TRPCClientError') {
-    var newError = {
-      message: error.message,
-      data: error.data,
-      shape: error.shape
-    };
-    return _objectSpread(_objectSpread({}, result), {}, {
-      state: _objectSpread(_objectSpread({}, result.state), {}, {
-        error: newError
-      })
-    });
-  }
+    return target;
+  };
 
-  return result;
+  return extends_.apply(this, arguments);
 }
 
-function withTRPC(opts) {
-  var getClientConfig = opts.config;
-  return function (AppOrPage) {
-    var trpc = react.createReactQueryHooks(opts);
-
-    var WithTRPC = function WithTRPC(props) {
-      var _props$pageProps;
-
-      var _useState = React.useState(function () {
-        if (props.trpc) {
-          return props.trpc;
-        }
+function _extends() {
+  return extends_.apply(this, arguments);
+}
 
-        var config = getClientConfig({});
-        var queryClient = new reactQuery.QueryClient(config.queryClientConfig);
-        var trpcClient = trpc.createClient(config);
+function transformQueryOrMutationCacheErrors(result) {
+    const error = result.state.error;
+    if (error instanceof Error && error.name === 'TRPCClientError') {
+        const newError = {
+            message: error.message,
+            data: error.data,
+            shape: error.shape
+        };
         return {
-          queryClient: queryClient,
-          trpcClient: trpcClient,
-          isPrepass: false,
-          ssrContext: null
+            ...result,
+            state: {
+                ...result.state,
+                error: newError
+            }
         };
-      }),
-          _useState2 = _slicedToArray__default["default"](_useState, 1),
-          _useState2$ = _useState2[0],
-          queryClient = _useState2$.queryClient,
-          trpcClient = _useState2$.trpcClient,
-          isPrepass = _useState2$.isPrepass,
-          ssrContext = _useState2$.ssrContext;
-
-      var hydratedState = trpc.useDehydratedState((_props$pageProps = props.pageProps) === null || _props$pageProps === void 0 ? void 0 : _props$pageProps.trpcState);
-      return /*#__PURE__*/React__default["default"].createElement(trpc.Provider, {
-        client: trpcClient,
-        queryClient: queryClient,
-        isPrepass: isPrepass,
-        ssrContext: ssrContext
-      }, /*#__PURE__*/React__default["default"].createElement(reactQuery.QueryClientProvider, {
-        client: queryClient
-      }, /*#__PURE__*/React__default["default"].createElement(reactQuery.Hydrate, {
-        state: hydratedState
-      }, /*#__PURE__*/React__default["default"].createElement(AppOrPage, props))));
-    };
-
-    if (AppOrPage.getInitialProps || opts.ssr) {
-      WithTRPC.getInitialProps = /*#__PURE__*/function () {
-        var _ref = _asyncToGenerator__default["default"]( /*#__PURE__*/_regeneratorRuntime__default["default"].mark(function _callee(appOrPageCtx) {
-          var _opts$responseMeta;
-
-          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;
-
-          return _regeneratorRuntime__default["default"].wrap(function _callee$(_context) {
-            while (1) {
-              switch (_context.prev = _context.next) {
-                case 0:
-                  AppTree = appOrPageCtx.AppTree; // Determine if we are wrapping an App component or a Page component.
-
-                  isApp = !!appOrPageCtx.Component;
-                  ctx = isApp ? appOrPageCtx.ctx : appOrPageCtx; // Run the wrapped component's getInitialProps function.
-
-                  pageProps = {};
-
-                  if (!AppOrPage.getInitialProps) {
-                    _context.next = 10;
-                    break;
-                  }
-
-                  _context.next = 7;
-                  return AppOrPage.getInitialProps(appOrPageCtx);
-
-                case 7:
-                  originalProps = _context.sent;
-                  originalPageProps = isApp ? (_originalProps$pagePr = originalProps.pageProps) !== null && _originalProps$pagePr !== void 0 ? _originalProps$pagePr : {} : originalProps;
-                  pageProps = _objectSpread(_objectSpread({}, originalPageProps), pageProps);
-
-                case 10:
-                  getAppTreeProps = function getAppTreeProps(props) {
-                    return isApp ? {
-                      pageProps: props
+    }
+    return result;
+}
+function withTRPC(opts) {
+    const { config: getClientConfig  } = opts;
+    return (AppOrPage)=>{
+        const trpc = react.createReactQueryHooks();
+        const WithTRPC = (props)=>{
+            const [{ queryClient , trpcClient , ssrState , ssrContext  }] = React.useState(()=>{
+                if (props.trpc) {
+                    return props.trpc;
+                }
+                const config = getClientConfig({});
+                const queryClient = new reactQuery.QueryClient(config.queryClientConfig);
+                const trpcClient = trpc.createClient(config);
+                return {
+                    queryClient,
+                    trpcClient,
+                    ssrState: opts.ssr ? 'mounting' : false,
+                    ssrContext: null
+                };
+            });
+            const hydratedState = trpc.useDehydratedState(trpcClient, props.pageProps?.trpcState);
+            return /*#__PURE__*/ React__default["default"].createElement(trpc.Provider, {
+                client: trpcClient,
+                queryClient: queryClient,
+                ssrState: ssrState,
+                ssrContext: ssrContext
+            }, /*#__PURE__*/ React__default["default"].createElement(reactQuery.QueryClientProvider, {
+                client: queryClient
+            }, /*#__PURE__*/ React__default["default"].createElement(reactQuery.Hydrate, {
+                state: hydratedState
+            }, /*#__PURE__*/ React__default["default"].createElement(AppOrPage, _extends({}, props)))));
+        };
+        if (AppOrPage.getInitialProps || opts.ssr) {
+            WithTRPC.getInitialProps = async (appOrPageCtx)=>{
+                const AppTree = appOrPageCtx.AppTree;
+                // Determine if we are wrapping an App component or a Page component.
+                const isApp = !!appOrPageCtx.Component;
+                const ctx = isApp ? appOrPageCtx.ctx : appOrPageCtx;
+                // Run the wrapped component's getInitialProps function.
+                let pageProps = {};
+                if (AppOrPage.getInitialProps) {
+                    const originalProps = await AppOrPage.getInitialProps(appOrPageCtx);
+                    const originalPageProps = isApp ? originalProps.pageProps ?? {} : originalProps;
+                    pageProps = {
+                        ...originalPageProps,
+                        ...pageProps
+                    };
+                }
+                const getAppTreeProps = (props)=>isApp ? {
+                        pageProps: props
                     } : props;
-                  };
-
-                  if (!(typeof window !== 'undefined' || !opts.ssr)) {
-                    _context.next = 13;
-                    break;
-                  }
-
-                  return _context.abrupt("return", getAppTreeProps(pageProps));
-
-                case 13:
-                  config = getClientConfig({
-                    ctx: ctx
-                  });
-                  trpcClient = react.createTRPCClient(config);
-                  queryClient = new reactQuery.QueryClient(config.queryClientConfig);
-                  trpcProp = {
-                    config: config,
-                    trpcClient: trpcClient,
-                    queryClient: queryClient,
-                    isPrepass: true,
+                if (typeof window !== 'undefined' || !opts.ssr) {
+                    return getAppTreeProps(pageProps);
+                }
+                const config = getClientConfig({
+                    ctx
+                });
+                const trpcClient = react.createTRPCClient(config);
+                const queryClient = new reactQuery.QueryClient(config.queryClientConfig);
+                const trpcProp = {
+                    config,
+                    trpcClient,
+                    queryClient,
+                    ssrState: 'prepass',
                     ssrContext: ctx
-                  };
-                  prepassProps = {
-                    pageProps: pageProps,
+                };
+                const prepassProps = {
+                    pageProps,
                     trpc: trpcProp
-                  }; // Run the prepass step on AppTree. This will run all trpc queries on the server.
-                  // multiple prepass ensures that we can do batching on the server
-
-                case 18:
-
-                  _context.next = 21;
-                  return ssrPrepass__default["default"]( /*#__PURE__*/React.createElement(AppTree, prepassProps));
-
-                case 21:
-                  if (queryClient.isFetching()) {
-                    _context.next = 23;
-                    break;
-                  }
-
-                  return _context.abrupt("break", 27);
-
-                case 23:
-                  _context.next = 25;
-                  return new Promise(function (resolve) {
-                    var unsub = queryClient.getQueryCache().subscribe(function (event) {
-                      if ((event === null || event === void 0 ? void 0 : event.query.getObserversCount()) === 0) {
-                        resolve();
-                        unsub();
-                      }
+                };
+                // Run the prepass step on AppTree. This will run all trpc queries on the server.
+                // multiple prepass ensures that we can do batching on the server
+                while(true){
+                    // render full tree
+                    await ssrPrepass__default["default"](/*#__PURE__*/ React.createElement(AppTree, prepassProps));
+                    if (!queryClient.isFetching()) {
+                        break;
+                    }
+                    // wait until the query cache has settled it's promises
+                    await new Promise((resolve)=>{
+                        const unsub = queryClient.getQueryCache().subscribe((event)=>{
+                            if (event?.query.getObserversCount() === 0) {
+                                resolve();
+                                unsub();
+                            }
+                        });
                     });
-                  });
-
-                case 25:
-                  _context.next = 18;
-                  break;
-
-                case 27:
-                  dehydratedCache = reactQuery.dehydrate(queryClient, {
-                    shouldDehydrateQuery: function shouldDehydrateQuery() {
-                      // makes sure errors are also dehydrated
-                      return true;
+                }
+                const dehydratedCache = reactQuery.dehydrate(queryClient, {
+                    shouldDehydrateQuery () {
+                        // makes sure errors are also dehydrated
+                        return true;
                     }
-                  }); // since error instances can't be serialized, let's make them into `TRPCClientErrorLike`-objects
-
-                  dehydratedCacheWithErrors = _objectSpread(_objectSpread({}, dehydratedCache), {}, {
+                });
+                // since error instances can't be serialized, let's make them into `TRPCClientErrorLike`-objects
+                const dehydratedCacheWithErrors = {
+                    ...dehydratedCache,
                     queries: dehydratedCache.queries.map(transformQueryOrMutationCacheErrors),
                     mutations: dehydratedCache.mutations.map(transformQueryOrMutationCacheErrors)
-                  }); // dehydrate query client's state and add it to the props
-
-                  pageProps.trpcState = opts.transformer ? opts.transformer.serialize(dehydratedCacheWithErrors) : dehydratedCacheWithErrors;
-                  appTreeProps = getAppTreeProps(pageProps);
-                  meta = ((_opts$responseMeta = opts.responseMeta) === null || _opts$responseMeta === void 0 ? void 0 : _opts$responseMeta.call(opts, {
-                    ctx: ctx,
-                    clientErrors: [].concat(_toConsumableArray__default["default"](dehydratedCache.queries), _toConsumableArray__default["default"](dehydratedCache.mutations)).map(function (v) {
-                      return v.state.error;
-                    }).flatMap(function (err) {
-                      return err instanceof Error && err.name === 'TRPCClientError' ? [err] : [];
-                    })
-                  })) || {};
-
-                  for (_i = 0, _Object$entries = Object.entries(meta.headers || {}); _i < _Object$entries.length; _i++) {
-                    _Object$entries$_i = _slicedToArray__default["default"](_Object$entries[_i], 2), key = _Object$entries$_i[0], value = _Object$entries$_i[1];
-
+                };
+                // dehydrate query client's state and add it to the props
+                pageProps.trpcState = trpcClient.runtime.transformer.serialize(dehydratedCacheWithErrors);
+                const appTreeProps = getAppTreeProps(pageProps);
+                const meta = opts.responseMeta?.({
+                    ctx,
+                    clientErrors: [
+                        ...dehydratedCache.queries,
+                        ...dehydratedCache.mutations, 
+                    ].map((v)=>v.state.error).flatMap((err)=>err instanceof Error && err.name === 'TRPCClientError' ? [
+                            err
+                        ] : [])
+                }) || {};
+                for (const [key, value] of Object.entries(meta.headers || {})){
                     if (typeof value === 'string') {
-                      (_ctx$res = ctx.res) === null || _ctx$res === void 0 ? void 0 : _ctx$res.setHeader(key, value);
+                        ctx.res?.setHeader(key, value);
                     }
-                  }
-
-                  if (meta.status && ctx.res) {
+                }
+                if (meta.status && ctx.res) {
                     ctx.res.statusCode = meta.status;
-                  }
-
-                  return _context.abrupt("return", appTreeProps);
-
-                case 35:
-                case "end":
-                  return _context.stop();
-              }
-            }
-          }, _callee);
-        }));
-
-        return function (_x) {
-          return _ref.apply(this, arguments);
-        };
-      }();
-    }
-
-    var displayName = AppOrPage.displayName || AppOrPage.name || 'Component';
-    WithTRPC.displayName = "withTRPC(".concat(displayName, ")");
-    return WithTRPC;
-  };
+                }
+                return appTreeProps;
+            };
+        }
+        const displayName = AppOrPage.displayName || AppOrPage.name || 'Component';
+        WithTRPC.displayName = `withTRPC(${displayName})`;
+        return WithTRPC;
+    };
 }
 
 function setupTRPC(opts) {
-  var hooks = react.createReactQueryHooks(opts);
-
-  var _withTRPC = withTRPC(opts);
-
-  return {
-    useContext: hooks.useContext,
-    useInfiniteQuery: hooks.useInfiniteQuery,
-    useMutation: hooks.useMutation,
-    useQuery: hooks.useQuery,
-    useSubscription: hooks.useSubscription,
-    withTRPC: _withTRPC
-  };
+    const hooks = react.createReactQueryHooks();
+    const proxy = react.createReactQueryHooksProxy(hooks);
+    // TODO: maybe set TSSRContext to `never` when using `WithTRPCNoSSROptions`
+    const _withTRPC = withTRPC(opts);
+    return {
+        proxy,
+        useContext: hooks.useContext,
+        useInfiniteQuery: hooks.useInfiniteQuery,
+        useMutation: hooks.useMutation,
+        useQuery: hooks.useQuery,
+        useSubscription: hooks.useSubscription,
+        withTRPC: _withTRPC,
+        queries: hooks.queries
+    };
 }
 
 exports.setupTRPC = setupTRPC;