Help with large image streaming

[ludersGabriel]

First, sorry for the english mistakes, its not my first language..

stack info (running it all with bun in a monorepo setup)

• Frontend: vite + tanstack query + tanstack router
• Backend: hono api + drizzle + psql + minio for storage
• app: a PWA gym app that im building for some friends. I use tanstack router to mimic tabs in the frontend and react query to control the fetches for my hono api via mainly the HonoRPC.

Hey! I've been building a user feed lately and need help understanding somethings. I've manage to make upload and download work just fine going from react -> hono -> minio and from minio -> back -> react. For the download, i had to use fetch (as explained bellow) because couldnt find a way to consume the stream using the RPC.

Ive got a query that returns to me all the objects of the user feed with a id of the content (image or video) related to a given post. Then, in a separate component, i use that id do download the content and display in the frontend:

function RenderThumb({ id }: { id: string }) {
  const { data, isPending } = useDownload(id)

  if (isPending) {
    return (
      <Loader2Icon className="animate-spin" />
    )
  }

  if (!data) {
    return (
      <div>erro</div>
    )
  }

  return (
    <img
      loading="lazy"
      src={data.url}
      alt="Happy New Year with eucalyptus leaves"
      className="h-44 w-full object-cover transition-transform duration-300 group-hover:scale-105"
    />
  )
}

Now, the problem im facing is that i couldnt find a way to use the stream properly. My backend is returning the readable stream that minio gives it for that given contendId, and in the frontend, the way i found to use it, following a MDN guide, was converting it into a blob and then generating a link to it with the given function:

export const downloadQueryOptions = (id: ContentModel["id"]) => queryOptions({
  queryKey: ["download", id],
  queryFn: () => getDownload(id),
})

export function useDownload(id: ContentModel["id"]) {
  return useQuery(downloadQueryOptions(id))
}


export async function getDownload(id: ContentModel["id"]) {
  const url = `/api/v1/content/download/${id}`


  const resp = await fetch(url, {
    headers: {
      Authorization: `Bearer ${getLocalToken() ?? ""}`,
    },
  }).then(response => response.body).then((body) => {
    const reader = body?.getReader()


    return new ReadableStream({
      start(controller) {
        function pump(): Promise<void> | undefined {
          return reader?.read().then(({ done, value }) => {
            if (done) {
              controller.close()
              return
            }
            controller.enqueue(value)
            return pump()
          })
        }


        return pump()
      },
    })
  }).then(stream => new Response(stream)).then(response => response.blob()).then(blob => URL.createObjectURL(blob))


  return {
    url: resp,
  }
}

It works very well for small images, but badly for larger ones. I had to implement a whatsapp like resizing to circumvent this issue and, although thats totally fine, im looking for a better way of doing this. Maybe any of you can point me in the right direction, please? Just some docs would be enough.

Now, still on the large images issue, i notice that when I make a request that fetches one of these images, all subsequent requests (be for images or anything else, really) kinda go on a pending state until the large image fetch finishes. This mainly happened when I was throttling the network to see how long it would take to download everything and be able to see the other tabs on the app. Is this normal behavior? I found something about browsers having connection limitations that will stall the requests until the limit is free again, but nothing for sure. Thought it could be maybe a problem with tanstack query or some limitation on my hono api, but also didnt find anything related.

[ludersGabriel]

Turns out you can just use the stream url directly in the src of the img tag, Im so fucking dumb. All i had to do was modify my backend so i also checked for a query token in order to authorize the request and bam, everything loads fast, the browser handles it and all is good!

Modifications:

function RenderThumb({ id }: { id: string }) {
  const downloadUrl = getContentUrl(id)

  return (
    <img
      loading="lazy"
      src={downloadUrl}
      alt="Happy New Year with eucalyptus leaves"
      className="h-44 w-full object-cover transition-transform duration-300 group-hover:scale-105"
    />
  )
}


export function getContentUrl(id: ContentModel["id"]) {
  const url = `/api/v1/content/download/${id}?token=${getLocalToken() ?? ""}`

  return url
}