jkb•4mo ago

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

1 Reply

jkb•4mo ago

My solution is to use a react useEffect to update the trpcClient

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

  return (
    <api.Provider client={trpcClient} queryClient={queryClient}>
      <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
    </api.Provider>
  );
};

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

  return (
    <api.Provider client={trpcClient} queryClient={queryClient}>
      <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
    </api.Provider>
  );
};

This feels wrong, but it is working. is there a better way of doing this?