@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, dedupExchange, 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: [dedupExchange, cache, fetchExchange],
});