Expiring cached records containing expired credentials

[viridia]

The query results that I am working with are records with fields that contain S3 signed urls and headers. This information includes a digitally-signed expiration date - any attempt to access the url beyond that date will generate a 403. These are used to display images.

So for example, I can call the listImages() API, and it returns a list of records, where each record contains a url, an auth token, and an expiration date. These records would then be cached in QueryCache.

What I'd like to do is consider any record stale if it is older than the expiration date. It does no good to cache a url which can't be used. However, I don't know the expiration date when I made the query, it's up to the backend to decide how long the url is valid for, so I only know the expiration time once I get the response back.

Is there a way for me to customize react-query's staleness algorithm so that it never uses a record with an expired credential stored within it?

[TkDodo]

so you can definitely drive the staleTime with local state and extract it from the response, something like:

const useListImages = () => {
  const [staleTime, setStaleTime] = React.useState(0)
  return useQuery(
    key,
    queryFn,
    {
      staleTime,
      onSuccess: (data) => setStaleTime(data.expirationDate)
    }
}

but I'm not sure what good this would do in your use-case, because staleTime only specifies when a query should go from fresh to stale, which means after that time, a refetch would happen if you mount a new observer. What you maybe want would be to clear the cache after that time, and I think you'd have to spawn your own useEffect for that.

What you could also do is just let a refetch yield 403 and then react on it by removing the entry from the cache, or try to fetch for a different url...

[viridia]

Hmm, interesting. That is certainly worth of consideration.

I'm not sure that removing the cache is the right answer, though. That would (if my understanding is correct) cause react-query to immediately refetch the data, which is not what I want. If the image is already displayed in an <img> tag, there's no reason to refetch the image if the auth token for that image expires - the image data didn't actually change in that case, and what is in the DOM is correct. As long as the DOM is not changing, there's no reason for the extra API call.

Rather, what I want to avoid is cases where the image component is unmounted and then remounted with the same data, and the browser thereby attempting to refetch the image with a stale url which will fail. Of course, the browser will itself cache the image data, so there's a good chance that the stale url will never actually get sent to the server, assuming that I adjust the server's caching headers correctly.

[TkDodo]

That would (if my understanding is correct) cause react-query to immediately refetch the data, which is not what I want.

If you do removeQueries, observers are not informed of that, so no re-render and no re-fetch is happening. You can try that out in the devtools by manually removing a mounted query.

[viridia]

Got it. That makes sense.