jkb Posts - tRPC

jkb

•Created by jkb on 6/11/2024 in #❓-help

Header caching

Hello all, I am sending an authorizaton token

export const TRPCProvider: React.FC<{
  children: React.ReactNode;
}> = ({ children }) => {
  const auth = useAuthentication();
  const [queryClient] = React.useState(() => new QueryClient());
  const [trpcClient] = React.useState(() =>
    api.createClient({
      transformer,
      links: [
        httpBatchLink({
          async headers() {
            const token = auth.isAuthenticated
              ? await auth.getAccessToken()
              : null;
            return {
              Authorization: token,
            };
          },
          url: `${getBaseUrl()}/api/trpc`,
        }),
      ],
    }),
  );

export const TRPCProvider: React.FC<{
  children: React.ReactNode;
}> = ({ children }) => {
  const auth = useAuthentication();
  const [queryClient] = React.useState(() => new QueryClient());
  const [trpcClient] = React.useState(() =>
    api.createClient({
      transformer,
      links: [
        httpBatchLink({
          async headers() {
            const token = auth.isAuthenticated
              ? await auth.getAccessToken()
              : null;
            return {
              Authorization: token,
            };
          },
          url: `${getBaseUrl()}/api/trpc`,
        }),
      ],
    }),
  );

The issue is the token being sent isn't updated when the authentication state of the application changes. For example, if I sign in, the authentication remains null, but if I refresh the app the token will update. Are there any ways to regenerate the header when the state changes. Thanks in advance for any help

3 replies