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

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

@@ -1,20 +1,20 @@
-import { loggerLink } from '@trpc/client';
-import { experimental_nextHttpLink } from '@trpc/next/app-dir/links/nextHttp';
+import { httpBatchLink, loggerLink } from '@trpc/client';
 import { experimental_createTRPCNextAppDirServer } from '@trpc/next/app-dir/server';
 import type { AppRouter } from '~/server/routers/_app';
 import { cookies } 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,
  links: [
  loggerLink({
- enabled: (op) => true,
+ enabled: (_op) => true,
  }),
- experimental_nextHttpLink({
- batch: true,
+ httpBatchLink({
  url: getUrl(),
  transformer: superjson,
  headers() {

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

@@ -1,17 +1,17 @@
 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,
  links: [
  loggerLink({
  enabled: (op) => true,
@@ -21,15 +21,8 @@ export const api = experimental_createTRPCNextAppDirServer<typeof appRouter>({
  revalidate: 5,
  router: appRouter,
  transformer: superjson,
- createContext: async () => {
- return {
- session: await auth(),
- headers: {
- cookie: cookies().toString(),
- 'x-trpc-source': 'rsc-invoke',
- },
- };
- },
+ // include the user id in the cache key
+ cacheContext: (ctx) => [ctx.session?.user.id],
  }),
  ],
  };

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

@@ -0,0 +1,12 @@
+import { auth } from '~/auth';
+import { cookies } from 'next/headers';
+
+export async function createContext() {
+ return {
+ session: await auth(),
+ headers: {
+ cookie: cookies().toString(),
+ 'x-trpc-source': 'rsc-invoke',
+ },
+ };
+}

packages/client/src/internals/TRPCUntypedClient.ts

@@ -6,6 +6,7 @@ import { observableToPromise, share } from '@trpc/server/observable';
 import type {
  AnyRouter,
  InferrableClientTypes,
+ inferRouterContext,
  TypeError,
 } from '@trpc/server/unstable-core-do-not-import';
 import { createChain } from '../links/internals/createChain';
@@ -35,10 +36,15 @@ export interface TRPCSubscriptionObserver<TValue, TError> {
 }
 
 /** @internal */
-export type CreateTRPCClientOptions<TRouter extends InferrableClientTypes> = {
- links: TRPCLink<TRouter>[];
- transformer?: TypeError<'The transformer property has moved to httpLink/httpBatchLink/wsLink'>;
-};
+export type CreateTRPCClientOptions<TInferrable extends InferrableClientTypes> =
+ {
+ links: TRPCLink<TInferrable>[];
+ transformer?: TypeError<'The transformer property has moved to httpLink/httpBatchLink/wsLink'>;
+ } & (TInferrable extends AnyRouter
+ ? {
+ createContext?: () => Promise<inferRouterContext<TInferrable>>;
+ }
+ : {});
 
 /** @internal */
 export type UntypedClientProperties =
@@ -53,13 +59,13 @@ export type UntypedClientProperties =
 
 export class TRPCUntypedClient<TRouter extends AnyRouter> {
  private readonly links: OperationLink<AnyRouter>[];
- public readonly runtime: TRPCClientRuntime;
+ public readonly runtime: TRPCClientRuntime<TRouter>;
  private requestId: number;
 
  constructor(opts: CreateTRPCClientOptions<TRouter>) {
  this.requestId = 0;
 
- this.runtime = {};
+ this.runtime = { createContext: opts.createContext } as any;
 
  // Initialize the links
  this.links = opts.links.map((link) => link(this.runtime));

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

@@ -23,7 +23,7 @@ import { getUrl, resolveHTTPLinkOptions } from './httpUtils';
  */
 export type RequesterFn<TOptions extends HTTPBatchLinkOptions<AnyRootTypes>> = (
  requesterOpts: ResolvedHTTPLinkOptions & {
- runtime: TRPCClientRuntime;
+ runtime: TRPCClientRuntime<AnyRouter>;
  type: ProcedureType;
  opts: TOptions;
  },

packages/client/src/links/types.ts

@@ -1,6 +1,8 @@
 import type { Observable, Observer } from '@trpc/server/observable';
 import type {
+ AnyRouter,
  InferrableClientTypes,
+ inferRouterContext,
  TRPCResultMessage,
  TRPCSuccessResponse,
 } from '@trpc/server/unstable-core-do-not-import';
@@ -56,9 +58,13 @@ export type TRPCFetch = (
  options?: RequestInit,
 ) => Promise<ResponseEsque>;
 
-export interface TRPCClientRuntime {
- // nothing here anymore
-}
+export type TRPCClientRuntime<
+ TInferrable extends InferrableClientTypes | never = never,
+> = TInferrable extends AnyRouter
+ ? {
+ createContext?: () => Promise<inferRouterContext<TInferrable>>;
+ }
+ : {};
 
 /**
  * @internal
@@ -104,5 +110,5 @@ export type OperationLink<
  * @public
  */
 export type TRPCLink<TInferrable extends InferrableClientTypes> = (
- opts: TRPCClientRuntime,
+ opts: TRPCClientRuntime<TInferrable>,
 ) => OperationLink<TInferrable>;

packages/next/package.json

@@ -46,11 +46,6 @@
  "require": "./dist/app-dir/links/nextCache.js",
  "default": "./dist/app-dir/links/nextCache.js"
  },
- "./app-dir/links/nextHttp": {
- "import": "./dist/app-dir/links/nextHttp.mjs",
- "require": "./dist/app-dir/links/nextHttp.js",
- "default": "./dist/app-dir/links/nextHttp.js"
- },
  "./app-dir/server": {
  "import": "./dist/app-dir/server.mjs",
  "require": "./dist/app-dir/server.js",
@@ -71,7 +66,6 @@
  "ssrPrepass",
  "!**/*.test.*"
  ],
- "dependencies": {},
  "peerDependencies": {
  "@tanstack/react-query": "^5.0.0",
  "@trpc/client": "10.45.1",

packages/next/rollup.config.ts

@@ -7,7 +7,6 @@ export const input = [
  'src/app-dir/server.ts',
  'src/app-dir/client.ts',
  'src/app-dir/links/nextCache.ts',
- 'src/app-dir/links/nextHttp.ts',
  'src/ssrPrepass.ts',
 ];
 

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

@@ -25,7 +25,7 @@ type QueryResult = {
 // ts-prune-ignore-next
 export function experimental_createTRPCNextAppDirClient<
  TRouter extends AnyRouter,
->(opts: CreateTRPCNextAppRouterOptions<TRouter>) {
+>(opts: Omit<CreateTRPCNextAppRouterOptions<TRouter>, 'createContext'>) {
  const client = createTRPCUntypedClient<TRouter>(opts.config());
  // const useProxy = createUseProxy<TRouter>(client);
 

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

@@ -18,7 +18,11 @@ import { generateCacheTag } from '../shared';
 
 type NextCacheLinkOptions<TRouter extends AnyRouter> = {
  router: TRouter;
- createContext: () => Promise<inferRouterContext<TRouter>>;
+ /**
+ * define which values from the context should be considered into the cache
+ * key
+ */
+ cacheContext: ((ctx: inferRouterContext<TRouter>) => any[]) | undefined;
  /** how many seconds the cache should hold before revalidating */
  revalidate?: number | false;
 } & TransformerOptions<inferClientTypes<TRouter>>;
@@ -28,12 +32,16 @@ export function experimental_nextCacheLink<TRouter extends AnyRouter>(
  opts: NextCacheLinkOptions<TRouter>,
 ): TRPCLink<TRouter> {
  const transformer = getTransformer(opts.transformer);
- return () =>
- ({ op }) =>
+ return ({ createContext }) => {
+ if (!createContext)
+ throw new Error(
+ '`createContext` is required to be passed to use `experimental_nextCacheLink`.',
+ );
+
+ return ({ op }) =>
  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' ||
@@ -42,9 +50,14 @@ export function experimental_nextCacheLink<TRouter extends AnyRouter>(
  : undefined;
  const revalidate = requestRevalidate ?? opts.revalidate ?? false;
 
- const promise = opts
- .createContext()
+ const promise = createContext()
  .then(async (ctx) => {
+ const cacheTag = await generateCacheTag(
+ path,
+ input,
+ opts.cacheContext?.(ctx),
+ );
+
  const callProc = async (_cachebuster: string) => {
  // // _cachebuster is not used by us but to make sure
  // // that calls with different tags are properly separated
@@ -84,4 +97,5 @@ export function experimental_nextCacheLink<TRouter extends AnyRouter>(
  observer.error(TRPCClientError.from(cause));
  });
  });
+ };
 }

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

@@ -41,7 +41,7 @@ export function experimental_createTRPCNextAppDirServer<
  return createTRPCUntypedClient(config);
  });
 
- return createRecursiveProxy((callOpts) => {
+ return createRecursiveProxy(async (callOpts) => {
  // lazily initialize client
  const client = getClient();
 
@@ -50,7 +50,12 @@ export function experimental_createTRPCNextAppDirServer<
  const action = pathCopy.pop()!;
  const procedurePath = pathCopy.join('.');
  const procedureType = clientCallTypeToProcedureType(action);
- const cacheTag = generateCacheTag(procedurePath, callOpts.args[0]);
+
+ const cacheTag = await generateCacheTag(
+ procedurePath,
+ callOpts.args[0],
+ await client.runtime.createContext?.(),
+ );
 
  if (action === 'revalidate') {
  revalidateTag(cacheTag);