facebook / facebook/relay

[Modern] Question on Caching query response using RelayQueryResponseCache

Open
#2,461 1 comment 0 reactions 0 assignees View on GitHub
wontfix
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

Open the contributing 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.