Use relay cache data for responsive application when fresh data is retrieved

Question

I have a React Native application integrated with Relay, and I want the first user experience available for users.

So, in the first launch of the application, a placeholder should be shown when the data is loaded. After that, every time the application starts, I want to show the latest cached data while the latest data is loading.

I found this problem since 2015 and based on the response to eyston I tried to implement CacheManager based on relay-cache-manager using AsyncStorage . With CacheManager, I can save and load relay entries from the cache, but when the network is disconnected, the application cannot display cached data.

Is there any way to use cached relay data when a relay retrieves fresh data?

Answer 1

We have a production application that uses Relay and RealmDB for offline use. We took a separate approach from CacheManager because CacheManager was not quite ready by then. We used relay-local-schema for this.

We defined the entire circuitry required for mobile devices using relay-local-schema. It can be the same file as your backend server to define the graphql schema and change the permission function to allow data from realm db. To do this, we also created a schema in realmdb, which had almost the same structure as the graphql schema for ease of writing the data returned by the backend server to realmdb. You can also automate the generation of this schema using the graphql introspection query. We defined a custom network layer where we made sure that all Relay requests always touch the local db. In the sendQueries function sendQueries all requests are resolved using a local relay scheme that resolves very quickly and responds to presentations of old data, while at the same time, a network request is made for each request in the sendQueries function. When receiving data from a network request, it is written to realmdb, and in Relay memory, new data is also added to the memory, this automatically updates all the views that were viewed, the data of which has been changed. To write data to the storage in Relay memory, we used the following undocumented method

 Relay.Store.getStoreData().handleQueryPayload(query, response); 

You can get the request object from the request that you receive in the sendQueries function using request.getQuery() .

Our current implementation is slightly related to our business logic, and therefore it is difficult to discover this logic. I will try to provide a demo application.