diff --git a/playground/plugins/trpc-client.ts b/playground/plugins/trpc-client.ts index eb9a7a4..51ab4fb 100644 --- a/playground/plugins/trpc-client.ts +++ b/playground/plugins/trpc-client.ts @@ -3,8 +3,7 @@ import { createTRPCNuxtProxyClient } from 'trpc-nuxt/client' import superjson from 'superjson' import type { AppRouter } from '~~/server/trpc/routers' -export default defineNuxtPlugin(() => { - +export default defineNuxtPlugin((nuxtApp) => { const client = createTRPCNuxtProxyClient({ transformer: superjson, links: [ @@ -16,6 +15,29 @@ export default defineNuxtPlugin(() => { }), httpBatchLink({ url: 'http://localhost:3000/api/trpc', + /** + * Set custom request headers on every request from tRPC + * @link https://trpc.io/docs/ssr + */ + headers() { + if (nuxtApp.ssrContext?.event?.req) { + // To use SSR properly, you need to forward the client's headers to the server + // This is so you can pass through things like cookies when we're server-side rendering + + // If you're using Node 18, omit the "connection" header + const { + // eslint-disable-next-line @typescript-eslint/no-unused-vars + connection: _connection, + ...headers + } = nuxtApp.ssrContext.event.req.headers + return { + ...headers, + // Optional: inform server that it's an SSR request + 'x-ssr': '1', + } + } + return {} + }, }), ], }) diff --git a/playground/server/trpc/index.ts b/playground/server/trpc/index.ts index e6876fe..50e3559 100644 --- a/playground/server/trpc/index.ts +++ b/playground/server/trpc/index.ts @@ -3,7 +3,7 @@ import superjson from 'superjson' import type { Context } from './context' const t = initTRPC.context().create({ - transformer: superjson + transformer: superjson, }) /**