Syncing data of JSONStore collection to a Cloudant DB

improve this page | report issue

Setting up the React Native development environment

Follow the instructions provided in the React Native Gettings Started Page to set up your machine for React Native development.

Adding the JSONStore SDK to your React Native app

The JSONStore SDK for React Native is available as a React Native module from npm.

Getting started with a new React Native project

  1. Create a new React Native project.
     react-native init MyReactApp
    
  2. Add the MobileFirst SDK to your app.
     cd MyReactApp
     npm install react-native-ibm-mobilefirst-jsonstore --save
    
  3. Link all native dependencies to your app.
    react-native link
    

Syncing data of JSONStore collection to a Cloudant DB

The disadvantage of having all the app data locally is that when the app is uninstalled you will lose the data. To counter this problem, IBM JSONStore provides SYNC functionality with Cloudant DB.

import { JSONStoreCollection, WLJSONStore, JSONStoreInitOptions, JSONStoreSyncPolicy, JSONStoreAddOptions } from 'react-native-ibm-mobilefirst-jsonstore';

There are two steps for syncing data from a JSONStore collection:

  1. Opening a Collection, the only difference between a normal JSONStoreCollection and a synced JSONStoreCollection is in the way they are opened. Synced JSONStoreCollections are opened with corresponding JSONStoreInitOptions. JSONStoreInitOptions is where you will decide the Synchronisation Policy and the adapter to sync data with. This adapter is basically Cloudant Sync Adapter, find more info here. JSONStoreInitOptions provides an API setSyncOptions(syncPolicy, adapterName). JSONStoreSyncPolicy needs to be one of the following values [‘SYNC_NONE’, ‘SYNC_DOWNSTREAM’, ‘SYNC_UPSTREAM’]. adapterName is the name of the adapter deployed on your MobileFirst Server that works with Cloudant DB. Make sure the Cloudant DB details are entered correctly for Sync to work.

     var initOptions = new JSONStoreInitOptions();
     initOptions.setSyncOptions(JSONStoreSyncPolicy.SYNC_UPSTREAM, "JSONStoreCloudantSync");
     var collection = new JSONStoreCollection('favourites');
     WLJSONStore.openCollections(['favourites'], initOptions).then(data => {	console.log("Successfully opened collection with Sync Policy!");
    }).catch(err => {	console.log(err);
    });
    
  2. Calling the Sync API, all the JSONStoreCollections opened with Sync will automatically trigger synchronisation on success of openCollection() API.
    If a JSONStoreCollection is opened with JSONStoreSyncPolicy.SYNC_DOWNSTREAM policy, you can explicitly call the sync() API to fetch the latest pull.
    If a JSONStoreCollection is opened with JSONStoreSyncPolicy.SYNC_UPSTREAM policy, the sync process is automatically triggered upon adding, updating or removing a document from the collection. You can still call sync() API to explicitly trigger synchronisation.

     var favCollection = new JsonStoreCollection('favourites');
     favCollection.sync();
    
Inclusive terminology note: The Mobile First Platform team is making changes to support the IBM® initiative to replace racially biased and other discriminatory language in our code and content with more inclusive language. While IBM values the use of inclusive language, terms that are outside of IBM's direct influence are sometimes required for the sake of maintaining user understanding. As other industry leaders join IBM in embracing the use of inclusive language, IBM will continue to update the documentation to reflect those changes.
Last modified on December 14, 2018