cha0sg0d
cha0sg0dβ€’5mo 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 πŸ±β€’5mo ago
You could do an auth link before That could cache it Look at custom links
cha0sg0d
cha0sg0dβ€’4mo 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!