React Relay Offline is a extension of Relay for offline capabilities
Install react-relay and react-relay-offline using yarn or npm:
yarn add react-relay react-relay-offline
The relay-offline-examples repository is a fork of relay-examples and contains an integration of react-relay-offline. To try it out:
git clone https://github.com/morrys/relay-examples.git
cd relay-examples/todo
yarn
yarn build
yarn start
Then, just point your browser at http://localhost:3000
.
How to create the environment
import { Network } from 'relay-runtime';
import { OfflineStore, Store, Environment, RecordSource } from 'react-relay-offline';
const network = Network.create(fetchQuery);
const storeOffline = OfflineStore(network);
const source = new RecordSource(storeOffline);
const store = new Store(storeOffline, source);
const modernEnvironment = new Environment({ network, store }, storeOffline);
Change the renderer
import {QueryRenderer} from 'react-relay-offline';
How to create the environment
import { Network } from 'relay-runtime';
import { OfflineStore, Store, Environment, RecordSource } from 'react-relay-offline';
const network = Network.create(fetchQuery);
const storeOffline = OfflineStore(network);
const source = new RecordSource(storeOffline);
const store = new Store(storeOffline, source);
const modernEnvironment = new Environment({ network, store }, storeOffline);
Change the renderer
import {QueryRenderer} from 'react-relay-offline';
In QueryRenderer you need to set the property LoadingComponent.
localStorage is used as the default react web persistence, while AsyncStorage is used for react-native.
To use persistence via IndexedDB:
import OfflineStore from 'react-relay-offline/lib/runtime/redux/OfflineStoreIDB'
It is possible to customize the offline store through these parameters:
- storage: any
- keyPrefix: string
- customWhitelist: string[]
- serialize: boolean
- customReducers: ReducersMapObject
- Add "LoadingComponent" property
- Add "cached" property in render function
- Add CACHE_FIRST in dataFrom, with this property the query is not executed on the network if it finds valid results in the cache
<QueryRenderer
environment={environment}
query={query}
variables={{}}
LoadingComponent={<Loading />}
render={({ props, error, retry, cached }) => {
const hooksProps = useQuery(props);
- Version 3.0.0 or 4.0.0 of the react-relay library
- When a new node is created by mutation the id must be generated in the browser to use it in the optimistic response
-
Documentation
-
Implementation of Refetch Container Offline (The implementation of the refetchContainer involves the management of fetchPolicy (network-only and store-or-network). To make it homogeneous with the management of the "QueryRenderer" I have to add the cache-first and offline policy), for the moment it is usable only as specified by the Relay library.
-
Create a pull request to the Relay project (i must use flow type)
React Relay Offline is MIT licensed.