Y0z64•10mo ago

Get auth token from context when defining httpBatchLink

Im setting up an ApiProvider for react query and I want to get the authorization token for the Authorization header from trpc context since my session is stored there. My api is defined here

import { type AppRouter } from "../server/api/root";

//** Client provider added for app router compatility **/
export const api = createTRPCReact<AppRouter>({})

import { type AppRouter } from "../server/api/root";

//** Client provider added for app router compatility **/
export const api = createTRPCReact<AppRouter>({})

And this is the definition of my apiProvider

const token = ""

/** A set of type-safe react-query hooks for your tRPC API.
 * Modified from createTRPCReact to be used with react-query giv3, for app router
 *
 * @see https://trpc.io/docs/react-query
 */
export default function APIProvider({
  children,
}: {
  children: React.ReactNode;
}) {
  const [queryClient] = useState(() => new QueryClient());
  const [apiClient] = useState(() =>
    api.createClient({
      /**
       * Links used to determine request flow from client to server.
       *
       * @see https://trpc.io/docs/links
       */
      links: [
        loggerLink({
          enabled: (opts) =>
            process.env.NODE_ENV === "development" ||
            (opts.direction === "down" && opts.result instanceof Error),
        }),
        httpBatchLink({
          url: `${getBaseUrl()}/api/trpc`,
          headers() {
            return {
              Authorization: `Bearer ${token ?? undefined}`,
            };
          },
        }),
      ],
      transformer: superjson,
    }),
  );
  return (
    <api.Provider client={apiClient} queryClient={queryClient}>
      <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
    </api.Provider>
  );
}

const token = ""

/** A set of type-safe react-query hooks for your tRPC API.
 * Modified from createTRPCReact to be used with react-query giv3, for app router
 *
 * @see https://trpc.io/docs/react-query
 */
export default function APIProvider({
  children,
}: {
  children: React.ReactNode;
}) {
  const [queryClient] = useState(() => new QueryClient());
  const [apiClient] = useState(() =>
    api.createClient({
      /**
       * Links used to determine request flow from client to server.
       *
       * @see https://trpc.io/docs/links
       */
      links: [
        loggerLink({
          enabled: (opts) =>
            process.env.NODE_ENV === "development" ||
            (opts.direction === "down" && opts.result instanceof Error),
        }),
        httpBatchLink({
          url: `${getBaseUrl()}/api/trpc`,
          headers() {
            return {
              Authorization: `Bearer ${token ?? undefined}`,
            };
          },
        }),
      ],
      transformer: superjson,
    }),
  );
  return (
    <api.Provider client={apiClient} queryClient={queryClient}>
      <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
    </api.Provider>
  );
}

Is there any way to pass the context to the createClient function? or al least just get the context in any way so I can assign the token value to the one in context

0 Replies

No replies yetBe the first to reply to this messageJoin