Theo's Typesafe Cult•15mo ago

SSR with tRPC (9.x) works for one query but not the other even though they're practically identical

I've got a component where I have two querys, one is usually faster than the other but I want to run both for side effects on the server. I use them like this:

const Gallery = () => {
  const { data: fastImages, refetch: fastRefetch, isLoading, isFetching } = trpc.useQuery(
    ["gallery.getAllS3ThumbnailsFast", { categoryName: "Gallery" }],
    { context: { skipBatch: true }}
  );
  const { data: slowImages, refetch: slowRefetch } = trpc.useQuery(
    ["gallery.getAllS3Thumbnails", { categoryName: "Gallery" }],
    { context: { skipBatch: true }}
  );

const Gallery = () => {
  const { data: fastImages, refetch: fastRefetch, isLoading, isFetching } = trpc.useQuery(
    ["gallery.getAllS3ThumbnailsFast", { categoryName: "Gallery" }],
    { context: { skipBatch: true }}
  );
  const { data: slowImages, refetch: slowRefetch } = trpc.useQuery(
    ["gallery.getAllS3Thumbnails", { categoryName: "Gallery" }],
    { context: { skipBatch: true }}
  );

"gallery.getAllS3Thumbnails" is properly SSRed with the correct headers beting set, but the "gallery.getAllS3ThumbnailsFast" is not. They're pretty much the same on the server except that the faster query skips some fetches to other services. Does anyone have a clue what could be going on?

1 Reply

Vincent UdénOP•15mo ago

Some additional info: In a preview environment on vercel I can see that "getAllS3ThumbnailsFast" is ran twice when SSR is used, however it is missing the "x-ssr" header which I add in my _app.tsx. This header shows up for "getAllS3Thumbnails". Also, slowImages is populated on initial page load which I can see in a useEffect with [] as the dependency array. fastImages however, is not Now it actually seems like I'm only getting SSR on "getAllS3Thumbnails". I've also tried toggling batching but that didn't change anything

Gaming

Programming

SSR with tRPC (9.x) works for one query but not the other even though they're practically identical