Upgrade react-query to v5

marmelab · Nov 29, 2023 · dc19387 · dc19387
1 parent 1802c0b
commit dc19387
Show file tree

Hide file tree

Showing 83 changed files with 1,185 additions and 1,082 deletions.
diff --git a/examples/crm/package.json b/examples/crm/package.json
@@ -14,7 +14,7 @@
         "lodash": "~4.17.5",
         "prop-types": "^15.7.2",
         "ra-data-fakerest": "^4.12.0",
-        "react": "^17.0.0",
+        "react": "^18.0.0",
         "react-admin": "^4.12.0",
         "react-dom": "^17.0.0",
         "react-error-boundary": "^3.1.4",
@@ -28,7 +28,7 @@
         "@types/faker": "^5.1.7",
         "@types/jest": "^29.5.2",
         "@types/lodash": "~4.14.168",
-        "@types/react": "^17.0.20",
+        "@types/react": "^18.2.37",
         "@types/react-dom": "^17.0.9",
         "@vitejs/plugin-react": "^2.2.0",
         "rollup-plugin-visualizer": "^5.9.2",

diff --git a/examples/demo/package.json b/examples/demo/package.json
@@ -29,7 +29,7 @@
         "ra-input-rich-text": "^4.12.0",
         "ra-language-english": "^4.12.0",
         "ra-language-french": "^4.12.0",
-        "react": "^17.0.0",
+        "react": "^18.0.0",
         "react-admin": "^4.12.0",
         "react-app-polyfill": "^2.0.0",
         "react-dom": "^17.0.0",
@@ -47,7 +47,7 @@
         "@types/jest": "^29.5.2",
         "@types/node": "^12.12.14",
         "@types/prop-types": "^15.6.0",
-        "@types/react": "^17.0.20",
+        "@types/react": "^18.2.37",
         "@types/react-dom": "^17.0.9",
         "@vitejs/plugin-react": "^2.2.0",
         "rewire": "^5.0.0",

diff --git a/examples/no-code/package.json b/examples/no-code/package.json
@@ -11,7 +11,7 @@
         "@mui/material": "^5.0.2",
         "ra-data-local-storage": "^4.12.0",
         "ra-no-code": "^4.12.0",
-        "react": "^17.0.0",
+        "react": "^18.0.0",
         "react-admin": "^4.12.0",
         "react-dom": "^17.0.0"
     },

diff --git a/examples/simple/package.json b/examples/simple/package.json
@@ -13,6 +13,7 @@
         "@emotion/styled": "^11.6.0",
         "@mui/icons-material": "^5.0.1",
         "@mui/material": "^5.0.2",
+        "@tanstack/react-query": "^5.8.4",
         "jsonexport": "^3.2.0",
         "lodash": "~4.17.5",
         "prop-types": "^15.7.2",
@@ -22,11 +23,10 @@
         "ra-input-rich-text": "^4.15.5",
         "ra-language-english": "^4.15.5",
         "ra-language-french": "^4.15.5",
-        "react": "^17.0.0",
+        "react": "^18.0.0",
         "react-admin": "^4.15.5",
         "react-dom": "^17.0.0",
         "react-hook-form": "^7.43.9",
-        "react-query": "^3.32.1",
         "react-router": "^6.1.0",
         "react-router-dom": "^6.1.0"
     },

diff --git a/examples/tutorial/package.json b/examples/tutorial/package.json
@@ -15,7 +15,7 @@
         "react-dom": "^18.2.0"
     },
     "devDependencies": {
-        "@types/react": "^18.0.22",
+        "@types/react": "^18.2.37",
         "@types/react-dom": "^18.0.7",
         "@vitejs/plugin-react": "^2.2.0",
         "typescript": "^5.1.3",

diff --git a/package.json b/package.json
@@ -36,7 +36,7 @@
         "@storybook/react-webpack5": "^7.5.1",
         "@storybook/testing-react": "^2.0.0",
         "@types/jest": "^29.5.2",
-        "@types/react": "^17.0.20",
+        "@types/react": "^18.2.37",
         "@typescript-eslint/eslint-plugin": "^5.60.0",
         "@typescript-eslint/parser": "^5.60.0",
         "concurrently": "^5.1.0",
@@ -60,7 +60,7 @@
         "lolex": "~2.3.2",
         "prettier": "~2.1.1",
         "raf": "~3.4.1",
-        "react": "^17.0.0",
+        "react": "^18.0.0",
         "react-dom": "^17.0.0",
         "storybook": "^7.5.1",
         "ts-jest": "^29.1.0",

diff --git a/packages/create-react-admin/package.json b/packages/create-react-admin/package.json
@@ -25,11 +25,11 @@
         "ink-select-input": "^4.2.2",
         "ink-text-input": "^4.0.3",
         "meow": "^9.0.0",
-        "react": "^17.0.0",
+        "react": "^18.0.0",
         "yn": "^5.0.0"
     },
     "devDependencies": {
-        "@types/react": ">=17.0.0",
+        "@types/react": ">=18.0.0",
         "typescript": "^5.1.3"
     },
     "gitHead": "e936ff2c3f887d2e98ef136cf3b3f3d254725fc4"

