Theo's Typesafe CultTTC
Theo's Typesafe Cult8mo ago
1 reply
andy

SSR with TRPC on App Router

I have a TRPC instance that's using App Router and createTRPCNext, but when doing SSR, headers aren't passed properly, ctx.req is always undefined, and so my code always throws UNAUTHORIZED.

Here's how I'm creating it:

export const api = createTRPCNext<AppRouter>({
    ssr: true,
    ssrPrepass,
    transformer: SuperJSON,
    config({ ctx }) {
        if (typeof window === "undefined") {
            return {
                links: [
                    loggerLink({
                        enabled: (op) =>
                            process.env.NODE_ENV === "development" ||
                            (op.direction === "down" && op.result instanceof Error),
                    }),
                    httpBatchStreamLink({
                        url: `${getBaseUrl()}/api/trpc`,
                        headers: () => {
                            return ctx?.req?.headers ?? {};
                        },
                        transformer: SuperJSON,
                    }),
                ],
            };
        }

        return {
            links: [
                loggerLink({
                    enabled: (op) =>
                        process.env.NODE_ENV === "development" ||
                        (op.direction === "down" && op.result instanceof Error),
                }),
                httpBatchStreamLink({
                    transformer: SuperJSON,
                    url: `${getBaseUrl()}/api/trpc`,
                    headers: () => {
                        const headers = new Headers();
                        headers.set("x-trpc-source", "nextjs-react");

                        return headers;
                    },
                }),
            ],
        };
    },
});


I'm gonna admit, I haven't the slightest clue how to even start trying to fix this.
Was this page helpful?