Querying images using React Query?

[vymao]

Would be great if there was some sort of integration between fetching images from a URL and React Query. I'm not sure how one would integrate this into <img>, but I think that would be a great feature if it worked out somehow. Is this possible currently?

[TkDodo]

why would you need react-query to fetch images? The img tag can do that by itself ...

[sarahk]

and the browser automatically caches the images. I wonder what problem @vymao is trying to solve... it might make the question clearer.

[vymao]

Apologies, I was not aware that the browser automatically caches images. I was hoping React Query might manage this cache state, as it seems there isn't a straightforward way of invalidating cached images by the browser.

[larinius]

Browser cant refetch failed images which get 500 errors, browser cant chek image validity (half loaded images), browser cant cache big images on external storage.
Do you need more arguments?

[TkDodo]

I mean nothing stops your from running a query that fetches an image and stores the image in the cache, e.g. as a base64 encoded image, then you ship this as the src to your img tag. I just think it's a bit unnecessary ...

[OuttaPencil]

caching is way oversold. Particularly in case where images are frequently re-rendered

• Query always load from memory (after first load). Browsers don't
• Loading the same image in multiple places at the same time is nbd with Query. However, if each request happens before the first finishes, the browser will try to complete EACH request in parallel. If you're loading unoptimized user data, that could be crippling (think 25MB per request). The worse part is these requests don't cancel if the imgs are unrendered. :D

But yeah in an ideal world with perfect cache-control headers and optimized content and simple rendering, who cares, but in my application, it is a tremendous improvement in terms of user speed, consistency, and code simplicity. So so much much better than I can explain. From 100-1000s of milliseconds per re-render when imgs were “cached” to imperceptible with Query.
So, you, reader! Don't dismiss this because of browser magic. This may be right for you!

[isimmons]

I have a use case, but it's not difficult once you learn how, to do what TkDodo suggests of caching the base64 encoded image.

The use case:
I started taking the query.gg course and this is way out of the scope of the course but, I made a local copy of the introduction pokemon demo.

Basically, when the pokemon data loads, it then passes the image url to a PokemonCard component which loads the img.

Well, the browser doesn't fetch the image url until after the img is actually added to the DOM and when testing a slow 3G network, the pokemon card and the data shows up and then 2 seconds later the image appears.

I tried all kinds of solutions from watching an imageRef, to preloading and waiting for a promise to resolve, to using the onload event of the img element. None of these work because the img is already in the DOM but the actual image is not fetched by the browser yet.

So what worked is actually fetching the image with react-query in my usePokemon hook and using the status of that fetch to show the loading card until the image is actually fetched and cached. I used a dependent query. TkDodo's response above, helped me figure out the last piece of it. Here is the code.

usePokemon.ts

import { useQuery } from '@tanstack/react-query'
import { useState } from 'react'
import { POKEMON_API_URL, POKEMON_CACHE_KEY } from '../constants'
import { Pokemon } from '../types'

export default function usePokemon() {
  const [id, setId] = useState(1)

  const {
    data: pokemon,
    error,
    isLoading,
  } = useQuery<Pokemon>({
    queryKey: [POKEMON_CACHE_KEY, id],
    queryFn: () => fetch(`${POKEMON_API_URL}/${id}`).then((res) => res.json()),
  })

  const imageUrl = pokemon?.sprites?.front_default

  const {
    data: pokemonImage,
    status,
    fetchStatus,
    error: imageError,
  } = useQuery<string>({
    queryKey: ['pokemon-image', id],
    queryFn: () =>
      fetch(`${imageUrl}`).then(async (res) => {
        const blob = await res.blob()

        const base64 = URL.createObjectURL(blob)

        return base64
      }),
    enabled: !!imageUrl,
    refetchOnWindowFocus: false,
  })

  return {
    pokemon,
    error,
    isLoading,
    imageError,
    setId,
    pokemonImage,
    status,
    fetchStatus,
  }
}

Used in PokemonApp.ts

const PokemonApp = () => {
  const [isReady, setIsReady] = useState(false)
  const { pokemon, pokemonImage, status, error, setId, isLoading } =
    usePokemon()

  useEffect(() => {
    if (status === 'success' && !isLoading) {
      setIsReady(true)
    }
  }, [status, isLoading])

  return (
    <div className="mt-24 grid place-items-center">
      {isReady ? (
        <PokemonCard data={pokemon} error={error} image={pokemonImage} />
      ) : (
        <Card>
          <Loading />
        </Card>
      )}

      <ButtonGroup handleSetId={setId} />
    </div>
  )
}

I'm sure there are some issues with it that I need to work out but it is the basic idea and is working for me right now.

[kbrattli]

Thank you for the idea, i combined it with https://gist.github.com/n1ru4l/dc99062577b746e0783410b1298ab897 to make it work for me :D