update playground

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<AppRouter>({
     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 {}
+        },
       }),
     ],
   })

playground/server/trpc/index.ts

@@ -3,7 +3,7 @@ import superjson from 'superjson'
 import type { Context } from './context'
 
 const t = initTRPC.context<Context>().create({
-  transformer: superjson
+  transformer: superjson,
 })
 
 /**