Merge pull request #6237 from marmelab/Fix-refetch

Expose refetch in hooks and components
marmelab · May 6, 2021 · 8c9de71 · 8c9de71
2 parents 682a1af + 22eb28e
commit 8c9de71
Show file tree

Hide file tree

Showing 28 changed files with 158 additions and 83 deletions.
diff --git a/docs/Actions.md b/docs/Actions.md
@@ -147,9 +147,9 @@ The return value of `useQuery` is an object representing the query state, using
 
 This object updates according to the request state:
 
-- start: `{ loading: true, loaded: false }`
-- success: `{ data: [data from response], total: [total from response], loading: false, loaded: true }`
-- error: `{ error: [error from response], loading: false, loaded: true }`
+- start: `{ loading: true, loaded: false, refetch }`
+- success: `{ data: [data from response], total: [total from response], loading: false, loaded: true, refetch }`
+- error: `{ error: [error from response], loading: false, loaded: true, refetch }`
 
 As a reminder, here are the read query types handled by Data Providers:
 
@@ -299,7 +299,7 @@ const { data, loaded } = useGetOne<Product>('products', 123);
 
 ```jsx
 // syntax
-const { data, ids, total, loading, loaded, error } = useGetList(resource, pagination, sort, filter, options);
+const { data, ids, total, loading, loaded, error, refetch } = useGetList(resource, pagination, sort, filter, options);
 
 // example
 import { useGetList } from 'react-admin';
@@ -325,7 +325,7 @@ const LatestNews = () => {
 
 ```jsx
 // syntax
-const { data, loading, loaded, error } = useGetOne(resource, id, options);
+const { data, loading, loaded, error, refetch } = useGetOne(resource, id, options);
 
 // example
 import { useGetOne } from 'react-admin';
