Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/apollographql/apollo-cache-persist
🎏 Simple persistence for all Apollo Cache implementations
https://github.com/apollographql/apollo-cache-persist
apollo graphql offline react-native
Last synced: about 2 months ago
JSON representation
🎏 Simple persistence for all Apollo Cache implementations
- Host: GitHub
- URL: https://github.com/apollographql/apollo-cache-persist
- Owner: apollographql
- License: mit
- Created: 2017-12-01T21:17:07.000Z (almost 7 years ago)
- Default Branch: master
- Last Pushed: 2024-04-12T07:11:49.000Z (5 months ago)
- Last Synced: 2024-04-12T15:06:30.385Z (5 months ago)
- Topics: apollo, graphql, offline, react-native
- Language: TypeScript
- Homepage:
- Size: 2.08 MB
- Stars: 1,363
- Watchers: 40
- Forks: 117
- Open Issues: 24
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
Awesome Lists containing this project
- awesome-list - apollo-cache-persist
README
# apollo3-cache-persist [](https://badge.fury.io/js/apollo3-cache-persist) [](http://commitizen.github.io/cz-cli/)
Simple persistence for all Apollo Client 3.0 cache implementations, including
[`InMemoryCache`][0] and [`Hermes`][1].
Supports web and React Native. [See all storage providers.](./docs/storage-providers.md)
[0]: https://github.com/apollographql/apollo-client/tree/master/src/cache/inmemory
[1]: https://github.com/convoyinc/apollo-cache-hermes
- [Basic Usage](#basic-usage)
- [React Native](#react-native)
- [Web](#web)
- [Storage Providers](./docs/storage-providers.md)
- [Advanced Usage](./docs/advanced-usage.md)
- [FAQ](./docs/faq.md)
- [Contributing](#contributing)
- [Maintainers](#maintainers)
## Basic Usage
```sh
npm install --save apollo3-cache-persist
```
or
```sh
yarn add apollo3-cache-persist
```
To get started, simply pass your Apollo cache and an
[underlying storage provider](./docs/storage-providers.md) to `persistCache`.
By default, the contents of your Apollo cache will be immediately restored
(asynchronously, see [how to persist data before rendering](./docs/faq.md#how-do-i-wait-for-the-cache-to-be-restored-before-rendering-my-app)), and will be persisted upon every write to the cache (with a
short debounce interval).
### Examples
#### React Native
```js
import AsyncStorage from '@react-native-async-storage/async-storage';
import { InMemoryCache } from '@apollo/client/core';
import { persistCache, AsyncStorageWrapper } from 'apollo3-cache-persist';
const cache = new InMemoryCache({...});
// await before instantiating ApolloClient, else queries might run before the cache is persisted
await persistCache({
cache,
storage: new AsyncStorageWrapper(AsyncStorage),
});
// Continue setting up Apollo as usual.
const client = new ApolloClient({
cache,
...
});
```
#### Web
```js
import { InMemoryCache } from '@apollo/client/core';
import { persistCache, LocalStorageWrapper } from 'apollo3-cache-persist';
const cache = new InMemoryCache({...});
// await before instantiating ApolloClient, else queries might run before the cache is persisted
await persistCache({
cache,
storage: new LocalStorageWrapper(window.localStorage),
});
// Continue setting up Apollo as usual.
const client = new ApolloClient({
cache,
...
});
```
See a complete example in the [web example](./examples/web/src/App.tsx).
## Contributing
Want to make the project better? Awesome! Please read through our [Contributing Guidelines](./CONTRIBUTING.md).
## Maintainers
We all do this for free... so please be nice 😁.
- [@wtrocki](https://github.com/wtrocki)
- [@wodCZ](https://github.com/wodCZ)
- [@jspizziri](https://github.com/jspizziri)