Add opt-in client-side caching layer to save on network requests

examples/simple/src/dataProvider.js

@@ -11,6 +11,17 @@ const sometimesFailsDataProvider = new Proxy(uploadCapableDataProvider, {
         // if (name === 'delete' && resource === 'posts') {
         //     return Promise.reject(new Error('deletion error'));
         // }
+        // test cache
+        if (name === 'getList' || name === 'getMany' || name === 'getOne') {
+            return uploadCapableDataProvider[name](resource, params).then(
+                response => {
+                    const validUntil = new Date();
+                    validUntil.setTime(validUntil.getTime() + 5 * 60 * 1000); // five minutes
+                    response.validUntil = validUntil;
+                    return response;
+                }
+            );
+        }
         return uploadCapableDataProvider[name](resource, params);
     },
 });

packages/ra-core/src/actions/dataActions/crudGetMatching.ts

@@ -32,7 +32,7 @@ interface RequestPayload {
 }
 
 export const CRUD_GET_MATCHING = 'RA/CRUD_GET_MATCHING';
-interface CrudGetMatchingAction {
+export interface CrudGetMatchingAction {
     readonly type: typeof CRUD_GET_MATCHING;
     readonly payload: RequestPayload;
     readonly meta: {

packages/ra-core/src/controller/useListController.ts

@@ -124,12 +124,21 @@ const useListController = (props: ListProps): ListControllerProps => {
     });
 
     const [selectedIds, selectionModifiers] = useRecordSelection(resource);
+    const payload = {
+        pagination: {
+            page: query.page,
+            perPage: query.perPage,
+        },
+        sort: { field: query.sort, order: query.order },
+        filter: { ...query.filter, ...filter },
+    };
+    const requestSignature = JSON.stringify(payload);
 
     /**
      * We don't use useGetList() here because we want the list of ids to be
      * always available for optimistic rendering, and therefore we need a
      * custom action (CRUD_GET_LIST), a custom reducer for ids and total
-     * (admin.resources.[resource].list.ids and admin.resources.[resource].list.total)
+     * (admin.resources.[resource].list.idsForQueries and admin.resources.[resource].list.total)
      * and a custom selector for these reducers.
      * Also we don't want that calls to useGetList() in userland change
      * the list of ids in the main List view.
@@ -138,14 +147,7 @@ const useListController = (props: ListProps): ListControllerProps => {
         {
             type: 'getList',
             resource,
-            payload: {
-                pagination: {
-                    page: query.page,
-                    perPage: query.perPage,
-                },
-                sort: { field: query.sort, order: query.order },
-                filter: { ...query.filter, ...filter },
-            },
+            payload,
         },
         {
             action: CRUD_GET_LIST,
@@ -158,14 +160,32 @@ const useListController = (props: ListProps): ListControllerProps => {
                     'warning'
                 ),
         },
-        (state: ReduxState) =>
-            state.admin.resources[resource]
-                ? state.admin.resources[resource].list.ids
-                : null,
-        (state: ReduxState) =>
-            state.admin.resources[resource]
-                ? state.admin.resources[resource].list.total
-                : null
+        // data selector
+        (state: ReduxState): Identifier[] => {
+            const resourceState = state.admin.resources[resource];
+            // if the resource isn't initialized, return null
+            if (!resourceState) return null;
+            const idsForQuery =
+                resourceState.list.idsForQuery[requestSignature];
+            // if the list of ids for the current request (idsForQuery) isn't loaded yet,
+            // return the list of ids for the previous request (ids)
+            return idsForQuery === undefined
+                ? resourceState.list.ids
+                : idsForQuery;
+        },
+        // total selector
+        (state: ReduxState) => {
+            const resourceState = state.admin.resources[resource];
+            // if the resource isn't initialized, return null
+            if (!resourceState) return null;
+            const totalForQuery =
+                resourceState.list.totalForQuery[requestSignature];
+            // if the total for the current request (totalForQuery) isn't loaded yet,
+            // return the total for the previous request (total)
+            return totalForQuery === undefined
+                ? resourceState.list.total
+                : totalForQuery;
+        }
     );
     const data = useSelector(
         (state: ReduxState) =>

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

@@ -0,0 +1,61 @@
+import {
+    GetListParams,
+    GetListResult,
+    GetOneParams,
+    GetOneResult,
+    GetManyParams,
+    GetManyResult,
+} from '../types';
+
+export const canReplyWithCache = (type, payload, resourceState) => {
+    const now = new Date();
+    switch (type) {
+        case 'getList':
+            return (
+                resourceState &&
+                resourceState.list &&
+                resourceState.list.validity &&
+                resourceState.list.validity[
+                    JSON.stringify(payload as GetListParams)
+                ] > now
+            );
+        case 'getOne':
+            return (
+                resourceState &&
+                resourceState.validity &&
+                resourceState.validity[(payload as GetOneParams).id] > now
+            );
+        case 'getMany':
+            return (
+                resourceState &&
+                resourceState.validity &&
+                (payload as GetManyParams).ids.every(
+                    id => resourceState.validity[id] > now
+                )
+            );
+        default:
+            return false;
+    }
+};
+
+export const getResultFromCache = (type, payload, resourceState) => {
+    switch (type) {
+        case 'getList': {
+            const data = resourceState.data;
+            const requestSignature = JSON.stringify(payload);
+            const ids = resourceState.list.idsForQuery[requestSignature];
+            return {
+                data: ids.map(id => data[id]),
+                total: resourceState.list.totalForQuery[requestSignature],
+            } as GetListResult;
+        }
+        case 'getOne':
+            return { data: resourceState.data[payload.id] } as GetOneResult;
+        case 'getMany':
+            return {
+                data: payload.ids.map(id => resourceState.data[id]),
+            } as GetManyResult;
+        default:
+            throw new Error('cannot reply with cache for this method');
+    }
+};

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

@@ -1,12 +1,13 @@
 import { useContext, useMemo } from 'react';
 import { Dispatch } from 'redux';
-import { useDispatch, useSelector } from 'react-redux';
+import { useDispatch, useSelector, useStore } from 'react-redux';
 
 import DataProviderContext from './DataProviderContext';
 import validateResponseFormat from './validateResponseFormat';
 import undoableEventEmitter from './undoableEventEmitter';
 import getFetchType from './getFetchType';
 import defaultDataProvider from './defaultDataProvider';
+import { canReplyWithCache, getResultFromCache } from './replyWithCache';
 import {
     startOptimisticMode,
     stopOptimisticMode,
@@ -22,6 +23,10 @@ import {
 } from '../types';
 import useLogoutIfAccessDenied from '../auth/useLogoutIfAccessDenied';
 
+// List of dataProvider calls emitted while in optimistic mode.
+// These calls get replayed once the dataProvider exits optimistic mode
+const optimisticCalls = [];
+
 /**
  * Hook for getting a dataProvider
  *
@@ -116,6 +121,7 @@ const useDataProvider = (): DataProviderProxy => {
     const isOptimistic = useSelector(
         (state: ReduxState) => state.admin.ui.optimistic
     );
+    const store = useStore<ReduxState>();
     const logoutIfAccessDenied = useLogoutIfAccessDenied();
 
     const dataProviderProxy = useMemo(() => {
@@ -155,35 +161,91 @@ const useDataProvider = (): DataProviderProxy => {
                             'You must pass an onSuccess callback calling notify() to use the undoable mode'
                         );
                     }
-                    if (isOptimistic) {
-                        // in optimistic mode, all fetch actions are canceled,
-                        // so the admin uses the store without synchronization
-                        return Promise.resolve();
-                    }
 
                     const params = {
-                        type,
-                        payload,
-                        resource,
                         action,
-                        rest,
-                        onSuccess,
-                        onFailure,
                         dataProvider,
                         dispatch,
                         logoutIfAccessDenied,
+                        onFailure,
+                        onSuccess,
+                        payload,
+                        resource,
+                        rest,
+                        store,
+                        type,
+                        undoable,
                     };
-                    return undoable
-                        ? performUndoableQuery(params)
-                        : performQuery(params);
+                    if (isOptimistic) {
+                        // in optimistic mode, all fetch calls are stacked, to be
+                        // executed once the dataProvider leaves optimistic mode.
+                        // In the meantime, the admin uses data from the store.
+                        optimisticCalls.push(params);
+                        return Promise.resolve();
+                    }
+                    return doQuery(params);
                 };
             },
         });
-    }, [dataProvider, dispatch, isOptimistic, logoutIfAccessDenied]);
+    }, [dataProvider, dispatch, isOptimistic, logoutIfAccessDenied, store]);
 
     return dataProviderProxy;
 };
 
+const doQuery = ({
+    type,
+    payload,
+    resource,
+    action,
+    rest,
+    onSuccess,
+    onFailure,
+    dataProvider,
+    dispatch,
+    store,
+    undoable,
+    logoutIfAccessDenied,
+}) => {
+    const resourceState = store.getState().admin.resources[resource];
+    if (canReplyWithCache(type, payload, resourceState)) {
+        return answerWithCache({
+            type,
+            payload,
+            resource,
+            action,
+            rest,
+            onSuccess,
+            resourceState,
+            dispatch,
+        });
+    }
+    return undoable
+        ? performUndoableQuery({
+              type,
+              payload,
+              resource,
+              action,
+              rest,
+              onSuccess,
+              onFailure,
+              dataProvider,
+              dispatch,
+              logoutIfAccessDenied,
+          })
+        : performQuery({
+              type,
+              payload,
+              resource,
+              action,
+              rest,
+              onSuccess,
+              onFailure,
+              dataProvider,
+              dispatch,
+              logoutIfAccessDenied,
+          });
+};
+
 /**
  * In undoable mode, the hook dispatches an optimistic action and executes
  * the success side effects right away. Then it waits for a few seconds to
@@ -267,7 +329,7 @@ const performUndoableQuery = ({
                             warnBeforeClosingWindow
                         );
                     }
-                    dispatch(refreshView());
+                    replayOptimisticCalls();
                 })
                 .catch(error => {
                     if (window) {
@@ -317,6 +379,16 @@ const warnBeforeClosingWindow = event => {
     return 'Your latest modifications are not yet sent to the server. Are you sure?'; // Old IE
 };
 
+// Replay calls recorded while in optimistic mode
+const replayOptimisticCalls = () => {
+    Promise.all(
+        optimisticCalls.map(params =>
+            Promise.resolve(doQuery.call(null, params))
+        )
+    );
+    optimisticCalls.splice(0, optimisticCalls.length);
+};
+
 /**
  * In normal mode, the hook calls the dataProvider. When a successful response
  * arrives, the hook dispatches a SUCCESS action, executes success side effects
@@ -400,6 +472,38 @@ const performQuery = ({
     }
 };
 
+const answerWithCache = ({
+    type,
+    payload,
+    resource,
+    action,
+    rest,
+    onSuccess,
+    resourceState,
+    dispatch,
+}) => {
+    dispatch({
+        type: action,
+        payload,
+        meta: { resource, ...rest },
+    });
+    const response = getResultFromCache(type, payload, resourceState);
+    dispatch({
+        type: `${action}_SUCCESS`,
+        payload: response,
+        requestPayload: payload,
+        meta: {
+            ...rest,
+            resource,
+            fetchResponse: getFetchType(type),
+            fetchStatus: FETCH_END,
+            fromCache: true,
+        },
+    });
+    onSuccess && onSuccess(response);
+    return Promise.resolve(response);
+};
+
 interface QueryFunctionParams {
     /** The fetch type, e.g. `UPDATE_MANY` */
     type: string;