Core Cache Persistence

gqless offers easy to use Cache persistence.

client.backupPersistence gets all the cache and returns a string, and optionally accepts a version string parameter, that allows for invalidating previous versions of cache, and ignoring them.
client.restorePersistence accepts a possible string that should have been stored persistently in some way, and optionally accepts a second version string paramater, that should be the same as the one used in backupPersistence.

Data Revalidation#

For an effective usage of Cache persistence it's almost always required some kind of automatic data refetching, and for that reason we recommend you to use:

React
- useQuery and graphql HOC staleWhileRevalidate,
- useTransactionQuery and useLazyQuery cache-and-network fetchPolicy,
And setting them by default in your defaults.
Core
- resolved's onCacheData function.

Examples#

In both examples we use a debounce function exported from gqless that reduces the amount calls to the storages, improving the user experience.

Here you can read a quick explanation of debouncing

localStorage#

In this example, for simplicity we are using localStorage to offer cache persistence, but for most serious applications we recommend using async solutions like localForage.

//...
import { debounce } from 'gqless';

// ...

export const client = createClient<
  GeneratedSchema,
  SchemaObjectTypesNames,
  SchemaObjectTypes
>({
  schema: generatedSchema,
  scalarsEnumsHash,
  queryFetcher,
  // ...
});

// ...

// This conditional should not be present for client-side only apps
if (typeof window !== 'undefined') {
  const backup = debounce(() => {
    localStorage.setItem('gqless-cache', client.backupPersistence('v1'));
  }, 1000);

  client.restorePersistence(localStorage.getItem('gqless-cache'), 'v1');

  client.eventHandler.onFetchSubscribe((promise) => promise.then(backup));

  client.eventHandler.onCacheChangeSubscribe(backup);
}

Async Storages#

We recommend using localForage or @react-native-async-storage/async-storage

import { debounce } from 'gqless';

// ...

import localForage from 'localforage';
// import AsyncStorage from '@react-native-async-storage/async-storage';

export const client = createClient<
  GeneratedSchema,
  SchemaObjectTypesNames,
  SchemaObjectTypes
>({
  schema: generatedSchema,
  scalarsEnumsHash,
  queryFetcher,
  // ...
});

// ...

export const clientReadyPromise = client.restorePersistence(() => {
  // return AsyncStorage.getItem('gqless-cache');
  return localForage.getItem('gqless-cache');
}, 'v1');

// This conditional should not be present for React Native or client-side only apps
if (typeof window !== 'undefined') {
  const backup = debounce(() => {
    // AsyncStorage.setItem('gqless-cache', client.backupPersistence('v1'));
    localForage.setItem('gqless-cache', client.backupPersistence('v1'));
  }, 1000);

  client.eventHandler.onFetchSubscribe((promise) => promise.then(backup));

  client.eventHandler.onCacheChangeSubscribe(backup);
}