Is it possible to persist cache query?

[Jekiwijaya]

[deevus]

I assume you mean you want to persist the query cache? Looking at the code, the cache is just an array called queries. It would be nice to be able to override this and use localStorage for example

[tannerlinsley]

You're more than welcome to do try that out, but as of today, it's not a first class citizen mostly because invalidation would need to be set up to essentially clear out old persisted queries and that's something that would be difficult to make great for a majority of use cases.

[deevus]

Would you accept a PR that decouples the cache implementation? The default implementation would function the same as it does now.

A localStorage implementation could be provided for example by a react-query-cache-local-storage package.

[tannerlinsley]

I would be open to discussing a proposal
On Jan 9, 2020, 4:59 PM -0700, Simon Hartcher [email protected], wrote:

Would you accept a PR that decouples the cache implementation? The default implementation would function the same as it does now.
A localStorage implementation could be provided for example by a react-query-cache-local-storage package.
—
You are receiving this because you modified the open/close state.
Reply to this email directly, view it on GitHub, or unsubscribe.

[BrandonSmith]

@deevus Did you make progress on persisting and seeding the cache? I'm interested in using react-query in a React Native app and with the app lifecycle, seeding the cache between app restarts is an important consideration.

[tannerlinsley]

This is really naive, but you could try this:

import { queryCache } from 'react-query'

// Persist to wherever using the super-secret `queries` object

const queriesWithData = Object.values(queryCache.queries).map(query => ({
  queryKey: query.queryKey,
  data: query.state.data
}))

localStorage.setItem('queries', JSON.stringify(queriesWithData))


// Hydrate from localStorage

const queriesWithData = JSON.parse(localStorage.getItem('queries'))

queriesWithData.forEach(query => {
  queryCache.setQueryData(query.queryHash, query.data)
})

This is highly experimental and undocumented, so you can be my guinea pig :)

[deevus]

I got busy but would still love this.

@tannerlinsley that looks very interesting :)

[BrandonSmith]

@tannerlinsley And use the queryCache.subscribe to get notified when the cache changes?

[tannerlinsley]

Yeah!
On Feb 27, 2020, 6:17 PM -0700, Brandon Smith [email protected], wrote:

@tannerlinsley And use the queryCache.subscribe to get notified when the cache changes?
—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub, or unsubscribe.

[jgoux]

I'm also very interested by an offline-first approach! I'll try to be a guinea pig and experiment with this! 😄

[cliffordp]

https://github.com/LuudJanssen/localforage-cache worked a treat, especially setting its key like this:

import { stableStringify, useQuery } from 'react-query';

/**
 * Consistently get the queryKey to use with React Query, optionally casting to string for use as a local storage key.
 *
 * @param {String} endpoint
 * @param {Object} params
 * @param {Boolean} toSerializedString For use with setting local storage.
 *
 * @returns {[{String}, {Object}]}|{String}
 */
const getQueryKey = (
	endpoint,
	params,
	toSerializedString = false,
) => {
	let arr = [
		endpoint,
		params,
	];

	// https://github.com/tannerlinsley/react-query/blob/v1.2.1/src/config.js#L59
	if ( toSerializedString ) {
		arr = stableStringify( arr );
	}

	return arr;
};


/**
 * Fetch data from the API or, if available and not expired, from local storage cache.
 *
 * @param {String} endpoint
 * @param {Object} params
 */
const fetcher = async ( endpoint, params ) => {
	console.log( 'fetcher' );

	//
	// The `true` is the special bit!
	//
	const queryKeyString = getQueryKey( endpoint, params, true );

	// todo: way to force fresh API hit
	//apiCache.removeItem( queryKeyString );

	const cacheData = await apiCache.getItem( queryKeyString );

	if ( null !== cacheData ) {
		console.log( 'Got API data from local cache.' );
		return cacheData;
	}

	const url = getApiUrl( endpoint, params );
	console.log( url );

	try {
		const data = await fetch(...);
		console.log( 'API was hit: ' + endpoint );
		console.log( data );

		await apiCache.setItem( queryKeyString, data );
		console.log( 'Set API data to local cache.' );

		return data;
	} catch ( err ) {
		console.log( err );
		throw err;
	}
};

[cdaringe]

i think we should make this official to hydrate the cache-post-SSR. @tannerlinsley--is there a different means to hydrate post-SSR?

[0xPetra]

Thanks! Here I share the hook I created. The implementation worked out for me in React Native and is applicable for React, just need to change AsyncStorage for whatever you use as localStorage:

Calling Read hook in UI component:

const {data} = useReadItem(item);

Read hook

export const useReadItem = (item?: string) => {
  const queryKey = ['QUERY-STRING', String(item)];

  return useQuery(queryKey, restRequest, {
    enabled: address,
    refetchOnWindowFocus: true,
    onSuccess: (data) => writeToStorage(queryKey, data),
  });
};

Manage storage Hook

import {queryCache} from 'react-query';
import AsyncStorage from '@react-native-community/async-storage';

// Persist to wherever using the super-secret object
const writeToStorage = async (queryKey: string, data: any) => {
  let storageData = await AsyncStorage.getItem('queries');

  storageData = {
    ...JSON.parse(storageData ?? '{}'),
    [queryKey]: data,
  };
  AsyncStorage.setItem('queries', JSON.stringify(storageData));
};

// Hydrate from localStorage

const readFromStorage = async () => {
  const storageData = await AsyncStorage.getItem('queries');

  if (storageData !== null) {
    const queriesWithData = JSON.parse(storageData);

    for (const queryKey in queriesWithData) {
      const data = queriesWithData[queryKey];
      const queryKeyParsed = JSON.parse(queryKey);
      queryCache.setQueryData(queryKeyParsed, data);
    }
  }
};

export {readFromStorage, writeToStorage};

What I liked about this approach is that you can choose which queries to store and you only access local storage once when the app is accesed for the first time using a useEffect and calling readFromStorage.

[inoumen]

It does not work for v3

[JeremyBradshaw7]

Yes we'd need something like this in a React Native project to persist over pause/resume presumably.

[cliffordfajardo]

React query v3 has an experimental support for persisting data to localstorage using "persist-localstorage" 😄

• https://react-query.tanstack.com/plugins/persist-localstorage#_top

[harika-sabbella]

Are you wondering about how to set/get things from AsyncStorage? If so, here is the documentation for it https://reactnative.dev/docs/asyncstorage#getitem and https://reactnative.dev/docs/asyncstorage#setitem

[inoumen]

Are there any workarounds to whitelist/blacklist queries?

[a-eid]

@ivanjeremic AsyncStorage has almost the same api as localstorage except that it's methods are async.

[kokoskiwi]

when will that feature be stable?

[TkDodo]

Likely with v4.

[a-eid]

@tannerlinsley how efficient is it to persist the cache ?

[bombillazo]

I'm assuming it'll depend on your local storage. If you are using React Native I recommend this storage.

[muxcortoi]

Does createWebStoragePersistor-experimental uses "cacheTime" QueryClient property? Because I persist the cache but its forever in localStorage.

[TkDodo]

Yes, it’s documented here: https://react-query.tanstack.com/plugins/persistQueryClient#usage