ra-core
Version:
Core components of react-admin, a frontend Framework for building admin applications on top of REST services, using ES6, React
96 lines • 4.1 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.addOfflineSupportToQueryClient = void 0;
const dataFetchActions_1 = require("./dataFetchActions.cjs");
/**
* A function that registers default functions on the queryClient for the specified mutations and resources.
* react-query requires default mutation functions to allow resumable mutations (https://tanstack.com/query/latest/docs/framework/react/guides/mutations#persisting-offline-mutations)
* (e.g. mutations triggered while offline and users navigated away from the component that triggered them).
*
* @example <caption>Adding offline support for the default mutations</caption>
* // in src/App.tsx
* import { addOfflineSupportToQueryClient } from 'react-admin';
* import { QueryClient } from '@tanstack/react-query';
* import { PersistQueryClientProvider } from '@tanstack/react-query-persist-client';
* import { createAsyncStoragePersister } from '@tanstack/query-async-storage-persister';
* import { dataProvider } from './dataProvider';
* import { posts } from './posts';
* import { comments } from './comments';
*
* const localStoragePersister = createAsyncStoragePersister({
* storage: window.localStorage,
* });
*
* const queryClient = addOfflineSupportToQueryClient({
* queryClient: new QueryClient(),
* dataProvider,
* resources: ['posts', 'comments'],
* });
*
* const App = () => (
* <PersistQueryClientProvider
* client={queryClient}
* persistOptions={{ persister: localStoragePersister }}
* onSuccess={() => {
* // resume mutations after initial restore from localStorage was successful
* queryClient.resumePausedMutations();
* }}
* >
* <Admin queryClient={queryClient} dataProvider={dataProvider}>
* <Resource name="posts" {...posts} />
* <Resource name="comments" {...comments} />
* </Admin>
* </PersistQueryClientProvider>
* );
*
* @example <caption>Adding offline support with custom mutations</caption>
* // in src/App.tsx
* import { Admin, Resource, addOfflineSupportToQueryClient, DataProviderMutations } from 'react-admin';
* import { QueryClient } from '@tanstack/react-query';
* import { PersistQueryClientProvider } from '@tanstack/react-query-persist-client';
* import { createAsyncStoragePersister } from '@tanstack/query-async-storage-persister';
* import { dataProvider } from './dataProvider';
* import { posts } from './posts';
* import { comments } from './comments';
*
* const localStoragePersister = createAsyncStoragePersister({
* storage: window.localStorage,
* });
*
* const queryClient = addOfflineSupportToQueryClient({
* queryClient: new QueryClient(),
* dataProvider,
* resources: ['posts', 'comments'],
* });
*
* const App = () => (
* <PersistQueryClientProvider
* client={queryClient}
* persistOptions={{ persister: localStoragePersister }}
* onSuccess={() => {
* // resume mutations after initial restore from localStorage was successful
* queryClient.resumePausedMutations();
* }}
* >
* <Admin queryClient={queryClient} dataProvider={dataProvider}>
* <Resource name="posts" {...posts} />
* <Resource name="comments" {...comments} />
* </Admin>
* </PersistQueryClientProvider>
* );
*/
const addOfflineSupportToQueryClient = ({ dataProvider, resources, queryClient, }) => {
resources.forEach(resource => {
dataFetchActions_1.DATAPROVIDER_MUTATIONS.forEach(mutation => {
queryClient.setMutationDefaults([resource, mutation], {
mutationFn: async (params) => {
const dataProviderFn = dataProvider[mutation];
return dataProviderFn.apply(dataProviderFn, ...params);
},
});
});
});
return queryClient;
};
exports.addOfflineSupportToQueryClient = addOfflineSupportToQueryClient;
//# sourceMappingURL=addOfflineSupportToQueryClient.js.map