cha0sg0d
cha0sg0d•6mo ago

Efficient way to use tRPC client with auth headers from secure storage

Wondering if anyone has a recommended pattern on caching the deviceId / authHeader using a React Context instead of fetching it async on each request. Thanks! 
export const trpc = createTRPCClient<AppRouter>({
  links: [
    httpBatchLink({
      url: getServerUrl(),
      async headers() {
        const authorization = await getAuthHeader()
        const deviceId = await createOrGetDeviceIdFromStore()
        return {
          authorization,
          'x-device-id': deviceId,
        }
      }
    })
  ]
})
export const trpc = createTRPCClient<AppRouter>({
  links: [
    httpBatchLink({
      url: getServerUrl(),
      async headers() {
        const authorization = await getAuthHeader()
        const deviceId = await createOrGetDeviceIdFromStore()
        return {
          authorization,
          'x-device-id': deviceId,
        }
      }
    })
  ]
})
2 Replies
Alex / KATT 🐱
Alex / KATT 🐱•6mo ago
You could do an auth link before That could cache it Look at custom links
cha0sg0d
cha0sg0d•5mo ago
I tried to do this and was unable to make an async call in the auth link to fetch the headers. any advice? and could you possible give a more fleshed out example of how this would work? Thanks!
More Posts
Using tRPC with Expo API Routes feature?Is there a possibility to merge "tRPC Express Adapter" with "Expo API Route Express Deployment"? tRTRPC not working on multi tenant appEverything works on localhost. When I deploy it on the vercel None of the mutations work. Every qTRPCClientError: Unable to transform response from serverHi 🙂 I've just started - so nothing more than boiler plate code but for some reason it doesn't workoptimistic updates tRPC v11 + TanStack Query v5I am reading https://tanstack.com/query/latest/docs/framework/react/guides/optimistic-updates#if-theT3 Stack TRPC used in Server ActionsIs there issues using the server calls of TRPC in a nextjs server action? I am seeing weird issues wHow do I setup subscriptions with websockets in Next.js 14 app router?All I've found were some older examples for the pages router which for me were not very understandabWhy is my tRPC + Next 14 (app router) data fetching pattern not refreshing the UI?### Goals of this post: - to know why my UI is not refreshing after i mutate the backend - tUsing tRPC in Next.js MiddlewareHello, I am quite new to tRPC so forgive me if I'm asking something quite obvious/dumb. I was introneed help refreshing websocketWe currently are using tRPC w/ react and websockets. We’re using the URL of the websocket as the autrouter is crashing when in separate fileWhen i use router merging and have e.g users router in separate file, i import router from trpc.ts a