kitten.sh
1# @urql/storage-rn
2
3`@urql/storage-rn` is a Graphcache offline storage for React Native.
4
5It is compatible for both plain React Native and Expo apps (including managed workflow), but it has a two peer dependencies - [Async Storage](https://react-native-async-storage.github.io/async-storage/) and [NetInfo](https://github.com/react-native-netinfo/react-native-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.
6
7## Quick Start Guide
8
9Install NetInfo ([RN](https://github.com/react-native-netinfo/react-native-netinfo) | [Expo](https://docs.expo.dev/versions/latest/sdk/netinfo/)) and AsyncStorage ([RN](https://react-native-async-storage.github.io/async-storage/docs/install) | [Expo](https://docs.expo.dev/versions/v42.0.0/sdk/async-storage/)).
10
11Install `@urql/storage-rn` alongside `urql` and `@urql/exchange-graphcache`:
12
13```sh
14yarn add @urql/storage-rn
15# or
16npm install --save @urql/storage-rn
17```
18
19Then add it to the offline exchange:
20
21```js
22import { createClient, fetchExchange } from 'urql';
23import { offlineExchange } from '@urql/exchange-graphcache';
24import { makeAsyncStorage } from '@urql/storage-rn';
25
26const storage = makeAsyncStorage({
27 dataKey: 'graphcache-data', // The AsyncStorage key used for the data (defaults to graphcache-data)
28 metadataKey: 'graphcache-metadata', // The AsyncStorage key used for the metadata (defaults to graphcache-metadata)
29 maxAge: 7, // How long to persist the data in storage (defaults to 7 days)
30});
31
32const cache = offlineExchange({
33 schema,
34 storage,
35 updates: {
36 /* ... */
37 },
38 optimistic: {
39 /* ... */
40 },
41});
42
43const client = createClient({
44 url: 'http://localhost:3000/graphql',
45 exchanges: [cache, fetchExchange],
46});
47```