Upgrade react-query to v5, react 18 and yarn v4

packages/ra-core/src/auth/useGetIdentity.ts

@@ -99,7 +99,7 @@ export type UseGetIdentityResult<ErrorType = Error> = QueryObserverResult<
     UserIdentity,
     ErrorType
 > & {
-    identity: UserIdentity;
+    identity: UserIdentity | null;
 };
 
 export default useGetIdentity;

packages/ra-core/src/auth/usePermissions.ts

@@ -105,7 +105,7 @@ export type UsePermissionsResult<
     PermissionsType = any,
     ErrorType = Error
 > = QueryObserverResult<PermissionsType, ErrorType> & {
-    permissions: PermissionsType;
+    permissions: PermissionsType | null;
 };
 
 const noop = () => {};

packages/ra-core/src/controller/edit/useEditController.ts

@@ -48,8 +48,11 @@ import {
  *     return <EditView {...controllerProps} {...props} />;
  * }
  */
-export const useEditController = <RecordType extends RaRecord = any>(
-    props: EditControllerProps<RecordType> = {}
+export const useEditController = <
+    RecordType extends RaRecord = any,
+    ErrorType = Error
+>(
+    props: EditControllerProps<RecordType, ErrorType> = {}
 ): EditControllerResult<RecordType> => {
     const {
         disableAuthentication,
@@ -127,7 +130,7 @@ export const useEditController = <RecordType extends RaRecord = any>(
 
     const recordCached = { id, previousData: record };
 
-    const [update, { isPending: saving }] = useUpdate<RecordType>(
+    const [update, { isPending: saving }] = useUpdate<RecordType, ErrorType>(
         resource,
         recordCached,
         {
@@ -149,15 +152,16 @@ export const useEditController = <RecordType extends RaRecord = any>(
                 notify(
                     typeof error === 'string'
                         ? error
-                        : error.message || 'ra.notification.http_error',
+                        : (error as Error).message ||
+                              'ra.notification.http_error',
                     {
                         type: 'error',
                         messageArgs: {
                             _:
                                 typeof error === 'string'
                                     ? error
-                                    : error && error.message
-                                    ? error.message
+                                    : error && (error as Error).message
+                                    ? (error as Error).message
                                     : undefined,
                         },
                     }
@@ -240,11 +244,14 @@ export const useEditController = <RecordType extends RaRecord = any>(
     };
 };
 
-export interface EditControllerProps<RecordType extends RaRecord = any> {
+export interface EditControllerProps<
+    RecordType extends RaRecord = any,
+    ErrorType = Error
+> {
     disableAuthentication?: boolean;
     id?: RecordType['id'];
     mutationMode?: MutationMode;
-    mutationOptions?: UseUpdateOptions<RecordType>;
+    mutationOptions?: UseUpdateOptions<RecordType, ErrorType>;
     queryOptions?: UseGetOneOptions<RecordType>;
     redirect?: RedirectionSideEffect;
     resource?: string;

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

@@ -36,7 +36,7 @@ import { useEvent } from '../util';
  * This hook uses react-query useMutation under the hood.
  * This means the state object contains mutate, isIdle, reset and other react-query methods.
  *
- * @see https://react-query-v3.tanstack.com/reference/useMutation
+ * @see https://react-query-v5.tanstack.com/reference/useMutation
  *
  * @example // set params when calling the create callback
  *

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

@@ -48,7 +48,7 @@ import { useEvent } from '../util';
  * This hook uses react-query useMutation under the hood.
  * This means the state object contains mutate, isIdle, reset and other react-query methods.
  *
- * @see https://react-query-v3.tanstack.com/reference/useMutation
+ * @see https://react-query-v5.tanstack.com/reference/useMutation
  *
  * @example // set params when calling the deleteOne callback
  *
@@ -325,7 +325,7 @@ export const useDelete = <
             previousData: callTimePreviousData = previousData,
         } = callTimeParams;
 
-        // optimistic update as documented in https://react-query-v3.tanstack.com/guides/optimistic-updates
+        // optimistic update as documented in https://react-query-v5.tanstack.com/guides/optimistic-updates
         // except we do it in a mutate wrapper instead of the onMutate callback
         // to have access to success side effects
 
@@ -347,7 +347,7 @@ export const useDelete = <
          *   [['posts', 'getMany'], [{ id: 1, title: 'Hello' }]],
          * ]
          *
-         * @see https://react-query-v3.tanstack.com/reference/QueryClient#queryclientgetqueriesdata
+         * @see https://react-query-v5.tanstack.com/reference/QueryClient#queryclientgetqueriesdata
          */
         snapshot.current = queryKeys.reduce(
             (prev, queryKey) =>

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

@@ -47,7 +47,7 @@ import { useEvent } from '../util';
  * This hook uses react-query useMutation under the hood.
  * This means the state object contains mutate, isIdle, reset and other react-query methods.
  *
- * @see https://react-query-v3.tanstack.com/reference/useMutation
+ * @see https://react-query-v5.tanstack.com/reference/useMutation
  *
  * @example // set params when calling the deleteMany callback
  *
@@ -337,7 +337,7 @@ export const useDeleteMany = <
 
         const { ids: callTimeIds = ids } = callTimeParams;
 
-        // optimistic update as documented in https://react-query-v3.tanstack.com/guides/optimistic-updates
+        // optimistic update as documented in https://react-query-v5.tanstack.com/guides/optimistic-updates
         // except we do it in a mutate wrapper instead of the onMutate callback
         // to have access to success side effects
 
@@ -359,7 +359,7 @@ export const useDeleteMany = <
          *   [['posts', 'getMany'], [{ id: 1, title: 'Hello' }]],
          * ]
          *
-         * @see https://react-query-v3.tanstack.com/reference/QueryClient#queryclientgetqueriesdata
+         * @see https://react-query-v5.tanstack.com/reference/QueryClient#queryclientgetqueriesdata
          */
         snapshot.current = queryKeys.reduce(
             (prev, queryKey) =>

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

@@ -404,40 +404,4 @@ describe('useGetList', () => {
             queryClient.getQueryData(['posts', 'getOne', { id: '1' }])
         ).toBeUndefined();
     });
-
-    // NOTE: it seems that disabled queries are not updated anymore when the cache is updated
-    it.skip('should not fail when the query is disabled and the cache gets updated by another query', async () => {
-        const callback: any = jest.fn();
-        const onSuccess = jest.fn();
-        const queryClient = new QueryClient();
-        const dataProvider = testDataProvider({
-            // @ts-ignore
-            getList: jest.fn(() =>
-                Promise.resolve({ data: [{ id: 1, title: 'live' }], total: 1 })
-            ),
-        });
-        render(
-            <CoreAdminContext
-                queryClient={queryClient}
-                dataProvider={dataProvider}
-            >
-                <UseGetList
-                    options={{ enabled: false, onSuccess }}
-                    callback={callback}
-                />
-            </CoreAdminContext>
-        );
-        await waitFor(() => {
-            expect(callback).toHaveBeenCalled();
-        });
-        // Simulate the side-effect of e.g. a call to delete
-        queryClient.setQueriesData(
-            { queryKey: ['posts', 'getList'] },
-            res => res
-        );
-        // If we get this far without an error being thrown, the test passes
-        await waitFor(() => {
-            expect(onSuccess).toHaveBeenCalled();
-        });
-    });
 });

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

@@ -1,4 +1,4 @@
-import { useEffect, useMemo } from 'react';
+import { useEffect, useMemo, useRef } from 'react';
 import {
     useQuery,
     UseQueryOptions,
@@ -99,6 +99,17 @@ export const useGetList = <RecordType extends RaRecord = any>(
         ...queryOptions,
     });
 
+    const metaValue = useRef(meta);
+    const resourceValue = useRef(resource);
+
+    useEffect(() => {
+        metaValue.current = meta;
+    }, [meta]);
+
+    useEffect(() => {
+        resourceValue.current = resource;
+    }, [resource]);
+
     useEffect(() => {
         if (result.data === undefined) return;
 
@@ -109,13 +120,17 @@ export const useGetList = <RecordType extends RaRecord = any>(
         ) {
             result.data.data.forEach(record => {
                 queryClient.setQueryData(
-                    [resource, 'getOne', { id: String(record.id), meta }],
+                    [
+                        resourceValue.current,
+                        'getOne',
+                        { id: String(record.id), meta: metaValue.current },
+                    ],
                     oldRecord => oldRecord ?? record
                 );
             });
         }
         onSuccessEvent(result.data);
-    }, [meta, onSuccessEvent, queryClient, resource, result.data]);
+    }, [onSuccessEvent, queryClient, result.data]);
 
     useEffect(() => {
         if (result.error == null) return;

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

@@ -9,14 +9,14 @@ import {
 
 import { RaRecord, GetListParams, GetInfiniteListResult } from '../types';
 import { useDataProvider } from './useDataProvider';
-import { useEffect } from 'react';
+import { useEffect, useRef } from 'react';
 import { useEvent } from '../util';
 
 /**
  * Call the dataProvider.getList() method and return the resolved result
  * as well as the loading state. The return from useInfiniteGetList is equivalent to the return from react-hook form useInfiniteQuery.
  *
- * @see https://react-query-v3.tanstack.com/reference/useInfiniteQuery
+ * @see https://react-query-v5.tanstack.com/reference/useInfiniteQuery
  *
  * This hook will return the cached result when called a second time
  * with the same parameters, until the response arrives.
@@ -145,20 +145,35 @@ export const useInfiniteGetList = <RecordType extends RaRecord = any>(
         },
     });
 
+    const metaValue = useRef(meta);
+    const resourceValue = useRef(resource);
+
+    useEffect(() => {
+        metaValue.current = meta;
+    }, [meta]);
+
+    useEffect(() => {
+        resourceValue.current = resource;
+    }, [resource]);
+
     useEffect(() => {
         if (result.data === undefined) return;
         // optimistically populate the getOne cache
         result.data.pages.forEach(page => {
             page.data.forEach(record => {
                 queryClient.setQueryData(
-                    [resource, 'getOne', { id: String(record.id), meta }],
+                    [
+                        resourceValue.current,
+                        'getOne',
+                        { id: String(record.id), meta: metaValue.current },
+                    ],
                     oldRecord => oldRecord ?? record
                 );
             });
         });
 
         onSuccessEvent(result.data);
-    }, [meta, onSuccessEvent, queryClient, resource, result.data]);
+    }, [onSuccessEvent, queryClient, result.data]);
 
     useEffect(() => {
         if (result.error == null) return;

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

@@ -83,11 +83,11 @@ import { useEvent } from '../util';
  * const [update, { data }] = useUpdate<Product>('products', { id, data: diff, previousData: product });
  *                    \-- data is Product
  */
-export const useUpdate = <RecordType extends RaRecord = any>(
+export const useUpdate = <RecordType extends RaRecord = any, ErrorType = Error>(
     resource?: string,
     params: Partial<UpdateParams<RecordType>> = {},
-    options: UseUpdateOptions<RecordType> = {}
-): UseUpdateResult<RecordType, boolean> => {
+    options: UseUpdateOptions<RecordType, ErrorType> = {}
+): UseUpdateResult<RecordType, boolean, ErrorType> => {
     const dataProvider = useDataProvider();
     const queryClient = useQueryClient();
     const { id, data, meta } = params;
@@ -172,7 +172,7 @@ export const useUpdate = <RecordType extends RaRecord = any>(
 
     const mutation = useMutation<
         RecordType,
-        Error,
+        ErrorType,
         Partial<UseUpdateMutateParams<RecordType>>
     >({
         mutationFn: ({
@@ -274,7 +274,7 @@ export const useUpdate = <RecordType extends RaRecord = any>(
         callTimeParams: Partial<UpdateParams<RecordType>> = {},
         callTimeOptions: MutateOptions<
             RecordType,
-            unknown,
+            ErrorType,
             Partial<UseUpdateMutateParams<RecordType>>,
             unknown
         > & { mutationMode?: MutationMode; returnPromise?: boolean } = {}
@@ -455,35 +455,38 @@ export interface UseUpdateMutateParams<RecordType extends RaRecord = any> {
 }
 
 export type UseUpdateOptions<
-    RecordType extends RaRecord = any
+    RecordType extends RaRecord = any,
+    ErrorType = Error
 > = UseMutationOptions<
     RecordType,
-    Error,
+    ErrorType,
     Partial<Omit<UseUpdateMutateParams<RecordType>, 'mutationFn'>>
 > & { mutationMode?: MutationMode; returnPromise?: boolean };
 
 export type UpdateMutationFunction<
     RecordType extends RaRecord = any,
-    TReturnPromise extends boolean = boolean
+    TReturnPromise extends boolean = boolean,
+    ErrorType = Error
 > = (
     resource?: string,
     params?: Partial<UpdateParams<RecordType>>,
     options?: MutateOptions<
         RecordType,
-        Error,
+        ErrorType,
         Partial<UseUpdateMutateParams<RecordType>>,
         unknown
     > & { mutationMode?: MutationMode; returnPromise?: TReturnPromise }
 ) => Promise<TReturnPromise extends true ? RecordType : void>;
 
 export type UseUpdateResult<
     RecordType extends RaRecord = any,
-    TReturnPromise extends boolean = boolean
+    TReturnPromise extends boolean = boolean,
+    ErrorType = Error
 > = [
-    UpdateMutationFunction<RecordType, TReturnPromise>,
+    UpdateMutationFunction<RecordType, TReturnPromise, ErrorType>,
     UseMutationResult<
         RecordType,
-        Error,
+        ErrorType,
         Partial<UpdateParams<RecordType> & { resource?: string }>,
         unknown
     >

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

@@ -50,7 +50,7 @@ import { Identifier } from '..';
  * This hook uses react-query useMutation under the hood.
  * This means the state object contains mutate, isIdle, reset and other react-query methods.
  *
- * @see https://react-query-v3.tanstack.com/reference/useMutation
+ * @see https://react-query-v5.tanstack.com/reference/useMutation
  *
  * @example // set params when calling the updateMany callback
  *
@@ -341,7 +341,7 @@ export const useUpdateMany = <
             meta: callTimeMeta = meta,
         } = callTimeParams;
 
-        // optimistic update as documented in https://react-query-v3.tanstack.com/guides/optimistic-updates
+        // optimistic update as documented in https://react-query-v5.tanstack.com/guides/optimistic-updates
         // except we do it in a mutate wrapper instead of the onMutate callback
         // to have access to success side effects
 
@@ -365,7 +365,7 @@ export const useUpdateMany = <
          *   [['posts', 'getMany'], [{ id: 1, title: 'Hello' }]],
          * ]
          *
-         * @see https://react-query-v3.tanstack.com/reference/QueryClient#queryclientgetqueriesdata
+         * @see https://react-query-v5.tanstack.com/reference/QueryClient#queryclientgetqueriesdata
          */
         snapshot.current = queryKeys.reduce(
             (prev, queryKey) =>

packages/react-admin/README.md

@@ -9,7 +9,7 @@ A frontend Framework for building data-driven applications running in the browse
 ## Features
 
 * Adapts to any backend (REST, GraphQL, SOAP, etc.)
-* Powered by [Material UI](https://mui.com/material-ui/getting-started/), [react-query](https://react-query-v3.tanstack.com/), [react-hook-form](https://react-hook-form.com), [react-router](https://reacttraining.com/react-router/) and a few more
+* Powered by [Material UI](https://mui.com/material-ui/getting-started/), [react-query](https://react-query-v5.tanstack.com/), [react-hook-form](https://react-hook-form.com), [react-router](https://reacttraining.com/react-router/) and a few more
 * Super-fast UI thanks to optimistic rendering (renders before the server returns)
 * Undo updates and deletes for a few seconds
 * Relationships (many to one, one to many)