update docs

docs/content/1.get-started/3.tips/5.headers.md

@@ -0,0 +1,42 @@
+---
+title: Headers
+---
+
+# Headers
+
+We can use the built-in `useRequestHeaders` to access/pass headers to any future internal requests during SSR.
+
+```ts [plugins/client.ts]
+import { httpBatchLink, createTRPCProxyClient } from '@trpc/client'
+import type { AppRouter } from '@/server/trpc/routers'
+
+export default defineNuxtPlugin(() => {
+  const headers = useRequestHeaders()
+
+  const client = createTRPCProxyClient<AppRouter>({
+    links: [
+      httpBatchLink({
+        headers() {
+          return {
+            ...unref(headers)
+          }
+        }
+      }),
+    ],
+  })
+
+  return {
+    provide: {
+      client,
+    },
+  }
+})
+```
+
+```ts [server/trpc/context.ts]
+export function createContext (event: H3Event) {
+  console.log('cookies', parseCookies(event))
+
+  return {}
+}
+```

playground/pages/index.vue

@@ -4,12 +4,6 @@ import type { inferRouterOutputs } from '@trpc/server';
 import type { AppRouter } from '~~/server/trpc/routers';
 
 const { $client } = useNuxtApp()
-// const headers = useClientHeaders()
-
-// const addHeader = () => {
-//   headers.value.authorization = 'Bearer abcdefghijklmnop'
-//   console.log(headers.value)
-// }
 
 const addTodo = async () => {
   const title = Math.random().toString(36).slice(2, 7)

playground/plugins/trpc-client.ts

@@ -3,6 +3,7 @@ import superjson from 'superjson'
 import type { AppRouter } from '~~/server/trpc/routers'
 
 export default defineNuxtPlugin(() => {
+  const headers = useRequestHeaders()
   const client = createTRPCProxyClient<AppRouter>({
     transformer: superjson,
     links: [
@@ -13,7 +14,12 @@ export default defineNuxtPlugin(() => {
           (opts.direction === 'down' && opts.result instanceof Error)
       }),
       httpBatchLink({
-        url: 'http://localhost:3000/api/trpc'
+        url: 'http://localhost:3000/api/trpc',
+        headers () {
+          return {
+            ...unref(headers)
+          }
+        }
       })
     ]
   })

playground/server/trpc/context.ts

@@ -9,9 +9,10 @@ export type Context = inferAsyncReturnType<typeof createContext>
  * @link https://trpc.io/docs/context
  */
 export function createContext (
-  opts: H3Event
+  event: H3Event
 ) {
   // for API-response caching see https://trpc.io/docs/caching
+  console.log('cookies', parseCookies(event))
   
   return {}
 }