@refinedev/core 4.22.0 → 4.24.0

package/src/hooks/data/useInfiniteList.ts

@@ -35,6 +35,12 @@ import {
     handlePaginationParams,
 } from "@definitions/helpers";
 
+import {
+    useLoadingOvertime,
+    UseLoadingOvertimeOptionsProps,
+    UseLoadingOvertimeReturnType,
+} from "../useLoadingOvertime";
+
 export interface UseInfiniteListConfig {
     pagination?: Pagination;
     hasPagination?: boolean;
@@ -100,7 +106,8 @@ export type UseInfiniteListProps<TQueryFnData, TError, TData> = {
         TError,
         Prettify<BaseInfiniteListProps>
     > &
-    LiveModeProps;
+    LiveModeProps &
+    UseLoadingOvertimeOptionsProps;
 
 /**
  * `useInfiniteList` is a modified version of `react-query`'s {@link https://tanstack.com/query/latest/docs/react/guides/infinite-queries `useInfiniteQuery`} used for retrieving items from a `resource` with pagination, sort, and filter configurations.
@@ -120,7 +127,7 @@ export const useInfiniteList = <
     TError extends HttpError = HttpError,
     TData extends BaseRecord = TQueryFnData,
 >({
-    resource,
+    resource: resourceFromProp,
     config,
     filters,
     hasPagination,
@@ -135,12 +142,15 @@ export const useInfiniteList = <
     onLiveEvent,
     liveParams,
     dataProviderName,
+    overtimeOptions,
 }: UseInfiniteListProps<
     TQueryFnData,
     TError,
     TData
->): InfiniteQueryObserverResult<GetListResponse<TData>, TError> => {
-    const { resources } = useResource();
+>): InfiniteQueryObserverResult<GetListResponse<TData>, TError> &
+    UseLoadingOvertimeReturnType => {
+    const { resources, resource, identifier } = useResource(resourceFromProp);
+
     const dataProvider = useDataProvider();
     const translate = useTranslate();
     const authProvider = useActiveAuthProvider();
@@ -151,7 +161,7 @@ export const useInfiniteList = <
     const getMeta = useMeta();
 
     const pickedDataProvider = pickDataProvider(
-        resource,
+        identifier,
         dataProviderName,
         resources,
     );
@@ -185,18 +195,18 @@ export const useInfiniteList = <
         queryOptions?.enabled === undefined || queryOptions?.enabled === true;
 
     const queryKey = queryKeys(
-        resource,
+        identifier,
         pickedDataProvider,
         preferredMeta,
         preferredMeta,
     );
 
-    const combinedMeta = getMeta({ meta: preferredMeta });
+    const combinedMeta = getMeta({ resource, meta: preferredMeta });
 
     const { getList } = dataProvider(pickedDataProvider);
 
     useResourceSubscription({
-        resource,
+        resource: identifier,
         types: ["*"],
         params: {
             meta: combinedMeta,
@@ -209,7 +219,7 @@ export const useInfiniteList = <
             subscriptionType: "useList",
             ...liveParams,
         },
-        channel: `resources/${resource}`,
+        channel: `resources/${resource.name}`,
         enabled: isEnabled,
         liveMode,
         onLiveEvent,
@@ -240,7 +250,7 @@ export const useInfiniteList = <
             };
 
             return getList<TQueryFnData>({
-                resource,
+                resource: resource.name,
                 pagination: paginationProperties,
                 hasPagination: isServerPagination,
                 filters: prefferedFilters,
@@ -283,7 +293,7 @@ export const useInfiniteList = <
                         ? successNotification(
                               data,
                               notificationValues,
-                              resource,
+                              identifier,
                           )
                         : successNotification;
 
@@ -295,11 +305,11 @@ export const useInfiniteList = <
 
                 const notificationConfig =
                     typeof errorNotification === "function"
-                        ? errorNotification(err, notificationValues, resource)
+                        ? errorNotification(err, notificationValues, identifier)
                         : errorNotification;
 
                 handleNotification(notificationConfig, {
-                    key: `${resource}-useInfiniteList-notification`,
+                    key: `${identifier}-useInfiniteList-notification`,
                     message: translate(
                         "notifications.error",
                         { statusCode: err.statusCode },
@@ -312,5 +322,11 @@ export const useInfiniteList = <
         },
     );
 
-    return queryResponse;
+    const { elapsedTime } = useLoadingOvertime({
+        isLoading: queryResponse.isFetching,
+        interval: overtimeOptions?.interval,
+        onInterval: overtimeOptions?.onInterval,
+    });
+
+    return { ...queryResponse, overtime: { elapsedTime } };
 };

package/src/hooks/data/useList.ts

@@ -31,6 +31,11 @@ import {
     useActiveAuthProvider,
     handlePaginationParams,
 } from "@definitions/helpers";
+import {
+    useLoadingOvertime,
+    UseLoadingOvertimeOptionsProps,
+    UseLoadingOvertimeReturnType,
+} from "../useLoadingOvertime";
 
 export interface UseListConfig {
     pagination?: Pagination;
@@ -98,7 +103,8 @@ export type UseListProps<TQueryFnData, TError, TData> = {
         TError,
         Prettify<BaseListProps>
     > &
-    LiveModeProps;
+    LiveModeProps &
+    UseLoadingOvertimeOptionsProps;
 
 /**
  * `useList` is a modified version of `react-query`'s {@link https://react-query.tanstack.com/guides/queries `useQuery`} used for retrieving items from a `resource` with pagination, sort, and filter configurations.
@@ -118,7 +124,7 @@ export const useList = <
     TError extends HttpError = HttpError,
     TData extends BaseRecord = TQueryFnData,
 >({
-    resource,
+    resource: resourceFromProp,
     config,
     filters,
     hasPagination,
@@ -133,11 +139,14 @@ export const useList = <
     onLiveEvent,
     liveParams,
     dataProviderName,
+    overtimeOptions,
 }: UseListProps<TQueryFnData, TError, TData>): QueryObserverResult<
     GetListResponse<TData>,
     TError
-> => {
-    const { resources } = useResource();
+> &
+    UseLoadingOvertimeReturnType => {
+    const { resources, resource, identifier } = useResource(resourceFromProp);
+
     const dataProvider = useDataProvider();
     const translate = useTranslate();
     const authProvider = useActiveAuthProvider();
@@ -148,7 +157,7 @@ export const useList = <
     const getMeta = useMeta();
 
     const pickedDataProvider = pickDataProvider(
-        resource,
+        identifier,
         dataProviderName,
         resources,
     );
@@ -166,7 +175,7 @@ export const useList = <
     });
     const isServerPagination = prefferedPagination.mode === "server";
 
-    const combinedMeta = getMeta({ meta: preferredMeta });
+    const combinedMeta = getMeta({ resource, meta: preferredMeta });
 
     const notificationValues = {
         meta: combinedMeta,
@@ -184,17 +193,12 @@ export const useList = <
     const isEnabled =
         queryOptions?.enabled === undefined || queryOptions?.enabled === true;
 
-    const queryKey = queryKeys(
-        resource,
-        pickedDataProvider,
-        preferredMeta,
-        preferredMeta,
-    );
+    const queryKey = queryKeys(identifier, pickedDataProvider, preferredMeta);
 
     const { getList } = dataProvider(pickedDataProvider);
 
     useResourceSubscription({
-        resource,
+        resource: identifier,
         types: ["*"],
         params: {
             meta: combinedMeta,
@@ -207,7 +211,7 @@ export const useList = <
             subscriptionType: "useList",
             ...liveParams,
         },
-        channel: `resources/${resource}`,
+        channel: `resources/${resource?.name}`,
         enabled: isEnabled,
         liveMode,
         onLiveEvent,
@@ -233,7 +237,7 @@ export const useList = <
         }),
         ({ queryKey, pageParam, signal }) => {
             return getList<TQueryFnData>({
-                resource: resource!,
+                resource: resource?.name ?? "",
                 pagination: prefferedPagination,
                 hasPagination: isServerPagination,
                 filters: prefferedFilters,
@@ -262,7 +266,7 @@ export const useList = <
             enabled:
                 typeof queryOptions?.enabled !== "undefined"
                     ? queryOptions?.enabled
-                    : !!resource,
+                    : !!resource?.name,
             select: (rawData) => {
                 let data = rawData;
 
@@ -293,7 +297,7 @@ export const useList = <
                         ? successNotification(
                               data,
                               notificationValues,
-                              resource,
+                              identifier,
                           )
                         : successNotification;
 
@@ -305,11 +309,11 @@ export const useList = <
 
                 const notificationConfig =
                     typeof errorNotification === "function"
-                        ? errorNotification(err, notificationValues, resource)
+                        ? errorNotification(err, notificationValues, identifier)
                         : errorNotification;
 
                 handleNotification(notificationConfig, {
-                    key: `${resource}-useList-notification`,
+                    key: `${identifier}-useList-notification`,
                     message: translate(
                         "notifications.error",
                         { statusCode: err.statusCode },
@@ -322,5 +326,11 @@ export const useList = <
         },
     );
 
-    return queryResponse;
+    const { elapsedTime } = useLoadingOvertime({
+        isLoading: queryResponse.isFetching,
+        interval: overtimeOptions?.interval,
+        onInterval: overtimeOptions?.onInterval,
+    });
+
+    return { ...queryResponse, overtime: { elapsedTime } };
 };

package/src/hooks/data/useMany.ts

@@ -29,6 +29,11 @@ import {
     pickNotDeprecated,
     useActiveAuthProvider,
 } from "@definitions/helpers";
+import {
+    useLoadingOvertime,
+    UseLoadingOvertimeOptionsProps,
+    UseLoadingOvertimeReturnType,
+} from "../useLoadingOvertime";
 
 export type UseManyProps<TQueryFnData, TError, TData> = {
     /**
@@ -63,7 +68,8 @@ export type UseManyProps<TQueryFnData, TError, TData> = {
      */
     dataProviderName?: string;
 } & SuccessErrorNotification<GetManyResponse<TData>, TError, BaseKey[]> &
-    LiveModeProps;
+    LiveModeProps &
+    UseLoadingOvertimeOptionsProps;
 
 /**
  * `useMany` is a modified version of `react-query`'s {@link https://react-query.tanstack.com/guides/queries `useQuery`} used for retrieving multiple items from a `resource`.
@@ -83,7 +89,7 @@ export const useMany = <
     TError extends HttpError = HttpError,
     TData extends BaseRecord = TQueryFnData,
 >({
-    resource,
+    resource: resourceFromProp,
     ids,
     queryOptions,
     successNotification,
@@ -94,10 +100,12 @@ export const useMany = <
     onLiveEvent,
     liveParams,
     dataProviderName,
+    overtimeOptions,
 }: UseManyProps<TQueryFnData, TError, TData>): QueryObserverResult<
     GetManyResponse<TData>
-> => {
-    const { resources } = useResource();
+> &
+    UseLoadingOvertimeReturnType => {
+    const { resources, resource, identifier } = useResource(resourceFromProp);
     const dataProvider = useDataProvider();
     const translate = useTranslate();
     const authProvider = useActiveAuthProvider();
@@ -108,25 +116,22 @@ export const useMany = <
     const getMeta = useMeta();
 
     const preferredMeta = pickNotDeprecated(meta, metaData);
-
+    const pickedDataProvider = pickDataProvider(
+        identifier,
+        dataProviderName,
+        resources,
+    );
     const isEnabled =
         queryOptions?.enabled === undefined || queryOptions?.enabled === true;
 
-    const queryKey = queryKeys(
-        resource,
-        pickDataProvider(resource, dataProviderName, resources),
-        preferredMeta,
-        preferredMeta,
-    );
+    const queryKey = queryKeys(identifier, pickedDataProvider, preferredMeta);
 
-    const { getMany, getOne } = dataProvider(
-        pickDataProvider(resource, dataProviderName, resources),
-    );
+    const { getMany, getOne } = dataProvider(pickedDataProvider);
 
-    const combinedMeta = getMeta({ meta: preferredMeta });
+    const combinedMeta = getMeta({ resource, meta: preferredMeta });
 
     useResourceSubscription({
-        resource,
+        resource: identifier,
         types: ["*"],
         params: {
             ids: ids,
@@ -135,7 +140,7 @@ export const useMany = <
             subscriptionType: "useMany",
             ...liveParams,
         },
-        channel: `resources/${resource}`,
+        channel: `resources/${resource.name}`,
         enabled: isEnabled,
         liveMode,
         onLiveEvent,
@@ -150,7 +155,7 @@ export const useMany = <
         ({ queryKey, pageParam, signal }) => {
             if (getMany) {
                 return getMany({
-                    resource,
+                    resource: resource?.name,
                     ids,
                     meta: {
                         ...combinedMeta,
@@ -173,7 +178,7 @@ export const useMany = <
                 return handleMultiple(
                     ids.map((id) =>
                         getOne<TQueryFnData>({
-                            resource,
+                            resource: resource?.name,
                             id,
                             meta: {
                                 ...combinedMeta,
@@ -203,7 +208,7 @@ export const useMany = <
 
                 const notificationConfig =
                     typeof successNotification === "function"
-                        ? successNotification(data, ids, resource)
+                        ? successNotification(data, ids, identifier)
                         : successNotification;
 
                 handleNotification(notificationConfig);
@@ -214,11 +219,11 @@ export const useMany = <
 
                 const notificationConfig =
                     typeof errorNotification === "function"
-                        ? errorNotification(err, ids, resource)
+                        ? errorNotification(err, ids, identifier)
                         : errorNotification;
 
                 handleNotification(notificationConfig, {
-                    key: `${ids[0]}-${resource}-getMany-notification`,
+                    key: `${ids[0]}-${identifier}-getMany-notification`,
                     message: translate(
                         "notifications.error",
                         { statusCode: err.statusCode },
@@ -231,5 +236,11 @@ export const useMany = <
         },
     );
 
-    return queryResponse;
+    const { elapsedTime } = useLoadingOvertime({
+        isLoading: queryResponse.isFetching,
+        interval: overtimeOptions?.interval,
+        onInterval: overtimeOptions?.onInterval,
+    });
+
+    return { ...queryResponse, overtime: { elapsedTime } };
 };

package/src/hooks/data/useOne.ts

@@ -29,6 +29,11 @@ import {
     pickNotDeprecated,
     useActiveAuthProvider,
 } from "@definitions";
+import {
+    useLoadingOvertime,
+    UseLoadingOvertimeOptionsProps,
+    UseLoadingOvertimeReturnType,
+} from "../useLoadingOvertime";
 
 export type UseOneProps<TQueryFnData, TError, TData> = {
     /**
@@ -67,7 +72,8 @@ export type UseOneProps<TQueryFnData, TError, TData> = {
     TError,
     Prettify<{ id?: BaseKey } & MetaQuery>
 > &
-    LiveModeProps;
+    LiveModeProps &
+    UseLoadingOvertimeOptionsProps;
 
 /**
  * `useOne` is a modified version of `react-query`'s {@link https://react-query.tanstack.com/guides/queries `useQuery`} used for retrieving single items from a `resource`.
@@ -87,7 +93,7 @@ export const useOne = <
     TError extends HttpError = HttpError,
     TData extends BaseRecord = TQueryFnData,
 >({
-    resource,
+    resource: resourceFromProp,
     id,
     queryOptions,
     successNotification,
@@ -98,10 +104,13 @@ export const useOne = <
     onLiveEvent,
     liveParams,
     dataProviderName,
+    overtimeOptions,
 }: UseOneProps<TQueryFnData, TError, TData>): QueryObserverResult<
     GetOneResponse<TData>
-> => {
-    const { resources } = useResource();
+> &
+    UseLoadingOvertimeReturnType => {
+    const { resources, resource, identifier } = useResource(resourceFromProp);
+
     const dataProvider = useDataProvider();
     const translate = useTranslate();
     const authProvider = useActiveAuthProvider();
@@ -112,24 +121,22 @@ export const useOne = <
     const getMeta = useMeta();
 
     const preferredMeta = pickNotDeprecated(meta, metaData);
-
-    const queryKey = queryKeys(
-        resource,
-        pickDataProvider(resource, dataProviderName, resources),
-        preferredMeta,
-        preferredMeta,
+    const pickedDataProvider = pickDataProvider(
+        identifier,
+        dataProviderName,
+        resources,
     );
 
-    const { getOne } = dataProvider(
-        pickDataProvider(resource, dataProviderName, resources),
-    );
+    const queryKey = queryKeys(identifier, pickedDataProvider, preferredMeta);
+
+    const { getOne } = dataProvider(pickedDataProvider);
 
-    const combinedMeta = getMeta({ meta: preferredMeta });
+    const combinedMeta = getMeta({ resource, meta: preferredMeta });
 
     useResourceSubscription({
-        resource,
+        resource: identifier,
         types: ["*"],
-        channel: `resources/${resource}`,
+        channel: `resources/${resource?.name}`,
         params: {
             ids: id ? [id] : [],
             id: id,
@@ -141,7 +148,8 @@ export const useOne = <
         enabled:
             typeof queryOptions?.enabled !== "undefined"
                 ? queryOptions?.enabled
-                : typeof resource !== "undefined" && typeof id !== "undefined",
+                : typeof resource?.name !== "undefined" &&
+                  typeof id !== "undefined",
         liveMode,
         onLiveEvent,
     });
@@ -154,7 +162,7 @@ export const useOne = <
         queryKey.detail(id),
         ({ queryKey, pageParam, signal }) =>
             getOne<TQueryFnData>({
-                resource: resource!,
+                resource: resource?.name ?? "",
                 id: id!,
                 meta: {
                     ...combinedMeta,
@@ -190,7 +198,7 @@ export const useOne = <
                                   id,
                                   ...combinedMeta,
                               },
-                              resource,
+                              identifier,
                           )
                         : successNotification;
 
@@ -208,12 +216,12 @@ export const useOne = <
                                   id,
                                   ...combinedMeta,
                               },
-                              resource,
+                              identifier,
                           )
                         : errorNotification;
 
                 handleNotification(notificationConfig, {
-                    key: `${id}-${resource}-getOne-notification`,
+                    key: `${id}-${identifier}-getOne-notification`,
                     message: translate(
                         "notifications.error",
                         { statusCode: err.statusCode },
@@ -226,5 +234,11 @@ export const useOne = <
         },
     );
 
-    return queryResponse;
+    const { elapsedTime } = useLoadingOvertime({
+        isLoading: queryResponse.isFetching,
+        interval: overtimeOptions?.interval,
+        onInterval: overtimeOptions?.onInterval,
+    });
+
+    return { ...queryResponse, overtime: { elapsedTime } };
 };