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

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

@@ -48,7 +48,7 @@ function transformQueryOrMutationCacheErrors(result) {
 function withTRPC(opts) {
   var getClientConfig = opts.config;
   return function (AppOrPage) {
-    var trpc = react.createReactQueryHooks(opts);
+    var trpc = react.createReactQueryHooks();
 
     var WithTRPC = function WithTRPC(props) {
       var _props$pageProps;
@@ -64,7 +64,7 @@ function withTRPC(opts) {
         return {
           queryClient: queryClient,
           trpcClient: trpcClient,
-          isPrepass: false,
+          ssrState: opts.ssr ? 'mounting' : false,
           ssrContext: null
         };
       }),
@@ -72,14 +72,14 @@ function withTRPC(opts) {
           _useState2$ = _useState2[0],
           queryClient = _useState2$.queryClient,
           trpcClient = _useState2$.trpcClient,
-          isPrepass = _useState2$.isPrepass,
+          ssrState = _useState2$.ssrState,
           ssrContext = _useState2$.ssrContext;
 
-      var hydratedState = trpc.useDehydratedState((_props$pageProps = props.pageProps) === null || _props$pageProps === void 0 ? void 0 : _props$pageProps.trpcState);
+      var hydratedState = trpc.useDehydratedState(trpcClient, (_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,
+        ssrState: ssrState,
         ssrContext: ssrContext
       }, /*#__PURE__*/React__default["default"].createElement(reactQuery.QueryClientProvider, {
         client: queryClient
@@ -91,7 +91,7 @@ function withTRPC(opts) {
     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, _opts$responseMeta2;
+          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;
 
@@ -143,7 +143,7 @@ function withTRPC(opts) {
                     config: config,
                     trpcClient: trpcClient,
                     queryClient: queryClient,
-                    isPrepass: true,
+                    ssrState: 'prepass',
                     ssrContext: ctx
                   };
                   prepassProps = {
@@ -193,18 +193,18 @@ function withTRPC(opts) {
                     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;
+                  pageProps.trpcState = trpcClient.runtime.transformer.serialize(dehydratedCacheWithErrors);
                   appTreeProps = getAppTreeProps(pageProps);
-                  meta = (_opts$responseMeta = (_opts$responseMeta2 = opts.responseMeta) === null || _opts$responseMeta2 === void 0 ? void 0 : _opts$responseMeta2.call(opts, {
+                  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] : [];
                     })
-                  })) !== null && _opts$responseMeta !== void 0 ? _opts$responseMeta : {};
+                  })) || {};
 
-                  for (_i = 0, _Object$entries = Object.entries(meta); _i < _Object$entries.length; _i++) {
+                  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];
 
                     if (typeof value === 'string') {
@@ -239,17 +239,20 @@ function withTRPC(opts) {
 }
 
 function setupTRPC(opts) {
-  var hooks = react.createReactQueryHooks(opts);
+  var hooks = react.createReactQueryHooks();
+  var proxy = react.createReactQueryHooksProxy(hooks); // TODO: maybe set TSSRContext to `never` when using `WithTRPCNoSSROptions`
 
   var _withTRPC = withTRPC(opts);
 
   return {
+    proxy: proxy,
     useContext: hooks.useContext,
     useInfiniteQuery: hooks.useInfiniteQuery,
     useMutation: hooks.useMutation,
     useQuery: hooks.useQuery,
     useSubscription: hooks.useSubscription,
-    withTRPC: _withTRPC
+    withTRPC: _withTRPC,
+    queries: hooks.queries
   };
 }
 

package/dist/index.mjs

@@ -3,7 +3,7 @@ import _asyncToGenerator from '@babel/runtime/helpers/asyncToGenerator';
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import _regeneratorRuntime from '@babel/runtime/regenerator';
-import { createReactQueryHooks, createTRPCClient } from '@trpc/react';
+import { createReactQueryHooks, createTRPCClient, createReactQueryHooksProxy } from '@trpc/react';
 import React, { useState, createElement } from 'react';
 import { QueryClient, QueryClientProvider, Hydrate, dehydrate } from 'react-query';
 import ssrPrepass from 'react-ssr-prepass';
@@ -34,7 +34,7 @@ function transformQueryOrMutationCacheErrors(result) {
 function withTRPC(opts) {
   var getClientConfig = opts.config;
   return function (AppOrPage) {
-    var trpc = createReactQueryHooks(opts);
+    var trpc = createReactQueryHooks();
 
     var WithTRPC = function WithTRPC(props) {
       var _props$pageProps;
@@ -50,7 +50,7 @@ function withTRPC(opts) {
         return {
           queryClient: queryClient,
           trpcClient: trpcClient,
-          isPrepass: false,
+          ssrState: opts.ssr ? 'mounting' : false,
           ssrContext: null
         };
       }),
@@ -58,14 +58,14 @@ function withTRPC(opts) {
           _useState2$ = _useState2[0],
           queryClient = _useState2$.queryClient,
           trpcClient = _useState2$.trpcClient,
-          isPrepass = _useState2$.isPrepass,
+          ssrState = _useState2$.ssrState,
           ssrContext = _useState2$.ssrContext;
 
-      var hydratedState = trpc.useDehydratedState((_props$pageProps = props.pageProps) === null || _props$pageProps === void 0 ? void 0 : _props$pageProps.trpcState);
+      var hydratedState = trpc.useDehydratedState(trpcClient, (_props$pageProps = props.pageProps) === null || _props$pageProps === void 0 ? void 0 : _props$pageProps.trpcState);
       return /*#__PURE__*/React.createElement(trpc.Provider, {
         client: trpcClient,
         queryClient: queryClient,
-        isPrepass: isPrepass,
+        ssrState: ssrState,
         ssrContext: ssrContext
       }, /*#__PURE__*/React.createElement(QueryClientProvider, {
         client: queryClient
@@ -77,7 +77,7 @@ function withTRPC(opts) {
     if (AppOrPage.getInitialProps || opts.ssr) {
       WithTRPC.getInitialProps = /*#__PURE__*/function () {
         var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(appOrPageCtx) {
-          var _opts$responseMeta, _opts$responseMeta2;
+          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;
 
@@ -129,7 +129,7 @@ function withTRPC(opts) {
                     config: config,
                     trpcClient: trpcClient,
                     queryClient: queryClient,
-                    isPrepass: true,
+                    ssrState: 'prepass',
                     ssrContext: ctx
                   };
                   prepassProps = {
@@ -179,18 +179,18 @@ function withTRPC(opts) {
                     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;
+                  pageProps.trpcState = trpcClient.runtime.transformer.serialize(dehydratedCacheWithErrors);
                   appTreeProps = getAppTreeProps(pageProps);
-                  meta = (_opts$responseMeta = (_opts$responseMeta2 = opts.responseMeta) === null || _opts$responseMeta2 === void 0 ? void 0 : _opts$responseMeta2.call(opts, {
+                  meta = ((_opts$responseMeta = opts.responseMeta) === null || _opts$responseMeta === void 0 ? void 0 : _opts$responseMeta.call(opts, {
                     ctx: ctx,
                     clientErrors: [].concat(_toConsumableArray(dehydratedCache.queries), _toConsumableArray(dehydratedCache.mutations)).map(function (v) {
                       return v.state.error;
                     }).flatMap(function (err) {
                       return err instanceof Error && err.name === 'TRPCClientError' ? [err] : [];
                     })
-                  })) !== null && _opts$responseMeta !== void 0 ? _opts$responseMeta : {};
+                  })) || {};
 
-                  for (_i = 0, _Object$entries = Object.entries(meta); _i < _Object$entries.length; _i++) {
+                  for (_i = 0, _Object$entries = Object.entries(meta.headers || {}); _i < _Object$entries.length; _i++) {
                     _Object$entries$_i = _slicedToArray(_Object$entries[_i], 2), key = _Object$entries$_i[0], value = _Object$entries$_i[1];
 
                     if (typeof value === 'string') {
@@ -225,17 +225,20 @@ function withTRPC(opts) {
 }
 
 function setupTRPC(opts) {
-  var hooks = createReactQueryHooks(opts);
+  var hooks = createReactQueryHooks();
+  var proxy = createReactQueryHooksProxy(hooks); // TODO: maybe set TSSRContext to `never` when using `WithTRPCNoSSROptions`
 
   var _withTRPC = withTRPC(opts);
 
   return {
+    proxy: proxy,
     useContext: hooks.useContext,
     useInfiniteQuery: hooks.useInfiniteQuery,
     useMutation: hooks.useMutation,
     useQuery: hooks.useQuery,
     useSubscription: hooks.useSubscription,
-    withTRPC: _withTRPC
+    withTRPC: _withTRPC,
+    queries: hooks.queries
   };
 }