Cache, double-fetching and error handling

[tiagomapmarques]

Hi everyone!

I have a question regarding an over-engineered implementation I am thinking of creating. I've read through the docs and experimented with the useQuery API a bit, but it doesn't seem that what I want to do works without an ugly workaround. If anyone has any ideas, I'd appreciate your input/help. (henceforth I will be using the Posts/Post example in the useQuery examples page)

My problem is that I want the following features:
A) implicit cache of future "Post" requests on any "Posts" requests
B) on useQuery call, return cached data (if any) or data from implicit cache
C) on useQuery error, return cached data (if any) or data from implicit cache
D) on useQuery success, return new data from request
E) no request launched if complete cached data exists

Example code attempting to implement the features above:
https://codesandbox.io/p/sandbox/busy-mendel-i820t0

I can use "placeholderData" and get features A, B, D and E.
I can use "initialData" and "staleTime" to get features A, B and D.

The solution I came up with to get all the features I want involves adding an attribute to the placeholder data (example: {..., _cachedResult: true}), marking it as such and running useQuery with that data as initialData. This way, the cache is filled correctly and a new response (with no _cachedResult attribute) can override the cache with complete data coming from the "Post" endpoint directly. A bit over-engineered IMO. So I thought maybe this is just lack of knowledge or experience on my part.

Does anyone have any better/simpler ideas? Am I missing something?

[TkDodo]

I would use placeholderData, and then also manually show it in error state if there is no data, like:

const placeholder = { ... }

const { data = placeholder } = useQuery({ queryKey, queryFn, placeholderData: placeholder })