DINO
DINO4w ago

How do I set header value from localStorage or Zustand in tRPC and React?

Hello, This is my tRPC client in my App.tsx:
function App(): JSX.Element {
const { token } = useAuthStore()
const [trpcClient] = useState(() =>
trpcReact.createClient({
links: [
httpBatchLink({
url: 'http://192.168.1.17:3000/trpc',
fetch(url, options) {
return fetch(url, {
...options,
credentials: 'include'
})
},
headers: () => {
return {
Authorization: `Bearer ${token || ''}`
}
}
})
],
transformer: SuperJSON
})
)
function App(): JSX.Element {
const { token } = useAuthStore()
const [trpcClient] = useState(() =>
trpcReact.createClient({
links: [
httpBatchLink({
url: 'http://192.168.1.17:3000/trpc',
fetch(url, options) {
return fetch(url, {
...options,
credentials: 'include'
})
},
headers: () => {
return {
Authorization: `Bearer ${token || ''}`
}
}
})
],
transformer: SuperJSON
})
)
The problem is if the jwt token changes, it doesn't get changed in the trpcClient unless I do something like this but I don't like it:
useEffect(() => {
if (token)
setTRPCClientZS(
trpcReactZS.createClient({
links: [
httpBatchLink({
url: 'http://192.168.1.17:3000/trpc',
fetch(url, options) {
return fetch(url, {
...options,
credentials: 'include'
})
},
headers: {
Authorization: `Bearer ${token}`
}
})
],
transformer: SuperJSON
})
)
}, [token])
useEffect(() => {
if (token)
setTRPCClientZS(
trpcReactZS.createClient({
links: [
httpBatchLink({
url: 'http://192.168.1.17:3000/trpc',
fetch(url, options) {
return fetch(url, {
...options,
credentials: 'include'
})
},
headers: {
Authorization: `Bearer ${token}`
}
})
],
transformer: SuperJSON
})
)
}, [token])
What is the best way to set jwt to trpc client?
0 Replies
No replies yetBe the first to reply to this messageJoin