React Query 5 - very rough attempt

packages/core/package.json

@@ -38,7 +38,7 @@
   },
   "dependencies": {
     "@refinedev/devtools-internal": "1.1.16",
-    "@tanstack/react-query": "^4.10.1",
+    "@tanstack/react-query": "^5.64.2",
     "lodash": "^4.17.21",
     "lodash-es": "^4.17.21",
     "papaparse": "^5.3.0",
@@ -72,7 +72,7 @@
     "typescript": "^5.4.2"
   },
   "peerDependencies": {
-    "@tanstack/react-query": "^4.10.1",
+    "@tanstack/react-query": "^5.64.2",
     "@types/react": "^17.0.0 || ^18.0.0",
     "@types/react-dom": "^17.0.0 || ^18.0.0",
     "react": "^17.0.0 || ^18.0.0",
@@ -81,4 +81,4 @@
   "publishConfig": {
     "access": "public"
   }
-}
+}

packages/core/src/components/autoSaveIndicator/index.tsx

@@ -57,7 +57,7 @@ export const AutoSaveIndicator: React.FC<AutoSaveIndicatorProps> = ({
       return <>{success}</>;
     case "error":
       return <>{error}</>;
-    case "loading":
+    case "pending":
       return <>{loading}</>;
     default:
       return <>{idle}</>;

packages/core/src/components/canAccess/index.spec.tsx

@@ -365,11 +365,11 @@ describe("CanAccess Component", () => {
                 legacyRouterProvider: {
                   ...mockLegacyRouterProvider(),
                   useParams: () =>
-                    ({
+                    (({
                       resource: "posts",
                       id: undefined,
-                      action: "list",
-                    }) as any,
+                      action: "list"
+                    }) as any),
                 },
                 accessControlProvider: {
                   can: async () => {

packages/core/src/components/containers/refine/index.tsx

@@ -81,7 +81,7 @@ export const Refine: React.FC<RefineProps> = ({
         ...reactQueryWithDefaults.clientConfig.defaultOptions,
         queries: {
           refetchOnWindowFocus: false,
-          keepPreviousData: true,
+          // keepPreviousData: true,
           ...reactQueryWithDefaults.clientConfig.defaultOptions?.queries,
         },
       },

packages/core/src/components/pages/auth/components/forgotPassword/index.tsx

@@ -38,7 +38,7 @@ export const ForgotPasswordPage: React.FC<ForgotPasswordProps> = ({
 
   const [email, setEmail] = useState("");
 
-  const { mutate: forgotPassword, isLoading } =
+  const { mutate: forgotPassword, isPending } =
     useForgotPassword<ForgotPasswordFormTypes>();
 
   const renderLink = (link: string, text?: string) => {
@@ -81,7 +81,7 @@ export const ForgotPasswordPage: React.FC<ForgotPasswordProps> = ({
           />
           <input
             type="submit"
-            disabled={isLoading}
+            disabled={isPending}
             value={translate(
               "pages.forgotPassword.buttons.submit",
               "Send reset instructions",

packages/core/src/components/pages/auth/components/register/index.tsx

@@ -42,7 +42,7 @@ export const RegisterPage: React.FC<RegisterProps> = ({
   const translate = useTranslate();
 
   const authProvider = useActiveAuthProvider();
-  const { mutate: register, isLoading } = useRegister({
+  const { mutate: register, isPending } = useRegister({
     v3LegacyAuthProviderCompatible: Boolean(authProvider?.isLegacy),
   });
 
@@ -136,7 +136,7 @@ export const RegisterPage: React.FC<RegisterProps> = ({
               <input
                 type="submit"
                 value={translate("pages.register.buttons.submit", "Sign up")}
-                disabled={isLoading}
+                disabled={isPending}
               />
               {loginLink ?? (
                 <>

packages/core/src/components/pages/auth/components/updatePassword/index.tsx

@@ -26,7 +26,7 @@ export const UpdatePasswordPage: React.FC<UpdatePasswordProps> = ({
   const translate = useTranslate();
 
   const authProvider = useActiveAuthProvider();
-  const { mutate: updatePassword, isLoading } =
+  const { mutate: updatePassword, isPending } =
     useUpdatePassword<UpdatePasswordFormTypes>({
       v3LegacyAuthProviderCompatible: Boolean(authProvider?.isLegacy),
     });
@@ -87,7 +87,7 @@ export const UpdatePasswordPage: React.FC<UpdatePasswordProps> = ({
           />
           <input
             type="submit"
-            disabled={isLoading}
+            disabled={isPending}
             value={translate("pages.updatePassword.buttons.submit", "Update")}
           />
         </div>

packages/core/src/contexts/data/types.ts

@@ -20,7 +20,7 @@ export type BaseOption = {
 /**
  * @deprecated Use `BaseOption` instead.
  */
-export interface Option extends BaseOption {}
+export interface Option extends BaseOption { }
 
 export type NestedField = {
   operation: string;
@@ -32,12 +32,12 @@ export type Fields = Array<string | object | NestedField>;
 
 export type VariableOptions =
   | {
-      type?: string;
-      name?: string;
-      value: any;
-      list?: boolean;
-      required?: boolean;
-    }
+    type?: string;
+    name?: string;
+    value: any;
+    list?: boolean;
+    required?: boolean;
+  }
   | { [k: string]: any };
 
 export interface QueryBuilderOptions {
@@ -209,11 +209,11 @@ export interface IQueryKeys {
     config?:
       | UseListConfig
       | {
-          pagination?: Required<Pagination>;
-          hasPagination?: boolean;
-          sorters?: CrudSort[];
-          filters?: CrudFilter[];
-        }
+        pagination?: Required<Pagination>;
+        hasPagination?: boolean;
+        sorters?: CrudSort[];
+        filters?: CrudFilter[];
+      }
       | undefined,
   ) => QueryKey;
   many: (ids?: BaseKey[]) => QueryKey;
@@ -223,10 +223,10 @@ export interface IQueryKeys {
 
 export interface ValidationErrors {
   [field: string]:
-    | string
-    | string[]
-    | boolean
-    | { key: string; message: string };
+  | string
+  | string[]
+  | boolean
+  | { key: string; message: string };
 }
 
 export interface HttpError extends Record<string, any> {

packages/core/src/contexts/router/legacy/index.tsx

@@ -5,7 +5,7 @@ import type { ILegacyRouterContext } from "./types";
 export const defaultProvider: ILegacyRouterContext = {
   useHistory: () => false,
   useLocation: () => false,
-  useParams: () => ({}) as any,
+  useParams: () => (({}) as any),
   Prompt: () => null,
   Link: () => null,
 };

packages/core/src/definitions/helpers/prepare-query-context/index.ts

@@ -15,5 +15,11 @@ export const prepareQueryContext = (
     },
   });
 
-  return queryContext;
+  Object.defineProperty(queryContext, "direction", {
+    enumerable: true,
+    get: () => {
+      return context.direction;
+    },
+  });
+  return queryContext as QueryFunctionContext<QueryKey, any>;
 };

packages/core/src/hooks/auditLog/useLog/index.ts

@@ -21,8 +21,8 @@ import type { BaseKey } from "../../../contexts/data/types";
 
 type LogRenameData =
   | {
-      resource?: string;
-    }
+    resource?: string;
+  }
   | undefined;
 
 export type UseLogReturnType<TLogData, TLogRenameData> = {
@@ -81,16 +81,17 @@ export const useLog = <
   const {
     data: identityData,
     refetch,
-    isLoading,
+    isPending,
   } = useGetIdentity({
     v3LegacyAuthProviderCompatible: Boolean(authProvider?.isLegacy),
     queryOptions: {
+      queryKey: keys().auth().get(preferLegacyKeys),
       enabled: !!auditLogContext?.create,
     },
   });
 
-  const log = useMutation<TLogData, Error, LogParams, unknown>(
-    async (params) => {
+  const log = useMutation({
+    mutationFn: async (params) => {
       const resource = pickResource(params.resource, resources);
       const logPermissions = pickNotDeprecated(
         resource?.meta?.audit,
@@ -105,7 +106,7 @@ export const useLog = <
       }
 
       let authorData;
-      if (isLoading && !!auditLogContext?.create) {
+      if (isPending && !!auditLogContext?.create) {
         authorData = await refetch();
       }
 
@@ -114,45 +115,39 @@ export const useLog = <
         author: identityData ?? authorData?.data,
       });
     },
-    {
-      mutationKey: keys().audit().action("log").get(),
-      ...logMutationOptions,
-      meta: {
-        ...logMutationOptions?.meta,
-        ...getXRay("useLog", preferLegacyKeys),
-      },
-    },
-  );
 
-  const rename = useMutation<
-    TLogRenameData,
-    Error,
-    { id: BaseKey; name: string },
-    unknown
-  >(
-    async (params) => {
+    ...logMutationOptions,
+
+    meta: {
+      ...logMutationOptions?.meta,
+      ...getXRay("useLog", preferLegacyKeys),
+    }
+  });
+
+  const rename = useMutation({
+    mutationFn: async (params) => {
       return await auditLogContext.update?.(params);
     },
-    {
-      onSuccess: (data) => {
-        if (data?.resource) {
-          queryClient.invalidateQueries(
-            keys()
-              .audit()
-              .resource(data?.resource ?? "")
-              .action("list")
-              .get(preferLegacyKeys),
-          );
-        }
-      },
-      mutationKey: keys().audit().action("rename").get(),
-      ...renameMutationOptions,
-      meta: {
-        ...renameMutationOptions?.meta,
-        ...getXRay("useLog", preferLegacyKeys),
-      },
+
+    onSuccess: (data) => {
+      if (data?.resource) {
+        queryClient.invalidateQueries({
+          queryKey: keys()
+            .audit()
+            .resource(data?.resource ?? "")
+            .action("list")
+            .get(preferLegacyKeys),
+        });
+      }
     },
-  );
+
+    ...renameMutationOptions,
+
+    meta: {
+      ...renameMutationOptions?.meta,
+      ...getXRay("useLog", preferLegacyKeys),
+    }
+  });
 
   return { log, rename };
 };

packages/core/src/hooks/auditLog/useLogList/index.ts

@@ -70,5 +70,5 @@ export const useLogList = <
     },
   });
 
-  return queryResponse;
+  return queryResponse as UseQueryResult<TData>;
 };

packages/core/src/hooks/auth/useInvalidateAuthStore/index.ts

@@ -8,9 +8,9 @@ export const useInvalidateAuthStore = () => {
   const invalidate = async () => {
     await Promise.all(
       (["check", "identity", "permissions"] as const).map((action) =>
-        queryClient.invalidateQueries(
-          keys().auth().action(action).get(preferLegacyKeys),
-        ),
+        queryClient.invalidateQueries({
+          queryKey: keys().auth().action(action).get(preferLegacyKeys),
+        }),
       ),
     );
   };

packages/core/src/hooks/auth/useOnError/index.ts

@@ -98,7 +98,7 @@ export function useOnError({
           },
         }
       : {
-          mutationFn: () => ({}) as Promise<OnErrorResponse>,
+          mutationFn: () => (({}) as Promise<OnErrorResponse>),
         }),
     meta: {
       ...getXRay("useOnError", preferLegacyKeys),

packages/core/src/hooks/button/button-can-access/index.tsx

@@ -8,7 +8,7 @@ import type { CanReturnType } from "../../../contexts/accessControl/types";
 import type { IResourceItem } from "../../../contexts/resource/types";
 import type { Action } from "../../../contexts/router/types";
 import type { BaseKey } from "../../../contexts/data/types";
-
+import { useKeys } from "../../useKeys";
 type ButtonCanAccessProps = {
   action: Action | "delete";
   resource?: IResourceItem;
@@ -31,7 +31,7 @@ export const useButtonCanAccess = (
 ): ButtonCanAccessValues => {
   const translate = useTranslate();
   const accessControlContext = React.useContext(AccessControlContext);
-
+  const { keys, preferLegacyKeys } = useKeys();
   const accessControlEnabled =
     props.accessControl?.enabled ??
     accessControlContext.options.buttons.enableAccessControl;
@@ -45,6 +45,7 @@ export const useButtonCanAccess = (
     action: props.action === "clone" ? "create" : props.action,
     params: { id: props.id, resource: props.resource },
     queryOptions: {
+      queryKey: keys().auth().get(preferLegacyKeys),
       enabled: accessControlEnabled,
     },
   });

packages/core/src/hooks/button/delete-button/index.tsx

@@ -38,7 +38,7 @@ export type DeleteButtonValues = {
 
 export function useDeleteButton(props: DeleteButtonProps): DeleteButtonValues {
   const translate = useTranslate();
-  const { mutate, isLoading, variables } = useDelete();
+  const { mutate, isPending, variables } = useDelete();
   const { setWarnWhen } = useWarnAboutChange();
   const { mutationMode } = useMutationMode(props.mutationMode);
 
@@ -62,7 +62,7 @@ export function useDeleteButton(props: DeleteButtonProps): DeleteButtonValues {
 
   const cancelLabel = translate("buttons.cancel", "Cancel");
 
-  const loading = id === variables?.id && isLoading;
+  const loading = id === variables?.id && isPending;
 
   const onConfirm = () => {
     if (id && identifier) {
@@ -92,7 +92,7 @@ export function useDeleteButton(props: DeleteButtonProps): DeleteButtonValues {
     hidden,
     disabled,
     canAccess,
-    loading,
+    loading: isPending,
     confirmOkLabel,
     cancelLabel,
     confirmTitle,