diff --git a/packages/ra-core/package.json b/packages/ra-core/package.json
@@ -32,12 +32,12 @@
         "@types/jest": "^29.5.2",
         "@types/node": "^17.0.8",
         "@types/node-polyglot": "^0.4.31",
-        "@types/react": "^17.0.20",
+        "@types/react": "^18.2.37",
         "cross-env": "^5.2.0",
         "expect": "^27.4.6",
         "history": "^5.1.0",
         "ignore-styles": "~5.0.1",
-        "react": "^17.0.0",
+        "react": "^18.0.0",
         "react-dom": "^17.0.0",
         "react-hook-form": "^7.43.9",
         "react-router": "^6.1.0",
@@ -58,6 +58,7 @@
         "react-router-dom": "^6.1.0"
     },
     "dependencies": {
+        "@tanstack/react-query": "^5.8.4",
         "clsx": "^1.1.1",
         "date-fns": "^2.19.0",
         "eventemitter3": "^4.0.7",
@@ -66,8 +67,7 @@
         "lodash": "~4.17.5",
         "prop-types": "^15.6.1",
         "query-string": "^7.1.1",
-        "react-is": "^17.0.2",
-        "react-query": "^3.32.1"
+        "react-is": "^17.0.2"
     },
     "gitHead": "e936ff2c3f887d2e98ef136cf3b3f3d254725fc4"
 }
diff --git a/packages/ra-core/src/auth/WithPermissions.tsx b/packages/ra-core/src/auth/WithPermissions.tsx
@@ -76,7 +76,7 @@ const WithPermissions = (props: WithPermissionsProps) => {
     );
 
     useAuthenticated(authParams);
