Get auth token from context when defining httpBatchLink

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

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

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>
  );
}