Best Practice for handling data sync with React Native, MobX and REST?

Question

We're developing an app using React Native and MobX for the state stores, and also using a Web API REST service for the GETs and POSTs. All is going well, so far we're able to use FETCH to get the data, persist it in the relevant store using MobX and populate ListViews etc from that store...

Where I'd like some guidance now is how best to handle updates and posting the changes back to the server?

How do people normally do it? My thinking was updating the item in the store, marking that record as 'dirty' and having some sort of background timed loop going through all the 'dirty' records and syncing them up via a POST then resetting that 'dirty' flag on a successful post completion and then both the client and the server would have identical data?

Any help/advice is most appreciated!

Cheers, Adam.

Answer 1

The best practice is to use persistent storage which facilitates offline-first development and offers built-in client/server data sync, such as PouchDB/CouchDB:

The PouchDB API provides a method for bidirectional data replication. It accepts the live option, so that all changes continue to be replicated, and the retry option, to attempt replications if the application goes offline.

We can also subscribe to the changes feed so that after receiving a change — either from the remote server or the local user — the UI is updated, either by creating, updating or deleting a document.

Use SQLite to store the data locally in the React Native app and add an adapter which matches one of the APIs supported by PouchDB to push data back to the server.

References

• Building a React Native offline-first application using PouchDB and CouchDB

• Web apps that work offline and sync using React

• react-native-sqlite-storage

• react-native-pouchdb

• PouchDB Adapters