@urql/storage-rn#

@urql/storage-rn is a Graphcache offline storage for React Native.

It is compatible for both plain React Native and Expo apps (including managed workflow), but it has a two peer dependencies - Async Storage and NetInfo - which must be installed separately. AsyncStorage will be used to persist the data, and NetInfo will be used to determine when the app is online and offline.

Quick Start Guide#

Install NetInfo (RN | Expo) and AsyncStorage (RN | Expo).

Install @urql/storage-rn alongside urql and @urql/exchange-graphcache:

yarn add @urql/storage-rn
# or
npm install --save @urql/storage-rn

Then add it to the offline exchange:

import { createClient, fetchExchange } from 'urql';
import { offlineExchange } from '@urql/exchange-graphcache';
import { makeAsyncStorage } from '@urql/storage-rn';

const storage = makeAsyncStorage({
  dataKey: 'graphcache-data', // The AsyncStorage key used for the data (defaults to graphcache-data)
  metadataKey: 'graphcache-metadata', // The AsyncStorage key used for the metadata (defaults to graphcache-metadata)
  maxAge: 7, // How long to persist the data in storage (defaults to 7 days)
});

const cache = offlineExchange({
  schema,
  storage,
  updates: {
    /* ... */
  },
  optimistic: {
    /* ... */
  },
});

const client = createClient({
  url: 'http://localhost:3000/graphql',
  exchanges: [cache, fetchExchange],
});