react-orbit-strategy-example.js

import React, { useEffect } from 'react';
import { KeyMap } from '@orbit/data';
import { ReactOrbitProvider } from 'react-orbit';
import MemorySource from '@orbit/memory';
import JSONAPISource from '@orbit/jsonapi';
// import IndexedDBSource from '@orbit/indexeddb';
import schema from './schema'
import { RequestStrategy, SyncStrategy } from '@orbit/coordinator';
import AppRoot from 'components/Root';

const keyMap = new KeyMap();

export default function BuildPage() {
  return (
    <ReactOrbitProvider
      memorySource={
        new MemorySource({
          schema,
          keyMap,
          name: 'memory'
        })
      }
      remoteSource={
        new JSONAPISource({
          schema,
          keyMap,
          name: 'remote',
          host: 'https://api.jarvis.io',
          namespace: 'ajax',
          defaultFetchTimeout: 10000000
        })
      }
      addStrategies={(coordinator) => {
        // Query the remote server whenever the memory source is queried
        coordinator.addStrategy(
          new RequestStrategy({
            source: 'memory',
            on: 'beforeQuery',
            target: 'remote',
            action: 'pull',
            blocking: false,
          })
        );

        // Update the remote server whenever the memory source is updated
        coordinator.addStrategy(
          new RequestStrategy({
            source: 'memory',
            on: 'beforeUpdate',
            target: 'remote',
            action: 'push',
            blocking: false,
          })
        );

        // Sync all changes received from the remote server to the memory source
        coordinator.addStrategy(
          new SyncStrategy({
            source: 'remote',
            target: 'memory',
            blocking: false,
          })
        );
      }}
    >
      <AppRoot />
    </ReactOrbitProvider>
  )
};