feat(next/app-dir): contextCache to control context values to add to cacheTag

examples/.experimental/next-app-dir/src/app/rsc/ServerHttpGreeting.tsx

@@ -3,12 +3,20 @@ import { api } from '~/trpc/server-http';
 export const ServerHttpGreeting = async () => {
   const greeting1 = await api.greeting.query({ text: 'from server1' });
   const greeting2 = await api.greeting.query({ text: 'from server2' });
+  const privateGreeting1 = await api.privateGreeting.query({
+    text: 'from server1 private',
+  });
+  const privateGreeting2 = await api.privateGreeting.query({
+    text: 'from server1 private',
+  });
   const secret = await api.secret.query();
 
   return (
     <div>
       <p>{greeting1}</p>
       <p>{greeting2}</p>
+      <p>{privateGreeting1}</p>
+      <p>{privateGreeting2}</p>
       <p>{secret}</p>
       <form
         action={async () => {
@@ -26,6 +34,26 @@ export const ServerHttpGreeting = async () => {
       >
         <button type="submit">Revalidate HTTP 2</button>
       </form>
+      <form
+        action={async () => {
+          'use server';
+          await api.privateGreeting.revalidate({
+            text: 'from server1 private',
+          });
+        }}
+      >
+        <button type="submit">Revalidate HTTP 3</button>
+      </form>
+      <form
+        action={async () => {
+          'use server';
+          await api.privateGreeting.revalidate({
+            text: 'from server2 private',
+          });
+        }}
+      >
+        <button type="submit">Revalidate HTTP 4</button>
+      </form>
     </div>
   );
 };

examples/.experimental/next-app-dir/src/app/rsc/ServerInvokedGreeting.tsx

@@ -11,13 +11,21 @@ export async function ServerInvokedGreeting() {
   const greeting2 = await api.greeting.query({
     text: 'i also never hit an endpoint',
   });
+  const privateGreeting1 = await api.privateGreeting.query({
+    text: 'i never hit a private api endpoint',
+  });
+  const privateGreeting2 = await api.privateGreeting.query({
+    text: 'i also never hit a private endpoint',
+  });
 
   const secret = await api.secret.query();
 
   return (
     <div>
       <p>{greeting1}</p>
       <p>{greeting2}</p>
+      <p>{privateGreeting1}</p>
+      <p>{privateGreeting2}</p>
       <p>{secret}</p>
       <form
         action={async () => {
@@ -39,6 +47,26 @@ export async function ServerInvokedGreeting() {
       >
         <button type="submit">Revalidate Cache 2</button>
       </form>
+      <form
+        action={async () => {
+          'use server';
+          await api.privateGreeting.revalidate({
+            text: 'i never hit an api endpoint',
+          });
+        }}
+      >
+        <button type="submit">Revalidate Cache 3</button>
+      </form>
+      <form
+        action={async () => {
+          'use server';
+          await api.privateGreeting.revalidate({
+            text: 'i also never hit an endpoint',
+          });
+        }}
+      >
+        <button type="submit">Revalidate Cache 4</button>
+      </form>
     </div>
   );
 }

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

@@ -18,15 +18,15 @@ export default async function Home() {
 
       <div style={separator} />
 
-      <div style={{ height: 160 }}>
+      <div style={{ height: 260 }}>
         <Suspense fallback={<>Loading Server...</>}>
           <ServerHttpGreeting />
         </Suspense>
       </div>
 
       <div style={separator} />
 
-      <div style={{ height: 160 }}>
+      <div style={{ height: 260 }}>
         <Suspense fallback={<>Loading Server...</>}>
           <ServerInvokedGreeting />
         </Suspense>

examples/.experimental/next-app-dir/src/server/context.ts

@@ -1,12 +1,15 @@
 import type { FetchCreateContextFnOptions } from '@trpc/server/adapters/fetch';
 import { auth } from '~/auth';
+import { headers } from 'next/headers';
 
 export async function createContext(opts?: FetchCreateContextFnOptions) {
   const session = await auth();
 
   return {
     session,
     headers: opts && Object.fromEntries(opts.req.headers),
+    // Mock user id which is used for testing. If you copy this file, delete the next property.
+    _userIdMock: headers().get('x-trpc-user-id'),
   };
 }
 

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

@@ -26,6 +26,19 @@ export const createPost = publicProcedure
   });
 
 export const appRouter = router({
+  privateGreeting: publicProcedure
+    .input(
+      z.object({
+        text: z.string(),
+      }),
+    )
+    .query(async (opts) => {
+      console.log('request from', opts.ctx.headers?.['x-trpc-source']);
+      return `hello ${opts.input.text} - ${Math.random()} from ${
+        opts.ctx._userIdMock
+      }`;
+    }),
+
   greeting: publicProcedure
     .input(
       z.object({

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

@@ -44,6 +44,7 @@ export const createAction = experimental_createServerActionHandler(t, {
 
     return {
       session,
+      _userIdMock: headers().get('x-trpc-user-id'),
       headers: {
         // Pass the cookie header to the API
         cookies: headers().get('cookie') ?? '',

examples/.experimental/next-app-dir/src/trpc/client.ts

@@ -1,12 +1,11 @@
 'use client';
 
-import { loggerLink } from '@trpc/client';
+import { httpBatchLink, loggerLink } from '@trpc/client';
 import {
   experimental_createActionHook,
   experimental_createTRPCNextAppDirClient,
   experimental_serverActionLink,
 } from '@trpc/next/app-dir/client';
-import { experimental_nextHttpLink } from '@trpc/next/app-dir/links/nextHttp';
 import type { AppRouter } from '~/server/routers/_app';
 import superjson from 'superjson';
 import { getUrl } from './shared';
@@ -18,9 +17,8 @@ export const api = experimental_createTRPCNextAppDirClient<AppRouter>({
         loggerLink({
           enabled: (op) => true,
         }),
-        experimental_nextHttpLink({
+        httpBatchLink({
           transformer: superjson,
-          batch: true,
           url: getUrl(),
           headers() {
             return {

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

@@ -2,25 +2,29 @@ import { loggerLink } from '@trpc/client';
 import { experimental_nextHttpLink } from '@trpc/next/app-dir/links/nextHttp';
 import { experimental_createTRPCNextAppDirServer } from '@trpc/next/app-dir/server';
 import type { AppRouter } from '~/server/routers/_app';
-import { cookies } from 'next/headers';
+import { cookies, headers } from 'next/headers';
 import superjson from 'superjson';
 import { getUrl } from './shared';
+import { createContext } from './shared-server';
 
 export const api = experimental_createTRPCNextAppDirServer<AppRouter>({
   config() {
     return {
+      createContext: () => createContext('http'),
+      contextSelector: (ctx) => [ctx.session?.user.id, ctx._userIdMock],
       links: [
         loggerLink({
-          enabled: (op) => true,
+          enabled: (_op) => true,
         }),
         experimental_nextHttpLink({
           batch: true,
           url: getUrl(),
           transformer: superjson,
-          headers() {
+          headers: () => {
             return {
               cookie: cookies().toString(),
               'x-trpc-source': 'rsc-http',
+              'x-trpc-user-id': headers().get('x-trpc-user-id') ?? undefined,
             };
           },
         }),

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

@@ -1,35 +1,40 @@
 import { loggerLink } from '@trpc/client';
 import { experimental_nextCacheLink } from '@trpc/next/app-dir/links/nextCache';
 import { experimental_createTRPCNextAppDirServer } from '@trpc/next/app-dir/server';
-import { auth } from '~/auth';
 import { appRouter } from '~/server/routers/_app';
-import { cookies } from 'next/headers';
 import superjson from 'superjson';
+import { createContext } from './shared-server';
 
 /**
  * This client invokes procedures directly on the server without fetching over HTTP.
  */
 export const api = experimental_createTRPCNextAppDirServer<typeof appRouter>({
   config() {
     return {
+      createContext: () => createContext('invoke'),
+      /**
+       * Using the `contextSelector` property we can select the specific values to be included
+       * in the `cacheTag` generation.
+       *
+       * In the following example, if the requests' path doesn't have `privateGreeting` in it
+       * (which is a private route that uses some values from the context), we return an empty array
+       * meaning that we don't use any values from the context in other routes.
+       * On the other side if it has `privateGreeting`, we specify the values from the context that we use
+       * in the `privateGreeting` procedure.
+       */
+      contextSelector: (ctx, callOpts) => {
+        if (!['privateGreeting'].includes(callOpts.path[0])) return [];
+        return [ctx.session?.user.id, ctx._userIdMock];
+      },
       links: [
         loggerLink({
-          enabled: (op) => true,
+          enabled: (_op) => true,
         }),
         experimental_nextCacheLink({
           // requests are cached for 5 seconds
           revalidate: 5,
           router: appRouter,
           transformer: superjson,
-          createContext: async () => {
-            return {
-              session: await auth(),
-              headers: {
-                cookie: cookies().toString(),
-                'x-trpc-source': 'rsc-invoke',
-              },
-            };
-          },
         }),
       ],
     };

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

@@ -0,0 +1,14 @@
+import { auth } from '~/auth';
+import { cookies, headers } from 'next/headers';
+
+export async function createContext(source: 'invoke' | 'http') {
+  return {
+    session: await auth(),
+    // Mock user id which is used for testing. If you copy this file, delete the next property.
+    _userIdMock: headers().get('x-trpc-user-id'),
+    headers: {
+      cookie: cookies().toString(),
+      'x-trpc-source': `rsc-${source}`,
+    },
+  };
+}

examples/.experimental/next-app-dir/test/server-cache.test.ts

@@ -39,3 +39,30 @@ test('server-cacheLink: revalidating should load new content', async ({
   );
   expect(nonce1).not.toBe(nonce2);
 });
+
+test('server-cacheLink: different contexts should not have a common cache', async ({
+  page,
+}) => {
+  // mocking session data
+  await page.setExtraHTTPHeaders({ 'x-trpc-user-id': 'foo' });
+  await page.goto('/rsc');
+  await page.reload();
+
+  await page.waitForSelector('text=hello i never hit a private api endpoint');
+  const nonce1 = await page.textContent(
+    'text=hello i never hit a private api endpoint',
+  );
+  await page.reload();
+  const nonce2 = await page.textContent(
+    'text=hello i never hit a private api endpoint',
+  );
+  expect(nonce1).toBe(nonce2);
+
+  // Mock new user
+  await page.setExtraHTTPHeaders({ 'x-trpc-user-id': 'bar' });
+  await page.reload();
+  const nonce3 = await page.textContent(
+    'text=hello i never hit a private api endpoint',
+  );
+  expect(nonce1).not.toBe(nonce3);
+});

examples/.experimental/next-app-dir/test/server-http.test.ts

@@ -50,3 +50,26 @@ test('server-httpLink: requests are properly separated in the cache', async ({
   await page.waitForSelector('text=hello from server1');
   await page.waitForSelector('text=hello from server2');
 });
+
+test('server-httpLink: different contexts should not have a common cache', async ({
+  page,
+}) => {
+  // mocking session data
+  await page.setExtraHTTPHeaders({ 'x-trpc-user-id': 'foo' });
+  await page.goto('/rsc');
+  await page.reload();
+
+  await page.waitForSelector('text=hello from server1 private');
+  const nonce1 = await page.textContent('text=hello from server1 private');
+
+  await page.reload();
+  const nonce2 = await page.textContent('text=hello from server1 private');
+  expect(nonce1).toBe(nonce2);
+
+  // Mock new user
+  await page.setExtraHTTPHeaders({ 'x-trpc-user-id': 'bar' });
+  await page.reload();
+
+  const nonce3 = await page.textContent('text=hello from server1 private');
+  expect(nonce1).not.toBe(nonce3);
+});

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

@@ -23,6 +23,12 @@
       "~/*": ["./src/*"]
     }
   },
-  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
+  "include": [
+    "next-env.d.ts",
+    "**/*.ts",
+    "**/*.tsx",
+    ".next/types/**/*.ts",
+    "test/.server-cache.test.ts"
+  ],
   "exclude": ["node_modules"]
 }

packages/client/src/internals/getAbortController.ts

@@ -8,11 +8,10 @@ export function getAbortController(
     return customAbortControllerImpl;
   }
 
-  // eslint-disable-next-line @typescript-eslint/prefer-optional-chain
   if (typeof window !== 'undefined' && window.AbortController) {
     return window.AbortController;
   }
-  // eslint-disable-next-line @typescript-eslint/prefer-optional-chain
+
   if (typeof globalThis !== 'undefined' && globalThis.AbortController) {
     return globalThis.AbortController;
   }

packages/client/src/links/internals/getTextDecoder.ts

@@ -7,11 +7,10 @@ export function getTextDecoder(
     return customTextDecoder;
   }
 
-  // eslint-disable-next-line @typescript-eslint/prefer-optional-chain
   if (typeof window !== 'undefined' && window.TextDecoder) {
     return new window.TextDecoder();
   }
-  // eslint-disable-next-line @typescript-eslint/prefer-optional-chain
+
   if (typeof globalThis !== 'undefined' && globalThis.TextDecoder) {
     return new globalThis.TextDecoder();
   }

packages/next/package.json

@@ -71,7 +71,6 @@
     "ssrPrepass",
     "!**/*.test.*"
   ],
-  "dependencies": {},
   "peerDependencies": {
     "@tanstack/react-query": "^5.25.0",
     "@trpc/client": "10.45.1",