Add mutationKey to all mutations to allow offline mutations

packages/ra-core/src/dataProvider/useCreate.spec.tsx

@@ -25,6 +25,7 @@ import {
     WithMiddlewaresSuccess as WithMiddlewaresSuccessUndoable,
     WithMiddlewaresError as WithMiddlewaresErrorUndoable,
 } from './useCreate.undoable.stories';
+import { QueryClient, useMutationState } from '@tanstack/react-query';
 
 describe('useCreate', () => {
     it('returns a callback that can be used with create arguments', async () => {
@@ -99,7 +100,7 @@ describe('useCreate', () => {
         });
     });
 
-    it('accepts a meta paramater', async () => {
+    it('accepts a meta parameter', async () => {
         const dataProvider = testDataProvider({
             create: jest.fn(() => Promise.resolve({ data: { id: 1 } } as any)),
         });
@@ -124,6 +125,47 @@ describe('useCreate', () => {
         });
     });
 
+    it('sets the mutationKey', async () => {
+        const queryClient = new QueryClient();
+        queryClient.setMutationDefaults(['foo', 'create'], {
+            meta: { hello: 'world' },
+        });
+
+        const dataProvider = testDataProvider({
+            create: jest.fn(() => Promise.resolve({ data: { id: 1 } } as any)),
+        });
+        let localCreate;
+        const Dummy = () => {
+            const [create] = useCreate('foo');
+            localCreate = create;
+            return <span />;
+        };
+        const Observe = () => {
+            const mutation = useMutationState({
+                filters: {
+                    mutationKey: ['foo', 'create'],
+                },
+            });
+
+            return <span>mutations: {mutation.length}</span>;
+        };
+
+        render(
+            <CoreAdminContext dataProvider={dataProvider}>
+                <Dummy />
+                <Observe />
+            </CoreAdminContext>
+        );
+        localCreate('foo', { data: { bar: 'baz' }, meta: { hello: 'world' } });
+        await waitFor(() => {
+            expect(dataProvider.create).toHaveBeenCalledWith('foo', {
+                data: { bar: 'baz' },
+                meta: { hello: 'world' },
+            });
+        });
+        await screen.findByText('mutations: 1');
+    });
+
     it('returns a state typed based on the parametric type', async () => {
         interface Product extends RaRecord {
             sku: string;

packages/ra-core/src/dataProvider/useCreate.ts

@@ -152,6 +152,7 @@ export const useCreate = <
         MutationError,
         Partial<UseCreateMutateParams<RecordType>>
     >({
+        mutationKey: [resource, 'create', params],
         mutationFn: ({
             resource: callTimeResource = resource,
             data: callTimeData = paramsRef.current.data,

packages/ra-core/src/dataProvider/useDelete.spec.tsx

@@ -19,7 +19,7 @@ import {
     ErrorCase as ErrorCaseUndoable,
     SuccessCase as SuccessCaseUndoable,
 } from './useDelete.undoable.stories';
-import { QueryClient } from '@tanstack/react-query';
+import { QueryClient, useMutationState } from '@tanstack/react-query';
 
 describe('useDelete', () => {
     it('returns a callback that can be used with deleteOne arguments', async () => {
@@ -136,6 +136,47 @@ describe('useDelete', () => {
         });
     });
 
+    it('sets the mutationKey', async () => {
+        const dataProvider = testDataProvider({
+            delete: jest.fn(() => Promise.resolve({ data: { id: 1 } } as any)),
+        });
+        let localDeleteOne;
+        const Dummy = () => {
+            const [deleteOne] = useDelete('foo');
+            localDeleteOne = deleteOne;
+            return <span />;
+        };
+        const Observe = () => {
+            const mutation = useMutationState({
+                filters: {
+                    mutationKey: ['foo', 'delete'],
+                },
+            });
+
+            return <span>mutations: {mutation.length}</span>;
+        };
+
+        render(
+            <CoreAdminContext dataProvider={dataProvider}>
+                <Dummy />
+                <Observe />
+            </CoreAdminContext>
+        );
+        localDeleteOne('foo', {
+            id: 1,
+            previousData: { id: 1, bar: 'bar' },
+            meta: { hello: 'world' },
+        });
+        await waitFor(() => {
+            expect(dataProvider.delete).toHaveBeenCalledWith('foo', {
+                id: 1,
+                previousData: { id: 1, bar: 'bar' },
+                meta: { hello: 'world' },
+            });
+        });
+        await screen.findByText('mutations: 1');
+    });
+
     it('returns data typed based on the parametric type', async () => {
         interface Product extends RaRecord {
             sku: string;

packages/ra-core/src/dataProvider/useDelete.ts

@@ -194,6 +194,7 @@ export const useDelete = <
         MutationError,
         Partial<UseDeleteMutateParams<RecordType>>
     >({
+        mutationKey: [resource, 'delete', params],
         mutationFn: ({
             resource: callTimeResource = resource,
             id: callTimeId = paramsRef.current.id,

packages/ra-core/src/dataProvider/useDeleteMany.spec.tsx

@@ -1,11 +1,11 @@
 import * as React from 'react';
-import { waitFor, render } from '@testing-library/react';
+import { waitFor, render, screen } from '@testing-library/react';
 import expect from 'expect';
 
 import { CoreAdminContext } from '../core';
 import { testDataProvider } from './testDataProvider';
 import { useDeleteMany } from './useDeleteMany';
-import { QueryClient } from '@tanstack/react-query';
+import { QueryClient, useMutationState } from '@tanstack/react-query';
 
 describe('useDeleteMany', () => {
     it('returns a callback that can be used with update arguments', async () => {
@@ -80,6 +80,64 @@ describe('useDeleteMany', () => {
         });
     });
 
+    it('accepts a meta parameter', async () => {
+        const dataProvider = testDataProvider({
+            deleteMany: jest.fn(() => Promise.resolve({ data: [1, 2] } as any)),
+        });
+        let localDeleteMany;
+        const Dummy = () => {
+            const [deleteMany] = useDeleteMany();
+            localDeleteMany = deleteMany;
+            return <span />;
+        };
+
+        render(
+            <CoreAdminContext dataProvider={dataProvider}>
+                <Dummy />
+            </CoreAdminContext>
+        );
+        localDeleteMany('foo', { ids: [1, 2], meta: { hello: 'world' } });
+        await waitFor(() => {
+            expect(dataProvider.deleteMany).toHaveBeenCalledWith('foo', {
+                ids: [1, 2],
+                meta: { hello: 'world' },
+            });
+        });
+    });
+    it('sets the mutationKey', async () => {
+        const dataProvider = testDataProvider({
+            deleteMany: jest.fn(() => Promise.resolve({ data: [1, 2] } as any)),
+        });
+        let localDeleteMany;
+        const Dummy = () => {
+            const [deleteMany] = useDeleteMany('foo');
+            localDeleteMany = deleteMany;
+            return <span />;
+        };
+        const Observe = () => {
+            const mutation = useMutationState({
+                filters: {
+                    mutationKey: ['foo', 'deleteMany'],
+                },
+            });
+
+            return <span>mutations: {mutation.length}</span>;
+        };
+
+        render(
+            <CoreAdminContext dataProvider={dataProvider}>
+                <Dummy />
+                <Observe />
+            </CoreAdminContext>
+        );
+        localDeleteMany('foo', { ids: [1, 2] });
+        await waitFor(() => {
+            expect(dataProvider.deleteMany).toHaveBeenCalledWith('foo', {
+                ids: [1, 2],
+            });
+        });
+        await screen.findByText('mutations: 1');
+    });
     it('accepts a meta parameter', async () => {
         const dataProvider = testDataProvider({
             deleteMany: jest.fn(() => Promise.resolve({ data: [1, 2] } as any)),

packages/ra-core/src/dataProvider/useDeleteMany.ts

@@ -220,6 +220,7 @@ export const useDeleteMany = <
         MutationError,
         Partial<UseDeleteManyMutateParams<RecordType>>
     >({
+        mutationKey: [resource, 'deleteMany', params],
         mutationFn: ({
             resource: callTimeResource = resource,
             ids: callTimeIds = paramsRef.current.ids,

packages/ra-core/src/dataProvider/useUpdate.spec.tsx

@@ -24,7 +24,7 @@ import {
     WithMiddlewaresSuccess as WithMiddlewaresSuccessUndoable,
     WithMiddlewaresError as WithMiddlewaresErrorUndoable,
 } from './useUpdate.undoable.stories';
-import { QueryClient } from '@tanstack/react-query';
+import { QueryClient, useMutationState } from '@tanstack/react-query';
 
 describe('useUpdate', () => {
     describe('mutate', () => {
@@ -190,6 +190,48 @@ describe('useUpdate', () => {
             });
         });
     });
+    it('sets the mutationKey', async () => {
+        const dataProvider = {
+            update: jest.fn(() => Promise.resolve({ data: { id: 1 } } as any)),
+        } as any;
+        let localUpdate;
+        const Dummy = () => {
+            const [update] = useUpdate('foo');
+            localUpdate = update;
+            return <span />;
+        };
+        const Observe = () => {
+            const mutation = useMutationState({
+                filters: {
+                    mutationKey: ['foo', 'update'],
+                },
+            });
+
+            return <span>mutations: {mutation.length}</span>;
+        };
+
+        render(
+            <CoreAdminContext dataProvider={dataProvider}>
+                <Dummy />
+                <Observe />
+            </CoreAdminContext>
+        );
+        localUpdate('foo', {
+            id: 1,
+            data: { bar: 'baz' },
+            previousData: { id: 1, bar: 'bar' },
+            meta: { hello: 'world' },
+        });
+        await waitFor(() => {
+            expect(dataProvider.update).toHaveBeenCalledWith('foo', {
+                id: 1,
+                data: { bar: 'baz' },
+                previousData: { id: 1, bar: 'bar' },
+                meta: { hello: 'world' },
+            });
+        });
+        await screen.findByText('mutations: 1');
+    });
     describe('data', () => {
         it('returns a data typed based on the parametric type', async () => {
             interface Product extends RaRecord {

packages/ra-core/src/dataProvider/useUpdate.ts

@@ -196,6 +196,7 @@ export const useUpdate = <RecordType extends RaRecord = any, ErrorType = Error>(
         ErrorType,
         Partial<UseUpdateMutateParams<RecordType>>
     >({
+        mutationKey: [resource, 'update', params],
         mutationFn: ({
             resource: callTimeResource = resource,
             id: callTimeId = paramsRef.current.id,

packages/ra-core/src/dataProvider/useUpdateMany.spec.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { screen, render, waitFor, act } from '@testing-library/react';
-import { QueryClient } from '@tanstack/react-query';
+import { QueryClient, useMutationState } from '@tanstack/react-query';
 import expect from 'expect';
 
 import { testDataProvider } from './testDataProvider';
@@ -117,6 +117,46 @@ describe('useUpdateMany', () => {
         });
     });
 
+    it('sets the mutationKey', async () => {
+        const dataProvider = testDataProvider({
+            updateMany: jest.fn(() => Promise.resolve({ data: [1, 2] } as any)),
+        });
+        let localUpdateMany;
+        const Dummy = () => {
+            const [updateMany] = useUpdateMany('foo');
+            localUpdateMany = updateMany;
+            return <span />;
+        };
+        const Observe = () => {
+            const mutation = useMutationState({
+                filters: {
+                    mutationKey: ['foo', 'updateMany'],
+                },
+            });
+
+            return <span>mutations: {mutation.length}</span>;
+        };
+        render(
+            <CoreAdminContext dataProvider={dataProvider}>
+                <Dummy />
+                <Observe />
+            </CoreAdminContext>
+        );
+        localUpdateMany('foo', {
+            ids: [1, 2],
+            data: { bar: 'baz' },
+            meta: { hello: 'world' },
+        });
+        await waitFor(() => {
+            expect(dataProvider.updateMany).toHaveBeenCalledWith('foo', {
+                ids: [1, 2],
+                data: { bar: 'baz' },
+                meta: { hello: 'world' },
+            });
+        });
+        await screen.findByText('mutations: 1');
+    });
+
     describe('query cache', () => {
         it('updates getList query cache when dataProvider promise resolves', async () => {
             const queryClient = new QueryClient();

packages/ra-core/src/dataProvider/useUpdateMany.ts

@@ -199,6 +199,7 @@ export const useUpdateMany = <
         MutationError,
         Partial<UseUpdateManyMutateParams<RecordType>>
     >({
+        mutationKey: [resource, 'updateMany', params],
         mutationFn: ({
             resource: callTimeResource = resource,
             ids: callTimeIds = paramsRef.current.ids,