5

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.

parohy
  • 2,070
  • 2
  • 22
  • 38
  • 2
    I've wrote a blog post about it: http://taiki-t.hatenablog.com/entry/2017/09/05/181931 – tkymtk Sep 05 '17 at 09:23
  • Ok this is nice, but how do you update the data? Its nice to have fast response because you return the cache immediately but you do not refresh it with fresh data – parohy Sep 18 '17 at 11:20
  • Unless mutate the data there's no such fresh data. Just fetch data from server when you do mutations. Relay updates data nicely if code is written rightly. If you want faster response for mutations try to mimic it with optimisticResponse: https://facebook.github.io/relay/docs/en/mutations.html#optimistic-updates – tkymtk Dec 23 '17 at 13:16

0 Answers0