feat: add composable for custom client headers

src/runtime/client.ts

@@ -8,6 +8,8 @@ import type {
 import type { ProcedureRecord, inferHandlerInput, inferProcedureInput, inferProcedureOutput } from '@trpc/server'
 import type { TRPCClient, TRPCClientErrorLike } from '@trpc/client'
 import { objectHash } from 'ohash'
+import type { MaybeRef } from '@vueuse/core'
+import { useStorage } from '@vueuse/core'
 import { useAsyncData, useNuxtApp, useState } from '#app'
 import type { router } from '~/server/trpc'
 
@@ -27,6 +29,13 @@ export type TError = TRPCClientErrorLike<AppRouter>
 
 export type TQueryValues = inferProcedures<AppRouter['_def']['queries']>
 
+/**
+ * Additional header properties to pass to tRPC client.
+ *
+ * @see https://trpc.io/docs/vanilla
+ * @param pathAndInput tRPC client path and input.
+ * @param options Options to pass to useAsyncData.
+ */
 export async function useAsyncQuery<
   TPath extends keyof TQueryValues & string,
   TOutput extends TQueryValues[TPath]['output'] = TQueryValues[TPath]['output'],
@@ -59,7 +68,22 @@ export async function useAsyncQuery<
   } as any
 }
 
+/**
+ * tRPC Client.
+ *
+ * @see https://trpc.io/docs/vanilla
+ */
 export function useClient(): TRPCClient<AppRouter> {
   const { $client } = useNuxtApp()
   return $client
 }
+
+/**
+ * Additional header properties to pass to tRPC client.
+ *
+ * @see https://github.com/trpc/trpc/discussions/1686
+ * @param initialValue
+ */
+export function useClientHeaders(initialValue: MaybeRef<Record<string, any>>) {
+  return useStorage('trpc-nuxt-header', initialValue || {})
+}

src/runtime/plugin.ts

@@ -4,18 +4,26 @@ import type { router } from '~/server/trpc'
 
 declare type AppRouter = typeof router
 
-export default defineNuxtPlugin(() => {
+export default defineNuxtPlugin((nuxtApp) => {
   const config = useRuntimeConfig().public.trpc
+  const headers = useRequestHeaders()
   const client = trpc.createTRPCClient<AppRouter>({
     url: `${config.baseURL}${config.trpcURL}`,
-    headers: useRequestHeaders(),
+    headers: () => {
+      let otherHeaders = {}
+      if (!process.server) {
+        const key = 'trpc-nuxt-header'
+        otherHeaders = JSON.parse(localStorage.getItem(key) || JSON.stringify({}))
+      }
+
+      return {
+        ...otherHeaders,
+        ...headers,
+      }
+    },
   })
 
-  return {
-    provide: {
-      client,
-    },
-  }
+  nuxtApp.provide('client', client)
 })
 
 declare module '#app' {