[Modern] Question on Caching query response using RelayQueryResponseCache
- Dominant language
- Rust
- Stars
- 19k
- Forks
- 1.9k
- PR merge metrics
- No merged PRs in 30d
Description
## Question
I have a queryRenderer whose response is cached for a minute using **RelayQueryResponseCache**.
But the main query uses a fragment from a component. This component is wrapped in a **RefetchContainer** and based on certain scenarios and also for polling we need to call the refetch query. We don't use polling from Query renderer, but have our own custom `timer` HOC which will do the poll at different frequencies based on certain conditions.
The response from the `refetchContainer` is exactly the same shape as that of the main QueryRenderer, and therefore I was thinking if there is a way to cache this response from the `refetchContainer` as the cached response of `QueryRenderer`?
## Current Implementaion
As you can see, right now, instead of using QueryId as `operation.text` I map `operation.name`, and check that for my refetch query and map the response to the actual Query renderer's query in the cache.
Although this works, we will have to add checks for each of our `RefetchQuery` and map the response to the `QueryRenderer's` response in cache.
Is there a better way to do it?
```javascript
const oneMinute = 60 * 1000;
const cache = new RelayQueryResponseCache({ size: 250, ttl: oneMinute });
const network = Network.create((
operation,
variables,
cacheConfig,
) => {
let queryID = operation.name; //operation.text;
const isQuery = operation.operationKind === 'query';
const forceFetch = cacheConfig && cacheConfig.force;
// Try to get data from cache on queries
const fromCache = cache.get(queryID, variables);
if (
isQuery &&
fromCache !== null &&
!forceFetch
) {
return fromCache;
}
// Otherwise, fetch data from server
return fetch(GQL_URL, {
method: 'POST',
credentials: 'include' as RequestCredentials,
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json',
...setAuthHeader(),
},
body: JSON.stringify({
query: operation.text,
variables,
}),
}).then(response => {
return response.json()
}).then(json => {
// Update cache on queries
if (operation.name === 'MyRefetch_Query')
queryID = 'MyQueryRenderer_Query'
if (isQuery && json) {
cache.set(queryID, variables, json);
}
return json;
});
}
);
```
Contributor guide
Research direction
Start with the RelayQueryResponseCache and Network.create APIs described in the issue, then trace how QueryRenderer and RefetchContainer operations identify their cached responses. Determine whether the documented APIs support sharing these responses; done means recording the supported approach or limitation clearly, with the custom timer polling behavior included.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- graphql, javascript, react
- Domain
- api, performance
- Issue type
- Documentation
- Difficulty
- 5/5
- Estimated time
- Over a week
- Activity status
- Stale
- Clarity
- Needs clarification
- Newbie friendliness
- 25/100