feat(next): add some cache primitives to data fetching

examples/.experimental/next-app-dir/package.json

@@ -17,7 +17,7 @@
     "@types/node": "^18.7.20",
     "@types/react": "^18.2.6",
     "@types/react-dom": "^18.2.4",
-    "next": "^13.3.4",
+    "next": "^13.4.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "trpc-api": "link:./src/trpc",

examples/.experimental/next-app-dir/src/app/ServerInvoker.tsx

@@ -0,0 +1,11 @@
+import { api } from '~/trpc/server-invoker';
+
+export async function ServerInvoker() {
+  const data = await api.greeting.query({
+    text: 'i never hit an api endpoint',
+  });
+
+  console.log({ serverInvoker: data });
+
+  return <div>Server {data}</div>;
+}

examples/.experimental/next-app-dir/src/app/page.tsx

@@ -2,6 +2,7 @@ import { Suspense } from 'react';
 import { api } from 'trpc-api';
 import { ClientGreeting } from './ClientGreeting';
 import { ServerGreeting } from './ServerGreeting';
+import { ServerInvoker } from './ServerInvoker';
 
 export default async function Home() {
   const promise = new Promise(async (resolve) => {
@@ -22,7 +23,7 @@ export default async function Home() {
     >
       <div
         style={{
-          width: '12rem',
+          width: '24rem',
           padding: '1rem',
           background: '#e5e5e5',
           borderRadius: '0.5rem',
@@ -35,17 +36,33 @@ export default async function Home() {
         </div>
 
         <div>
-          <Suspense fallback={<>Loading Server...</>}>
+          <Suspense fallback={<>Loading Server (fetched)...</>}>
             {/* @ts-expect-error RSC + TS not friends yet */}
             <ServerGreeting />
           </Suspense>
         </div>
         <div>
-          <Suspense fallback={<>Loading stream...</>}>
+          <Suspense fallback={<>Loading stream (fetched)...</>}>
             {/** @ts-expect-error - Async Server Component */}
             <StreamedSC promise={promise} />
           </Suspense>
         </div>
+
+        <div>
+          <Suspense fallback={<>Loading Server (invoked)...</>}>
+            {/* @ts-expect-error RSC + TS not friends yet */}
+            <ServerInvoker />
+          </Suspense>
+        </div>
+
+        <form
+          action={async () => {
+            'use server';
+            api.greeting.revalidate();
+          }}
+        >
+          <button type="submit">Revalidate</button>
+        </form>
       </div>
     </main>
   );

examples/.experimental/next-app-dir/src/server/routers/_app.ts

@@ -10,7 +10,7 @@ export const appRouter = router({
     )
     .query(async (opts) => {
       console.log('request from', opts.ctx.headers?.['x-trpc-source']);
-      return `hello ${opts.input.text}`;
+      return `hello ${opts.input.text} - ${new Date().toLocaleTimeString()}`;
     }),
 });
 

examples/.experimental/next-app-dir/src/trpc/package.json

@@ -1,10 +1,10 @@
 {
   "name": "trpc-api",
-  "typings": "server.ts",
+  "typings": "server-fetcher.ts",
   "exports": {
     ".": {
-      "types": "./server.ts",
-      "react-server": "./server.ts",
+      "types": "./server-fetcher.ts",
+      "react-server": "./server-fetcher.ts",
       "default": "./client.ts"
     }
   }

examples/.experimental/next-app-dir/src/trpc/server.ts → examples/.experimental/next-app-dir/src/trpc/server-fetcher.ts

@@ -1,6 +1,7 @@
 'use server';
 
-import { httpBatchLink, loggerLink } from '@trpc/client';
+import { loggerLink } from '@trpc/client';
+import { nextFetchLink } from '@trpc/next/app-dir/links/nextFetch';
 import { experimental_createTRPCNextAppDirServer } from '@trpc/next/app-dir/server';
 import { headers } from 'next/headers';
 import { AppRouter } from '~/server/routers/_app';
@@ -15,7 +16,8 @@ export const api = experimental_createTRPCNextAppDirServer<AppRouter>({
             process.env.NODE_ENV === 'development' ||
             (op.direction === 'down' && op.result instanceof Error),
         }),
-        httpBatchLink({
+        nextFetchLink({
+          batch: false,
           url: getUrl(),
           headers() {
             // Forward headers from the browser to the API

examples/.experimental/next-app-dir/src/trpc/server-invoker.ts

@@ -0,0 +1,28 @@
+'use server';
+
+import { loggerLink } from '@trpc/client';
+import { nextCacheLink } from '@trpc/next/app-dir/links/nextCache';
+import { experimental_createTRPCNextAppDirServer } from '@trpc/next/app-dir/server';
+import { headers } from 'next/headers';
+import { appRouter } from '~/server/routers/_app';
+
+export const api = experimental_createTRPCNextAppDirServer<typeof appRouter>({
+  config() {
+    return {
+      links: [
+        loggerLink({
+          enabled: (op) =>
+            process.env.NODE_ENV === 'development' ||
+            (op.direction === 'down' && op.result instanceof Error),
+        }),
+        nextCacheLink({
+          router: appRouter,
+          createContext: async () => {
+            const h = Object.fromEntries(headers().entries());
+            return { headers: h };
+          },
+        }),
+      ],
+    };
+  },
+});

packages/next/package.json

@@ -44,6 +44,16 @@
       "import": "./dist/app-dir/client.mjs",
       "require": "./dist/app-dir/client.js",
       "default": "./dist/app-dir/client.js"
+    },
+    "./app-dir/links/nextCache": {
+      "import": "./dist/app-dir/links/nextCache.mjs",
+      "require": "./dist/app-dir/links/nextCache.js",
+      "default": "./dist/app-dir/links/nextCache.js"
+    },
+    "./app-dir/links/nextFetch": {
+      "import": "./dist/app-dir/links/nextFetch.mjs",
+      "require": "./dist/app-dir/links/nextFetch.js",
+      "default": "./dist/app-dir/links/nextFetch.js"
     }
   },
   "files": [
@@ -76,7 +86,7 @@
     "@types/react-dom": "^18.2.4",
     "eslint": "^8.40.0",
     "express": "^4.17.1",
-    "next": "^13.3.4",
+    "next": "^13.4.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "rollup": "^2.79.1",

packages/next/rollup.config.ts

@@ -5,6 +5,8 @@ export const input = [
   'src/index.ts',
   'src/app-dir/server.ts',
   'src/app-dir/client.ts',
+  'src/app-dir/links/nextCache.ts',
+  'src/app-dir/links/nextFetch.ts',
 ];
 
 export default function rollup(): RollupOptions[] {

packages/next/src/app-dir/links/nextCache.ts

@@ -0,0 +1,56 @@
+// import "server-only";
+
+import { TRPCClientError, TRPCLink } from '@trpc/client';
+import { AnyRouter, callProcedure, inferRouterContext } from '@trpc/server';
+import { observable } from '@trpc/server/observable';
+import { unstable_cache } from 'next/cache';
+import { generateCacheTag } from '../shared';
+
+type NextCacheLinkOptions<TRouter extends AnyRouter> = {
+  router: TRouter;
+  createContext: () => Promise<inferRouterContext<TRouter>>;
+};
+
+export function nextCacheLink<TRouter extends AnyRouter>(
+  opts: NextCacheLinkOptions<TRouter>,
+): TRPCLink<TRouter> {
+  return () =>
+    ({ op }) =>
+      observable((observer) => {
+        const { path, input, type, context } = op;
+
+        const cacheTag = generateCacheTag(path, input);
+        const revalidate =
+          typeof context?.revalidate === 'number' ? context.revalidate : false;
+
+        const promise = opts
+          .createContext()
+          .then(async (ctx) => {
+            const callProc = async () =>
+              callProcedure({
+                procedures: opts.router._def.procedures,
+                path,
+                rawInput: input,
+                ctx: ctx,
+                type,
+              });
+
+            if (type === 'query') {
+              return unstable_cache(callProc, path.split('.'), {
+                revalidate,
+                tags: [cacheTag],
+              })();
+            }
+
+            return callProc();
+          })
+          .catch((cause) => observer.error(TRPCClientError.from(cause)));
+
+        promise
+          .then((data) => {
+            observer.next({ result: { data } });
+            observer.complete();
+          })
+          .catch((cause) => observer.error(TRPCClientError.from(cause)));
+      });
+}

packages/next/src/app-dir/links/nextFetch.ts

@@ -0,0 +1,38 @@
+import {
+  HTTPLinkOptions,
+  HttpBatchLinkOptions,
+  TRPCLink,
+  httpBatchLink,
+  httpLink,
+} from '@trpc/client';
+import { AnyRouter } from '@trpc/server';
+import { generateCacheTag } from '../shared';
+
+type NextFetchLinkOptions<TBatch extends boolean> = {
+  batch?: TBatch;
+} & (TBatch extends true ? HttpBatchLinkOptions : HTTPLinkOptions);
+
+export function nextFetchLink<
+  TRouter extends AnyRouter,
+  TBatch extends boolean,
+>(opts: NextFetchLinkOptions<TBatch>): TRPCLink<TRouter> {
+  return (runtime) => {
+    return (ctx) => {
+      const { path, input } = ctx.op;
+      const cacheTag = generateCacheTag(path, input);
+
+      const linkFactory = opts.batch ? httpBatchLink : httpLink;
+      const link = linkFactory({
+        url: opts.url,
+        fetch: (url, fetchOpts) => {
+          return fetch(url, {
+            ...fetchOpts,
+            next: { tags: [cacheTag] },
+          });
+        },
+      })(runtime);
+
+      return link(ctx);
+    };
+  };
+}

packages/next/src/app-dir/server.ts

@@ -1,14 +1,48 @@
 /// <reference types="next" />
 
 import {
-  CreateTRPCProxyClient,
+  Resolver,
   clientCallTypeToProcedureType,
   createTRPCUntypedClient,
 } from '@trpc/client';
-import { AnyRouter } from '@trpc/server';
+import {
+  AnyMutationProcedure,
+  AnyProcedure,
+  AnyQueryProcedure,
+  AnyRouter,
+  AnySubscriptionProcedure,
+  ProcedureRouterRecord,
+} from '@trpc/server';
 import { createRecursiveProxy } from '@trpc/server/shared';
+import { revalidateTag } from 'next/cache';
 import { cache } from 'react';
-import { CreateTRPCNextAppRouterOptions } from './shared';
+import { CreateTRPCNextAppRouterOptions, generateCacheTag } from './shared';
+
+export type DecorateProcedureServer<TProcedure extends AnyProcedure> =
+  TProcedure extends AnyQueryProcedure
+    ? {
+        query: Resolver<TProcedure>;
+        revalidate: () => void;
+      }
+    : TProcedure extends AnyMutationProcedure
+    ? {
+        mutate: Resolver<TProcedure>;
+      }
+    : TProcedure extends AnySubscriptionProcedure
+    ? {
+        subscribe: Resolver<TProcedure>;
+      }
+    : never;
+
+export type ServerDecoratedProcedureRecord<
+  TProcedures extends ProcedureRouterRecord,
+> = {
+  [TKey in keyof TProcedures]: TProcedures[TKey] extends AnyRouter
+    ? ServerDecoratedProcedureRecord<TProcedures[TKey]['_def']['record']>
+    : TProcedures[TKey] extends AnyProcedure
+    ? DecorateProcedureServer<TProcedures[TKey]>
+    : never;
+};
 
 // ts-prune-ignore-next
 export function experimental_createTRPCNextAppDirServer<
@@ -24,11 +58,16 @@ export function experimental_createTRPCNextAppDirServer<
     const client = getClient();
 
     const pathCopy = [...callOpts.path];
-    const procedureType = clientCallTypeToProcedureType(
-      pathCopy.pop() as string,
-    );
-    const fullPath = pathCopy.join('.');
+    const action = pathCopy.pop() as string;
+
+    const procedurePath = pathCopy.join('.');
+    const procedureType = clientCallTypeToProcedureType(action);
+    const cacheTag = generateCacheTag(procedurePath, callOpts.args[0]);
+
+    if (action === 'revalidate') {
+      return revalidateTag(cacheTag);
+    }
 
-    return (client[procedureType] as any)(fullPath, ...callOpts.args);
-  }) as CreateTRPCProxyClient<TRouter>;
+    return (client[procedureType] as any)(procedurePath, ...callOpts.args);
+  }) as ServerDecoratedProcedureRecord<TRouter['_def']['record']>;
 }

packages/next/src/app-dir/shared.ts

@@ -59,3 +59,12 @@ export type CreateTRPCNextAppRouter<TRouter extends AnyRouter> =
 export interface CreateTRPCNextAppRouterOptions<TRouter extends AnyRouter> {
   config: () => CreateTRPCClientOptions<TRouter>;
 }
+
+/**
+ * @internal
+ */
+export function generateCacheTag(procedurePath: string, input: any) {
+  return input
+    ? `${procedurePath}?input=${JSON.stringify(input)}`
+    : procedurePath;
+}