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

packages/next/package.json

@@ -71,7 +71,6 @@
     "ssrPrepass",
     "!**/*.test.*"
   ],
-  "dependencies": {},
   "peerDependencies": {
     "@tanstack/react-query": "^5.0.0",
     "@trpc/client": "10.45.1",
@@ -112,5 +111,8 @@
   },
   "funding": [
     "https://trpc.io/sponsor"
-  ]
+  ],
+  "dependencies": {
+    "@noble/hashes": "^1.3.3"
+  }
 }

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

@@ -18,6 +18,11 @@ import { generateCacheTag } from '../shared';
 
 type NextCacheLinkOptions<TRouter extends AnyRouter> = {
   router: TRouter;
+  /**
+   * define which values from the context should be considered into the cache
+   * key
+   */
+  cacheContext?: (ctx: inferRouterContext<TRouter>) => any[];
   createContext: () => Promise<inferRouterContext<TRouter>>;
   /** how many seconds the cache should hold before revalidating */
   revalidate?: number | false;
@@ -33,18 +38,22 @@ export function experimental_nextCacheLink<TRouter extends AnyRouter>(
       observable((observer) => {
         const { path, input, type, context } = op;
 
-        const cacheTag = generateCacheTag(path, input);
-        // Let per-request revalidate override global revalidate
-        const requestRevalidate =
-          typeof context['revalidate'] === 'number' ||
-          context['revalidate'] === false
-            ? context['revalidate']
-            : undefined;
-        const revalidate = requestRevalidate ?? opts.revalidate ?? false;
-
         const promise = opts
           .createContext()
           .then(async (ctx) => {
+            const cacheTag = generateCacheTag(
+              path,
+              input,
+              opts.cacheContext?.(ctx),
+            );
+            // Let per-request revalidate override global revalidate
+            const requestRevalidate =
+              typeof context['revalidate'] === 'number' ||
+              context['revalidate'] === false
+                ? context['revalidate']
+                : undefined;
+            const revalidate = requestRevalidate ?? opts.revalidate ?? false;
+
             const callProc = async (_cachebuster: string) => {
               //   // _cachebuster is not used by us but to make sure
               //   // that calls with different tags are properly separated

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

@@ -1,3 +1,4 @@
+import { sha256 } from '@noble/hashes/sha256';
 import type {
   CreateTRPCClientOptions,
   Resolver,
@@ -86,10 +87,12 @@ export interface CreateTRPCNextAppRouterOptions<TRouter extends AnyRouter> {
 /**
  * @internal
  */
-export function generateCacheTag(procedurePath: string, input: any) {
-  return input
-    ? `${procedurePath}?input=${JSON.stringify(input)}`
-    : procedurePath;
+export function generateCacheTag(
+  procedurePath: string,
+  input: any,
+  context?: any,
+) {
+  return `${procedurePath}?hash=${sha256(JSON.stringify({ input, context }))}`;
 }
 
 export function isFormData(value: unknown): value is FormData {