tRPCttRPC
Powered by
KylarK
tRPC•3y ago•
7 replies
Kylar

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.
App Router | Next.js
Solution
I ended up creating a wrapper around
createTRPCProxyClient
createTRPCProxyClient
that grabbed the cookies and injected the authToken into trpc using
httpBatchLink
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}` } : {}),
                },
            }),
        ],
    });
};
Jump to solution
tRPCJoin
Move Fast & Break Nothing. End-to-end typesafe APIs made easy.
5,015Members
Resources
Recent Announcements

Similar Threads

Was this page helpful?

Similar Threads

Express tRPC NextJS
MugetsuMMugetsu / ❓-help
3y ago
TRPC with Nextjs 13 App Router
SpoekySSpoeky / ❓-help
3y ago
CreateCaller for router with AWS Adapters
MaxMMax / ❓-help
11mo ago
how to connect trpc server (t3 stack) from my external nextjs app?
gimbledevGgimbledev / ❓-help
3y ago