SWR pattern within one query
I have two data sources for the same query/API endpoint. One cached, potentially stale but very quick to access, and another one, remote and fresh, etc. The idea is I would be OK with stale data but would refresh it in the background from the fresh data source. I wouldn't need to show a loading state as long as there's stale data around.
The behavior I'd want on an empty QueryClient store:
1. Load from the fast data store
2. Render with it (contentful)
3. If the above response is stale, load from the remote data store
4. Re-render with the latest data
And if I have data in the QueryClient already:
1. Render immediately using the most fresh version available, regardless of what data store it came from
2. If the data was stale, load from the remote data store
3. Re-render with the latest data
On fetch error, I would want to know about the error state but also use the most recent version of data I have.
I've been thinking about how to best realize this with react-query. I could make some custom
Or if I wanted to fold it into the same query from the perspective of react-query, I could possibly capture the QueryClient in my
I've also considered
Is there a paved path to something like this? Ideally I'd just use a battle tested pattern and get the benefits for free, just like with everything else thanks to react-query
.
The behavior I'd want on an empty QueryClient store:
1. Load from the fast data store
2. Render with it (contentful)
3. If the above response is stale, load from the remote data store
4. Re-render with the latest data
And if I have data in the QueryClient already:
1. Render immediately using the most fresh version available, regardless of what data store it came from
2. If the data was stale, load from the remote data store
3. Re-render with the latest data
On fetch error, I would want to know about the error state but also use the most recent version of data I have.
I've been thinking about how to best realize this with react-query. I could make some custom
useQuerySWROr if I wanted to fold it into the same query from the perspective of react-query, I could possibly capture the QueryClient in my
queryFnsetQueryDataI've also considered
placeholderDataqueryFnIs there a paved path to something like this? Ideally I'd just use a battle tested pattern and get the benefits for free, just like with everything else thanks to react-query
.
