wise-white

Is there a way to pass headers in router.tsx?

Hey there! I am using the Tanstack Start tRPC example: https://github.com/trpc/trpc/tree/next/examples/tanstack-start Up until now it is working very well! However to make it work in my usecase I would need to pass the headers to

const trpcClient = trpc.createClient({
    links: [
      unstable_httpBatchStreamLink({
        transformer: superjson,
        url: getUrl(),
        headers: HERE <----------------------
      }),
    ],
  });

const trpcClient = trpc.createClient({
    links: [
      unstable_httpBatchStreamLink({
        transformer: superjson,
        url: getUrl(),
        headers: HERE <----------------------
      }),
    ],
  });

Is there a way to do so in router.tsx ?

GitHub

trpc/examples/tanstack-start at next · trpc/trpc

🧙‍♀️ Move Fast and Break Nothing. End-to-end typesafe APIs made easy. - trpc/trpc

9 Replies

deep-jade•8mo ago

which headers exactly?

wise-whiteOP•8mo ago

Thank you for getting back to me Manuel! For now I would only need the cookie header

deep-jade•8mo ago

and where does the value come from? i currently dont see how this relates to start do you want to do this on the server?

wise-whiteOP•8mo ago

I am having a separate backend. So I'd need to pass the cookies from start to tRPC to parse them on the backend. For authentication etc.

deep-jade•8mo ago

during SSR? there is a `getCookie´ function exposed by start

wise-whiteOP•8mo ago

Indeed

deep-jade•8mo ago

this let's you read the cookies on the server

wise-whiteOP•8mo ago

Thank you so much! I ended up using import { getHeaders } from '@tanstack/start/server'; to pass all the headers. Did not expect it to work so smoothly. Appreciate the help and the amazing software you are maintaining! If someone is having a similar issue and wants to pass the headers make sure to add the following code when passing the headers:

const getServerHeaders = async () => {
  if (import.meta.env.SSR) {
    const { getHeaders } = await import('@tanstack/start/server');
    return getHeaders();
  }
  return {};
};

const getServerHeaders = async () => {
  if (import.meta.env.SSR) {
    const { getHeaders } = await import('@tanstack/start/server');
    return getHeaders();
  }
  return {};
};

Otherwise your build will fail.

deep-jade•8mo ago

just call it from a server function, then it's much simpler

Gaming

Programming

Is there a way to pass headers in router.tsx?

Did you find this page helpful?