Kylar•7mo ago

How can i createCaller from a NextJs App Router if my server uses express tRPC adapter?

I'm using the express adapter for the server side of tRPC, and the client is a NextJS AppRouter app. I was getting to setting up the createCaller helper to be able to call from RSC, but createCaller needs the context, which for the express adapter is the request and response objects. The issue here is that I don't actually have the request/response objects in NextJS App router by design (https://nextjs.org/docs/app#how-can-i-access-the-request-object-in-a-layout), which leaves me unsure about how to move forward Is tRPC unusable with this setup? Do I need a proxy adapter or is there some piece that I am missing?

App Router | Next.js

Use the new App Router with Next.js' and React's latest features, including Layouts, Server Components, Suspense, and more.

Solution:

I ended up creating a wrapper around createTRPCProxyClient that grabbed the cookies and injected the authToken into trpc using httpBatchLink like so: ```export const createTRPCServerClient = async () => { const authToken = ""; // Grab from cookies return createTRPCProxyClient<AppRouter>({...

Jump to solution

3 Replies

BillyBob•7mo ago

You might not need the createCaller look how its done here: https://github.com/juliusmarminge/acme-corp/ Do you have separated servier and client ?

Solution

Kylar•7mo ago

I ended up creating a wrapper around createTRPCProxyClient that grabbed the cookies and injected the authToken into trpc using httpBatchLink like so:

export const createTRPCServerClient = async () => {
    const authToken = ""; // Grab from cookies
    return createTRPCProxyClient<AppRouter>({
        transformer: superjson,
        links: [
            httpBatchLink({
                url: "http://your-url.com/api/trpc",
                headers: {
                    ...(authToken ? { authorization: `Bearer ${authToken}` } : {}),
                },
            }),
        ],
    });
};

export const createTRPCServerClient = async () => {
    const authToken = ""; // Grab from cookies
    return createTRPCProxyClient<AppRouter>({
        transformer: superjson,
        links: [
            httpBatchLink({
                url: "http://your-url.com/api/trpc",
                headers: {
                    ...(authToken ? { authorization: `Bearer ${authToken}` } : {}),
                },
            }),
        ],
    });
};

BillyBob•7mo ago

You should be able to just pass all headers like this: headers: Object.fromEntries(headers()), import { headers } from 'next/headers' make sure you have 'use server' at the top