@trpc/next 10.0.0-alpha.3 → 10.0.0-alpha.30

package/dist/setupNext.d.ts.map

@@ -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"}
+{"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

@@ -2,16 +2,16 @@
  * Heavily based on urql's ssr
  * https://github.com/FormidableLabs/urql/blob/main/packages/next-urql/src/with-urql-client.ts
  */
-import { TRPCClientError, CreateReactQueryHooksOptions } from '@trpc/react';
+import type { CreateTRPCClientOptions } from '@trpc/client/src/internals/TRPCClient';
+import { TRPCClientError } from '@trpc/react';
 import type { AnyRouter, ResponseMeta } from '@trpc/server';
 import { NextComponentType, NextPageContext } from 'next/dist/shared/lib/utils';
-import type { CreateTRPCClientOptions } from '@trpc/client/src/internals/TRPCClient';
 import { QueryClient } from 'react-query';
 declare type QueryClientConfig = ConstructorParameters<typeof QueryClient>[0];
 export declare type WithTRPCConfig<TRouter extends AnyRouter> = CreateTRPCClientOptions<TRouter> & {
     queryClientConfig?: QueryClientConfig;
 };
-interface WithTRPCOptions<TRouter extends AnyRouter> extends CreateReactQueryHooksOptions {
+interface WithTRPCOptions<TRouter extends AnyRouter> {
     config: (info: {
         ctx?: NextPageContext;
     }) => WithTRPCConfig<TRouter>;
@@ -26,6 +26,6 @@ export interface WithTRPCSSROptions<TRouter extends AnyRouter> extends WithTRPCO
 export interface WithTRPCNoSSROptions<TRouter extends AnyRouter> extends WithTRPCOptions<TRouter> {
     ssr?: false;
 }
-export declare function withTRPC<TRouter extends AnyRouter>(opts: WithTRPCNoSSROptions<TRouter> | WithTRPCSSROptions<TRouter>): (AppOrPage: NextComponentType<any, any, any>) => NextComponentType;
+export declare function withTRPC<TRouter extends AnyRouter, TSSRContext extends NextPageContext = NextPageContext>(opts: WithTRPCNoSSROptions<TRouter> | WithTRPCSSROptions<TRouter>): (AppOrPage: NextComponentType<any, any, any>) => NextComponentType;
 export {};
 //# sourceMappingURL=withTRPC.d.ts.map

package/dist/withTRPC.d.ts.map

@@ -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"}
+{"version":3,"file":"withTRPC.d.ts","sourceRoot":"","sources":["../src/withTRPC.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AACH,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;AAEpC,OAAO,EAGL,WAAW,EAGZ,MAAM,aAAa,CAAC;AAGrB,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

@@ -1,6 +1,6 @@
 {
   "name": "@trpc/next",
-  "version": "10.0.0-alpha.3",
+  "version": "10.0.0-alpha.30",
   "description": "tRPC Next lib",
   "author": "KATT",
   "license": "MIT",
@@ -30,36 +30,40 @@
   ],
   "eslintConfig": {
     "rules": {
-      "react-hooks/exhaustive-deps": "error"
+      "react-hooks/exhaustive-deps": "error",
+      "no-restricted-imports": [
+        "error",
+        "@trpc/next"
+      ]
     }
   },
   "peerDependencies": {
-    "@trpc/client": "10.0.0-alpha.3",
-    "@trpc/react": "10.0.0-alpha.3",
-    "@trpc/server": "10.0.0-alpha.3",
+    "@trpc/client": "10.0.0-alpha.30",
+    "@trpc/react": "10.0.0-alpha.30",
+    "@trpc/server": "10.0.0-alpha.30",
     "next": "*",
     "react": ">=16.8.0",
     "react-dom": ">=16.8.0",
-    "react-query": "^3.31.0 || ^4.0.0-alpha.4"
+    "react-query": "^3.37.0 || ^4.0.0-alpha.4"
   },
   "dependencies": {
     "@babel/runtime": "^7.9.0",
     "react-ssr-prepass": "^1.5.0"
   },
   "devDependencies": {
-    "@trpc/client": "10.0.0-alpha.3",
-    "@trpc/react": "10.0.0-alpha.3",
-    "@trpc/server": "10.0.0-alpha.3",
+    "@trpc/client": "10.0.0-alpha.30",
+    "@trpc/react": "10.0.0-alpha.30",
+    "@trpc/server": "10.0.0-alpha.30",
     "@types/express": "^4.17.12",
     "express": "^4.17.1",
-    "next": "^12.0.1",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
-    "react-query": "^3.27.0",
+    "next": "^12.1.6",
+    "react": "^18.1.0",
+    "react-dom": "^18.1.0",
+    "react-query": "^3.37.0",
     "zod": "^3.0.0"
   },
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "cd71a2fe5d42efc838ae3d4cebe7a9e1a36d9110"
+  "gitHead": "31e28de6c0469b28a6f39378f931f35e469f17f4"
 }

package/src/setupNext.tsx

@@ -1,18 +1,26 @@
-import { createReactQueryHooks } from '@trpc/react';
+import { createReactQueryHooks, createReactQueryProxy } from '@trpc/react';
 import { AnyRouter } from '@trpc/server';
+import { NextPageContext } from 'next/types';
 import { WithTRPCNoSSROptions, WithTRPCSSROptions, withTRPC } from './withTRPC';
 
-export function setupTRPC<TRouter extends AnyRouter>(
-  opts: WithTRPCNoSSROptions<TRouter> | WithTRPCSSROptions<TRouter>,
-) {
-  const hooks = createReactQueryHooks<TRouter>(opts);
-  const _withTRPC = withTRPC(opts);
+export function setupTRPC<
+  TRouter extends AnyRouter,
+  TSSRContext extends NextPageContext = NextPageContext,
+>(opts: WithTRPCNoSSROptions<TRouter> | WithTRPCSSROptions<TRouter>) {
+  const hooks = createReactQueryHooks<TRouter, TSSRContext>();
+  const proxy = createReactQueryProxy<TRouter, TSSRContext>();
+
+  // TODO: maybe set TSSRContext to `never` when using `WithTRPCNoSSROptions`
+  const _withTRPC = withTRPC<TRouter, TSSRContext>(opts);
+
   return {
+    proxy,
     useContext: hooks.useContext,
     useInfiniteQuery: hooks.useInfiniteQuery,
     useMutation: hooks.useMutation,
     useQuery: hooks.useQuery,
     useSubscription: hooks.useSubscription,
     withTRPC: _withTRPC,
+    queries: hooks.queries,
   };
 }

package/src/withTRPC.tsx

@@ -2,14 +2,13 @@
  * Heavily based on urql's ssr
  * https://github.com/FormidableLabs/urql/blob/main/packages/next-urql/src/with-urql-client.ts
  */
-
+import type { CreateTRPCClientOptions } from '@trpc/client/src/internals/TRPCClient';
 import {
-  createReactQueryHooks,
-  createTRPCClient,
   TRPCClient,
   TRPCClientError,
   TRPCClientErrorLike,
-  CreateReactQueryHooksOptions,
+  createReactQueryHooks,
+  createTRPCClient,
 } from '@trpc/react';
 import type { AnyRouter, Dict, Maybe, ResponseMeta } from '@trpc/server';
 import {
@@ -18,10 +17,14 @@ import {
   NextComponentType,
   NextPageContext,
 } from 'next/dist/shared/lib/utils';
-import type { CreateTRPCClientOptions } from '@trpc/client/src/internals/TRPCClient';
 import React, { createElement, useState } from 'react';
-import { QueryClient, QueryClientProvider } from 'react-query';
-import { dehydrate, DehydratedState, Hydrate } from 'react-query/hydration';
+import {
+  DehydratedState,
+  Hydrate,
+  QueryClient,
+  QueryClientProvider,
+  dehydrate,
+} from 'react-query';
 import ssrPrepass from 'react-ssr-prepass';
 
 type QueryClientConfig = ConstructorParameters<typeof QueryClient>[0];
@@ -53,8 +56,7 @@ export type WithTRPCConfig<TRouter extends AnyRouter> =
     queryClientConfig?: QueryClientConfig;
   };
 
-interface WithTRPCOptions<TRouter extends AnyRouter>
-  extends CreateReactQueryHooksOptions {
+interface WithTRPCOptions<TRouter extends AnyRouter> {
   config: (info: { ctx?: NextPageContext }) => WithTRPCConfig<TRouter>;
 }
 
@@ -71,50 +73,55 @@ export interface WithTRPCNoSSROptions<TRouter extends AnyRouter>
   ssr?: false;
 }
 
-export function withTRPC<TRouter extends AnyRouter>(
-  opts: WithTRPCNoSSROptions<TRouter> | WithTRPCSSROptions<TRouter>,
-) {
+export function withTRPC<
+  TRouter extends AnyRouter,
+  TSSRContext extends NextPageContext = NextPageContext,
+>(opts: WithTRPCNoSSROptions<TRouter> | WithTRPCSSROptions<TRouter>) {
   const { config: getClientConfig } = opts;
 
   type TRPCPrepassProps = {
     config: WithTRPCConfig<TRouter>;
     queryClient: QueryClient;
     trpcClient: TRPCClient<TRouter>;
-    isPrepass: true;
-    ssrContext: NextPageContext;
+    ssrState: 'prepass';
+    ssrContext: TSSRContext;
   };
   return (AppOrPage: NextComponentType<any, any, any>): NextComponentType => {
-    const trpc = createReactQueryHooks<TRouter, NextPageContext>(opts);
+    const trpc = createReactQueryHooks<TRouter, TSSRContext>();
 
     const WithTRPC = (
       props: AppPropsType & {
         trpc?: TRPCPrepassProps;
       },
     ) => {
-      const [{ queryClient, trpcClient, isPrepass, ssrContext }] = useState(
+      const [{ queryClient, trpcClient, ssrState, ssrContext }] = useState(
         () => {
           if (props.trpc) {
             return props.trpc;
           }
+
           const config = getClientConfig({});
           const queryClient = new QueryClient(config.queryClientConfig);
           const trpcClient = trpc.createClient(config);
           return {
             queryClient,
             trpcClient,
-            isPrepass: false,
+            ssrState: opts.ssr ? ('mounting' as const) : (false as const),
             ssrContext: null,
           };
         },
       );
 
-      const hydratedState = trpc.useDehydratedState(props.pageProps?.trpcState);
+      const hydratedState = trpc.useDehydratedState(
+        trpcClient,
+        props.pageProps?.trpcState,
+      );
 
       return (
         <trpc.Provider
           client={trpcClient}
           queryClient={queryClient}
-          isPrepass={isPrepass}
+          ssrState={ssrState}
           ssrContext={ssrContext}
         >
           <QueryClientProvider client={queryClient}>
@@ -166,8 +173,8 @@ export function withTRPC<TRouter extends AnyRouter>(
           config,
           trpcClient,
           queryClient,
-          isPrepass: true,
-          ssrContext: ctx,
+          ssrState: 'prepass',
+          ssrContext: ctx as TSSRContext,
         };
         const prepassProps = {
           pageProps,
@@ -210,10 +217,11 @@ export function withTRPC<TRouter extends AnyRouter>(
             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,
+        );
 
         const appTreeProps = getAppTreeProps(pageProps);
 
@@ -230,9 +238,9 @@ export function withTRPC<TRouter extends AnyRouter>(
                   ? [err as TRPCClientError<TRouter>]
                   : [],
               ),
-          }) ?? {};
+          }) || {};
 
-        for (const [key, value] of Object.entries(meta)) {
+        for (const [key, value] of Object.entries(meta.headers || {})) {
           if (typeof value === 'string') {
             ctx.res?.setHeader(key, value);
           }