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,
        }
      }
    })
  ]
})

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,
        }
      }
    })
  ]
})

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

Similar Threads

Similar Threads

Similar Threads