Populate query cache in query hooks

Author: fzaninotto

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

@@ -7,7 +7,6 @@ import validateResponseFormat from './validateResponseFormat';
 import { DataProvider } from '../types';
 import useLogoutIfAccessDenied from '../auth/useLogoutIfAccessDenied';
 import { reactAdminFetchActions } from './dataFetchActions';
-import { populateQueryCache } from './populateQueryCache';
 
 /**
  * Hook for getting a dataProvider
@@ -114,12 +113,7 @@ export const useDataProvider = <
                                 ) {
                                     validateResponseFormat(response, type);
                                 }
-                                if (response?.meta?.prefetched) {
-                                    populateQueryCache({
-                                        data: response?.meta.prefetched,
-                                        queryClient,
-                                    });
-                                }
+
                                 return response;
                             })
                             .catch(error => {

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

@@ -9,6 +9,7 @@ import {
 import { RaRecord, GetListParams, GetListResult } from '../types';
 import { useDataProvider } from './useDataProvider';
 import { useEvent } from '../util';
+import { populateQueryCache } from './populateQueryCache';
 
 const MAX_DATA_LENGTH_TO_CACHE = 100;
 
@@ -167,6 +168,15 @@ export const useGetList = <
         result.isFetching,
     ]);
 
+    useEffect(() => {
+        if (result.data?.meta?.prefetched) {
+            populateQueryCache({
+                data: result.data?.meta.prefetched,
+                queryClient,
+            });
+        }
+    }, [result.data?.meta, queryClient]);
+
     return useMemo(
         () =>
             result.data

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

@@ -12,6 +12,7 @@ import {
     GetManyReferenceResult,
 } from '../types';
 import { useDataProvider } from './useDataProvider';
+import { populateQueryCache } from './populateQueryCache';
 import { useEvent } from '../util';
 
 /**
@@ -146,6 +147,15 @@ export const useGetManyReference = <
         onSettledEvent(result.data, result.error);
     }, [onSettledEvent, result.data, result.error, result.status]);
 
+    useEffect(() => {
+        if (result.data?.meta?.prefetched) {
+            populateQueryCache({
+                data: result.data?.meta.prefetched,
+                queryClient,
+            });
+        }
+    }, [result.data?.meta, queryClient]);
+
     return useMemo(
         () =>
             result.data

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

@@ -1,11 +1,14 @@
-import { RaRecord, GetOneParams, GetOneResult } from '../types';
+import { useEffect, useMemo } from 'react';
 import {
     useQuery,
+    useQueryClient,
     UseQueryOptions,
     UseQueryResult,
 } from '@tanstack/react-query';
+
+import { RaRecord, GetOneParams, GetOneResult } from '../types';
 import { useDataProvider } from './useDataProvider';
-import { useEffect } from 'react';
+import { populateQueryCache } from './populateQueryCache';
 import { useEvent } from '../util';
 
 /**
@@ -53,6 +56,7 @@ export const useGetOne = <RecordType extends RaRecord = any, ErrorType = Error>(
     options: UseGetOneOptions<RecordType, ErrorType> = {}
 ): UseGetOneHookValue<RecordType, ErrorType> => {
     const dataProvider = useDataProvider();
+    const queryClient = useQueryClient();
     const {
         onError = noop,
         onSuccess = noop,
@@ -64,7 +68,7 @@ export const useGetOne = <RecordType extends RaRecord = any, ErrorType = Error>(
     const onErrorEvent = useEvent(onError);
     const onSettledEvent = useEvent(onSettled);
 
-    const result = useQuery<RecordType, ErrorType>({
+    const result = useQuery<GetOneResult<RecordType>, ErrorType>({
         // Sometimes the id comes as a string (e.g. when read from the URL in a Show view).
         // Sometimes the id comes as a number (e.g. when read from a Record in useGetList response).
         // As the react-query cache is type-sensitive, we always stringify the identifier to get a match
@@ -81,7 +85,7 @@ export const useGetOne = <RecordType extends RaRecord = any, ErrorType = Error>(
                                   ? queryParams.signal
                                   : undefined,
                       })
-                      .then(({ data }) => data),
+                      .then(({ data, meta }) => ({ data, meta })),
         enabled: enabled ?? id != null,
         ...queryOptions,
     });
@@ -93,8 +97,8 @@ export const useGetOne = <RecordType extends RaRecord = any, ErrorType = Error>(
             result.isFetching
         )
             return;
-        onSuccessEvent(result.data);
-    }, [onSuccessEvent, result.data, result.error, result.isFetching]);
+        onSuccessEvent(result.data.data);
+    }, [onSuccessEvent, result.data?.data, result.error, result.isFetching]);
 
     useEffect(() => {
         if (result.error == null || result.isFetching) return;
@@ -103,16 +107,36 @@ export const useGetOne = <RecordType extends RaRecord = any, ErrorType = Error>(
 
     useEffect(() => {
         if (result.status === 'pending' || result.isFetching) return;
-        onSettledEvent(result.data, result.error);
+        onSettledEvent(result.data?.data, result.error);
     }, [
         onSettledEvent,
-        result.data,
+        result.data?.data,
         result.error,
         result.status,
         result.isFetching,
     ]);
 
-    return result;
+    useEffect(() => {
+        if (result.data?.meta?.prefetched) {
+            populateQueryCache({
+                data: result.data?.meta.prefetched,
+                queryClient,
+            });
+        }
+    }, [result.data?.meta, queryClient]);
+
+    return useMemo(
+        () =>
+            result.data
+                ? {
+                      ...result,
+                      ...result.data,
+                  }
+                : result,
+        [result]
+    ) as UseQueryResult<RecordType, ErrorType> & {
+        meta?: any;
+    };
 };
 
 const noop = () => undefined;
@@ -121,7 +145,7 @@ export type UseGetOneOptions<
     RecordType extends RaRecord = any,
     ErrorType = Error,
 > = Omit<
-    UseQueryOptions<GetOneResult<RecordType>['data'], ErrorType>,
+    UseQueryOptions<GetOneResult<RecordType>, ErrorType>,
     'queryKey' | 'queryFn'
 > & {
     onSuccess?: (data: GetOneResult<RecordType>['data']) => void;