Discussion - using Relay offline

[zuhair-naqvi]

We're planning to use Relay for a messaging application we're building with React Native. As you'd assume the 2 things that are key to achieving this are subscriptions and offline support both of which seem to be in the works.

We'd love to contribute to these efforts but need some validation if the below proposal could work for offline support or if it's plain stupid!

Inject a custom network layer that does the following before handing queries and mutations over to Relay's default network layer:

Queries:

1. When online, log all query responses to a persistent local store.
2. When offline, switch out the default network layer for something like https://github.com/relay-tools/relay-local-schema to query the persistent local store instead of the GraphQL endpoint.

Mutations:

1. Create an immutable persistent log producer for React Native. (perhaps use Kafka?)
2. Provide optimistic updates as well as log all mutations on device when offline
3. When the device comes online, connect to a log consumer service and compact mutation logs into GraphQL requests, then somehow trigger fatQueries for the logged mutations so any data not covered by the optimistic updates is applied to state via standard relay.

How do you Facebook folk currently handle offline for native relay apps? such as the Ads Manager? And other GraphQL clients like Facebook for mobile?

[eyston]

The RelayStore has the idea of a CacheManager which sets as a layer in the store hierarchy:

• queued : place optimistic mutations go
• records : normal cache where query responses go
• cache : your thingy goes here

When you issue a query to the store it takes the first result it hits -- so your cache manager layer would sit at the bottom and be able to handle data requests before anything goes to the network layer.

I haven't done anything with this, so could be 100% wrong, but @steveluscher mentioned it in his meetup talk. I believe it would allow you to save this to local storage or any other place that would be longer lasting than the normal store layer.

[zuhair-naqvi]

@eyston do you mind linking me to this meet-up talk? Is there currently a way of hydrating RelayStore and bootstrapping the Cache from this hydrated Store at a later point?

[eyston]

It was an aside to the talk -- maybe an answer to a question -- so not on slides or anything (and I'm not sure if there are even slides).

The part in code: RelayStoreData#injectCacheManager : https://github.com/facebook/relay/blob/master/src/store/RelayStoreData.js#L158

I don't think RelayStoreData is exposed publicly (just RelayStore). RelayStoreData#getDefaultInstance would get it privately tho~.

Again, haven't done anything with this myself, but here is the interface: https://github.com/facebook/relay/blob/master/src/tools/RelayTypes.js#L154

[josephsavona]

Ordinarily this would be an ideal question to post on Stack Overflow (we're trying to keep GitHub issues focused on bugs and enhancements), but since the discussion has already started let's keep it here.

There are two main things to handle for offline:

Queries

One option is to inject a custom network layer and cache queries/responses, and play them back when offline. This might work depending on your use case.

As an alternative, Relay supports injecting a cache manager (with the normal network layer). Whenever data is queried while online, responses will be logged to the cache manager so that it can persist data. When a query is executed while offline, Relay will attempt to fulfill the query by reading from the cache manager.

You can inject the manager with RelayStoreData.getDefaultInstance().injectCacheManager(). The interface is documented in code.

Mutations

Mutations are a combination of the mutation class and props. One option here would be to maintain a queue of mutation calls, caching them when offline and playing them back when online.

[zuhair-naqvi]

@josephsavona I'll post any how to's on StackOverflow moving forward but offline support is an enhancement right?

Thanks 💯 for your answers

Ultimately we want to contribute the work on offline sync back to upstream so wondering if anyone at Facebook's working on this / planning to work on this in near term? If so, might make sense to join efforts rather than potentially go in different directions.

[josephsavona]

As mentioned in the Roadmap, offline support is something we're actively exploring. In practice, this means that:

• The cache manager interface is reasonably stable and you're welcome to try it out. Just keep in mind that the interface is experimental and may change going forward.
• We're not ready to open-source an implementation of the cache manager interface, and we don't have the bandwidth to provide support for a default implementation in react-relay. Instead, we'd encourage you to publish your own implementation as a separate repository. We'll do our best to answer questions if you cc us on PRs.

[zuhair-naqvi]

@josephsavona @eyston

Let me know if the below makes sense:

We've got relay working with React Native, the next challenge is to offer an offline first experience. To do this one approach I've been thinking of is to bundle the schema with the app using https://github.com/relay-tools/relay-local-schema and back it up with https://github.com/facebook/dataloader persisting the cache to disk. The trade off is you'll still be making multiple requests from the client however majority of the requests will be resolved locally through data loader and the few that do go over the network will be asynchronous as far as the app is concerned as Relay abstracts these for us. So this drawback may not be so much of an issue depending on your use case.

There will also be a pub/sub mechanism on top of the dataloader that can selectively invalidate the cache when the data changes on the server.

The business logic and communication with the database will be kept outside of the resolvers and loaders (in a persistence API on the server) which is good practice anyway.

This way, with minimal change you might be able to build offline native apps using Relay - unless I'm missing something obvious, keen to hear your thoughts!

[josephsavona]

That sounds like a solid approach. Data loader will help to reduce the number of network requests, and the injected relay-local-schema is just a network later as far as Relay knows.

Let us know how this works for you!

[zuhair-naqvi]

We were really excited to give this a shot but we can't seem to get graphql-relay-js to import into the React Native app as the https://github.com/graphql/graphql-relay-js is still based on babel 5.x and our fork of RN 0.16 (which is working with Relay) is using babel 6. We tried upgrading graphql-relay-js to babel 6 but then it wouldn't find babel-runtime helpers even though we're using babel-plugin-transform-runtime.

Then we tried manually importing babel-helpers (extends, createClass etc.) but babel-helpers/typeof would just not work.

Possibly related to facebook/react-native#2000 ?

Any suggestions?

[josephsavona]

good question. cc @sebmck @amasad @DmitrySoshnikov

[vjeux]

cc @tadeuzagallo