@@ -341,7 +341,7 @@ const UserProfile = ({ record }) => {
 
 ```jsx
 // syntax
-const { data, loading, loaded, error } = useGetMany(resource, ids, options);
+const { data, loading, loaded, error, refetch } = useGetMany(resource, ids, options);
 
 // example
 import { useGetMany } from 'react-admin';
@@ -363,7 +363,7 @@ const PostTags = ({ record }) => {
 
 ```jsx
 // syntax
-const { data, ids, total, loading, loaded, error } = useGetManyReference(resource, target, id, pagination, sort, filter, referencingResource, options);
+const { data, ids, total, loading, loaded, error, refetch } = useGetManyReference(resource, target, id, pagination, sort, filter, referencingResource, options);
 
 // example
 import { useGetManyReference } from 'react-admin';

diff --git a/docs/List.md b/docs/List.md
@@ -1930,6 +1930,7 @@ const {
     basePath, // deduced from the location, useful for action buttons
     defaultTitle, // the translated title based on the resource, e.g. 'Posts'
     resource, // the resource name, deduced from the location. e.g. 'posts'
+    refetch, // a callback to refresh the list data
 } = useListContext();
 ```
 

diff --git a/packages/ra-core/src/controller/ListContext.tsx b/packages/ra-core/src/controller/ListContext.tsx
@@ -31,6 +31,7 @@ import { ListControllerProps } from './useListController';
  * @prop {string}   basePath deduced from the location, useful for action buttons
  * @prop {string}   defaultTitle the translated title based on the resource, e.g. 'Posts'
  * @prop {string}   resource the resource name, deduced from the location. e.g. 'posts'
+ * @prop {Function} refetch a function for triggering a refetch of the list data
  *
  * @typedef Props
  * @prop {ListControllerProps} value
@@ -70,6 +71,7 @@ const ListContext = createContext<ListControllerProps>({
     onUnselectItems: null,
     page: null,
     perPage: null,
+    refetch: null,
     resource: null,
     selectedIds: null,
     setFilters: null,

diff --git a/packages/ra-core/src/controller/details/EditContext.tsx b/packages/ra-core/src/controller/details/EditContext.tsx
@@ -32,6 +32,7 @@ export const EditContext = createContext<EditControllerProps>({
     setOnFailure: null,
     setOnSuccess: null,
     setTransform: null,
+    refetch: null,
     resource: null,
     save: null,
     saving: null,

diff --git a/packages/ra-core/src/controller/details/ShowContext.tsx b/packages/ra-core/src/controller/details/ShowContext.tsx
@@ -25,6 +25,7 @@ export const ShowContext = createContext<ShowControllerProps>({
     defaultTitle: null,
     loaded: null,
     loading: null,
+    refetch: null,
     resource: null,
     version: null,
 });

diff --git a/packages/ra-core/src/controller/details/useEditController.ts b/packages/ra-core/src/controller/details/useEditController.ts
@@ -15,7 +15,7 @@ import {
     useRefresh,
     RedirectionSideEffect,
 } from '../../sideEffect';
-import { useGetOne, useUpdate } from '../../dataProvider';
+import { useGetOne, useUpdate, Refetch } from '../../dataProvider';
 import { useTranslate } from '../../i18n';
 import { CRUD_GET_ONE, CRUD_UPDATE } from '../../actions';
 import {
@@ -74,6 +74,7 @@ export interface EditControllerProps<RecordType extends Record = Record> {
     setTransform: SetTransformData;
     successMessage?: string;
     record?: RecordType;
+    refetch: Refetch;
     redirect: RedirectionSideEffect;
     resource: string;
     version: number;
@@ -137,7 +138,7 @@ export const useEditController = <RecordType extends Record = Record>(
         setTransform,
     } = useSaveModifiers({ onSuccess, onFailure, transform });
 
-    const { data: record, loading, loaded } = useGetOne<RecordType>(
+    const { data: record, loading, loaded, refetch } = useGetOne<RecordType>(
         resource,
         id,
         {
@@ -262,6 +263,7 @@ export const useEditController = <RecordType extends Record = Record>(
         setOnSuccess,
         setOnFailure,
         setTransform,
+        refetch,
         resource,
         basePath,
         record,

diff --git a/packages/ra-core/src/controller/details/useShowController.ts b/packages/ra-core/src/controller/details/useShowController.ts
@@ -1,7 +1,7 @@
 import useVersion from '../useVersion';
 import { useCheckMinimumRequiredProps } from '../checkMinimumRequiredProps';
 import { Record, Identifier } from '../../types';
-import { useGetOne } from '../../dataProvider';
+import { useGetOne, Refetch } from '../../dataProvider';
 import { useTranslate } from '../../i18n';
 import { useNotify, useRedirect, useRefresh } from '../../sideEffect';
 import { CRUD_GET_ONE } from '../../actions';
@@ -32,6 +32,7 @@ export interface ShowControllerProps<RecordType extends Record = Record> {
     hasShow?: boolean;
     resource: string;
     record?: RecordType;
+    refetch: Refetch;
     version: number;
 }
 
@@ -63,7 +64,7 @@ export const useShowController = <RecordType extends Record = Record>(
     const redirect = useRedirect();
     const refresh = useRefresh();
     const version = useVersion();
-    const { data: record, loading, loaded } = useGetOne<RecordType>(
+    const { data: record, loading, loaded, refetch } = useGetOne<RecordType>(
         resource,
         id,
         {
@@ -90,6 +91,7 @@ export const useShowController = <RecordType extends Record = Record>(
         resource,
         basePath,
         record,
+        refetch,
         hasCreate,
         hasEdit,
         hasList,

diff --git a/packages/ra-core/src/controller/field/useReferenceArrayFieldController.ts b/packages/ra-core/src/controller/field/useReferenceArrayFieldController.ts
@@ -70,23 +70,27 @@ const useReferenceArrayFieldController = (
     const resource = useResourceContext(props);
     const notify = useNotify();
     const ids = get(record, source) || emptyArray;
-    const { data, error, loading, loaded } = useGetMany(reference, ids, {
-        onFailure: error =>
-            notify(
-                typeof error === 'string'
-                    ? error
-                    : error.message || 'ra.notification.http_error',
-                'warning',
-                {
-                    _:
-                        typeof error === 'string'
-                            ? error
-                            : error && error.message
-                            ? error.message
-                            : undefined,
-                }
-            ),
-    });
+    const { data, error, loading, loaded, refetch } = useGetMany(
+        reference,
+        ids,
+        {
+            onFailure: error =>
+                notify(
+                    typeof error === 'string'
+                        ? error
+                        : error.message || 'ra.notification.http_error',
+                    'warning',
+                    {
+                        _:
+                            typeof error === 'string'
+                                ? error
+                                : error && error.message
+                                ? error.message
+                                : undefined,
+                    }
+                ),
+        }
+    );
 
     const [loadingState, setLoadingState] = useSafeSetState<boolean>(loading);
     const [loadedState, setLoadedState] = useSafeSetState<boolean>(loaded);
@@ -246,6 +250,7 @@ const useReferenceArrayFieldController = (
         onUnselectItems,
         page,
         perPage,
+        refetch,
         resource: reference,
         selectedIds,
         setFilters,

diff --git a/packages/ra-core/src/controller/field/useReferenceManyFieldController.ts b/packages/ra-core/src/controller/field/useReferenceManyFieldController.ts
@@ -158,7 +158,15 @@ const useReferenceManyFieldController = (
     });
 
     const referenceId = get(record, source);
-    const { data, ids, total, error, loading, loaded } = useGetManyReference(
+    const {
+        data,
+        ids,
+        total,
+        error,
+        loading,
+        loaded,
+        refetch,
+    } = useGetManyReference(
         reference,
         target,
         referenceId,
@@ -205,6 +213,7 @@ const useReferenceManyFieldController = (
         onUnselectItems,
         page,
         perPage,
+        refetch,
         resource: reference,
         selectedIds,
         setFilters,

diff --git a/packages/ra-core/src/controller/input/ReferenceInputController.spec.tsx b/packages/ra-core/src/controller/input/ReferenceInputController.spec.tsx
@@ -194,6 +194,7 @@ describe('<ReferenceInputController />', () => {
                     loading: true,
                     page: 1,
                     perPage: 25,
+                    refetch: expect.any(Function),
                     resource: 'comments',
                     selectedIds: [],
 
@@ -206,6 +207,7 @@ describe('<ReferenceInputController />', () => {
                     error: null,
                     loaded: true,
                     loading: true,
+                    refetch: expect.any(Function),
                 },
                 dataStatus: {
                     error: null,

diff --git a/packages/ra-core/src/controller/input/useReferenceArrayInputController.ts b/packages/ra-core/src/controller/input/useReferenceArrayInputController.ts
@@ -240,10 +240,11 @@ export const useReferenceArrayInputController = (
         [queryFilter, defaultFilter, filterToQuery]
     );
 
-    const { data: referenceRecordsFetched, loaded } = useGetMany(
-        reference,
-        idsToFetch || []
-    );
+    const {
+        data: referenceRecordsFetched,
+        loaded,
+        refetch: refetchGetMany,
+    } = useGetMany(reference, idsToFetch || []);
 
     const referenceRecords = referenceRecordsFetched
         ? referenceRecordsFetched.concat(referenceRecordsFromStore)
@@ -256,6 +257,7 @@ export const useReferenceArrayInputController = (
         data: matchingReferences,
         ids: matchingReferencesIds,
         total,
+        refetch: refetchGetMatching,
     } = useGetMatching(
         reference,
         pagination,
@@ -282,6 +284,11 @@ export const useReferenceArrayInputController = (
         translate,
     });
 
+    const refetch = useCallback(() => {
+        refetchGetMany();
+        refetchGetMatching();
+    }, [refetchGetMany, refetchGetMatching]);
+
     return {
         basePath: props.basePath || `/${resource}`,
         choices: dataStatus.choices,
@@ -307,6 +314,7 @@ export const useReferenceArrayInputController = (
         onUnselectItems,
         page,
         perPage,
+        refetch,
         resource,
         selectedIds: input.value,
         setFilter,

diff --git a/packages/ra-core/src/controller/input/useReferenceInputController.ts b/packages/ra-core/src/controller/input/useReferenceInputController.ts
@@ -122,12 +122,13 @@ export const useReferenceInputController = (
         loaded: possibleValuesLoaded,
         loading: possibleValuesLoading,
         error: possibleValuesError,
+        refetch: refetchGetList,
     } = useGetList(reference, pagination, sort, filterValues);
 
     // fetch current value
     const {
         referenceRecord,
-        refetch,
+        refetch: refetchReference,
         error: referenceError,
         loading: referenceLoading,
         loaded: referenceLoaded,
@@ -158,6 +159,11 @@ export const useReferenceInputController = (
         translate,
     });
 
+    const refetch = useCallback(() => {
+        refetchGetList();
+        refetchReference();
+    }, [refetchGetList, refetchReference]);
+
     return {
         // should match the ListContext shape
         possibleValues: {
@@ -184,13 +190,15 @@ export const useReferenceInputController = (
             onSelect,
             onToggleItem,
             onUnselectItems,
+            refetch,
             resource,
         },
         referenceRecord: {
             data: referenceRecord,
             loaded: referenceLoaded,
             loading: referenceLoading,
             error: referenceError,
+            refetch: refetchReference,
         },
         dataStatus: {
             error: dataStatus.error,
@@ -224,6 +232,7 @@ export interface ReferenceInputValue {
         loaded: boolean;
         loading: boolean;
         error?: any;
+        refetch: Refetch;
     };
     dataStatus: {
         error?: any;

diff --git a/packages/ra-core/src/controller/useListContext.ts b/packages/ra-core/src/controller/useListContext.ts
@@ -135,6 +135,7 @@ const extractListContextProps = ({
     onUnselectItems,
     page,
     perPage,
+    refetch,
     resource,
     selectedIds,
     setFilters,
@@ -160,6 +161,7 @@ const extractListContextProps = ({
     onUnselectItems,
     page,
     perPage,
+    refetch,
     resource,
     selectedIds,
     setFilters,