I would like to enable caching in my react native application. I am using GraphQL with Relay modern. I found out that caching is not enabled by default in relay modern, but they have exposed RelayQueryResponseCache
from relay-runtime
, which we can add to the fetchQuery
function in our API. I read discussion here and here about it, but have not seen any example to get started. Can someone help me out on this?
EDIT:
Ok I came up with a solution. I think it misses few things but so far it serves our needs.
I have noticed that passing anything into QueryRenderer
into cacheConfig
results passing that value into fetchQuery
function inside my environment.
So I have created a Component
which loads the data by some relation and resolves it into the correct json
structure requested by the query. Then I return this into the state. Then I extended my Component
which contains QueryRenderer
with the created 'cache loader'. Now when componentWillMount()
is called I ask for the cached data. During this I have set this.state.loading = true
so I am able to handle loading state. Reading from DB is async.
I am using this class in other components as well. Every one handles its cache data. I just pass it to QueryRenderer
.
However I was thinking that this makes some extra logic need to add for each Component
which is supported by this caching. Probably passing the cache resolver as cacheConfig
and resolve the cached data immediately inside the environment would be much more cleaner.