From 68003e9c3ebd49909af271c12934e59e9ba20165 Mon Sep 17 00:00:00 2001
From: wobsoriano <sorianorobertc@gmail.com>
Date: Thu, 24 Nov 2022 12:51:28 -0800
Subject: [PATCH] update docs

---
 .../content/1.get-started/3.tips/5.headers.md | 42 +++++++++++++++++++
 playground/pages/index.vue                    |  6 ---
 playground/plugins/trpc-client.ts             |  8 +++-
 playground/server/trpc/context.ts             |  5 ++-
 4 files changed, 52 insertions(+), 9 deletions(-)
 create mode 100644 docs/content/1.get-started/3.tips/5.headers.md

diff --git a/docs/content/1.get-started/3.tips/5.headers.md b/docs/content/1.get-started/3.tips/5.headers.md
new file mode 100644
index 0000000..1950951
--- /dev/null
+++ b/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 {}
+}
+```
diff --git a/playground/pages/index.vue b/playground/pages/index.vue
index 02516f7..07ff363 100644
--- a/playground/pages/index.vue
+++ b/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)
diff --git a/playground/plugins/trpc-client.ts b/playground/plugins/trpc-client.ts
index d432a1f..0c6b85d 100644
--- a/playground/plugins/trpc-client.ts
+++ b/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)
+          }
+        }
       })
     ]
   })
diff --git a/playground/server/trpc/context.ts b/playground/server/trpc/context.ts
index cd78756..154c728 100644
--- a/playground/server/trpc/context.ts
+++ b/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 {}
 }