1 reply

SSR with TRPC on App Router

I have a TRPC instance that's using App Router and

createTRPCNext

createTRPCNext

, but when doing SSR, headers aren't passed properly,

ctx.req

ctx.req

is always undefined, and so my code always throws

UNAUTHORIZED

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;
                    },
                }),
            ],
        };
    },
});

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.

TTC

Theo's Typesafe Cult•10mo ago•

1 reply

andy

SSR with TRPC on App Router

I have a TRPC instance that's using App Router and

createTRPCNext

createTRPCNext

, but when doing SSR, headers aren't passed properly,

ctx.req

ctx.req

is always undefined, and so my code always throws

UNAUTHORIZED

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;
                    },
                }),
            ],
        };
    },
});

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.

SSR with TRPC on App Router

SSR with TRPC on App Router

Similar Threads

Similar Threads

Similar Threads