apollo-link-queue-persist

This is a copy from the repository @SocialAutoTransport/apollo-link-queue-persist. The package was not published because of new rules for package names in npm and because of a lack of response, Asolvi is now the active maintainer and publisher of this package. The copy also incorporates the QueueLink instance mentioned below, so that is no longer a requirement. Support for any ApolloClient subtype is also added.

Simple persistence for any queued Apollo queries when using helfer/apollo-link-queue. At initial build time, @helfer has not yet pulled in the changes required in apollo-link-queue so in order for this to work, you'll need to make use of our fork at @SocialAutoTransport/apollo-link-queue

Supports web and React Native. See all storage providers.

Basic Usage

To get started, simply pass your instance of QueueLink and an underlying storage provider to persistQueue.

By default, the contents of your Apollo link queue will be immediately restored (asynchronously, see how to persist data before rendering), and will be persisted upon every write to the queue.

Usage

import AsyncStorage from '@react-native-async-storage/async-storage';
import { persistQueue, AsyncStorageWrapper } from 'apollo-link-queue-persist';
import QueueLink from 'apollo-link-queue';
import {ApolloClient, InMemoryCache, ApolloProvider, HttpLink, ApolloLink} from '@apollo/client';

const queueLink = new QueueLink();

const client = new ApolloClient({
  link: ApolloLink.from([queueLink, httpLink]);,
  cache: new InMemoryCache(),
});

await persistQueue({
  queueLink,
  storage: AsyncStorage,
  client,
});

BeforeRestore()

You can optionally pass a function to the beforeRestore option that will allow you to make a modification to the graphqlrequest that was queued just before it is restored. The function should accept the graphqlrequest object as a parameter and must return the modified copy of the request. Internally the restore function will then call client.mutate or client.query with the modified request object instead of the original which was queued.

OnCompleted()

You can optionally pass a function to the onCompleted option that will be called after the persisted graphql request is restored and ran. The function should accept the graphqlrequest and response object. This allows for triggering business logic in your app after the requests are run emulating the same behavior of the onCompleted property of a useMutation or useQuery hook.

await persistQueue({
  queueLink,
  storage: AsyncStorage,
  client: apolloClient,
  onCompleted: (request, response) => {
    console.log("Called onCompleted()", request, response);
    //Optional request specific handling
    if (request.context.customProperty === "some specific value") {
      console.log(
        "Do something specific based on that query or mutation running successfully"
      );
    }
  },
});

OnError()

You can optionally pass a function to the onError option that will be called if the persisted graphql request fails to run successfully. The function should accept the graphqlrequest and the error object.

await persistQueue({
  queueLink,
  storage: AsyncStorage,
  client: apolloClient,
  onError: (request, error) => {
    console.error("Called onError()", request, error);
    //Optional request specific handling
    if (request.context.customProperty === "some specific value") {
      console.error(
        "Do something specific based on that query or mutation failing"
      );
    }
  },
});

Storage Providers

apollo-link-queue-persist provides wrappers for the following storage providers, with no additional dependencies:

| Storage provider | Platform | Wrapper class | | ------------------------------------------------------------------------------- | -------------- | ----------------------- | | AsyncStorage* | React Native | AsyncStorageWrapper | | window.localStorage | web | LocalStorageWrapper | | window.sessionStorage | web | SessionStorageWrapper | | localForage | web | LocalForageWrapper | | Ionic storage | web and mobile | IonicStorageWrapper | | MMKV Storage | React Native | MMKVStorageWrapper |

*AsyncStorage does not support individual values in excess of 2 MB on Android. If you set maxSize to more than 2 MB or to false, use a different storage provider, such as react-native-mmkv-storage or redux-persist-fs-storage.

Using other storage providers

apollo-link-queue-persist supports stable versions of storage providers mentioned above. If you want to use other storage provider, or there's a breaking change in next version of supported provider, you can create your own wrapper. For an example of a simple wrapper have a look at AsyncStorageWrapper.

If you found that stable version of supported provider is no-longer compatible, please submit an issue or a Pull Request.