-    const { permissions } = usePermissions(authParams);
+    const { data: permissions } = usePermissions(authParams);
     // render even though the usePermissions() call isn't finished (optimistic rendering)
     if (component) {
         return createElement(component, { permissions, ...rest });

diff --git a/packages/ra-core/src/auth/useAuthState.ts b/packages/ra-core/src/auth/useAuthState.ts
@@ -1,5 +1,5 @@
-import { useMemo } from 'react';
-import { useQuery, UseQueryOptions } from 'react-query';
+import { useEffect, useMemo } from 'react';
+import { useQuery, UseQueryOptions } from '@tanstack/react-query';
 import useAuthProvider, { defaultAuthParams } from './useAuthProvider';
 import useLogout from './useLogout';
 import { removeDoubleSlashes, useBasename } from '../routing';
@@ -52,43 +52,61 @@ const emptyParams = {};
 const useAuthState = (
     params: any = emptyParams,
     logoutOnFailure: boolean = false,
-    queryOptions?: UseQueryOptions<boolean, any>
+    queryOptions: UseAuthStateOptions = emptyParams
 ): State => {
     const authProvider = useAuthProvider();
     const logout = useLogout();
     const basename = useBasename();
     const notify = useNotify();
+    const { onSuccess, onError, ...options } = queryOptions;
 
-    const result = useQuery<boolean, any>(
-        ['auth', 'checkAuth', params],
-        () => {
+    const result = useQuery<boolean, any>({
+        queryKey: ['auth', 'checkAuth', params],
+        queryFn: () => {
             // The authProvider is optional in react-admin
             return authProvider?.checkAuth(params).then(() => true);
         },
-        {
-            onError: error => {
-                const loginUrl = removeDoubleSlashes(
-                    `${basename}/${defaultAuthParams.loginUrl}`
+        retry: false,
+        ...options,
+    });
+
+    useEffect(() => {
+        if (result.data && onSuccess) {
+            onSuccess(result.data);
+        }
+    }, [onSuccess, result.data]);
+
+    useEffect(() => {
+        if (result.error) {
+            if (onError) {
+                return onError(result.error);
+            }
+
+            const loginUrl = removeDoubleSlashes(
+                `${basename}/${defaultAuthParams.loginUrl}`
+            );
+            if (logoutOnFailure) {
+                logout(
+                    {},
+                    result.error && result.error.redirectTo != null
+                        ? result.error.redirectTo
+                        : loginUrl
                 );
-                if (logoutOnFailure) {
-                    logout(
-                        {},
-                        error && error.redirectTo != null
-                            ? error.redirectTo
-                            : loginUrl
+                const shouldSkipNotify =
+                    result.error && result.error.message === false;
+                !shouldSkipNotify &&
+                    notify(
+                        getErrorMessage(
+                            result.error,
+                            'ra.auth.auth_check_error'
+                        ),
+                        {
+                            type: 'error',
+                        }
                     );
-                    const shouldSkipNotify = error && error.message === false;
-                    !shouldSkipNotify &&
-                        notify(
-                            getErrorMessage(error, 'ra.auth.auth_check_error'),
-                            { type: 'error' }
-                        );
-                }
-            },
-            retry: false,
-            ...queryOptions,
+            }
         }
-    );
+    }, [basename, logout, logoutOnFailure, notify, onError, result.error]);
 
     return useMemo(() => {
         return {
@@ -102,6 +120,14 @@ const useAuthState = (
     }, [authProvider, result]);
 };
 
+type UseAuthStateOptions = Omit<
+    UseQueryOptions<boolean, any>,
+    'queryKey' | 'queryFn'
+> & {
+    onSuccess?: (data: boolean) => void;
+    onError?: (err: Error) => void;
+};
+
 export default useAuthState;
 
 const getErrorMessage = (error, defaultMessage) =>

diff --git a/packages/ra-core/src/auth/useAuthenticated.ts b/packages/ra-core/src/auth/useAuthenticated.ts
@@ -1,4 +1,4 @@
-import { UseQueryOptions } from 'react-query';
+import { UseQueryOptions } from '@tanstack/react-query';
 import useAuthState from './useAuthState';
 
 /**
@@ -33,11 +33,11 @@ export const useAuthenticated = <ParamsType = any>({
     useAuthState(params ?? emptyParams, true, options);
 };
 
-export type UseAuthenticatedOptions<ParamsType> = UseQueryOptions<
-    boolean,
-    any
-> & {
-    params?: ParamsType;
-};
+export type UseAuthenticatedOptions<ParamsType> = Omit<
+    UseQueryOptions<boolean, any> & {
+        params?: ParamsType;
+    },
+    'queryKey'
+>;
 
 const emptyParams = {};
diff --git a/packages/ra-core/src/auth/useGetIdentity.stories.tsx b/packages/ra-core/src/auth/useGetIdentity.stories.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { QueryClientProvider, QueryClient } from 'react-query';
+import { QueryClientProvider, QueryClient } from '@tanstack/react-query';
 import { useGetIdentity } from './useGetIdentity';
 import AuthContext from './AuthContext';
 

diff --git a/packages/ra-core/src/auth/useGetIdentity.ts b/packages/ra-core/src/auth/useGetIdentity.ts
@@ -1,5 +1,9 @@
-import { useMemo } from 'react';
-import { useQuery, UseQueryOptions, QueryObserverResult } from 'react-query';
+import { useEffect } from 'react';
+import {
+    useQuery,
+    UseQueryOptions,
+    QueryObserverResult,
+} from '@tanstack/react-query';
 
 import useAuthProvider from './useAuthProvider';
 import { UserIdentity } from '../types';
@@ -42,63 +46,42 @@ const defaultQueryParams = {
  * }
  */
 export const useGetIdentity = (
-    queryParams: UseQueryOptions<UserIdentity, Error> = defaultQueryParams
-): UseGetIdentityResult => {
+    options: UseGetIdentityOptions = defaultQueryParams
+): QueryObserverResult<UserIdentity> => {
     const authProvider = useAuthProvider();
+    const { onSuccess, onError, ...queryOptions } = options;
 
-    const result = useQuery(
-        ['auth', 'getIdentity'],
-        authProvider
-            ? () => authProvider.getIdentity()
-            : async () => defaultIdentity,
-        {
-            enabled: typeof authProvider?.getIdentity === 'function',
-            ...queryParams,
+    const result = useQuery({
+        queryKey: ['auth', 'getIdentity'],
+        queryFn: () => {
+            return authProvider
+                ? authProvider.getIdentity()
+                : Promise.resolve(defaultIdentity);
+        },
+        enabled: typeof authProvider?.getIdentity === 'function',
+        ...queryOptions,
+    });
+
+    useEffect(() => {
+        if (result.data && onSuccess) {
+            onSuccess(result.data);
         }
-    );
+    }, [onSuccess, result.data]);
 
-    // @FIXME: return useQuery's result directly by removing identity prop (BC break - to be done in v5)
-    return useMemo(
-        () =>
-            result.isLoading
-                ? { isLoading: true }
-                : result.error
-                ? { error: result.error, isLoading: false }
-                : {
-                      data: result.data,
-                      identity: result.data,
-                      refetch: result.refetch,
-                      isLoading: false,
-                  },
+    useEffect(() => {
+        if (result.error && onError) {
+            onError(result.error);
+        }
+    }, [onError, result.error]);
 
-        [result]
-    );
+    // @FIXME: return useQuery's result directly by removing identity prop (BC break - to be done in v5)
+    return result;
 };
 
-export type UseGetIdentityResult =
-    | {
-          isLoading: true;
-          data?: undefined;
-          identity?: undefined;
-          error?: undefined;
-          refetch?: undefined;
-      }
-    | {
-          isLoading: false;
-          data?: undefined;
-          identity?: undefined;
-          error: Error;
-          refetch?: undefined;
-      }
-    | {
-          isLoading: false;
-          data: UserIdentity;
-          /**
-           * @deprecated Use data instead
-           */
-          identity: UserIdentity;
-          error?: undefined;
-          refetch: () => Promise<QueryObserverResult<UserIdentity, Error>>;
-      };
+export interface UseGetIdentityOptions
+    extends Omit<UseQueryOptions<UserIdentity>, 'queryKey' | 'queryFn'> {
+    onSuccess?: (data: UserIdentity) => void;
+    onError?: (err: Error) => void;
+}
 
 export default useGetIdentity;