@refinedev/core 4.58.0 → 5.0.1

package/src/hooks/data/useList.ts

@@ -1,3 +1,5 @@
+import { useEffect } from "react";
+
 import { getXRay } from "@refinedev/devtools-internal";
 import {
   type QueryObserverResult,
@@ -8,9 +10,7 @@ import {
 import {
   handlePaginationParams,
   pickDataProvider,
-  pickNotDeprecated,
   prepareQueryContext,
-  useActiveAuthProvider,
 } from "@definitions/helpers";
 import {
   useDataProvider,
@@ -18,7 +18,7 @@ import {
   useKeys,
   useMeta,
   useOnError,
-  useResource,
+  useResourceParams,
   useResourceSubscription,
   useTranslate,
 } from "@hooks";
@@ -40,30 +40,13 @@ import {
   type UseLoadingOvertimeReturnType,
   useLoadingOvertime,
 } from "../useLoadingOvertime";
-
-export interface UseListConfig {
-  pagination?: Pagination;
-  hasPagination?: boolean;
-  sort?: CrudSort[];
-  filters?: CrudFilter[];
-}
+import type { MakeOptional } from "../../definitions/types/index";
 
 export type BaseListProps = {
-  /**
-   * Configuration for pagination, sorting and filtering
-   * @type [`UseListConfig`](/docs/api-reference/core/hooks/data/useList/#config-parameters)
-   * @deprecated `config` property is deprecated. Use `pagination`, `hasPagination`, `sorters` and `filters` instead.
-   */
-  config?: UseListConfig;
   /**
    * Pagination properties
    */
   pagination?: Pagination;
-  /**
-   * Whether to use server-side pagination or not
-   * @deprecated `hasPagination` property is deprecated. Use `pagination.mode` instead.
-   */
-  hasPagination?: boolean;
   /**
    * Sorter parameters
    */
@@ -76,17 +59,21 @@ export type BaseListProps = {
    * Meta data query for `dataProvider`
    */
   meta?: MetaQuery;
-  /**
-   * Meta data query for `dataProvider`
-   * @deprecated `metaData` is deprecated with refine@4, refine will pass `meta` instead, however, we still support `metaData` for backward compatibility.
-   */
-  metaData?: MetaQuery;
   /**
    * If there is more than one `dataProvider`, you should use the `dataProviderName` that you will use
    */
   dataProviderName?: string;
 };
 
+export type UseListQueryOptions<TQueryFnData, TError, TData> = MakeOptional<
+  UseQueryOptions<
+    GetListResponse<TQueryFnData>,
+    TError,
+    GetListResponse<TData>
+  >,
+  "queryKey" | "queryFn"
+>;
+
 export type UseListProps<TQueryFnData, TError, TData> = {
   /**
    * Resource name for API data interactions
@@ -96,11 +83,7 @@ export type UseListProps<TQueryFnData, TError, TData> = {
   /**
    * Tanstack Query's [useQuery](https://tanstack.com/query/v4/docs/reference/useQuery) options
    */
-  queryOptions?: UseQueryOptions<
-    GetListResponse<TQueryFnData>,
-    TError,
-    GetListResponse<TData>
-  >;
+  queryOptions?: UseListQueryOptions<TQueryFnData, TError, TData>;
 } & BaseListProps &
   SuccessErrorNotification<
     GetListResponse<TData>,
@@ -110,6 +93,14 @@ export type UseListProps<TQueryFnData, TError, TData> = {
   LiveModeProps &
   UseLoadingOvertimeOptionsProps;
 
+export type UseListReturnType<TData, TError> = {
+  query: QueryObserverResult<GetListResponse<TData>, TError>;
+  result: {
+    data: TData[];
+    total: number | undefined;
+  };
+} & UseLoadingOvertimeReturnType;
+
 /**
  * `useList` is a modified version of `react-query`'s {@link https://tanstack.com/query/v4/docs/framework/react/guides/queries `useQuery`} used for retrieving items from a `resource` with pagination, sort, and filter configurations.
  *
@@ -129,54 +120,44 @@ export const useList = <
   TData extends BaseRecord = TQueryFnData,
 >({
   resource: resourceFromProp,
-  config,
   filters,
-  hasPagination,
   pagination,
   sorters,
   queryOptions,
   successNotification,
   errorNotification,
   meta,
-  metaData,
   liveMode,
   onLiveEvent,
   liveParams,
   dataProviderName,
   overtimeOptions,
-}: UseListProps<TQueryFnData, TError, TData> = {}): QueryObserverResult<
-  GetListResponse<TData>,
+}: UseListProps<TQueryFnData, TError, TData> = {}): UseListReturnType<
+  TData,
   TError
 > &
   UseLoadingOvertimeReturnType => {
-  const { resources, resource, identifier } = useResource(resourceFromProp);
+  const { resources, resource, identifier } = useResourceParams({
+    resource: resourceFromProp,
+  });
 
   const dataProvider = useDataProvider();
   const translate = useTranslate();
-  const authProvider = useActiveAuthProvider();
-  const { mutate: checkError } = useOnError({
-    v3LegacyAuthProviderCompatible: Boolean(authProvider?.isLegacy),
-  });
+  const { mutate: checkError } = useOnError();
   const handleNotification = useHandleNotification();
   const getMeta = useMeta();
-  const { keys, preferLegacyKeys } = useKeys();
+  const { keys } = useKeys();
 
   const pickedDataProvider = pickDataProvider(
     identifier,
     dataProviderName,
     resources,
   );
-  const preferredMeta = pickNotDeprecated(meta, metaData);
-  const prefferedFilters = pickNotDeprecated(filters, config?.filters);
-  const prefferedSorters = pickNotDeprecated(sorters, config?.sort);
-  const prefferedHasPagination = pickNotDeprecated(
-    hasPagination,
-    config?.hasPagination,
-  );
+  const preferredMeta = meta;
+  const prefferedFilters = filters;
+  const prefferedSorters = sorters;
   const prefferedPagination = handlePaginationParams({
     pagination,
-    configPagination: config?.pagination,
-    hasPagination: prefferedHasPagination,
   });
   const isServerPagination = prefferedPagination.mode === "server";
 
@@ -184,15 +165,10 @@ export const useList = <
 
   const notificationValues = {
     meta: combinedMeta,
-    metaData: combinedMeta,
     filters: prefferedFilters,
     hasPagination: isServerPagination,
     pagination: prefferedPagination,
     sorters: prefferedSorters,
-    config: {
-      ...config,
-      sort: prefferedSorters,
-    },
   };
 
   const isEnabled =
@@ -205,10 +181,8 @@ export const useList = <
     types: ["*"],
     params: {
       meta: combinedMeta,
-      metaData: combinedMeta,
       pagination: prefferedPagination,
       hasPagination: isServerPagination,
-      sort: prefferedSorters,
       sorters: prefferedSorters,
       filters: prefferedFilters,
       subscriptionType: "useList",
@@ -218,10 +192,9 @@ export const useList = <
     enabled: isEnabled,
     liveMode,
     onLiveEvent,
-    dataProviderName: pickedDataProvider,
     meta: {
       ...meta,
-      dataProviderName,
+      dataProviderName: pickedDataProvider,
     },
   });
 
@@ -237,32 +210,25 @@ export const useList = <
       .params({
         ...(preferredMeta || {}),
         filters: prefferedFilters,
-        hasPagination: isServerPagination,
         ...(isServerPagination && {
           pagination: prefferedPagination,
         }),
         ...(sorters && {
           sorters,
         }),
-        ...(config?.sort && {
-          sort: config?.sort,
-        }),
       })
-      .get(preferLegacyKeys),
+      .get(),
     queryFn: (context) => {
       const meta = {
         ...combinedMeta,
-        queryContext: prepareQueryContext(context),
+        ...prepareQueryContext(context),
       };
       return getList<TQueryFnData>({
         resource: resource?.name ?? "",
         pagination: prefferedPagination,
-        hasPagination: isServerPagination,
         filters: prefferedFilters,
-        sort: prefferedSorters,
         sorters: prefferedSorters,
         meta,
-        metaData: meta,
       });
     },
     ...queryOptions,
@@ -273,12 +239,15 @@ export const useList = <
     select: (rawData) => {
       let data = rawData;
 
-      const { current, mode, pageSize } = prefferedPagination;
+      const { currentPage, mode, pageSize } = prefferedPagination;
 
       if (mode === "client") {
         data = {
           ...data,
-          data: data.data.slice((current - 1) * pageSize, current * pageSize),
+          data: data.data.slice(
+            (currentPage - 1) * pageSize,
+            currentPage * pageSize,
+          ),
           total: data.total,
         };
       }
@@ -289,46 +258,66 @@ export const useList = <
 
       return data as unknown as GetListResponse<TData>;
     },
-    onSuccess: (data) => {
-      queryOptions?.onSuccess?.(data);
+    meta: {
+      ...queryOptions?.meta,
+      ...getXRay("useList", resource?.name),
+    },
+  });
 
+  // Handle success
+  useEffect(() => {
+    if (queryResponse.isSuccess && queryResponse.data) {
       const notificationConfig =
         typeof successNotification === "function"
-          ? successNotification(data, notificationValues, identifier)
+          ? successNotification(
+              queryResponse.data,
+              notificationValues,
+              identifier,
+            )
           : successNotification;
 
       handleNotification(notificationConfig);
-    },
-    onError: (err: TError) => {
-      checkError(err);
-      queryOptions?.onError?.(err);
+    }
+  }, [queryResponse.isSuccess, queryResponse.data, successNotification]);
+
+  // Handle error
+  useEffect(() => {
+    if (queryResponse.isError && queryResponse.error) {
+      checkError(queryResponse.error);
 
       const notificationConfig =
         typeof errorNotification === "function"
-          ? errorNotification(err, notificationValues, identifier)
+          ? errorNotification(
+              queryResponse.error,
+              notificationValues,
+              identifier,
+            )
           : errorNotification;
 
       handleNotification(notificationConfig, {
         key: `${identifier}-useList-notification`,
         message: translate(
           "notifications.error",
-          { statusCode: err.statusCode },
-          `Error (status code: ${err.statusCode})`,
+          { statusCode: queryResponse.error.statusCode },
+          `Error (status code: ${queryResponse.error.statusCode})`,
         ),
-        description: err.message,
+        description: queryResponse.error.message,
         type: "error",
       });
-    },
-    meta: {
-      ...queryOptions?.meta,
-      ...getXRay("useList", preferLegacyKeys, resource?.name),
-    },
-  });
+    }
+  }, [queryResponse.isError, queryResponse.error?.message]);
 
   const { elapsedTime } = useLoadingOvertime({
     ...overtimeOptions,
     isLoading: queryResponse.isFetching,
   });
 
-  return { ...queryResponse, overtime: { elapsedTime } };
+  return {
+    query: queryResponse,
+    result: {
+      data: queryResponse?.data?.data || [],
+      total: queryResponse?.data?.total,
+    },
+    overtime: { elapsedTime },
+  };
 };

package/src/hooks/data/useMany.ts

@@ -1,3 +1,4 @@
+import { useEffect } from "react";
 import { getXRay } from "@refinedev/devtools-internal";
 import {
   type QueryObserverResult,
@@ -8,9 +9,7 @@ import {
 import {
   handleMultiple,
   pickDataProvider,
-  pickNotDeprecated,
   prepareQueryContext,
-  useActiveAuthProvider,
 } from "@definitions/helpers";
 import {
   useDataProvider,
@@ -18,7 +17,7 @@ import {
   useKeys,
   useMeta,
   useOnError,
-  useResource,
+  useResourceParams,
   useResourceSubscription,
   useTranslate,
 } from "@hooks";
@@ -38,6 +37,26 @@ import {
   useLoadingOvertime,
 } from "../useLoadingOvertime";
 import warnOnce from "warn-once";
+import type { MakeOptional } from "../../definitions/types";
+
+export type UseManyQueryOptions<TQueryFnData, TError, TData> = MakeOptional<
+  UseQueryOptions<
+    GetManyResponse<TQueryFnData>,
+    TError,
+    GetManyResponse<TData>
+  >,
+  "queryKey" | "queryFn"
+>;
+
+export type UseManyReturnType<
+  TData extends BaseRecord = BaseRecord,
+  TError extends HttpError = HttpError,
+> = {
+  query: QueryObserverResult<GetManyResponse<TData>, TError>;
+  result: {
+    data: TData[];
+  };
+} & UseLoadingOvertimeReturnType;
 
 export type UseManyProps<TQueryFnData, TError, TData> = {
   /**
@@ -52,20 +71,11 @@ export type UseManyProps<TQueryFnData, TError, TData> = {
   /**
    * react-query's [useQuery](https://tanstack.com/query/v4/docs/reference/useQuery) options
    */
-  queryOptions?: UseQueryOptions<
-    GetManyResponse<TQueryFnData>,
-    TError,
-    GetManyResponse<TData>
-  >;
+  queryOptions?: UseManyQueryOptions<TQueryFnData, TError, TData>;
   /**
-   * Metadata query for `dataProvider`,
+   * Meta data for `dataProvider`
    */
   meta?: MetaQuery;
-  /**
-   * Metadata query for `dataProvider`,
-   * @deprecated `metaData` is deprecated with refine@4, refine will pass `meta` instead, however, we still support `metaData` for backward compatibility.
-   */
-  metaData?: MetaQuery;
   /**
    * If there is more than one `dataProvider`, you should use the `dataProviderName` that you will use.
    * @default "default"
@@ -99,29 +109,27 @@ export const useMany = <
   successNotification,
   errorNotification,
   meta,
-  metaData,
   liveMode,
   onLiveEvent,
   liveParams,
   dataProviderName,
   overtimeOptions,
-}: UseManyProps<TQueryFnData, TError, TData>): QueryObserverResult<
-  GetManyResponse<TData>,
+}: UseManyProps<TQueryFnData, TError, TData>): UseManyReturnType<
+  TData,
   TError
 > &
   UseLoadingOvertimeReturnType => {
-  const { resources, resource, identifier } = useResource(resourceFromProp);
+  const { resources, resource, identifier } = useResourceParams({
+    resource: resourceFromProp,
+  });
   const dataProvider = useDataProvider();
   const translate = useTranslate();
-  const authProvider = useActiveAuthProvider();
-  const { mutate: checkError } = useOnError({
-    v3LegacyAuthProviderCompatible: Boolean(authProvider?.isLegacy),
-  });
+  const { mutate: checkError } = useOnError();
   const handleNotification = useHandleNotification();
   const getMeta = useMeta();
-  const { keys, preferLegacyKeys } = useKeys();
+  const { keys } = useKeys();
 
-  const preferredMeta = pickNotDeprecated(meta, metaData);
+  const preferredMeta = meta;
   const pickedDataProvider = pickDataProvider(
     identifier,
     dataProviderName,
@@ -138,7 +146,10 @@ export const useMany = <
   const hasResource = Boolean(resource?.name);
   const manuallyEnabled = queryOptions?.enabled === true;
 
-  warnOnce(!hasIds && !manuallyEnabled, idsWarningMessage(ids, resource?.name));
+  warnOnce(
+    !hasIds && !manuallyEnabled,
+    idsWarningMessage(ids, resource?.name || resource?.identifier || ""),
+  );
   warnOnce(!hasResource && !manuallyEnabled, resourceWarningMessage());
 
   useResourceSubscription({
@@ -147,7 +158,6 @@ export const useMany = <
     params: {
       ids: ids ?? [],
       meta: combinedMeta,
-      metaData: combinedMeta,
       subscriptionType: "useMany",
       ...liveParams,
     },
@@ -155,10 +165,9 @@ export const useMany = <
     enabled: isEnabled,
     liveMode,
     onLiveEvent,
-    dataProviderName: pickedDataProvider,
     meta: {
       ...meta,
-      dataProviderName,
+      dataProviderName: pickedDataProvider,
     },
   });
 
@@ -175,76 +184,85 @@ export const useMany = <
       .params({
         ...(preferredMeta || {}),
       })
-      .get(preferLegacyKeys),
+      .get(),
     queryFn: (context) => {
       const meta = {
         ...combinedMeta,
-        queryContext: prepareQueryContext(context),
+        ...prepareQueryContext(context as any),
       };
 
       if (getMany) {
         return getMany({
-          resource: resource?.name,
+          resource: resource?.name || "",
           ids,
           meta,
-          metaData: meta,
         });
       }
       return handleMultiple(
         ids.map((id) =>
           getOne<TQueryFnData>({
-            resource: resource?.name,
+            resource: resource?.name || "",
             id,
             meta,
-            metaData: meta,
           }),
         ),
       );
     },
     enabled: hasIds && hasResource,
     ...queryOptions,
-    onSuccess: (data) => {
-      queryOptions?.onSuccess?.(data);
+    meta: {
+      ...queryOptions?.meta,
+      ...getXRay("useMany", resource?.name),
+    },
+  });
 
+  // Handle success
+  useEffect(() => {
+    if (queryResponse.isSuccess && queryResponse.data) {
       const notificationConfig =
         typeof successNotification === "function"
-          ? successNotification(data, ids, identifier)
+          ? successNotification(queryResponse.data, ids, identifier)
           : successNotification;
 
       handleNotification(notificationConfig);
-    },
-    onError: (err: TError) => {
-      checkError(err);
-      queryOptions?.onError?.(err);
+    }
+  }, [queryResponse.isSuccess, queryResponse.data, successNotification]);
+
+  // Handle error
+  useEffect(() => {
+    if (queryResponse.isError && queryResponse.error) {
+      checkError(queryResponse.error);
 
       const notificationConfig =
         typeof errorNotification === "function"
-          ? errorNotification(err, ids, identifier)
+          ? errorNotification(queryResponse.error, ids, identifier)
           : errorNotification;
 
       handleNotification(notificationConfig, {
         key: `${ids[0]}-${identifier}-getMany-notification`,
         message: translate(
           "notifications.error",
-          { statusCode: err.statusCode },
-          `Error (status code: ${err.statusCode})`,
+          { statusCode: queryResponse.error.statusCode },
+          `Error (status code: ${queryResponse.error.statusCode})`,
         ),
-        description: err.message,
+        description: queryResponse.error.message,
         type: "error",
       });
-    },
-    meta: {
-      ...queryOptions?.meta,
-      ...getXRay("useMany", preferLegacyKeys, resource?.name),
-    },
-  });
+    }
+  }, [queryResponse.isError, queryResponse.error?.message]);
 
   const { elapsedTime } = useLoadingOvertime({
     ...overtimeOptions,
     isLoading: queryResponse.isFetching,
   });
 
-  return { ...queryResponse, overtime: { elapsedTime } };
+  return {
+    query: queryResponse,
+    result: {
+      data: queryResponse?.data?.data || [],
+    },
+    overtime: { elapsedTime },
+  };
 };
 
 const idsWarningMessage = (