Can we configure cache on a per-request basis?

Question

Hi! I’m a big fan of tRPC! I’ve been using it for quite some time.

I actually have 2 questions:
2) Can we use the Next.js cache and revalidate fetch options with tRPC on a request level?

Since Next.js 13, we have been able to set the cache behavior on a per-request basis. But for that we need to use the fetch method. I think it would be great if we could set it while using a type-safe method with tRPC.

Something like this?

const hello = await api.post.hello.query(
  { text: "from tRPC" },
  {
    next: {
      revalidate: 60,
    },
  },
);

Is this already possible? if not, is it on the roadmap?

I saw some discussions here: https://github.com/trpc/trpc/discussions/4333 and here: https://discord.com/channels/867764511159091230/1111226994047324211/1111296811764826264 about it. But from what i’ve seen it doesn’t seem to be possible yet?

1) What would be a good way to create the caller in the App Router?

This is what I’m currently doing to create the caller to use in RSC.

I’m creating a fake Request instance with the real request headers, so that I can use the request to get the next-auth token and pass it to my tRPC context.

This feels a little hacky… Does someone knows a better way?

// server.ts
export async function createCaller() {
  return appRouter.createCaller(
    await createTRPCContext({
      req: new NextRequest(
        new Request("http://dummy-url.com", {
          headers: headers(),
        }),
      ),
    }),
  );
}

This is how I’m using it.

// page.ts
const caller = await createCaller();
const hello = await caller.post.hello({ text: "from tRPC" });

Thank you in advance! 🙏

Can we configure cache on a per-request basis?

Looking for more? Join the community!