From ef8d28556fde2fa3be5ecdb35abf6f6d4ddedbae Mon Sep 17 00:00:00 2001
From: fzaninotto <fzaninotto@gmail.com>
Date: Mon, 20 May 2019 22:59:05 +0200
Subject: [PATCH 01/18] Change useQuery and useMutation signature to accept a
 selector

---
 docs/Actions.md                               | 65 ++++++++++---------
 docs/DataProviders.md                         |  2 +-
 examples/demo/src/dashboard/NewCustomers.js   | 16 +++--
 examples/demo/src/reviews/AcceptButton.js     | 12 ++--
 packages/ra-core/src/fetch/Mutation.tsx       |  2 +-
 packages/ra-core/src/fetch/Query.tsx          |  2 +-
 packages/ra-core/src/fetch/useDataProvider.ts | 64 +++++++++++++-----
 packages/ra-core/src/fetch/useMutation.ts     | 58 +++++++++++------
 packages/ra-core/src/fetch/useQuery.ts        | 54 +++++++++++----
 9 files changed, 183 insertions(+), 92 deletions(-)

diff --git a/docs/Actions.md b/docs/Actions.md
index 41f2ac816f4..77b0d5f2678 100644
--- a/docs/Actions.md
+++ b/docs/Actions.md
@@ -11,11 +11,11 @@ React-admin provides special hooks to emit read and write queries to the `dataPr
 
 ## `useQuery` Hook
 
-Use the `useQuery` hook to emit a read query to the API when a component mounts. The parameters are the same as the ones expected by the [`dataProvider`](./DataProviders.md):
+Use the `useQuery` hook to emit a read query to the API when a component mounts. Call it with an object having the same fields as the parameters expected by the [`dataProvider`](./DataProviders.md):
 
 - `type`: The Query type, e.g `GET_LIST`
 - `resource`: The Resource name, e.g. "posts"
-- `params`: Query parameters. Depends on the query type.
+- `payload`: Query parameters. Depends on the query type.
 
 The return value of `useQuery` is an object, which updates according to the request state:
 
@@ -29,11 +29,11 @@ Here is an implementation of a user profile component using the `useQuery` hook:
 import { useQuery, GET_ONE } from 'react-admin';
 
 const UserProfile = ({ record }) => {
-    const { loading, error, data } = useQuery(
-        GET_ONE,
-        'users',
-        { id: record.id }
-    );
+    const { loading, error, data } = useQuery({
+        type: GET_ONE,
+        resource: 'users',
+        payload: { id: record.id }
+    });
     if (loading) { return <Loading />; }
     if (error) { return <p>ERROR</p>; }
     return <div>User {data.username}</div>;
@@ -50,14 +50,14 @@ Here is another example usage of `useQuery`, this time to display a list of user
 import { useQuery, GET_LIST } from 'react-admin';
 
 const UserList = () => {
-    const { loading, error, data, total } = useQuery(
-        GET_LIST,
-        'users',
-        {
+    const { loading, error, data, total } = useQuery({
+        type: GET_LIST,
+        resource: 'users',
+        payload: {
             pagination: { page: 1, perPage: 10 },
             sort: { field: 'username', order: 'ASC' },
         }
-    );
+    });
     if (loading) { return <Loading />; }
     if (error) { return <p>ERROR</p>; }
     return (
@@ -86,7 +86,7 @@ You can destructure the return value of the `useQuery` hook as `{ data, total, e
 
 ## `useMutation` Hook
 
-`useQuery` emits the request to the `dataProvider` as soon as the component mounts. To emit the request based on a user action, use the `useMutation` hook instead. This hook returns a callback that emits the request when executed, and an object containing the request state:
+`useQuery` emits the request to the `dataProvider` as soon as the component mounts. To emit the request based on a user action, use the `useMutation` hook instead. This hook takes the same arguments as `useQuery`, but returns a callback that emits the request when executed, and an object containing the request state:
 
 - mount: { loading: false, loaded: false }
 - mutate called: { loading: true, loaded: false }
@@ -100,11 +100,11 @@ Here is an implementation of an "Approve" button:
 import { useMutation, UPDATE } from 'react-admin';
 
 const ApproveButton = ({ record }) => {
-    const [approve, { loading }] = useMutation(
-        UPDATE,
-        'comments',
-        { id: record.id, data: { isApproved: true } }
-    );
+    const [approve, { loading }] = useMutation({
+        type: UPDATE,
+        resource: 'comments',
+        payload: { id: record.id, data: { isApproved: true } }
+    });
     return <FlatButton label="Approve" onClick={approve} disabled={loading} />;
 };
 ```
@@ -143,7 +143,7 @@ export const CommentList = (props) =>
 
 ## Handling Side Effects
 
-Fetching data is called a *side effect*, since it calls the outside world, and is asynchronous. Usual actions may have other side effects, like showing a notification, or redirecting the user to another page. Both `useQuery` and `useMutation` hooks accept a fourth parameter, which lets you describe the options of the query, including success and failure side effects. 
+Fetching data is called a *side effect*, since it calls the outside world, and is asynchronous. Usual actions may have other side effects, like showing a notification, or redirecting the user to another page. Both `useQuery` and `useMutation` hooks accept a second parameter in addition to the query, which lets you describe the options of the query, including success and failure side effects. 
 
 Here is how to add notifications and a redirection to the `ApproveButton` component using that fourth parameter:
 
@@ -153,17 +153,22 @@ import { useMutation, UPDATE } from 'react-admin';
 
 const ApproveButton = ({ record }) => {
     const [approve, { loading }] = useMutation(
-        UPDATE,
-        'comments',
-        { id: record.id, data: { isApproved: true } },
+        {
+            type: UPDATE,
+            resource: 'comments',
+            payload: { id: record.id, data: { isApproved: true } },
+        },
 +       {
 +           onSuccess: {
 +               notification: { body: 'Comment approved', level: 'info' },
 +               redirectTo: '/comments',
 +           },
-+           onError: {
-+               notification: { body: 'Error: comment not approved', level: 'warning' }
-+           }
++           onFailure: {
++               notification: {
++                   body: 'Error: comment not approved',
++                   level: 'warning',
++               },
++           },
 +       }
     );
     return <FlatButton label="Approve" onClick={approve} disabled={loading} />;
@@ -195,9 +200,11 @@ import { useMutation, UPDATE } from 'react-admin';
 
 const ApproveButton = ({ record }) => {
     const [approve, { loading }] = useMutation(
-        UPDATE,
-        'comments',
-        { id: record.id, data: { isApproved: true } },
+        {
+            type: UPDATE,
+            resource: 'comments',
+            payload: { id: record.id, data: { isApproved: true } },
+        },
         {
 +           undoable: true,
             onSuccess: {
@@ -269,7 +276,7 @@ const Dashboard = () => {
 }
 ```
 
-`useDataProvider` is more low-level than `useQuery` and `useMutation`, as it doesn't handle loading and error states (even though queries from `useDataProvider` trigger the global loading indicator). The `dataProvider` callback that it returns also accepts a fourth options parameter, just like the two other hoows.
+`useDataProvider` is more low-level than `useQuery` and `useMutation`, as it doesn't handle loading and error states (even though queries from `useDataProvider` trigger the global loading indicator). The `dataProvider` callback that it returns also accepts a fourth options parameter.
 
 ## Legacy Components: `<Query>`, `<Mutation>`, and `withDataProvider`
 
diff --git a/docs/DataProviders.md b/docs/DataProviders.md
index a3d4d7663fd..0be4d1c872c 100644
--- a/docs/DataProviders.md
+++ b/docs/DataProviders.md
@@ -24,7 +24,7 @@ The `dataProvider` parameter of the `<Admin>` component must be a function with
  * @param {Object} payload Request parameters. Depends on the action type
  * @returns {Promise} the Promise for a response
  */
-const dataProvider = (type, resource, params) => new Promise();
+const dataProvider = (type, resource, payload) => new Promise();
 ```
 
 You can find a Data Provider example implementation in [`packages/ra-data-simple-rest/src/index.js`](https://github.com/marmelab/react-admin/blob/master/packages/ra-data-simple-rest/src/index.js);
diff --git a/examples/demo/src/dashboard/NewCustomers.js b/examples/demo/src/dashboard/NewCustomers.js
index 95bf84f23c7..6e8f4c9d411 100644
--- a/examples/demo/src/dashboard/NewCustomers.js
+++ b/examples/demo/src/dashboard/NewCustomers.js
@@ -43,13 +43,17 @@ const NewCustomers = () => {
         return date;
     }, []);
 
-    const { loaded, data: visitors } = useQuery(GET_LIST, 'customers', {
-        filter: {
-            has_ordered: true,
-            first_seen_gte: aMonthAgo.toISOString(),
+    const { loaded, data: visitors } = useQuery({
+        type: GET_LIST,
+        resource: 'customers',
+        payload: {
+            filter: {
+                has_ordered: true,
+                first_seen_gte: aMonthAgo.toISOString(),
+            },
+            sort: { field: 'first_seen', order: 'DESC' },
+            pagination: { page: 1, perPage: 100 },
         },
-        sort: { field: 'first_seen', order: 'DESC' },
-        pagination: { page: 1, perPage: 100 },
     });
 
     if (!loaded) return null;
diff --git a/examples/demo/src/reviews/AcceptButton.js b/examples/demo/src/reviews/AcceptButton.js
index 106320cd3c0..66091b65927 100644
--- a/examples/demo/src/reviews/AcceptButton.js
+++ b/examples/demo/src/reviews/AcceptButton.js
@@ -6,7 +6,7 @@ import Button from '@material-ui/core/Button';
 import ThumbUp from '@material-ui/icons/ThumbUp';
 import { useTranslate, useMutation } from 'react-admin';
 
-const sideEffects = {
+const options = {
     undoable: true,
     onSuccess: {
         notification: {
@@ -29,10 +29,12 @@ const sideEffects = {
 const AcceptButton = ({ record }) => {
     const translate = useTranslate();
     const [approve, { loading }] = useMutation(
-        'UPDATE',
-        'reviews',
-        { id: record.id, data: { status: 'accepted' } },
-        sideEffects
+        {
+            type: 'UPDATE',
+            resource: 'reviews',
+            payload: { id: record.id, data: { status: 'accepted' } },
+        },
+        options
     );
     return record && record.status === 'pending' ? (
         <Button
diff --git a/packages/ra-core/src/fetch/Mutation.tsx b/packages/ra-core/src/fetch/Mutation.tsx
index d1923e7dc59..5e2d94a6680 100644
--- a/packages/ra-core/src/fetch/Mutation.tsx
+++ b/packages/ra-core/src/fetch/Mutation.tsx
@@ -48,6 +48,6 @@ const Mutation: FunctionComponent<Props> = ({
     resource,
     payload,
     options,
-}) => children(...useMutation(type, resource, payload, options));
+}) => children(...useMutation({ type, resource, payload }, options));
 
 export default Mutation;
diff --git a/packages/ra-core/src/fetch/Query.tsx b/packages/ra-core/src/fetch/Query.tsx
index bf2a959f39b..837f022d506 100644
--- a/packages/ra-core/src/fetch/Query.tsx
+++ b/packages/ra-core/src/fetch/Query.tsx
@@ -61,6 +61,6 @@ const Query: FunctionComponent<Props> = ({
     resource,
     payload,
     options,
-}) => children(useQuery(type, resource, payload, options));
+}) => children(useQuery({ type, resource, payload }, options));
 
 export default Query;
diff --git a/packages/ra-core/src/fetch/useDataProvider.ts b/packages/ra-core/src/fetch/useDataProvider.ts
index d516584ee6e..43df25f9274 100644
--- a/packages/ra-core/src/fetch/useDataProvider.ts
+++ b/packages/ra-core/src/fetch/useDataProvider.ts
@@ -6,11 +6,19 @@ import get from 'lodash/get';
 
 import { startUndoable } from '../actions/undoActions';
 
+interface UseDataProviderOptions {
+    action?: string;
+    meta?: object;
+    undoable?: boolean;
+    onSuccess?: any;
+    onFailure?: any;
+}
+
 /**
  * Hook for getting an instance of the dataProvider as prop
  *
- * Injects a dataProvider function prop, which behaves just like
- * the dataProvider function (same signature, returns a Promise), but
+ * Gets a dataProvider function, which behaves just like
+ * the real dataProvider (same signature, returns a Promise), but
  * uses Redux under the hood. The benefit is that react-admin tracks
  * the loading state when using this function, and shows the loader animation
  * while the dataProvider is waiting for a response.
@@ -47,36 +55,58 @@ const useDataProvider = () => {
     const dispatch = useDispatch() as Dispatch;
 
     return useMemo(
-        () => (type, resource: string, payload: any, meta: any = {}) =>
-            new Promise((resolve, reject) => {
-                const action = {
-                    type: 'CUSTOM_FETCH',
+        () => (
+            type: string,
+            resource: string,
+            payload: any,
+            options: UseDataProviderOptions = {}
+        ) => {
+            const {
+                action = 'CUSTOM_FETCH',
+                meta = {},
+                undoable = false,
+                onSuccess = {},
+                onFailure = {},
+            } = options;
+            return new Promise((resolve, reject) => {
+                const queryAction = {
+                    type: action,
                     payload,
                     meta: {
                         ...meta,
                         resource,
                         fetch: type,
                         onSuccess: {
-                            ...get(meta, 'onSuccess', {}),
-                            callback: ({ payload: response }) =>
-                                resolve(response),
+                            ...onSuccess,
+                            callback: ({ payload: response }) => {
+                                if (onSuccess.callback) {
+                                    onSuccess.callback({ payload: response });
+                                }
+                                return resolve(response);
+                            },
                         },
                         onFailure: {
-                            ...get(meta, 'onFailure', {}),
-                            callback: ({ error }) =>
-                                reject(
+                            ...onFailure,
+                            callback: ({ error }) => {
+                                if (onFailure.callback) {
+                                    onFailure.callback({ error });
+                                }
+                                return reject(
                                     new Error(
                                         error.message ? error.message : error
                                     )
-                                ),
+                                );
+                            },
                         },
                     },
                 };
 
-                return meta.undoable
-                    ? dispatch(startUndoable(action))
-                    : dispatch(action);
-            }),
+                return undoable
+                    ? dispatch(startUndoable(queryAction))
+                    : dispatch(queryAction);
+            });
+        },
+
         []
     );
 };
diff --git a/packages/ra-core/src/fetch/useMutation.ts b/packages/ra-core/src/fetch/useMutation.ts
index a5b4aac9564..a79c671f728 100644
--- a/packages/ra-core/src/fetch/useMutation.ts
+++ b/packages/ra-core/src/fetch/useMutation.ts
@@ -1,9 +1,25 @@
-import { useCallback, useEffect } from 'react';
+import { useCallback } from 'react';
+// @ts-ignore
+import { useSelector } from 'react-redux';
+
+import { ReduxState } from '../types';
 import { useSafeSetState } from './hooks';
 import useDataProvider from './useDataProvider';
 
+export interface Query {
+    type: string;
+    resource: string;
+    payload: object;
+}
+
+export interface QueryOptions {
+    meta?: any;
+    action?: string;
+    undoable?: false;
+}
+
 /**
- * Returns a callback to fetch the data provider through Redux, usually for mutations
+ * Get a callback to fetch the data provider through Redux, usually for mutations
  *
  * The request starts when the callback is called.
  *
@@ -14,31 +30,34 @@ import useDataProvider from './useDataProvider';
  * - success: { data: [data from response], total: [total from response], loading: false, loaded: true }
  * - error: { error: [error from response], loading: false, loaded: true }
  *
- * @param type The verb passed to th data provider, e.g. 'UPDATE'
- * @param resource A resource name, e.g. 'posts', 'comments'
- * @param payload The payload object, e.g; { id: 123, data: { isApproved: true } }
- * @param meta Redux action metas, including side effects to be executed upon success of failure, e.g. { onSuccess: { refresh: true } }
+ * @param {Object} query
+ * @param {string} query.type The verb passed to th data provider, e.g. 'UPDATE'
+ * @param {string} query.resource A resource name, e.g. 'posts', 'comments'
+ * @param {Object} query.payload The payload object, e.g. { id: 123, data: { isApproved: true } }
+ * @param {Object} options
+ * @param {string} options.action Redux action type
+ * @param {Object} options.meta Redux action metas, including side effects to be executed upon success of failure, e.g. { onSuccess: { refresh: true } }
+ * @param {function} selector Redux selector to get the result
  *
- * @returns A tuple with the mutation callback and the request state]. Destructure as [mutate,  { data, total, error, loading, loaded }].
+ * @returns A tuple with the mutation callback and the request state]. Destructure as [mutate, { data, total, error, loading, loaded }].
  *
  * @example
  *
  * import { useMutation } from 'react-admin';
  *
  * const ApproveButton = ({ record }) => {
- *     const [approve, { loading }] = useMutation(
- *         'UPDATE',
- *         'comments',
- *          { id: record.id, data: { isApproved: true } }
- *     );
+ *     const [approve, { loading }] = useMutation({
+ *         type: 'UPDATE',
+ *         resource: 'comments',
+ *         payload: { id: record.id, data: { isApproved: true } }
+ *     });
  *     return <FlatButton label="Approve" onClick={approve} disabled={loading} />;
  * };
  */
 const useMutation = (
-    type: string,
-    resource: string,
-    payload?: any,
-    meta?: any
+    query: Query,
+    options: QueryOptions = {},
+    selector?: (state: ReduxState) => any
 ): [
     () => void,
     {
@@ -49,8 +68,9 @@ const useMutation = (
         loaded: boolean;
     }
 ] => {
+    const { type, resource, payload } = query;
     const [state, setState] = useSafeSetState({
-        data: null,
+        data: selector ? useSelector(selector) : null,
         error: null,
         total: null,
         loading: false,
@@ -59,7 +79,7 @@ const useMutation = (
     const dataProvider = useDataProvider();
     const mutate = useCallback(() => {
         setState({ loading: true });
-        dataProvider(type, resource, payload, meta)
+        dataProvider(type, resource, payload, options)
             .then(({ data: dataFromResponse, total: totalFromResponse }) => {
                 setState({
                     data: dataFromResponse,
@@ -75,7 +95,7 @@ const useMutation = (
                     loaded: false,
                 });
             });
-    }, [JSON.stringify({ type, resource, payload, meta })]); // deep equality, see https://github.com/facebook/react/issues/14476#issuecomment-471199055
+    }, [JSON.stringify({ query, options })]); // deep equality, see https://github.com/facebook/react/issues/14476#issuecomment-471199055
 
     return [mutate, state];
 };
diff --git a/packages/ra-core/src/fetch/useQuery.ts b/packages/ra-core/src/fetch/useQuery.ts
index 877b0996c04..d47d38321f8 100644
--- a/packages/ra-core/src/fetch/useQuery.ts
+++ b/packages/ra-core/src/fetch/useQuery.ts
@@ -1,7 +1,23 @@
 import { useEffect } from 'react';
+// @ts-ignore
+import { useSelector } from 'react-redux';
+
+import { ReduxState } from '../types';
 import { useSafeSetState } from './hooks';
 import useDataProvider from './useDataProvider';
 
+export interface Query {
+    type: string;
+    resource: string;
+    payload: object;
+}
+
+export interface QueryOptions {
+    meta?: any;
+    action?: string;
+    undoable?: false;
+}
+
 /**
  * Fetch the data provider through Redux
  *
@@ -11,10 +27,14 @@ import useDataProvider from './useDataProvider';
  * - success: { data: [data from response], total: [total from response], loading: false, loaded: true }
  * - error: { error: [error from response], loading: false, loaded: true }
  *
- * @param type The verb passed to th data provider, e.g. 'GET_LIST', 'GET_ONE'
- * @param resource A resource name, e.g. 'posts', 'comments'
- * @param payload The payload object, e.g; { post_id: 12 }
- * @param meta Redux action metas, including side effects to be executed upon success of failure, e.g. { onSuccess: { refresh: true } }
+ * @param {Object} query
+ * @param {string} query.type The verb passed to th data provider, e.g. 'GET_LIST', 'GET_ONE'
+ * @param {string} query.resource A resource name, e.g. 'posts', 'comments'
+ * @param {Object} query.payload The payload object, e.g; { post_id: 12 }
+ * @param {Object} options
+ * @param {string} options.action Redux action type
+ * @param {Object} options.meta Redux action metas, including side effects to be executed upon success of failure, e.g. { onSuccess: { refresh: true } }
+ * @param {function} selector Redux selector to get the result
  *
  * @returns The current request state. Destructure as { data, total, error, loading, loaded }.
  *
@@ -23,7 +43,11 @@ import useDataProvider from './useDataProvider';
  * import { useQuery } from 'react-admin';
  *
  * const UserProfile = ({ record }) => {
- *     const { data, loading, error } = useQuery('GET_ONE', 'users', { id: record.id });
+ *     const { data, loading, error } = useQuery({
+ *         type: 'GET_ONE',
+ *         resource: 'users',
+ *         payload: { id: record.id }
+ *     });
  *     if (loading) { return <Loading />; }
  *     if (error) { return <p>ERROR</p>; }
  *     return <div>User {data.username}</div>;
@@ -38,7 +62,11 @@ import useDataProvider from './useDataProvider';
  *    sort: { field: 'username', order: 'ASC' },
  * };
  * const UserList = () => {
- *     const { data, total, loading, error } = useQuery('GET_LIST', 'users', payload);
+ *     const { data, total, loading, error } = useQuery({
+ *         type: 'GET_LIST',
+ *         resource: 'users',
+ *         payload
+ *     });
  *     if (loading) { return <Loading />; }
  *     if (error) { return <p>ERROR</p>; }
  *     return (
@@ -52,10 +80,9 @@ import useDataProvider from './useDataProvider';
  * };
  */
 const useQuery = (
-    type: string,
-    resource: string,
-    payload?: any,
-    meta?: any
+    query: Query,
+    options: QueryOptions = {},
+    selector?: (state: ReduxState) => any
 ): {
     data?: any;
     total?: number;
@@ -63,8 +90,9 @@ const useQuery = (
     loading: boolean;
     loaded: boolean;
 } => {
+    const { type, resource, payload } = query;
     const [state, setState] = useSafeSetState({
-        data: null,
+        data: selector ? useSelector(selector) : null,
         error: null,
         total: null,
         loading: true,
@@ -72,7 +100,7 @@ const useQuery = (
     });
     const dataProvider = useDataProvider();
     useEffect(() => {
-        dataProvider(type, resource, payload, meta)
+        dataProvider(type, resource, payload, options)
             .then(({ data: dataFromResponse, total: totalFromResponse }) => {
                 setState({
                     data: dataFromResponse,
@@ -88,7 +116,7 @@ const useQuery = (
                     loaded: false,
                 });
             });
-    }, [JSON.stringify({ type, resource, payload, meta })]); // deep equality, see https://github.com/facebook/react/issues/14476#issuecomment-471199055
+    }, [JSON.stringify({ query, options })]); // deep equality, see https://github.com/facebook/react/issues/14476#issuecomment-471199055
 
     return state;
 };

From e028fd42dd52bef11872b5ca5275d0a0c90e522d Mon Sep 17 00:00:00 2001
From: fzaninotto <fzaninotto@gmail.com>
Date: Mon, 20 May 2019 23:19:37 +0200
Subject: [PATCH 02/18] add useGetOne hook in controllers

---
 .../ra-core/src/controller/EditController.tsx | 41 +++++++++--------
 .../ra-core/src/controller/ShowController.tsx | 44 ++++++++-----------
 packages/ra-core/src/controller/index.ts      |  2 +
 packages/ra-core/src/controller/useGetOne.ts  | 16 +++++++
 4 files changed, 57 insertions(+), 46 deletions(-)
 create mode 100644 packages/ra-core/src/controller/useGetOne.ts

diff --git a/packages/ra-core/src/controller/EditController.tsx b/packages/ra-core/src/controller/EditController.tsx
index 3db0896031b..c20a71d8822 100644
--- a/packages/ra-core/src/controller/EditController.tsx
+++ b/packages/ra-core/src/controller/EditController.tsx
@@ -3,11 +3,12 @@ import { ReactNode, useEffect, useCallback } from 'react';
 import { useSelector, useDispatch } from 'react-redux';
 import { reset as resetForm } from 'redux-form';
 import inflection from 'inflection';
-import { crudGetOne, crudUpdate, startUndoable } from '../actions';
+import { crudUpdate, startUndoable } from '../actions';
 import { REDUX_FORM_NAME } from '../form';
 import { useCheckMinimumRequiredProps } from './checkMinimumRequiredProps';
 import { Translate, Record, Identifier, ReduxState } from '../types';
 import { RedirectionSideEffect } from '../sideEffect';
+import useGetOne from './useGetOne';
 import { useTranslate } from '../i18n';
 
 interface ChildrenFuncParams {
@@ -80,33 +81,31 @@ interface Props {
  */
 const EditController = (props: Props) => {
     useCheckMinimumRequiredProps('Edit', ['basePath', 'resource'], props);
+    const { basePath, children, id, resource, undoable } = props;
+    if (!children) {
+        return null;
+    }
     const translate = useTranslate();
     const dispatch = useDispatch();
-
-    const { basePath, children, id, resource, undoable } = props;
-
-    const record = useSelector((state: ReduxState) =>
-        state.admin.resources[props.resource]
-            ? state.admin.resources[props.resource].data[props.id]
-            : null
-    );
-
-    const isLoading = useSelector(
-        (state: ReduxState) => state.admin.loading > 0
-    );
-
     const version = useSelector(
         (state: ReduxState) => state.admin.ui.viewVersion
     );
+    const { data: record, loading } = useGetOne(resource, id, {
+        basePath,
+        version, // used to force reload
+        onFailure: {
+            notification: {
+                body: 'ra.notification.item_doesnt_exist',
+                level: 'warning',
+            },
+            redirectTo: 'list',
+            refresh: true,
+        },
+    });
 
     useEffect(() => {
         dispatch(resetForm(REDUX_FORM_NAME));
-        dispatch(crudGetOne(resource, id, basePath));
-    }, [resource, id, basePath, version]);
-
-    if (!children) {
-        return null;
-    }
+    }, [resource, id, version]);
 
     const resourceName = translate(`resources.${resource}.name`, {
         smart_count: 1,
@@ -139,7 +138,7 @@ const EditController = (props: Props) => {
     );
 
     return children({
-        isLoading,
+        isLoading: loading,
         defaultTitle,
         save,
         resource,
diff --git a/packages/ra-core/src/controller/ShowController.tsx b/packages/ra-core/src/controller/ShowController.tsx
index 7ffcd59bdea..8f6a36fd332 100644
--- a/packages/ra-core/src/controller/ShowController.tsx
+++ b/packages/ra-core/src/controller/ShowController.tsx
@@ -1,10 +1,10 @@
-import { ReactNode, useEffect } from 'react';
+import { ReactNode } from 'react';
 // @ts-ignore
-import { useDispatch, useSelector } from 'react-redux';
+import { useSelector } from 'react-redux';
 import inflection from 'inflection';
-import { crudGetOne } from '../actions';
 import { useCheckMinimumRequiredProps } from './checkMinimumRequiredProps';
 import { Translate, Record, Identifier, ReduxState } from '../types';
+import useGetOne from './useGetOne';
 import { useTranslate } from '../i18n';
 
 interface ChildrenFuncParams {
@@ -74,31 +74,25 @@ interface Props {
 const ShowController = (props: Props) => {
     useCheckMinimumRequiredProps('Show', ['basePath', 'resource'], props);
     const { basePath, children, id, resource } = props;
+    if (!children) {
+        return null;
+    }
     const translate = useTranslate();
-    const dispatch = useDispatch();
-
-    const record = useSelector((state: ReduxState) =>
-        state.admin.resources[props.resource]
-            ? state.admin.resources[props.resource].data[props.id]
-            : null
-    );
-
-    const isLoading = useSelector(
-        (state: ReduxState) => state.admin.loading > 0
-    );
-
     const version = useSelector(
         (state: ReduxState) => state.admin.ui.viewVersion
     );
-
-    useEffect(() => {
-        dispatch(crudGetOne(resource, id, basePath));
-    }, [resource, id, basePath, version]);
-
-    if (!children) {
-        return null;
-    }
-
+    const { data: record, loading } = useGetOne(resource, id, {
+        basePath,
+        version, // used to force reload
+        onFailure: {
+            notification: {
+                body: 'ra.notification.item_doesnt_exist',
+                level: 'warning',
+            },
+            redirectTo: 'list',
+            refresh: true,
+        },
+    });
     const resourceName = translate(`resources.${resource}.name`, {
         smart_count: 1,
         _: inflection.humanize(inflection.singularize(resource)),
@@ -109,7 +103,7 @@ const ShowController = (props: Props) => {
         record,
     });
     return children({
-        isLoading,
+        isLoading: loading,
         defaultTitle,
         resource,
         basePath,
diff --git a/packages/ra-core/src/controller/index.ts b/packages/ra-core/src/controller/index.ts
index 0a5f2876be0..0c00d341bbe 100644
--- a/packages/ra-core/src/controller/index.ts
+++ b/packages/ra-core/src/controller/index.ts
@@ -6,6 +6,7 @@ import CreateController from './CreateController';
 import EditController from './EditController';
 import ListController from './ListController';
 import ShowController from './ShowController';
+import useGetOne from './useGetOne';
 export {
     getListControllerProps,
     sanitizeListRestProps,
@@ -13,6 +14,7 @@ export {
     EditController,
     ListController,
     ShowController,
+    useGetOne,
 };
 
 export * from './field';
diff --git a/packages/ra-core/src/controller/useGetOne.ts b/packages/ra-core/src/controller/useGetOne.ts
new file mode 100644
index 00000000000..ab11e5059eb
--- /dev/null
+++ b/packages/ra-core/src/controller/useGetOne.ts
@@ -0,0 +1,16 @@
+import { CRUD_GET_ONE } from '../actions/dataActions/crudGetOne';
+import { GET_ONE } from '../dataFetchActions';
+import { Identifier, ReduxState } from '../types';
+import useQuery from '../fetch/useQuery';
+
+const useGetOne = (resource: string, id: Identifier, options: any) =>
+    useQuery(
+        { type: GET_ONE, resource, payload: { id } },
+        { ...options, action: CRUD_GET_ONE },
+        (state: ReduxState) =>
+            state.admin.resources[resource]
+                ? state.admin.resources[resource].data[id]
+                : null
+    );
+
+export default useGetOne;

From 45f838cb4fffe2205bcb01a5181fe7d96094a684 Mon Sep 17 00:00:00 2001
From: fzaninotto <fzaninotto@gmail.com>
Date: Mon, 20 May 2019 23:20:55 +0200
Subject: [PATCH 03/18] Fix redirection side effect

---
 packages/ra-core/src/fetch/useDataProvider.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/ra-core/src/fetch/useDataProvider.ts b/packages/ra-core/src/fetch/useDataProvider.ts
index 43df25f9274..b2f293bb5dc 100644
--- a/packages/ra-core/src/fetch/useDataProvider.ts
+++ b/packages/ra-core/src/fetch/useDataProvider.ts
@@ -63,17 +63,17 @@ const useDataProvider = () => {
         ) => {
             const {
                 action = 'CUSTOM_FETCH',
-                meta = {},
                 undoable = false,
                 onSuccess = {},
                 onFailure = {},
+                ...rest
             } = options;
             return new Promise((resolve, reject) => {
                 const queryAction = {
                     type: action,
                     payload,
                     meta: {
-                        ...meta,
+                        ...rest,
                         resource,
                         fetch: type,
                         onSuccess: {

From 3c42ee4b409217f67d2b636ba052b01b0d7ade48 Mon Sep 17 00:00:00 2001
From: fzaninotto <fzaninotto@gmail.com>
Date: Tue, 21 May 2019 17:30:25 +0200
Subject: [PATCH 04/18] Fix loaded must be true after the initial load

---
 packages/ra-core/src/fetch/useQuery.ts | 15 ++++++++-------
 1 file changed, 8 insertions(+), 7 deletions(-)

diff --git a/packages/ra-core/src/fetch/useQuery.ts b/packages/ra-core/src/fetch/useQuery.ts
index d47d38321f8..7556e7e25fa 100644
--- a/packages/ra-core/src/fetch/useQuery.ts
+++ b/packages/ra-core/src/fetch/useQuery.ts
@@ -91,27 +91,28 @@ const useQuery = (
     loaded: boolean;
 } => {
     const { type, resource, payload } = query;
+    const initialData = selector ? useSelector(selector) : null;
     const [state, setState] = useSafeSetState({
-        data: selector ? useSelector(selector) : null,
+        data: initialData,
         error: null,
         total: null,
         loading: true,
-        loaded: false,
+        loaded: initialData == null ? false : true,
     });
     const dataProvider = useDataProvider();
     useEffect(() => {
         dataProvider(type, resource, payload, options)
-            .then(({ data: dataFromResponse, total: totalFromResponse }) => {
+            .then(({ data, total }) => {
                 setState({
-                    data: dataFromResponse,
-                    total: totalFromResponse,
+                    data,
+                    total,
                     loading: false,
                     loaded: true,
                 });
             })
-            .catch(errorFromResponse => {
+            .catch(error => {
                 setState({
-                    error: errorFromResponse,
+                    error,
                     loading: false,
                     loaded: false,
                 });

From 36dbb6c5616a254e855d74335f3eaff617d5debb Mon Sep 17 00:00:00 2001
From: fzaninotto <fzaninotto@gmail.com>
Date: Tue, 21 May 2019 21:31:08 +0200
Subject: [PATCH 05/18] Split useQuery and useQueryWithStore

---
 packages/ra-core/src/controller/useGetOne.ts  |   4 +-
 packages/ra-core/src/fetch/hooks.ts           |  11 +-
 packages/ra-core/src/fetch/index.ts           |   2 +
 packages/ra-core/src/fetch/useMutation.ts     |  15 +-
 packages/ra-core/src/fetch/useQuery.ts        |  12 +-
 .../ra-core/src/fetch/useQueryWithStore.ts    | 135 ++++++++++++++++++
 6 files changed, 149 insertions(+), 30 deletions(-)
 create mode 100644 packages/ra-core/src/fetch/useQueryWithStore.ts

diff --git a/packages/ra-core/src/controller/useGetOne.ts b/packages/ra-core/src/controller/useGetOne.ts
index ab11e5059eb..f16a908c56d 100644
--- a/packages/ra-core/src/controller/useGetOne.ts
+++ b/packages/ra-core/src/controller/useGetOne.ts
@@ -1,10 +1,10 @@
 import { CRUD_GET_ONE } from '../actions/dataActions/crudGetOne';
 import { GET_ONE } from '../dataFetchActions';
 import { Identifier, ReduxState } from '../types';
-import useQuery from '../fetch/useQuery';
+import useQueryWithStore from '../fetch/useQueryWithStore';
 
 const useGetOne = (resource: string, id: Identifier, options: any) =>
-    useQuery(
+    useQueryWithStore(
         { type: GET_ONE, resource, payload: { id } },
         { ...options, action: CRUD_GET_ONE },
         (state: ReduxState) =>
diff --git a/packages/ra-core/src/fetch/hooks.ts b/packages/ra-core/src/fetch/hooks.ts
index aac901f52fd..a3cb836b2b6 100644
--- a/packages/ra-core/src/fetch/hooks.ts
+++ b/packages/ra-core/src/fetch/hooks.ts
@@ -1,17 +1,10 @@
-import { useReducer, useRef, useEffect } from 'react';
+import { useState, useRef, useEffect } from 'react';
 import isEqual from 'lodash/isEqual';
 
 // thanks Kent C Dodds for the following helpers
 
-export function useSetState(initialState) {
-    return useReducer(
-        (state, newState) => ({ ...state, ...newState }),
-        initialState
-    );
-}
-
 export function useSafeSetState(initialState) {
-    const [state, setState] = useSetState(initialState);
+    const [state, setState] = useState(initialState);
 
     const mountedRef = useRef(false);
     useEffect(() => {
diff --git a/packages/ra-core/src/fetch/index.ts b/packages/ra-core/src/fetch/index.ts
index b40038b4585..c29947e0e4d 100644
--- a/packages/ra-core/src/fetch/index.ts
+++ b/packages/ra-core/src/fetch/index.ts
@@ -5,6 +5,7 @@ import Query from './Query';
 import useDataProvider from './useDataProvider';
 import useMutation from './useMutation';
 import useQuery from './useQuery';
+import useQueryWithStore from './useQueryWithStore';
 import withDataProvider from './withDataProvider';
 
 export {
@@ -15,5 +16,6 @@ export {
     useDataProvider,
     useMutation,
     useQuery,
+    useQueryWithStore,
     withDataProvider,
 };
diff --git a/packages/ra-core/src/fetch/useMutation.ts b/packages/ra-core/src/fetch/useMutation.ts
index a79c671f728..8115ffb40d3 100644
--- a/packages/ra-core/src/fetch/useMutation.ts
+++ b/packages/ra-core/src/fetch/useMutation.ts
@@ -1,8 +1,5 @@
 import { useCallback } from 'react';
-// @ts-ignore
-import { useSelector } from 'react-redux';
 
-import { ReduxState } from '../types';
 import { useSafeSetState } from './hooks';
 import useDataProvider from './useDataProvider';
 
@@ -37,7 +34,6 @@ export interface QueryOptions {
  * @param {Object} options
  * @param {string} options.action Redux action type
  * @param {Object} options.meta Redux action metas, including side effects to be executed upon success of failure, e.g. { onSuccess: { refresh: true } }
- * @param {function} selector Redux selector to get the result
  *
  * @returns A tuple with the mutation callback and the request state]. Destructure as [mutate, { data, total, error, loading, loaded }].
  *
@@ -56,8 +52,7 @@ export interface QueryOptions {
  */
 const useMutation = (
     query: Query,
-    options: QueryOptions = {},
-    selector?: (state: ReduxState) => any
+    options: QueryOptions = {}
 ): [
     () => void,
     {
@@ -70,7 +65,7 @@ const useMutation = (
 ] => {
     const { type, resource, payload } = query;
     const [state, setState] = useSafeSetState({
-        data: selector ? useSelector(selector) : null,
+        data: null,
         error: null,
         total: null,
         loading: false,
@@ -80,10 +75,10 @@ const useMutation = (
     const mutate = useCallback(() => {
         setState({ loading: true });
         dataProvider(type, resource, payload, options)
-            .then(({ data: dataFromResponse, total: totalFromResponse }) => {
+            .then(({ data, total }) => {
                 setState({
-                    data: dataFromResponse,
-                    total: totalFromResponse,
+                    data,
+                    total,
                     loading: false,
                     loaded: true,
                 });
diff --git a/packages/ra-core/src/fetch/useQuery.ts b/packages/ra-core/src/fetch/useQuery.ts
index 7556e7e25fa..fd0114e2cbe 100644
--- a/packages/ra-core/src/fetch/useQuery.ts
+++ b/packages/ra-core/src/fetch/useQuery.ts
@@ -1,8 +1,5 @@
 import { useEffect } from 'react';
-// @ts-ignore
-import { useSelector } from 'react-redux';
 
-import { ReduxState } from '../types';
 import { useSafeSetState } from './hooks';
 import useDataProvider from './useDataProvider';
 
@@ -34,7 +31,6 @@ export interface QueryOptions {
  * @param {Object} options
  * @param {string} options.action Redux action type
  * @param {Object} options.meta Redux action metas, including side effects to be executed upon success of failure, e.g. { onSuccess: { refresh: true } }
- * @param {function} selector Redux selector to get the result
  *
  * @returns The current request state. Destructure as { data, total, error, loading, loaded }.
  *
@@ -81,8 +77,7 @@ export interface QueryOptions {
  */
 const useQuery = (
     query: Query,
-    options: QueryOptions = {},
-    selector?: (state: ReduxState) => any
+    options: QueryOptions = {}
 ): {
     data?: any;
     total?: number;
@@ -91,13 +86,12 @@ const useQuery = (
     loaded: boolean;
 } => {
     const { type, resource, payload } = query;
-    const initialData = selector ? useSelector(selector) : null;
     const [state, setState] = useSafeSetState({
-        data: initialData,
+        data: undefined,
         error: null,
         total: null,
         loading: true,
-        loaded: initialData == null ? false : true,
+        loaded: false,
     });
     const dataProvider = useDataProvider();
     useEffect(() => {
diff --git a/packages/ra-core/src/fetch/useQueryWithStore.ts b/packages/ra-core/src/fetch/useQueryWithStore.ts
new file mode 100644
index 00000000000..4571946d255
--- /dev/null
+++ b/packages/ra-core/src/fetch/useQueryWithStore.ts
@@ -0,0 +1,135 @@
+import { useEffect } from 'react';
+// @ts-ignore
+import { useSelector } from 'react-redux';
+import isEqual from 'lodash/isEqual';
+
+import { ReduxState } from '../types';
+import { useSafeSetState } from './hooks';
+import useDataProvider from './useDataProvider';
+
+export interface Query {
+    type: string;
+    resource: string;
+    payload: object;
+}
+
+export interface QueryOptions {
+    meta?: any;
+    action?: string;
+    undoable?: false;
+}
+
+/**
+ * Fetch the data provider through Redux
+ *
+ * The return value 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 }
+ *
+ * @param {Object} query
+ * @param {string} query.type The verb passed to th data provider, e.g. 'GET_LIST', 'GET_ONE'
+ * @param {string} query.resource A resource name, e.g. 'posts', 'comments'
+ * @param {Object} query.payload The payload object, e.g; { post_id: 12 }
+ * @param {Object} options
+ * @param {string} options.action Redux action type
+ * @param {Object} options.meta Redux action metas, including side effects to be executed upon success of failure, e.g. { onSuccess: { refresh: true } }
+ * @param {function} selector Redux selector to get the result
+ *
+ * @returns The current request state. Destructure as { data, total, error, loading, loaded }.
+ *
+ * @example
+ *
+ * import { useQuery } from 'react-admin';
+ *
+ * const UserProfile = ({ record }) => {
+ *     const { data, loading, error } = useQuery({
+ *         type: 'GET_ONE',
+ *         resource: 'users',
+ *         payload: { id: record.id }
+ *     });
+ *     if (loading) { return <Loading />; }
+ *     if (error) { return <p>ERROR</p>; }
+ *     return <div>User {data.username}</div>;
+ * };
+ *
+ * @example
+ *
+ * import { useQuery } from 'react-admin';
+ *
+ * const payload = {
+ *    pagination: { page: 1, perPage: 10 },
+ *    sort: { field: 'username', order: 'ASC' },
+ * };
+ * const UserList = () => {
+ *     const { data, total, loading, error } = useQuery({
+ *         type: 'GET_LIST',
+ *         resource: 'users',
+ *         payload
+ *     });
+ *     if (loading) { return <Loading />; }
+ *     if (error) { return <p>ERROR</p>; }
+ *     return (
+ *         <div>
+ *             <p>Total users: {total}</p>
+ *             <ul>
+ *                 {data.map(user => <li key={user.username}>{user.username}</li>)}
+ *             </ul>
+ *         </div>
+ *     );
+ * };
+ */
+const useQueryWithStore = (
+    query: Query,
+    options: QueryOptions = {},
+    dataSelector: (state: ReduxState) => any,
+    totalSelector?: (state: ReduxState) => number
+): {
+    data?: any;
+    total?: number;
+    error?: any;
+    loading: boolean;
+    loaded: boolean;
+} => {
+    const { type, resource, payload } = query;
+    const data = useSelector(dataSelector);
+    const total = totalSelector ? useSelector(totalSelector) : null;
+    const [state, setState] = useSafeSetState({
+        data,
+        total,
+        error: null,
+        loading: true,
+        loaded: data !== undefined,
+    });
+    if (!isEqual(state.data, data) || state.total !== total) {
+        setState({
+            ...state,
+            data,
+            total,
+            loaded: true,
+        });
+    }
+    const dataProvider = useDataProvider();
+    useEffect(() => {
+        dataProvider(type, resource, payload, options)
+            .then(() => {
+                setState(prevState => ({
+                    ...prevState,
+                    loading: false,
+                    loaded: true,
+                }));
+            })
+            .catch(error => {
+                setState({
+                    error,
+                    loading: false,
+                    loaded: false,
+                });
+            });
+    }, [JSON.stringify({ query, options })]); // deep equality, see https://github.com/facebook/react/issues/14476#issuecomment-471199055
+
+    return state;
+};
+
+export default useQueryWithStore;

From 5ada1537889df30f2e116f9cf242179c76c3c341 Mon Sep 17 00:00:00 2001
From: fzaninotto <fzaninotto@gmail.com>
Date: Tue, 21 May 2019 21:34:22 +0200
Subject: [PATCH 06/18] Fix typo

---
 packages/ra-core/src/fetch/useMutation.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/ra-core/src/fetch/useMutation.ts b/packages/ra-core/src/fetch/useMutation.ts
index 8115ffb40d3..905e727db82 100644
--- a/packages/ra-core/src/fetch/useMutation.ts
+++ b/packages/ra-core/src/fetch/useMutation.ts
@@ -35,7 +35,7 @@ export interface QueryOptions {
  * @param {string} options.action Redux action type
  * @param {Object} options.meta Redux action metas, including side effects to be executed upon success of failure, e.g. { onSuccess: { refresh: true } }
  *
- * @returns A tuple with the mutation callback and the request state]. Destructure as [mutate, { data, total, error, loading, loaded }].
+ * @returns A tuple with the mutation callback and the request state. Destructure as [mutate, { data, total, error, loading, loaded }].
  *
  * @example
  *

From 3424316a072d83acf9e2f0778ad55d8ba2c0ca4b Mon Sep 17 00:00:00 2001
From: fzaninotto <fzaninotto@gmail.com>
Date: Tue, 21 May 2019 21:53:57 +0200
Subject: [PATCH 07/18] Improve jsDoc

---
 packages/ra-core/src/controller/useGetOne.ts  | 31 +++++++++++-
 packages/ra-core/src/fetch/useDataProvider.ts |  1 -
 .../ra-core/src/fetch/useQueryWithStore.ts    | 50 ++++++-------------
 3 files changed, 45 insertions(+), 37 deletions(-)

diff --git a/packages/ra-core/src/controller/useGetOne.ts b/packages/ra-core/src/controller/useGetOne.ts
index f16a908c56d..f7306c034af 100644
--- a/packages/ra-core/src/controller/useGetOne.ts
+++ b/packages/ra-core/src/controller/useGetOne.ts
@@ -3,7 +3,36 @@ import { GET_ONE } from '../dataFetchActions';
 import { Identifier, ReduxState } from '../types';
 import useQueryWithStore from '../fetch/useQueryWithStore';
 
-const useGetOne = (resource: string, id: Identifier, options: any) =>
+/**
+ * Call the dataProvider with a GET_ONE verb and return the result as well as the loading state.
+ *
+ * The return value updates according to the request state:
+ *
+ * - start: { loading: true, loaded: false }
+ * - success: { data: [data from response], loading: false, loaded: true }
+ * - error: { error: [error from response], loading: false, loaded: true }
+ *
+ * This hook will return the cached result when called a second time
+ * with the same parameters, until the response arrives.
+ *
+ * @param resource The resource name, e.g. 'posts'
+ * @param id The resource identifier, e.g. 123
+ * @param options Options object to pass to the dataProvider. May include side effects to be executed upon success of failure, e.g. { onSuccess: { refresh: true } }
+ *
+ * @returns The current request state. Destructure as { data, error, loading, loaded }.
+ *
+ * @example
+ *
+ * import { useGetOne } from 'react-admin';
+ *
+ * const UserProfile = ({ record }) => {
+ *     const { data, loading, error } = useGetOne('users', record.id);
+ *     if (loading) { return <Loading />; }
+ *     if (error) { return <p>ERROR</p>; }
+ *     return <div>User {data.username}</div>;
+ * };
+ */
+const useGetOne = (resource: string, id: Identifier, options?: any) =>
     useQueryWithStore(
         { type: GET_ONE, resource, payload: { id } },
         { ...options, action: CRUD_GET_ONE },
diff --git a/packages/ra-core/src/fetch/useDataProvider.ts b/packages/ra-core/src/fetch/useDataProvider.ts
index b2f293bb5dc..b7552d2c3cc 100644
--- a/packages/ra-core/src/fetch/useDataProvider.ts
+++ b/packages/ra-core/src/fetch/useDataProvider.ts
@@ -2,7 +2,6 @@ import { useMemo } from 'react';
 import { Dispatch } from 'redux';
 // @ts-ignore
 import { useDispatch } from 'react-redux';
-import get from 'lodash/get';
 
 import { startUndoable } from '../actions/undoActions';
 
diff --git a/packages/ra-core/src/fetch/useQueryWithStore.ts b/packages/ra-core/src/fetch/useQueryWithStore.ts
index 4571946d255..e06727a8d80 100644
--- a/packages/ra-core/src/fetch/useQueryWithStore.ts
+++ b/packages/ra-core/src/fetch/useQueryWithStore.ts
@@ -16,11 +16,10 @@ export interface Query {
 export interface QueryOptions {
     meta?: any;
     action?: string;
-    undoable?: false;
 }
 
 /**
- * Fetch the data provider through Redux
+ * Fetch the data provider through Redux, return the value from the store.
  *
  * The return value updates according to the request state:
  *
@@ -28,6 +27,9 @@ export interface QueryOptions {
  * - success: { data: [data from response], total: [total from response], loading: false, loaded: true }
  * - error: { error: [error from response], loading: false, loaded: true }
  *
+ * This hook will return the cached result when called a second time
+ * with the same parameters, until the response arrives.
+ *
  * @param {Object} query
  * @param {string} query.type The verb passed to th data provider, e.g. 'GET_LIST', 'GET_ONE'
  * @param {string} query.resource A resource name, e.g. 'posts', 'comments'
@@ -35,50 +37,28 @@ export interface QueryOptions {
  * @param {Object} options
  * @param {string} options.action Redux action type
  * @param {Object} options.meta Redux action metas, including side effects to be executed upon success of failure, e.g. { onSuccess: { refresh: true } }
- * @param {function} selector Redux selector to get the result
+ * @param {function} dataSelector Redux selector to get the result. Required.
+ * @param {function} totalSelector Redux selector to get the total (optional, only for LIST queries)
  *
  * @returns The current request state. Destructure as { data, total, error, loading, loaded }.
  *
  * @example
  *
- * import { useQuery } from 'react-admin';
+ * import { useQueryWithStore } from 'react-admin';
  *
  * const UserProfile = ({ record }) => {
- *     const { data, loading, error } = useQuery({
- *         type: 'GET_ONE',
- *         resource: 'users',
- *         payload: { id: record.id }
- *     });
+ *     const { data, loading, error } = useQueryWithStore(
+ *         {
+ *             type: 'GET_ONE',
+ *             resource: 'users',
+ *             payload: { id: record.id }
+ *         },
+ *         state => state.admin.resources.users.data[record.id]
+ *     );
  *     if (loading) { return <Loading />; }
  *     if (error) { return <p>ERROR</p>; }
  *     return <div>User {data.username}</div>;
  * };
- *
- * @example
- *
- * import { useQuery } from 'react-admin';
- *
- * const payload = {
- *    pagination: { page: 1, perPage: 10 },
- *    sort: { field: 'username', order: 'ASC' },
- * };
- * const UserList = () => {
- *     const { data, total, loading, error } = useQuery({
- *         type: 'GET_LIST',
- *         resource: 'users',
- *         payload
- *     });
- *     if (loading) { return <Loading />; }
- *     if (error) { return <p>ERROR</p>; }
- *     return (
- *         <div>
- *             <p>Total users: {total}</p>
- *             <ul>
- *                 {data.map(user => <li key={user.username}>{user.username}</li>)}
- *             </ul>
- *         </div>
- *     );
- * };
  */
 const useQueryWithStore = (
     query: Query,

From 054ec97ba858f7b0508b3f88e7b5200e9f0cd4dc Mon Sep 17 00:00:00 2001
From: fzaninotto <fzaninotto@gmail.com>
Date: Tue, 21 May 2019 22:45:12 +0200
Subject: [PATCH 08/18] add useGetList hook

---
 .../ra-core/src/controller/ListController.tsx | 55 +++++---------
 packages/ra-core/src/controller/index.ts      |  2 +
 packages/ra-core/src/controller/useGetList.ts | 75 +++++++++++++++++++
 .../ra-core/src/fetch/useQueryWithStore.ts    | 12 ++-
 4 files changed, 108 insertions(+), 36 deletions(-)
 create mode 100644 packages/ra-core/src/controller/useGetList.ts

diff --git a/packages/ra-core/src/controller/ListController.tsx b/packages/ra-core/src/controller/ListController.tsx
index 3538aec5677..ffe00c51c1d 100644
--- a/packages/ra-core/src/controller/ListController.tsx
+++ b/packages/ra-core/src/controller/ListController.tsx
@@ -1,10 +1,4 @@
-import {
-    isValidElement,
-    ReactNode,
-    ReactElement,
-    useCallback,
-    useEffect,
-} from 'react';
+import { isValidElement, ReactNode, ReactElement, useCallback } from 'react';
 // @ts-ignore
 import { useSelector, useDispatch } from 'react-redux';
 import inflection from 'inflection';
@@ -28,6 +22,7 @@ import {
 import { Location } from 'history';
 import { useTranslate } from '../i18n';
 import useListParams from './useListParams';
+import useGetList from './useGetList';
 
 interface ChildrenFuncParams {
     basePath: string;
@@ -148,15 +143,12 @@ const ListController = (props: Props) => {
 
     const dispatch = useDispatch();
     const translate = useTranslate();
-    const isLoading = useSelector(
-        (reduxState: ReduxState) => reduxState.admin.loading > 0
-    );
 
     const version = useSelector(
         (reduxState: ReduxState) => reduxState.admin.ui.viewVersion
     );
 
-    const { loadedOnce, selectedIds } = useSelector(
+    const { selectedIds } = useSelector(
         (reduxState: ReduxState) => reduxState.admin.resources[resource].list,
         [resource]
     );
@@ -176,30 +168,23 @@ const ListController = (props: Props) => {
         debounce,
     });
 
-    useEffect(() => {
-        const pagination = {
+    const { data, ids, total, loading, loaded } = useGetList(
+        resource,
+        {
             page: query.page,
             perPage: query.perPage,
-        };
-        const permanentFilter = filter;
-        dispatch(
-            crudGetList(
-                resource,
-                pagination,
-                { field: query.sort, order: query.order },
-                { ...query.filter, ...permanentFilter }
-            )
-        );
-    }, query.requestSignature);
-
-    const data = useSelector(
-        (reduxState: ReduxState) => reduxState.admin.resources[resource].data,
-        [resource]
-    );
-
-    const { ids, total } = useSelector(
-        (reduxState: ReduxState) => reduxState.admin.resources[resource].list,
-        [resource]
+        },
+        { field: query.sort, order: query.order },
+        { ...query.filter, ...filter },
+        {
+            version,
+            onFailure: {
+                notification: {
+                    body: 'ra.notification.http_error',
+                    level: 'warning',
+                },
+            },
+        }
     );
 
     if (!query.page && !(ids || []).length && query.page > 1 && total > 0) {
@@ -238,8 +223,8 @@ const ListController = (props: Props) => {
         filterValues: query.filterValues,
         hasCreate,
         ids,
-        isLoading,
-        loadedOnce,
+        isLoading: loading,
+        loadedOnce: loaded,
         onSelect: handleSelect,
         onToggleItem: handleToggleItem,
         onUnselectItems: handleUnselectItems,
diff --git a/packages/ra-core/src/controller/index.ts b/packages/ra-core/src/controller/index.ts
index 0c00d341bbe..9fe2aa960cd 100644
--- a/packages/ra-core/src/controller/index.ts
+++ b/packages/ra-core/src/controller/index.ts
@@ -7,6 +7,7 @@ import EditController from './EditController';
 import ListController from './ListController';
 import ShowController from './ShowController';
 import useGetOne from './useGetOne';
+import useGetList from './useGetList';
 export {
     getListControllerProps,
     sanitizeListRestProps,
@@ -15,6 +16,7 @@ export {
     ListController,
     ShowController,
     useGetOne,
+    useGetList,
 };
 
 export * from './field';
diff --git a/packages/ra-core/src/controller/useGetList.ts b/packages/ra-core/src/controller/useGetList.ts
new file mode 100644
index 00000000000..69d91581b27
--- /dev/null
+++ b/packages/ra-core/src/controller/useGetList.ts
@@ -0,0 +1,75 @@
+// @ts-ignore
+import { useSelector } from 'react-redux';
+import { CRUD_GET_LIST } from '../actions/dataActions/crudGetList';
+import { GET_LIST } from '../dataFetchActions';
+import { Pagination, Sort, ReduxState } from '../types';
+import useQueryWithStore from '../fetch/useQueryWithStore';
+import { ObjectMethod } from '@babel/types';
+
+/**
+ * Call the dataProvider with a GET_LIST verb and return the result as well as the loading state.
+ *
+ * The return value updates according to the request state:
+ *
+ * - start: { loading: true, loaded: false }
+ * - success: { data: [data from store], ids: [ids from response], total: [total from response], loading: false, loaded: true }
+ * - error: { error: [error from response], loading: false, loaded: true }
+ *
+ * This hook will return the cached result when called a second time
+ * with the same parameters, until the response arrives.
+ *
+ * @param {string} resource The resource name, e.g. 'posts'
+ * @param {Object} pagination The request pagination { page, perPage }, e.g. { page: 1, perPage: 10 }
+ * @param {Object} sort The request sort { field, order }, e.g. { field: 'id', order: 'DESC' }
+ * @param {Object} filters The request filters, e.g. { title: 'hello, world' }
+ * @param {Object} options Options object to pass to the dataProvider. May include side effects to be executed upon success of failure, e.g. { onSuccess: { refresh: true } }
+ *
+ * @returns The current request state. Destructure as { data, total, ids, error, loading, loaded }.
+ *
+ * @example
+ *
+ * import { useGetList } from 'react-admin';
+ *
+ * const LatestNews = () => {
+ *     const { data, ids, loading, error } = useGetList(
+ *         'posts',
+ *         { page: 1, perPage: 10 },
+ *         { field: 'published_at', order: 'DESC' }
+ *     );
+ *     if (loading) { return <Loading />; }
+ *     if (error) { return <p>ERROR</p>; }
+ *     return <ul>{ids.map(id =>
+ *         <li key={id}>{data[id].title}</li>
+ *     )}</ul>;
+ * };
+ */
+const useGetList = (
+    resource: string,
+    pagination: Pagination,
+    sort: Sort,
+    filter: object,
+    options?: any
+) => {
+    const { data, total, error, loading, loaded } = useQueryWithStore(
+        { type: GET_LIST, resource, payload: { pagination, sort, filter } },
+        { ...options, action: CRUD_GET_LIST },
+        (state: ReduxState) =>
+            state.admin.resources[resource]
+                ? state.admin.resources[resource].data
+                : null,
+        (state: ReduxState) =>
+            state.admin.resources[resource]
+                ? state.admin.resources[resource].list.total
+                : null
+    );
+    const ids = useSelector(
+        (state: ReduxState) =>
+            state.admin.resources[resource]
+                ? state.admin.resources[resource].list.ids
+                : null,
+        [resource]
+    );
+    return { data, ids, total, error, loading, loaded };
+};
+
+export default useGetList;
diff --git a/packages/ra-core/src/fetch/useQueryWithStore.ts b/packages/ra-core/src/fetch/useQueryWithStore.ts
index e06727a8d80..12b12f5199c 100644
--- a/packages/ra-core/src/fetch/useQueryWithStore.ts
+++ b/packages/ra-core/src/fetch/useQueryWithStore.ts
@@ -18,6 +18,15 @@ export interface QueryOptions {
     action?: string;
 }
 
+/**
+ * Lists of records are initilized to a particular object,
+ * so detecting if the list is empty requires some work.
+ *
+ * @see src/reducer/admin/data.ts
+ */
+const isEmptyList = data =>
+    data && Object.keys(data).length === 0 && data.hasOwnProperty('fetchedAt');
+
 /**
  * Fetch the data provider through Redux, return the value from the store.
  *
@@ -53,6 +62,7 @@ export interface QueryOptions {
  *             resource: 'users',
  *             payload: { id: record.id }
  *         },
+ *         {},
  *         state => state.admin.resources.users.data[record.id]
  *     );
  *     if (loading) { return <Loading />; }
@@ -80,7 +90,7 @@ const useQueryWithStore = (
         total,
         error: null,
         loading: true,
-        loaded: data !== undefined,
+        loaded: data !== undefined && !isEmptyList(data),
     });
     if (!isEqual(state.data, data) || state.total !== total) {
         setState({

From cb0b7bac4eeadd671cab69e36ee60d0267cf9c70 Mon Sep 17 00:00:00 2001
From: fzaninotto <fzaninotto@gmail.com>
Date: Tue, 21 May 2019 23:46:42 +0200
Subject: [PATCH 09/18] Add useSelectedItems hook

---
 .../ra-core/src/controller/ListController.tsx | 52 ++++++-------------
 packages/ra-core/src/controller/index.ts      |  2 +
 .../ra-core/src/controller/useSelectItems.ts  | 42 +++++++++++++++
 3 files changed, 61 insertions(+), 35 deletions(-)
 create mode 100644 packages/ra-core/src/controller/useSelectItems.ts

diff --git a/packages/ra-core/src/controller/ListController.tsx b/packages/ra-core/src/controller/ListController.tsx
index ffe00c51c1d..6f8f240c6b4 100644
--- a/packages/ra-core/src/controller/ListController.tsx
+++ b/packages/ra-core/src/controller/ListController.tsx
@@ -1,15 +1,10 @@
-import { isValidElement, ReactNode, ReactElement, useCallback } from 'react';
+import { isValidElement, ReactNode, ReactElement } from 'react';
 // @ts-ignore
-import { useSelector, useDispatch } from 'react-redux';
+import { useSelector } from 'react-redux';
 import inflection from 'inflection';
 
 import { SORT_ASC } from '../reducer/admin/resource/list/queryReducer';
-import { crudGetList } from '../actions/dataActions';
-import {
-    setListSelectedIds,
-    toggleListItem,
-    ListParams,
-} from '../actions/listActions';
+import { ListParams } from '../actions/listActions';
 import { useCheckMinimumRequiredProps } from './checkMinimumRequiredProps';
 import {
     Sort,
@@ -23,6 +18,7 @@ import { Location } from 'history';
 import { useTranslate } from '../i18n';
 import useListParams from './useListParams';
 import useGetList from './useGetList';
+import useSelectItems from './useSelectItems';
 
 interface ChildrenFuncParams {
     basePath: string;
@@ -124,6 +120,11 @@ const ListController = (props: Props) => {
         ['basePath', 'location', 'resource'],
         props
     );
+    if (props.filter && isValidElement(props.filter)) {
+        throw new Error(
+            '<List> received a React element as `filter` props. If you intended to set the list filter elements, use the `filters` (with an s) prop instead. The `filter` prop is internal and should not be set by the developer.'
+        );
+    }
 
     const {
         basePath,
@@ -141,24 +142,12 @@ const ListController = (props: Props) => {
         debounce = 500,
     } = props;
 
-    const dispatch = useDispatch();
     const translate = useTranslate();
 
     const version = useSelector(
         (reduxState: ReduxState) => reduxState.admin.ui.viewVersion
     );
 
-    const { selectedIds } = useSelector(
-        (reduxState: ReduxState) => reduxState.admin.resources[resource].list,
-        [resource]
-    );
-
-    if (filter && isValidElement(filter)) {
-        throw new Error(
-            '<List> received a React element as `filter` props. If you intended to set the list filter elements, use the `filters` (with an s) prop instead. The `filter` prop is internal and should not be set by the developer.'
-        );
-    }
-
     const [query, actions] = useListParams({
         resource,
         location,
@@ -168,6 +157,11 @@ const ListController = (props: Props) => {
         debounce,
     });
 
+    const { selectedIds, select, toggle, clearSelection } = useSelectItems(
+        resource,
+        query.requestSignature
+    );
+
     const { data, ids, total, loading, loaded } = useGetList(
         resource,
         {
@@ -191,18 +185,6 @@ const ListController = (props: Props) => {
         actions.setPage(query.page - 1);
     }
 
-    const handleSelect = useCallback((newIds: Identifier[]) => {
-        dispatch(setListSelectedIds(resource, newIds));
-    }, query.requestSignature);
-
-    const handleUnselectItems = useCallback(() => {
-        dispatch(setListSelectedIds(resource, []));
-    }, query.requestSignature);
-
-    const handleToggleItem = useCallback((id: Identifier) => {
-        dispatch(toggleListItem(resource, id));
-    }, query.requestSignature);
-
     const resourceName = translate(`resources.${resource}.name`, {
         smart_count: 2,
         _: inflection.humanize(inflection.pluralize(resource)),
@@ -225,9 +207,9 @@ const ListController = (props: Props) => {
         ids,
         isLoading: loading,
         loadedOnce: loaded,
-        onSelect: handleSelect,
-        onToggleItem: handleToggleItem,
-        onUnselectItems: handleUnselectItems,
+        onSelect: select,
+        onToggleItem: toggle,
+        onUnselectItems: clearSelection,
         page: query.page,
         perPage: query.perPage,
         resource,
diff --git a/packages/ra-core/src/controller/index.ts b/packages/ra-core/src/controller/index.ts
index 9fe2aa960cd..55d6ede5c32 100644
--- a/packages/ra-core/src/controller/index.ts
+++ b/packages/ra-core/src/controller/index.ts
@@ -8,6 +8,7 @@ import ListController from './ListController';
 import ShowController from './ShowController';
 import useGetOne from './useGetOne';
 import useGetList from './useGetList';
+import useSelectItems from './useSelectItems';
 export {
     getListControllerProps,
     sanitizeListRestProps,
@@ -17,6 +18,7 @@ export {
     ShowController,
     useGetOne,
     useGetList,
+    useSelectItems,
 };
 
 export * from './field';
diff --git a/packages/ra-core/src/controller/useSelectItems.ts b/packages/ra-core/src/controller/useSelectItems.ts
new file mode 100644
index 00000000000..6d46d080c80
--- /dev/null
+++ b/packages/ra-core/src/controller/useSelectItems.ts
@@ -0,0 +1,42 @@
+import { useCallback } from 'react';
+// @ts-ignore
+import { useSelector, useDispatch } from 'react-redux';
+import { setListSelectedIds, toggleListItem } from '../actions/listActions';
+import { Identifier, ReduxState } from '../types';
+
+/**
+ * Get and update the list of selected items for a resource
+ *
+ * @param resource The resource name, e.g. 'posts'
+ *
+ * @returns {Object} Destructure as { selectedIds, select, toggle, clearSelection }.
+ */
+const useSelectItems = (resource: string) => {
+    const dispatch = useDispatch();
+
+    const selectedIds = useSelector(
+        (reduxState: ReduxState) =>
+            reduxState.admin.resources[resource].list.selectedIds,
+        [resource]
+    );
+
+    const select = useCallback(
+        (newIds: Identifier[]) => {
+            dispatch(setListSelectedIds(resource, newIds));
+        },
+        [resource]
+    );
+    const toggle = useCallback(
+        (id: Identifier) => {
+            dispatch(toggleListItem(resource, id));
+        },
+        [resource]
+    );
+    const clearSelection = useCallback(() => {
+        dispatch(setListSelectedIds(resource, []));
+    }, [resource]);
+
+    return { selectedIds, select, toggle, clearSelection };
+};
+
+export default useSelectItems;

From 03395eb09860d1453f41a8314e73b00fc2ffdcc1 Mon Sep 17 00:00:00 2001
From: fzaninotto <fzaninotto@gmail.com>
Date: Tue, 21 May 2019 23:47:43 +0200
Subject: [PATCH 10/18] Fix typo

---
 packages/ra-core/src/controller/ListController.tsx | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/packages/ra-core/src/controller/ListController.tsx b/packages/ra-core/src/controller/ListController.tsx
index 6f8f240c6b4..6120a5b7f99 100644
--- a/packages/ra-core/src/controller/ListController.tsx
+++ b/packages/ra-core/src/controller/ListController.tsx
@@ -158,8 +158,7 @@ const ListController = (props: Props) => {
     });
 
     const { selectedIds, select, toggle, clearSelection } = useSelectItems(
-        resource,
-        query.requestSignature
+        resource
     );
 
     const { data, ids, total, loading, loaded } = useGetList(

From 6d74e66e980e20a425e48d1dfa703097b318a9f9 Mon Sep 17 00:00:00 2001
From: fzaninotto <fzaninotto@gmail.com>
Date: Tue, 21 May 2019 23:52:34 +0200
Subject: [PATCH 11/18] Syntax tweaks

---
 .../ra-core/src/controller/useSelectItems.ts  | 48 +++++++++----------
 1 file changed, 23 insertions(+), 25 deletions(-)

diff --git a/packages/ra-core/src/controller/useSelectItems.ts b/packages/ra-core/src/controller/useSelectItems.ts
index 6d46d080c80..d1972aaefd3 100644
--- a/packages/ra-core/src/controller/useSelectItems.ts
+++ b/packages/ra-core/src/controller/useSelectItems.ts
@@ -5,7 +5,7 @@ import { setListSelectedIds, toggleListItem } from '../actions/listActions';
 import { Identifier, ReduxState } from '../types';
 
 /**
- * Get and update the list of selected items for a resource
+ * Get the list of selected items for a resource, and callbacks to change the selection
  *
  * @param resource The resource name, e.g. 'posts'
  *
@@ -13,30 +13,28 @@ import { Identifier, ReduxState } from '../types';
  */
 const useSelectItems = (resource: string) => {
     const dispatch = useDispatch();
-
-    const selectedIds = useSelector(
-        (reduxState: ReduxState) =>
-            reduxState.admin.resources[resource].list.selectedIds,
-        [resource]
-    );
-
-    const select = useCallback(
-        (newIds: Identifier[]) => {
-            dispatch(setListSelectedIds(resource, newIds));
-        },
-        [resource]
-    );
-    const toggle = useCallback(
-        (id: Identifier) => {
-            dispatch(toggleListItem(resource, id));
-        },
-        [resource]
-    );
-    const clearSelection = useCallback(() => {
-        dispatch(setListSelectedIds(resource, []));
-    }, [resource]);
-
-    return { selectedIds, select, toggle, clearSelection };
+    return {
+        selectedIds: useSelector(
+            (reduxState: ReduxState) =>
+                reduxState.admin.resources[resource].list.selectedIds,
+            [resource]
+        ),
+        select: useCallback(
+            (newIds: Identifier[]) => {
+                dispatch(setListSelectedIds(resource, newIds));
+            },
+            [resource]
+        ),
+        toggle: useCallback(
+            (id: Identifier) => {
+                dispatch(toggleListItem(resource, id));
+            },
+            [resource]
+        ),
+        clearSelection: useCallback(() => {
+            dispatch(setListSelectedIds(resource, []));
+        }, [resource]),
+    };
 };
 
 export default useSelectItems;

From 50a15461f0ebb9fd292d4095177d6a1b677d11e3 Mon Sep 17 00:00:00 2001
From: fzaninotto <fzaninotto@gmail.com>
Date: Wed, 22 May 2019 09:18:10 +0200
Subject: [PATCH 12/18] Add useVersion hook

---
 .../ra-core/src/controller/EditController.tsx |  9 ++--
 .../ra-core/src/controller/ListController.tsx | 46 +++++++------------
 .../ra-core/src/controller/ShowController.tsx |  9 ++--
 packages/ra-core/src/controller/index.ts      |  6 ++-
 ...seSelectItems.ts => useRecordSelection.ts} | 10 +++-
 packages/ra-core/src/controller/useVersion.ts |  8 ++++
 6 files changed, 44 insertions(+), 44 deletions(-)
 rename packages/ra-core/src/controller/{useSelectItems.ts => useRecordSelection.ts} (77%)
 create mode 100644 packages/ra-core/src/controller/useVersion.ts

diff --git a/packages/ra-core/src/controller/EditController.tsx b/packages/ra-core/src/controller/EditController.tsx
index c20a71d8822..dc76e26db09 100644
--- a/packages/ra-core/src/controller/EditController.tsx
+++ b/packages/ra-core/src/controller/EditController.tsx
@@ -1,15 +1,16 @@
 import { ReactNode, useEffect, useCallback } from 'react';
 // @ts-ignore
-import { useSelector, useDispatch } from 'react-redux';
+import { useDispatch } from 'react-redux';
 import { reset as resetForm } from 'redux-form';
 import inflection from 'inflection';
 import { crudUpdate, startUndoable } from '../actions';
 import { REDUX_FORM_NAME } from '../form';
 import { useCheckMinimumRequiredProps } from './checkMinimumRequiredProps';
-import { Translate, Record, Identifier, ReduxState } from '../types';
+import { Translate, Record, Identifier } from '../types';
 import { RedirectionSideEffect } from '../sideEffect';
 import useGetOne from './useGetOne';
 import { useTranslate } from '../i18n';
+import useVersion from './useVersion';
 
 interface ChildrenFuncParams {
     isLoading: boolean;
@@ -87,9 +88,7 @@ const EditController = (props: Props) => {
     }
     const translate = useTranslate();
     const dispatch = useDispatch();
-    const version = useSelector(
-        (state: ReduxState) => state.admin.ui.viewVersion
-    );
+    const version = useVersion();
     const { data: record, loading } = useGetOne(resource, id, {
         basePath,
         version, // used to force reload
diff --git a/packages/ra-core/src/controller/ListController.tsx b/packages/ra-core/src/controller/ListController.tsx
index 6120a5b7f99..73618bccc03 100644
--- a/packages/ra-core/src/controller/ListController.tsx
+++ b/packages/ra-core/src/controller/ListController.tsx
@@ -1,24 +1,16 @@
 import { isValidElement, ReactNode, ReactElement } from 'react';
-// @ts-ignore
-import { useSelector } from 'react-redux';
 import inflection from 'inflection';
 
 import { SORT_ASC } from '../reducer/admin/resource/list/queryReducer';
 import { ListParams } from '../actions/listActions';
 import { useCheckMinimumRequiredProps } from './checkMinimumRequiredProps';
-import {
-    Sort,
-    AuthProvider,
-    RecordMap,
-    Identifier,
-    Translate,
-    ReduxState,
-} from '../types';
+import { Sort, AuthProvider, RecordMap, Identifier, Translate } from '../types';
 import { Location } from 'history';
 import { useTranslate } from '../i18n';
 import useListParams from './useListParams';
 import useGetList from './useGetList';
-import useSelectItems from './useSelectItems';
+import useRecordSelection from './useRecordSelection';
+import useVersion from './useVersion';
 
 interface ChildrenFuncParams {
     basePath: string;
@@ -143,12 +135,9 @@ const ListController = (props: Props) => {
     } = props;
 
     const translate = useTranslate();
+    const version = useVersion();
 
-    const version = useSelector(
-        (reduxState: ReduxState) => reduxState.admin.ui.viewVersion
-    );
-
-    const [query, actions] = useListParams({
+    const [query, queryModifiers] = useListParams({
         resource,
         location,
         filterDefaultValues,
@@ -157,9 +146,7 @@ const ListController = (props: Props) => {
         debounce,
     });
 
-    const { selectedIds, select, toggle, clearSelection } = useSelectItems(
-        resource
-    );
+    const [selectedIds, selectionModifiers] = useRecordSelection(resource);
 
     const { data, ids, total, loading, loaded } = useGetList(
         resource,
@@ -181,7 +168,8 @@ const ListController = (props: Props) => {
     );
 
     if (!query.page && !(ids || []).length && query.page > 1 && total > 0) {
-        actions.setPage(query.page - 1);
+        // query for a page that doesn't exist, check the previous page
+        queryModifiers.setPage(query.page - 1);
     }
 
     const resourceName = translate(`resources.${resource}.name`, {
@@ -206,19 +194,19 @@ const ListController = (props: Props) => {
         ids,
         isLoading: loading,
         loadedOnce: loaded,
-        onSelect: select,
-        onToggleItem: toggle,
-        onUnselectItems: clearSelection,
+        onSelect: selectionModifiers.select,
+        onToggleItem: selectionModifiers.toggle,
+        onUnselectItems: selectionModifiers.clearSelection,
         page: query.page,
         perPage: query.perPage,
         resource,
         selectedIds,
-        setFilters: actions.setFilters,
-        hideFilter: actions.hideFilter,
-        showFilter: actions.showFilter,
-        setPage: actions.setPage,
-        setPerPage: actions.setPerPage,
-        setSort: actions.setSort,
+        setFilters: queryModifiers.setFilters,
+        hideFilter: queryModifiers.hideFilter,
+        showFilter: queryModifiers.showFilter,
+        setPage: queryModifiers.setPage,
+        setPerPage: queryModifiers.setPerPage,
+        setSort: queryModifiers.setSort,
         translate,
         total,
         version,
diff --git a/packages/ra-core/src/controller/ShowController.tsx b/packages/ra-core/src/controller/ShowController.tsx
index 8f6a36fd332..e6c575de2a7 100644
--- a/packages/ra-core/src/controller/ShowController.tsx
+++ b/packages/ra-core/src/controller/ShowController.tsx
@@ -1,11 +1,10 @@
 import { ReactNode } from 'react';
-// @ts-ignore
-import { useSelector } from 'react-redux';
 import inflection from 'inflection';
 import { useCheckMinimumRequiredProps } from './checkMinimumRequiredProps';
-import { Translate, Record, Identifier, ReduxState } from '../types';
+import { Translate, Record, Identifier } from '../types';
 import useGetOne from './useGetOne';
 import { useTranslate } from '../i18n';
+import useVersion from './useVersion';
 
 interface ChildrenFuncParams {
     isLoading: boolean;
@@ -78,9 +77,7 @@ const ShowController = (props: Props) => {
         return null;
     }
     const translate = useTranslate();
-    const version = useSelector(
-        (state: ReduxState) => state.admin.ui.viewVersion
-    );
+    const version = useVersion();
     const { data: record, loading } = useGetOne(resource, id, {
         basePath,
         version, // used to force reload
diff --git a/packages/ra-core/src/controller/index.ts b/packages/ra-core/src/controller/index.ts
index 55d6ede5c32..145efa67fb8 100644
--- a/packages/ra-core/src/controller/index.ts
+++ b/packages/ra-core/src/controller/index.ts
@@ -8,7 +8,8 @@ import ListController from './ListController';
 import ShowController from './ShowController';
 import useGetOne from './useGetOne';
 import useGetList from './useGetList';
-import useSelectItems from './useSelectItems';
+import useRecordSelection from './useRecordSelection';
+import useVersion from './useVersion';
 export {
     getListControllerProps,
     sanitizeListRestProps,
@@ -18,7 +19,8 @@ export {
     ShowController,
     useGetOne,
     useGetList,
-    useSelectItems,
+    useRecordSelection,
+    useVersion,
 };
 
 export * from './field';
diff --git a/packages/ra-core/src/controller/useSelectItems.ts b/packages/ra-core/src/controller/useRecordSelection.ts
similarity index 77%
rename from packages/ra-core/src/controller/useSelectItems.ts
rename to packages/ra-core/src/controller/useRecordSelection.ts
index d1972aaefd3..2c29667455f 100644
--- a/packages/ra-core/src/controller/useSelectItems.ts
+++ b/packages/ra-core/src/controller/useRecordSelection.ts
@@ -9,11 +9,16 @@ import { Identifier, ReduxState } from '../types';
  *
  * @param resource The resource name, e.g. 'posts'
  *
- * @returns {Object} Destructure as { selectedIds, select, toggle, clearSelection }.
+ * @returns {Object} Destructure as [selectedIds, { select, toggle, clearSelection }].
  */
 const useSelectItems = (resource: string) => {
     const dispatch = useDispatch();
-    return {
+    const selectedIds = useSelector(
+        (reduxState: ReduxState) =>
+            reduxState.admin.resources[resource].list.selectedIds,
+        [resource]
+    );
+    const selectionModifiers = {
         selectedIds: useSelector(
             (reduxState: ReduxState) =>
                 reduxState.admin.resources[resource].list.selectedIds,
@@ -35,6 +40,7 @@ const useSelectItems = (resource: string) => {
             dispatch(setListSelectedIds(resource, []));
         }, [resource]),
     };
+    return [selectedIds, selectionModifiers];
 };
 
 export default useSelectItems;
diff --git a/packages/ra-core/src/controller/useVersion.ts b/packages/ra-core/src/controller/useVersion.ts
new file mode 100644
index 00000000000..df27cdcc7d7
--- /dev/null
+++ b/packages/ra-core/src/controller/useVersion.ts
@@ -0,0 +1,8 @@
+// @ts-ignore
+import { useSelector } from 'react-redux';
+import { ReduxState } from '../types';
+
+const useVersion = () =>
+    useSelector((reduxState: ReduxState) => reduxState.admin.ui.viewVersion);
+
+export default useVersion;

From 40638c5bccbfe5a192e69d6c92688c8dbbf245a2 Mon Sep 17 00:00:00 2001
From: fzaninotto <fzaninotto@gmail.com>
Date: Wed, 22 May 2019 10:11:24 +0200
Subject: [PATCH 13/18] Fix duplicated selector

---
 packages/ra-core/src/controller/useRecordSelection.ts | 5 -----
 1 file changed, 5 deletions(-)

diff --git a/packages/ra-core/src/controller/useRecordSelection.ts b/packages/ra-core/src/controller/useRecordSelection.ts
index 2c29667455f..5e4504633e2 100644
--- a/packages/ra-core/src/controller/useRecordSelection.ts
+++ b/packages/ra-core/src/controller/useRecordSelection.ts
@@ -19,11 +19,6 @@ const useSelectItems = (resource: string) => {
         [resource]
     );
     const selectionModifiers = {
-        selectedIds: useSelector(
-            (reduxState: ReduxState) =>
-                reduxState.admin.resources[resource].list.selectedIds,
-            [resource]
-        ),
         select: useCallback(
             (newIds: Identifier[]) => {
                 dispatch(setListSelectedIds(resource, newIds));

From 3ed95e15c310052c248483de5404beacbeadb97f Mon Sep 17 00:00:00 2001
From: fzaninotto <fzaninotto@gmail.com>
Date: Wed, 22 May 2019 10:18:18 +0200
Subject: [PATCH 14/18] Move useGetOne and useGetList hooks to fetch directory

---
 .../ra-core/src/controller/EditController.tsx     |  2 +-
 .../ra-core/src/controller/ListController.tsx     |  2 +-
 .../ra-core/src/controller/ShowController.tsx     |  2 +-
 .../ra-core/src/controller/field/useReference.ts  | 15 +++++----------
 packages/ra-core/src/controller/index.ts          |  4 ----
 packages/ra-core/src/fetch/index.ts               |  4 ++++
 .../src/{controller => fetch}/useGetList.ts       |  0
 .../src/{controller => fetch}/useGetOne.ts        |  0
 8 files changed, 12 insertions(+), 17 deletions(-)
 rename packages/ra-core/src/{controller => fetch}/useGetList.ts (100%)
 rename packages/ra-core/src/{controller => fetch}/useGetOne.ts (100%)

diff --git a/packages/ra-core/src/controller/EditController.tsx b/packages/ra-core/src/controller/EditController.tsx
index dc76e26db09..abf8ba87fe4 100644
--- a/packages/ra-core/src/controller/EditController.tsx
+++ b/packages/ra-core/src/controller/EditController.tsx
@@ -8,7 +8,7 @@ import { REDUX_FORM_NAME } from '../form';
 import { useCheckMinimumRequiredProps } from './checkMinimumRequiredProps';
 import { Translate, Record, Identifier } from '../types';
 import { RedirectionSideEffect } from '../sideEffect';
-import useGetOne from './useGetOne';
+import useGetOne from './../fetch/useGetOne';
 import { useTranslate } from '../i18n';
 import useVersion from './useVersion';
 
diff --git a/packages/ra-core/src/controller/ListController.tsx b/packages/ra-core/src/controller/ListController.tsx
index 73618bccc03..7195abe6238 100644
--- a/packages/ra-core/src/controller/ListController.tsx
+++ b/packages/ra-core/src/controller/ListController.tsx
@@ -8,7 +8,7 @@ import { Sort, AuthProvider, RecordMap, Identifier, Translate } from '../types';
 import { Location } from 'history';
 import { useTranslate } from '../i18n';
 import useListParams from './useListParams';
-import useGetList from './useGetList';
+import useGetList from './../fetch/useGetList';
 import useRecordSelection from './useRecordSelection';
 import useVersion from './useVersion';
 
diff --git a/packages/ra-core/src/controller/ShowController.tsx b/packages/ra-core/src/controller/ShowController.tsx
index e6c575de2a7..8a87d84d2a8 100644
--- a/packages/ra-core/src/controller/ShowController.tsx
+++ b/packages/ra-core/src/controller/ShowController.tsx
@@ -2,7 +2,7 @@ import { ReactNode } from 'react';
 import inflection from 'inflection';
 import { useCheckMinimumRequiredProps } from './checkMinimumRequiredProps';
 import { Translate, Record, Identifier } from '../types';
-import useGetOne from './useGetOne';
+import useGetOne from '../fetch/useGetOne';
 import { useTranslate } from '../i18n';
 import useVersion from './useVersion';
 
diff --git a/packages/ra-core/src/controller/field/useReference.ts b/packages/ra-core/src/controller/field/useReference.ts
index b2f8415fa1e..baa3b3329f5 100644
--- a/packages/ra-core/src/controller/field/useReference.ts
+++ b/packages/ra-core/src/controller/field/useReference.ts
@@ -72,10 +72,11 @@ export const useReference = ({
         getReferenceRecord(sourceId, reference)
     );
     const dispatch = useDispatch();
-    useEffect(fetchReference(sourceId, reference, dispatch), [
-        sourceId,
-        reference,
-    ]);
+    useEffect(() => {
+        if (sourceId !== null && typeof sourceId !== 'undefined') {
+            dispatch(crudGetManyAccumulate(reference, [sourceId]));
+        }
+    }, [sourceId, reference]);
     const rootPath = basePath.replace(resource, reference);
     const resourceLinkPath = !linkType
         ? false
@@ -92,10 +93,4 @@ const getReferenceRecord = (sourceId, reference) => (state: ReduxState) =>
     state.admin.resources[reference] &&
     state.admin.resources[reference].data[sourceId];
 
-const fetchReference = (sourceId, reference, dispatch) => () => {
-    if (sourceId !== null && typeof sourceId !== 'undefined') {
-        dispatch(crudGetManyAccumulate(reference, [sourceId]));
-    }
-};
-
 export default useReference;
diff --git a/packages/ra-core/src/controller/index.ts b/packages/ra-core/src/controller/index.ts
index 145efa67fb8..424c6954cad 100644
--- a/packages/ra-core/src/controller/index.ts
+++ b/packages/ra-core/src/controller/index.ts
@@ -6,8 +6,6 @@ import CreateController from './CreateController';
 import EditController from './EditController';
 import ListController from './ListController';
 import ShowController from './ShowController';
-import useGetOne from './useGetOne';
-import useGetList from './useGetList';
 import useRecordSelection from './useRecordSelection';
 import useVersion from './useVersion';
 export {
@@ -17,8 +15,6 @@ export {
     EditController,
     ListController,
     ShowController,
-    useGetOne,
-    useGetList,
     useRecordSelection,
     useVersion,
 };
diff --git a/packages/ra-core/src/fetch/index.ts b/packages/ra-core/src/fetch/index.ts
index c29947e0e4d..beb9ff14eb5 100644
--- a/packages/ra-core/src/fetch/index.ts
+++ b/packages/ra-core/src/fetch/index.ts
@@ -7,6 +7,8 @@ import useMutation from './useMutation';
 import useQuery from './useQuery';
 import useQueryWithStore from './useQueryWithStore';
 import withDataProvider from './withDataProvider';
+import useGetOne from './useGetOne';
+import useGetList from './useGetList';
 
 export {
     fetchUtils,
@@ -16,6 +18,8 @@ export {
     useDataProvider,
     useMutation,
     useQuery,
+    useGetOne,
+    useGetList,
     useQueryWithStore,
     withDataProvider,
 };
diff --git a/packages/ra-core/src/controller/useGetList.ts b/packages/ra-core/src/fetch/useGetList.ts
similarity index 100%
rename from packages/ra-core/src/controller/useGetList.ts
rename to packages/ra-core/src/fetch/useGetList.ts
diff --git a/packages/ra-core/src/controller/useGetOne.ts b/packages/ra-core/src/fetch/useGetOne.ts
similarity index 100%
rename from packages/ra-core/src/controller/useGetOne.ts
rename to packages/ra-core/src/fetch/useGetOne.ts

From bbe859eb88b71327515b85872f0afc028a0b6f04 Mon Sep 17 00:00:00 2001
From: fzaninotto <fzaninotto@gmail.com>
Date: Wed, 22 May 2019 10:33:48 +0200
Subject: [PATCH 15/18] improve hooks jsDoc

---
 .../ra-core/src/controller/useListParams.ts   | 30 +++++++++++++------
 packages/ra-core/src/controller/useVersion.ts |  6 ++++
 2 files changed, 27 insertions(+), 9 deletions(-)

diff --git a/packages/ra-core/src/controller/useListParams.ts b/packages/ra-core/src/controller/useListParams.ts
index 8de4a760df0..1ae1eebb43f 100644
--- a/packages/ra-core/src/controller/useListParams.ts
+++ b/packages/ra-core/src/controller/useListParams.ts
@@ -16,20 +16,20 @@ import queryReducer, {
     SORT_ASC,
 } from '../reducer/admin/resource/list/queryReducer';
 import { changeListParams, ListParams } from '../actions/listActions';
-import { Sort, ReduxState, Identifier, RecordMap } from '../types';
+import { Sort, ReduxState } from '../types';
 import removeEmpty from '../util/removeEmpty';
 import removeKey from '../util/removeKey';
 
-interface Options {
-    filterDefaultValues?: object;
+interface ListParamsOptions {
+    resource: string;
+    location: Location;
     perPage?: number;
     sort?: Sort;
-    location: Location;
-    resource: string;
+    filterDefaultValues?: object;
     debounce?: number;
 }
 
-interface Query extends ListParams {
+interface Parameters extends ListParams {
     filterValues: object;
     displayedFilters: {
         [key: string]: boolean;
@@ -37,7 +37,7 @@ interface Query extends ListParams {
     requestSignature: any[];
 }
 
-interface Actions {
+interface Modifiers {
     changeParams: (action: any) => void;
     setPage: (page: number) => void;
     setPerPage: (pageSize: number) => void;
@@ -48,9 +48,21 @@ interface Actions {
 }
 
 /**
- * Returns an array (like useState) with the list params as the first element and actions to modify them in the second.
+ * Get the list parameters (page, sort, filters) and modifiers.
+ *
+ * These parameters are merged from 3 sources:
+ *   - the query string from the URL
+ *   - the params stored in the state (from previous navigation)
+ *   - the options passed to the hook (including the filter defaultValues)
+ *
+ * @returns {Array} A tuple [parameters, modifiers].
+ * Destructure as [
+ *    { page, perPage, sort, order, filter, filterValues, displayedFilters, requestSignature },
+ *    { setFilters, hideFilter, showFilter, setPage, setPerPage, setSort }
+ * ]
  *
  * @example
+ *
  * const [listParams, listParamsActions] = useListParams({
  *      resource: 'posts',
  *      location: location // From react-router. Injected to your component by react-admin inside a List
@@ -94,7 +106,7 @@ const useListParams = ({
     },
     perPage = 10,
     debounce = 500,
-}: Options): [Query, Actions] => {
+}: ListParamsOptions): [Parameters, Modifiers] => {
     const [displayedFilters, setDisplayedFilters] = useState({});
     const dispatch = useDispatch();
 
diff --git a/packages/ra-core/src/controller/useVersion.ts b/packages/ra-core/src/controller/useVersion.ts
index df27cdcc7d7..2e332e29240 100644
--- a/packages/ra-core/src/controller/useVersion.ts
+++ b/packages/ra-core/src/controller/useVersion.ts
@@ -2,6 +2,12 @@
 import { useSelector } from 'react-redux';
 import { ReduxState } from '../types';
 
+/**
+ * Get the UI version from the store
+ *
+ * The UI version is an integer incremented by the refresh button;
+ * it serves to force running fetch hooks again.
+ */
 const useVersion = () =>
     useSelector((reduxState: ReduxState) => reduxState.admin.ui.viewVersion);
 

From 7b0aa1bf48c162f7ebb48d5b4e095e2dd60a6bfd Mon Sep 17 00:00:00 2001
From: fzaninotto <fzaninotto@gmail.com>
Date: Wed, 22 May 2019 11:11:18 +0200
Subject: [PATCH 16/18] Add default data cache in useQueryWithStore

---
 examples/demo/src/dashboard/NewCustomers.js   |  8 ++++--
 .../ra-core/src/fetch/useQueryWithStore.ts    | 21 +++++++++++++---
 .../src/reducer/admin/customQueries.ts        | 25 +++++++++++++++++++
 packages/ra-core/src/reducer/admin/index.ts   |  2 ++
 packages/ra-core/src/types.ts                 |  3 +++
 5 files changed, 54 insertions(+), 5 deletions(-)
 create mode 100644 packages/ra-core/src/reducer/admin/customQueries.ts

diff --git a/examples/demo/src/dashboard/NewCustomers.js b/examples/demo/src/dashboard/NewCustomers.js
index 6e8f4c9d411..5e872d6eda7 100644
--- a/examples/demo/src/dashboard/NewCustomers.js
+++ b/examples/demo/src/dashboard/NewCustomers.js
@@ -10,7 +10,7 @@ import CustomerIcon from '@material-ui/icons/PersonAdd';
 import Divider from '@material-ui/core/Divider';
 import { makeStyles } from '@material-ui/core/styles';
 import { Link } from 'react-router-dom';
-import { useTranslate, useQuery, GET_LIST } from 'react-admin';
+import { useTranslate, useQueryWithStore, GET_LIST } from 'react-admin';
 
 import CardIcon from './CardIcon';
 
@@ -40,10 +40,14 @@ const NewCustomers = () => {
     const aMonthAgo = useMemo(() => {
         const date = new Date();
         date.setDate(date.getDate() - 30);
+        date.setHours(0);
+        date.setMinutes(0);
+        date.setSeconds(0);
+        date.setMilliseconds(0);
         return date;
     }, []);
 
-    const { loaded, data: visitors } = useQuery({
+    const { loaded, data: visitors } = useQueryWithStore({
         type: GET_LIST,
         resource: 'customers',
         payload: {
diff --git a/packages/ra-core/src/fetch/useQueryWithStore.ts b/packages/ra-core/src/fetch/useQueryWithStore.ts
index 12b12f5199c..ed9f9579b63 100644
--- a/packages/ra-core/src/fetch/useQueryWithStore.ts
+++ b/packages/ra-core/src/fetch/useQueryWithStore.ts
@@ -19,7 +19,7 @@ export interface QueryOptions {
 }
 
 /**
- * Lists of records are initilized to a particular object,
+ * Lists of records are initialized to a particular object,
  * so detecting if the list is empty requires some work.
  *
  * @see src/reducer/admin/data.ts
@@ -27,6 +27,21 @@ export interface QueryOptions {
 const isEmptyList = data =>
     data && Object.keys(data).length === 0 && data.hasOwnProperty('fetchedAt');
 
+/**
+ * Default cache selector. Allows to cache responses by default.
+ *
+ * By default, custom queries are dispatched as a CUSTOM_QUERY Redux action.
+ * The fetch middleware dispatches a CUSTOM_QUERY_SUCCESS when the response comes,
+ * and the customQueries reducer stores the result in the store. This selector
+ * reads the customQueries store and acts as a response cache.
+ */
+const defaultDataSelector = query => (state: ReduxState) => {
+    const key = JSON.stringify(query);
+    return state.admin.customQueries[key]
+        ? state.admin.customQueries[key].data
+        : undefined;
+};
+
 /**
  * Fetch the data provider through Redux, return the value from the store.
  *
@@ -72,8 +87,8 @@ const isEmptyList = data =>
  */
 const useQueryWithStore = (
     query: Query,
-    options: QueryOptions = {},
-    dataSelector: (state: ReduxState) => any,
+    options: QueryOptions = { action: 'CUSTOM_QUERY' },
+    dataSelector: (state: ReduxState) => any = defaultDataSelector(query),
     totalSelector?: (state: ReduxState) => number
 ): {
     data?: any;
diff --git a/packages/ra-core/src/reducer/admin/customQueries.ts b/packages/ra-core/src/reducer/admin/customQueries.ts
new file mode 100644
index 00000000000..8254f09b61c
--- /dev/null
+++ b/packages/ra-core/src/reducer/admin/customQueries.ts
@@ -0,0 +1,25 @@
+import { Reducer } from 'redux';
+
+export interface State {
+    [key: string]: any;
+}
+
+const customQueriesReducer: Reducer<State> = (
+    previousState = {},
+    { type, requestPayload, payload, meta }
+) => {
+    if (type !== 'CUSTOM_QUERY_SUCCESS') {
+        return previousState;
+    }
+    const key = JSON.stringify({
+        type: meta.fetchResponse,
+        resource: meta.resource,
+        payload: requestPayload,
+    });
+    return {
+        ...previousState,
+        [key]: payload,
+    };
+};
+
+export default customQueriesReducer;
diff --git a/packages/ra-core/src/reducer/admin/index.ts b/packages/ra-core/src/reducer/admin/index.ts
index 598df0e254b..91738a6f04b 100644
--- a/packages/ra-core/src/reducer/admin/index.ts
+++ b/packages/ra-core/src/reducer/admin/index.ts
@@ -12,9 +12,11 @@ import references, {
 import saving from './saving';
 import ui from './ui';
 import auth, { isLoggedIn as authIsLoggedIn } from './auth';
+import customQueries from './customQueries';
 
 export default combineReducers({
     resources,
+    customQueries,
     loading,
     notifications,
     record,
diff --git a/packages/ra-core/src/types.ts b/packages/ra-core/src/types.ts
index bb91ca85793..de1f45dea6e 100644
--- a/packages/ra-core/src/types.ts
+++ b/packages/ra-core/src/types.ts
@@ -66,6 +66,9 @@ export interface ReduxState {
             };
         };
         loading: number;
+        customQueries: {
+            [key: string]: any;
+        };
     };
     i18n: {
         locale: string;

From d11ecbe638c804e612548c94be94aca4d49537ae Mon Sep 17 00:00:00 2001
From: fzaninotto <fzaninotto@gmail.com>
Date: Wed, 22 May 2019 11:21:46 +0200
Subject: [PATCH 17/18] Document useQueryWithStore

---
 docs/Actions.md            | 27 +++++++++++++++++++++++++--
 docs/_layouts/default.html |  3 +++
 2 files changed, 28 insertions(+), 2 deletions(-)

diff --git a/docs/Actions.md b/docs/Actions.md
index 77b0d5f2678..cd697fd29f4 100644
--- a/docs/Actions.md
+++ b/docs/Actions.md
@@ -29,12 +29,12 @@ Here is an implementation of a user profile component using the `useQuery` hook:
 import { useQuery, GET_ONE } from 'react-admin';
 
 const UserProfile = ({ record }) => {
-    const { loading, error, data } = useQuery({
+    const { loaded, error, data } = useQuery({
         type: GET_ONE,
         resource: 'users',
         payload: { id: record.id }
     });
-    if (loading) { return <Loading />; }
+    if (!loaded) { return <Loading />; }
     if (error) { return <p>ERROR</p>; }
     return <div>User {data.username}</div>;
 };
@@ -84,6 +84,29 @@ You can destructure the return value of the `useQuery` hook as `{ data, total, e
 
 **Tip**: Your `dataProvider` should return the `total` value for list queries only, to express the total number of results (which may be higher than the number of returned results if the response is paginated). 
 
+## `useQueryWithStore` Hook
+
+Internally, react-admin uses a more powerful version of `useQuery` called `useQueryWithStore`, which has an internal cache. In practice, `useQueryWithStore` persist the response from the dataProvider in the internal react-admin store, so that result remains available if the hook is called again in the future.  
+
+You can use this hook to avoid showing the loading indicator if the query was already fetched once. 
+
+```diff
+-import { useQuery, GET_ONE } from 'react-admin';
++import { useQueryWithStore, GET_ONE } from 'react-admin';
+
+const UserProfile = ({ record }) => {
+-   const { loaded, error, data } = useQuery({
++   const { loaded, error, data } = useQueryWithStore({
+        type: GET_ONE,
+        resource: 'users',
+        payload: { id: record.id }
+    });
+    if (!loaded) { return <Loading />; }
+    if (error) { return <p>ERROR</p>; }
+    return <div>User {data.username}</div>;
+};
+```
+
 ## `useMutation` Hook
 
 `useQuery` emits the request to the `dataProvider` as soon as the component mounts. To emit the request based on a user action, use the `useMutation` hook instead. This hook takes the same arguments as `useQuery`, but returns a callback that emits the request when executed, and an object containing the request state:
diff --git a/docs/_layouts/default.html b/docs/_layouts/default.html
index ab847d3c879..b17fb411aae 100644
--- a/docs/_layouts/default.html
+++ b/docs/_layouts/default.html
@@ -715,6 +715,9 @@
                             <li class="chapter">
                                 <a href="#usequery-hook"><code>useQuery</code></a>
                             </li>
+                            <li class="chapter">
+                                <a href="#usequerywithstore-hook"><code>useQueryWithStore</code></a>
+                            </li>
                             <li class="chapter">
                                 <a href="#usemutation-hook"><code>useMutation</code></a>
                             </li>

From a682d4d0f01a49407ad13044d457b7b5768fbe96 Mon Sep 17 00:00:00 2001
From: fzaninotto <fzaninotto@gmail.com>
Date: Wed, 22 May 2019 11:23:08 +0200
Subject: [PATCH 18/18] Fix TestContext unit test

---
 packages/ra-core/src/util/TestContext.spec.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/ra-core/src/util/TestContext.spec.tsx b/packages/ra-core/src/util/TestContext.spec.tsx
index a849c8df5c1..a4dfc31ff36 100644
--- a/packages/ra-core/src/util/TestContext.spec.tsx
+++ b/packages/ra-core/src/util/TestContext.spec.tsx
@@ -22,6 +22,7 @@ const primedStore = {
         ui: {
             viewVersion: 1,
         },
+        customQueries: {},
     },
     form: {},
     i18n: {