diff --git a/README.md b/README.md index 8ad8789..89a7db8 100644 --- a/README.md +++ b/README.md @@ -99,6 +99,21 @@ const { }) ``` +## useClientHeaders + +A composable that lets you add additional properties to pass to the tRPC Client. It uses [`useStorage`] from [@vueuse/core](https://vueuse.org/core/usestorage). + +```ts +const headers = useClientHeaders() + +const { data: token } = await useAsyncQuery(['auth.login', { username, password }]) + +headers.value.Authorization = `Bearer ${token}` + +// All client calls will now include the Authorization header. +// For SSR, please follow this until I found a solution https://github.com/trpc/trpc/discussions/1686 +``` + ## Options trpc-nuxt accepts the following options exposed under `~/server/trpc/index.ts`: diff --git a/src/runtime/client.ts b/src/runtime/client.ts index 03126a1..17d7de2 100644 --- a/src/runtime/client.ts +++ b/src/runtime/client.ts @@ -84,6 +84,6 @@ export function useClient(): TRPCClient { * @see https://github.com/trpc/trpc/discussions/1686 * @param initialValue */ -export function useClientHeaders(initialValue: MaybeRef>) { +export function useClientHeaders(initialValue?: MaybeRef>) { return useStorage('trpc-nuxt-header', initialValue || {}) }