How to make a custom storage persister

[shivamXI]

Hey @TkDodo thanks for the awesome library.
I am wondering how does the background fetching of data works.
So I want to make my own storage persister where I'll load data from AsycStorage in my react-native app and then update the data from api call by using react-query.
This way the initial render will be faster.
I know that @tanstack/query-async-storage-persister is there but I am just looking for a simple implementation on one of my screens.

Any help with the same? Thanks in advance.

[louis-young]

Hi 👋

Have you seen the example in the documentation? Please see: https://tanstack.com/query/v4/docs/react/plugins/createAsyncStoragePersister#usage

This demonstrates how to use createAsyncStoragePersister with AsyncStorage for React Native.

Hopefully this helps 🙂

[shivamXI]

@louis-young Thanks for the response.
I have read this documentation already. My use-case is to make a custom hook for storage persistence.
I have written the following hook, it is working well as per my use-case.
Need help with validation the logic and if I'm missing anything.

export function useDataRefreshWithCache<T, P>(
    cacheKey: string,
    queryKey: string | string[],
    fetchMethod: (params: P) => Promise<T>,
    requestParams: P,
    options?: any,
) {
    const cacheData = useRef([]);
    const [fetch, setFetch] = useState(false);

    const fetchData = useCallback(() => {
        return new Promise<T>((resolve, reject) => {
            fetchMethod(requestParams)
                .then(async (data) => {
                    await DeviceStorage.setItem(cacheKey, JSON.stringify(data));
                    resolve(data);
                })
                .catch((err) => {
                    reject(err);
                });
        });
    }, [cacheKey, fetchMethod, requestParams]);

    useEffect(() => {
        async function fetchCachedData() {
            try {
                const res = await DeviceStorage.getItem(cacheKey);
                if (res) cacheData.current = JSON.parse(res);
            } catch {
                // Do nothing
            } finally {
                setFetch(true);
            }
        }
        fetchCachedData();
    }, [cacheKey]);

    const {data, error, status} = useQuery<T, any>(typeof queryKey === 'string' ? [queryKey] : queryKey, fetchData, {
        ...options,
        enabled: fetch,
    });

    return {
        cacheData,
        data,
        error,
        status,
    };
}

I just render the cacheData initially and when data is loaded with status === 'success' I replace the cache data with query data.

[louis-young]

I'd be interested to understand why you want to write a hook for persistence given the concept of storage persisters exist?