Quantcast
Viewing all articles
Browse latest Browse all 31

React Native, React Query Offline Persisted Queries & Mutations

README.md

These files demonstrates how to persist queries and mutations to offline state with the following behaviour:

  • Serve from query cache if offline
  • Persist mutations if offline, and resume mutations once online

It's important to set the online manager state before rendering the <QueryClientProvider />, for example:

<NetworkStateProvider><QueryClientProvider>{children}</QueryClientProvider></NetworkStateProvider>
mutationDefaults.ts
import type { QueryClient } from '@tanstack/react-query';
import { fetchSubmitForm, useSubmitForm } from './your/api';
import { DEFAULT_RETRIES } from './constants';
export function setMutationDefaults(queryClient: QueryClient) {
queryClient.setMutationDefaults([useSubmitForm.name], {
mutationFn: fetchSubmitForm,
retry: DEFAULT_RETRIES,
});
}
queryClient.ts
import { MutationCache, QueryCache, QueryClient } from '@tanstack/react-query';
import { setMutationDefaults } from './mutationDefaults';
export const queryClient = new QueryClient({
queryCache: new QueryCache(),
mutationCache: new MutationCache(),
defaultOptions: {
queries: {
refetchOnWindowFocus: false,
staleTime: 0, // always refresh if online
cacheTime: Infinity, // cache forever
},
mutations: {
cacheTime: Infinity, // cache forever
},
},
});
setMutationDefaults(queryClient);
QueryClientProvider.ts
import React, { type PropsWithChildren } from 'react';
import { PersistQueryClientProvider } from '@tanstack/react-query-persist-client';
import { onlineManager } from '@tanstack/react-query';
import { queryClient } from './queryClient';
import { storagePersister } from './storagePersister';
export function QueryClientProvider(props: PropsWithChildren) {
return (
<PersistQueryClientProvider
client={queryClient}
persistOptions={{ persister: storagePersister }}
onSuccess={async () => {
if (onlineManager.isOnline()) {
await queryClient.resumePausedMutations();
await queryClient.invalidateQueries();
}
}}
{...props}
/>
);
}
storagePersister.ts
import { createSyncStoragePersister } from '@tanstack/query-sync-storage-persister';
import { MMKV } from 'react-native-mmkv';
const storage = new MMKV();
const clientStorage = {
setItem: (key: string, value: string) => {
storage.set(key, value);
},
getItem: (key: string) => {
const value = storage.getString(key);
return value === undefined ? null : value;
},
removeItem: (key: string) => {
storage.delete(key);
},
};
export const storagePersister = createSyncStoragePersister({
storage: clientStorage,
});

Viewing all articles
Browse latest Browse all 31

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>