@strato-admin/core 0.1.1 → 0.3.0

package/dist/ra-core/src/dataProvider/useGetManyReference.js

@@ -0,0 +1,117 @@
+import { useEffect, useMemo } from 'react';
+import { useQuery, useQueryClient, } from '@tanstack/react-query';
+import { useDataProvider } from './useDataProvider';
+import { useEvent } from '../util';
+/**
+ * Call the dataProvider.getManyReference() method and return the resolved result
+ * as well as the loading state.
+ *
+ * The return value updates according to the request state:
+ *
+ * - start: { isPending: true, refetch }
+ * - success: { data: [data from store], total: [total from response], isPending: false, refetch }
+ * - error: { error: [error from response], isPending: false, refetch }
+ *
+ * This hook will return the cached result when called a second time
+ * with the same parameters, until the response arrives.
+ *
+ * @param {string} resource The resource name, e.g. 'posts'
+ * @param {Params} params The getManyReference parameters { target, id, pagination, sort, filter, meta }
+ * @param {Object} options Options object to pass to the queryClient.
+ * May include side effects to be executed upon success or failure, e.g. { onSuccess: () => { refresh(); } }
+ *
+ * @typedef Params
+ * @prop params.target The target resource key, e.g. 'post_id'
+ * @prop params.id The identifier of the record to look for in target, e.g. '123'
+ * @prop params.pagination The request pagination { page, perPage }, e.g. { page: 1, perPage: 10 }
+ * @prop params.sort The request sort { field, order }, e.g. { field: 'id', order: 'DESC' }
+ * @prop params.filter The request filters, e.g. { title: 'hello, world' }
+ * @prop params.meta Optional meta parameters
+ *
+ * @returns The current request state. Destructure as { data, total, error, isPending, refetch }.
+ *
+ * @example
+ *
+ * import { useGetManyReference, useRecordContext } from 'react-admin';
+ *
+ * const PostComments = () => {
+ *     const record = useRecordContext();
+ *     // fetch all comments related to the current record
+ *     const { data, isPending, error } = useGetManyReference(
+ *         'comments',
+ *         { target: 'post_id', id: record.id, pagination: { page: 1, perPage: 10 }, sort: { field: 'published_at', order: 'DESC' } }
+ *     );
+ *     if (isPending) { return <Loading />; }
+ *     if (error) { return <p>ERROR</p>; }
+ *     return <ul>{data.map(comment =>
+ *         <li key={comment.id}>{comment.body}</li>
+ *     )}</ul>;
+ * };
+ */
+export const useGetManyReference = (resource, params = {}, options = {}) => {
+    const { target, id, pagination = { page: 1, perPage: 25 }, sort = { field: 'id', order: 'DESC' }, filter = {}, meta, } = params;
+    const dataProvider = useDataProvider();
+    const queryClient = useQueryClient();
+    const { onError = noop, onSuccess = noop, onSettled = noop, ...queryOptions } = options;
+    const onSuccessEvent = useEvent(onSuccess);
+    const onErrorEvent = useEvent(onError);
+    const onSettledEvent = useEvent(onSettled);
+    const result = useQuery({
+        queryKey: [
+            resource,
+            'getManyReference',
+            { target, id, pagination, sort, filter, meta },
+        ],
+        queryFn: queryParams => {
+            if (!target || id == null) {
+                // check at runtime to support partial parameters with the enabled option
+                return Promise.reject(new Error('target and id are required'));
+            }
+            return dataProvider
+                .getManyReference(resource, {
+                target,
+                id,
+                pagination,
+                sort,
+                filter,
+                meta,
+                signal: dataProvider.supportAbortSignal === true
+                    ? queryParams.signal
+                    : undefined,
+            })
+                .then(({ data, total, pageInfo, meta }) => ({
+                data,
+                total,
+                pageInfo,
+                meta,
+            }));
+        },
+        ...queryOptions,
+    });
+    useEffect(() => {
+        if (result.data === undefined)
+            return;
+        // optimistically populate the getOne cache
+        result.data?.data?.forEach(record => {
+            queryClient.setQueryData([resource, 'getOne', { id: String(record.id), meta }], oldRecord => oldRecord ?? record);
+        });
+        onSuccessEvent(result.data);
+    }, [queryClient, meta, onSuccessEvent, resource, result.data]);
+    useEffect(() => {
+        if (result.error == null)
+            return;
+        onErrorEvent(result.error);
+    }, [onErrorEvent, result.error]);
+    useEffect(() => {
+        if (result.status === 'pending')
+            return;
+        onSettledEvent(result.data, result.error);
+    }, [onSettledEvent, result.data, result.error, result.status]);
+    return useMemo(() => result.data
+        ? {
+            ...result,
+            ...result.data,
+        }
+        : result, [result]);
+};
+const noop = () => undefined;

package/dist/ra-core/src/dataProvider/useGetOne.d.ts

@@ -0,0 +1,48 @@
+import { RaRecord, GetOneParams, GetOneResult } from '../types';
+import { UseQueryOptions, UseQueryResult } from '@tanstack/react-query';
+/**
+ * Call the dataProvider.getOne() method and return the resolved value
+ * as well as the loading state.
+ *
+ * The return value updates according to the request state:
+ *
+ * - start: { isPending: true, isFetching: true, refetch }
+ * - success: { data: [data from response], isPending: false, refetch }
+ * - error: { error: [error from response], isPending: false, refetch }
+ *
+ * This hook will return the cached result when called a second time
+ * with the same parameters, until the response arrives.
+ *
+ * @param resource The resource name, e.g. 'posts'
+ * @param {Params} params The getOne parameters { id, meta }, e.g. { id: 123 }
+ * @param {Options} options Options object to pass to the react-query queryClient.
+ *
+ * @typedef Params
+ * @prop id a resource identifier, e.g. 123
+ *
+ * @typedef Options
+ * @prop enabled Flag to conditionally run the query. If it's false, the query will not run
+ * @prop onSuccess Side effect function to be executed upon success, e.g. { onSuccess: { refresh: true } }
+ * @prop onError Side effect function to be executed upon failure, e.g. { onError: error => notify(error.message) }
+ *
+ * @returns The current request state. Destructure as { data, error, isPending, refetch }.
+ *
+ * @example
+ *
+ * import { useGetOne, useRecordContext } from 'react-admin';
+ *
+ * const UserProfile = () => {
+ *     const record = useRecordContext();
+ *     const { data, isPending, error } = useGetOne('users', { id: record.id });
+ *     if (isPending) { return <Loading />; }
+ *     if (error) { return <p>ERROR</p>; }
+ *     return <div>User {data.username}</div>;
+ * };
+ */
+export declare const useGetOne: <RecordType extends RaRecord = any, ErrorType = Error>(resource: string, { id, meta }: Partial<GetOneParams<RecordType>>, options?: UseGetOneOptions<RecordType, ErrorType>) => UseGetOneHookValue<RecordType, ErrorType>;
+export type UseGetOneOptions<RecordType extends RaRecord = any, ErrorType = Error> = Omit<UseQueryOptions<GetOneResult<RecordType>['data'], ErrorType>, 'queryKey' | 'queryFn'> & {
+    onSuccess?: (data: GetOneResult<RecordType>['data']) => void;
+    onError?: (error: ErrorType) => void;
+    onSettled?: (data?: GetOneResult<RecordType>['data'], error?: ErrorType | null) => void;
+};
+export type UseGetOneHookValue<RecordType extends RaRecord = any, ErrorType = Error> = UseQueryResult<GetOneResult<RecordType>['data'], ErrorType>;

package/dist/ra-core/src/dataProvider/useGetOne.js

@@ -0,0 +1,94 @@
+import { useQuery, } from '@tanstack/react-query';
+import { useDataProvider } from './useDataProvider';
+import { useEffect } from 'react';
+import { useEvent } from '../util';
+/**
+ * Call the dataProvider.getOne() method and return the resolved value
+ * as well as the loading state.
+ *
+ * The return value updates according to the request state:
+ *
+ * - start: { isPending: true, isFetching: true, refetch }
+ * - success: { data: [data from response], isPending: false, refetch }
+ * - error: { error: [error from response], isPending: false, refetch }
+ *
+ * This hook will return the cached result when called a second time
+ * with the same parameters, until the response arrives.
+ *
+ * @param resource The resource name, e.g. 'posts'
+ * @param {Params} params The getOne parameters { id, meta }, e.g. { id: 123 }
+ * @param {Options} options Options object to pass to the react-query queryClient.
+ *
+ * @typedef Params
+ * @prop id a resource identifier, e.g. 123
+ *
+ * @typedef Options
+ * @prop enabled Flag to conditionally run the query. If it's false, the query will not run
+ * @prop onSuccess Side effect function to be executed upon success, e.g. { onSuccess: { refresh: true } }
+ * @prop onError Side effect function to be executed upon failure, e.g. { onError: error => notify(error.message) }
+ *
+ * @returns The current request state. Destructure as { data, error, isPending, refetch }.
+ *
+ * @example
+ *
+ * import { useGetOne, useRecordContext } from 'react-admin';
+ *
+ * const UserProfile = () => {
+ *     const record = useRecordContext();
+ *     const { data, isPending, error } = useGetOne('users', { id: record.id });
+ *     if (isPending) { return <Loading />; }
+ *     if (error) { return <p>ERROR</p>; }
+ *     return <div>User {data.username}</div>;
+ * };
+ */
+export const useGetOne = (resource, { id, meta }, options = {}) => {
+    const dataProvider = useDataProvider();
+    const { onError = noop, onSuccess = noop, onSettled = noop, enabled, ...queryOptions } = options;
+    const onSuccessEvent = useEvent(onSuccess);
+    const onErrorEvent = useEvent(onError);
+    const onSettledEvent = useEvent(onSettled);
+    const result = useQuery({
+        // Sometimes the id comes as a string (e.g. when read from the URL in a Show view).
+        // Sometimes the id comes as a number (e.g. when read from a Record in useGetList response).
+        // As the react-query cache is type-sensitive, we always stringify the identifier to get a match
+        queryKey: [resource, 'getOne', { id: String(id), meta }],
+        queryFn: queryParams => id == null
+            ? Promise.reject('useGetOne: id cannot be null')
+            : dataProvider
+                .getOne(resource, {
+                id,
+                meta,
+                signal: dataProvider.supportAbortSignal === true
+                    ? queryParams.signal
+                    : undefined,
+            })
+                .then(({ data }) => data),
+        enabled: enabled ?? id != null,
+        ...queryOptions,
+    });
+    useEffect(() => {
+        if (result.data === undefined ||
+            result.error != null ||
+            result.isFetching)
+            return;
+        onSuccessEvent(result.data);
+    }, [onSuccessEvent, result.data, result.error, result.isFetching]);
+    useEffect(() => {
+        if (result.error == null || result.isFetching)
+            return;
+        onErrorEvent(result.error);
+    }, [onErrorEvent, result.error, result.isFetching]);
+    useEffect(() => {
+        if (result.status === 'pending' || result.isFetching)
+            return;
+        onSettledEvent(result.data, result.error);
+    }, [
+        onSettledEvent,
+        result.data,
+        result.error,
+        result.status,
+        result.isFetching,
+    ]);
+    return result;
+};
+const noop = () => undefined;

package/dist/ra-core/src/dataProvider/useGetRecordId.d.ts

@@ -0,0 +1,14 @@
+import { Identifier } from '../types';
+/**
+ * Helper hook to get the current `recordId`.
+ *
+ * `recordId` is obtained from parameters if passed as a parameter, or from the `RecordContext` if there is one, or, lastly, from the router URL.
+ *
+ * @param {any} recordId optional if used inside a RecordContextProvider or if recordId can be guessed from the URL
+ *
+ * @returns The `recordId` determined in this manner.
+ *
+ * @example
+ * const recordId = useGetRecordId();
+ */
+export declare function useGetRecordId(recordId?: Identifier): Identifier;

package/dist/ra-core/src/dataProvider/useGetRecordId.js

@@ -0,0 +1,22 @@
+import { useRecordContext } from '../controller';
+import { useParams } from '../routing';
+/**
+ * Helper hook to get the current `recordId`.
+ *
+ * `recordId` is obtained from parameters if passed as a parameter, or from the `RecordContext` if there is one, or, lastly, from the router URL.
+ *
+ * @param {any} recordId optional if used inside a RecordContextProvider or if recordId can be guessed from the URL
+ *
+ * @returns The `recordId` determined in this manner.
+ *
+ * @example
+ * const recordId = useGetRecordId();
+ */
+export function useGetRecordId(recordId) {
+    const contextRecord = useRecordContext();
+    const { id: routeId } = useParams();
+    const actualRecordId = recordId ?? contextRecord?.id ?? routeId;
+    if (actualRecordId == null)
+        throw new Error(`useGetRecordId could not find the current record id. You need to use it inside a RecordContextProvider, or inside a supported route, or provide the record id to the hook yourself.`);
+    return actualRecordId;
+}

package/dist/ra-core/src/dataProvider/useInfiniteGetList.d.ts

@@ -0,0 +1,64 @@
+import { InfiniteData, QueryKey, UseInfiniteQueryOptions, UseInfiniteQueryResult } from '@tanstack/react-query';
+import { RaRecord, GetListParams, GetInfiniteListResult } from '../types';
+/**
+ * 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://tanstack.com/query/v5/docs/react/reference/useInfiniteQuery
+ *
+ * This hook will return the cached result when called a second time
+ * with the same parameters, until the response arrives.
+ *
+ * @param {string} resource The resource name, e.g. 'posts'
+ * @param {Params} params The getList parameters { pagination, sort, filter, meta }
+ * @param {Object} options Options object to pass to the queryClient.
+ * May include side effects to be executed upon success or failure, e.g. { onSuccess: () => { fetchNextPage(); } }
+ *
+ * @typedef Params
+ * @prop params.pagination The request pagination { page, perPage }, e.g. { page: 1, perPage: 10 }
+ * @prop params.sort The request sort { field, order }, e.g. { field: 'id', order: 'DESC' }
+ * @prop params.filter The request filters, e.g. { title: 'hello, world' }
+ * @prop params.meta Optional meta parameters
+ *
+ * @returns The current request state. Destructure as { data, total, error, isPending, isSuccess, hasNextPage, fetchNextPage }.
+ *
+ * @example
+ *
+ * import { useInfiniteGetList } from 'react-admin';
+ *
+ * const LatestNews = () => {
+ *     const { data, total, isPending, error, hasNextPage, fetchNextPage } = useInfiniteGetList(
+ *         'posts',
+ *         { pagination: { page: 1, perPage: 10 }, sort: { field: 'published_at', order: 'DESC' } }
+ *     );
+ *     if (isPending) { return <Loading />; }
+ *     if (error) { return <p>ERROR</p>; }
+ *     return (
+ *        <>
+ *            <ul>
+ *                {data?.pages.map(page => {
+ *                    return page.data.map(post => (
+ *                        <li key={post.id}>{post.title}</li>
+ *                    ));
+ *                })}
+ *            </ul>
+ *            <div>
+ *                <button disabled={!hasNextPage} onClick={() => fetchNextPage()}>
+ *                    Fetch next page
+ *                </button>
+ *            </div>
+ *        </>
+ *    );
+ * };
+ */
+export declare const useInfiniteGetList: <RecordType extends RaRecord = any, ErrorType = Error>(resource: string, params?: Partial<GetListParams>, options?: UseInfiniteGetListOptions<RecordType, ErrorType>) => UseInfiniteGetListHookValue<RecordType, ErrorType>;
+export type UseInfiniteGetListOptions<RecordType extends RaRecord = any, ErrorType = Error> = Omit<UseInfiniteQueryOptions<GetInfiniteListResult<RecordType>, ErrorType, InfiniteData<GetInfiniteListResult<RecordType>>, QueryKey, number>, 'queryKey' | 'queryFn' | 'getNextPageParam' | 'getPreviousPageParam' | 'initialPageParam'> & {
+    onSuccess?: (data: InfiniteData<GetInfiniteListResult<RecordType>>) => void;
+    onError?: (error: ErrorType) => void;
+    onSettled?: (data?: InfiniteData<GetInfiniteListResult<RecordType>>, error?: ErrorType | null) => void;
+};
+export type UseInfiniteGetListHookValue<RecordType extends RaRecord = any, ErrorType = Error> = UseInfiniteQueryResult<InfiniteData<GetInfiniteListResult<RecordType>>, ErrorType> & {
+    total?: number;
+    pageParam?: number;
+    meta?: any;
+};

package/dist/ra-core/src/dataProvider/useInfiniteGetList.js

@@ -0,0 +1,177 @@
+import { useInfiniteQuery, useQueryClient, } from '@tanstack/react-query';
+import { useDataProvider } from './useDataProvider';
+import { useEffect, useRef } from 'react';
+import { useEvent } from '../util';
+const MAX_DATA_LENGTH_TO_CACHE = 100;
+/**
+ * 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://tanstack.com/query/v5/docs/react/reference/useInfiniteQuery
+ *
+ * This hook will return the cached result when called a second time
+ * with the same parameters, until the response arrives.
+ *
+ * @param {string} resource The resource name, e.g. 'posts'
+ * @param {Params} params The getList parameters { pagination, sort, filter, meta }
+ * @param {Object} options Options object to pass to the queryClient.
+ * May include side effects to be executed upon success or failure, e.g. { onSuccess: () => { fetchNextPage(); } }
+ *
+ * @typedef Params
+ * @prop params.pagination The request pagination { page, perPage }, e.g. { page: 1, perPage: 10 }
+ * @prop params.sort The request sort { field, order }, e.g. { field: 'id', order: 'DESC' }
+ * @prop params.filter The request filters, e.g. { title: 'hello, world' }
+ * @prop params.meta Optional meta parameters
+ *
+ * @returns The current request state. Destructure as { data, total, error, isPending, isSuccess, hasNextPage, fetchNextPage }.
+ *
+ * @example
+ *
+ * import { useInfiniteGetList } from 'react-admin';
+ *
+ * const LatestNews = () => {
+ *     const { data, total, isPending, error, hasNextPage, fetchNextPage } = useInfiniteGetList(
+ *         'posts',
+ *         { pagination: { page: 1, perPage: 10 }, sort: { field: 'published_at', order: 'DESC' } }
+ *     );
+ *     if (isPending) { return <Loading />; }
+ *     if (error) { return <p>ERROR</p>; }
+ *     return (
+ *        <>
+ *            <ul>
+ *                {data?.pages.map(page => {
+ *                    return page.data.map(post => (
+ *                        <li key={post.id}>{post.title}</li>
+ *                    ));
+ *                })}
+ *            </ul>
+ *            <div>
+ *                <button disabled={!hasNextPage} onClick={() => fetchNextPage()}>
+ *                    Fetch next page
+ *                </button>
+ *            </div>
+ *        </>
+ *    );
+ * };
+ */
+export const useInfiniteGetList = (resource, params = {}, options = {}) => {
+    const { pagination = { page: 1, perPage: 25 }, sort = { field: 'id', order: 'DESC' }, filter = {}, meta, } = params;
+    const dataProvider = useDataProvider();
+    const queryClient = useQueryClient();
+    const { onSuccess = noop, onError = noop, onSettled = noop, ...queryOptions } = options;
+    const onSuccessEvent = useEvent(onSuccess);
+    const onErrorEvent = useEvent(onError);
+    const onSettledEvent = useEvent(onSettled);
+    const result = useInfiniteQuery({
+        queryKey: [
+            resource,
+            'getInfiniteList',
+            { pagination, sort, filter, meta },
+        ],
+        queryFn: queryParams => {
+            const { pageParam = pagination.page } = queryParams;
+            return dataProvider
+                .getList(resource, {
+                pagination: {
+                    page: pageParam,
+                    perPage: pagination.perPage,
+                },
+                sort,
+                filter,
+                meta,
+                signal: dataProvider.supportAbortSignal === true
+                    ? queryParams.signal
+                    : undefined,
+            })
+                .then(({ data, pageInfo, total, meta }) => ({
+                data,
+                total,
+                pageParam,
+                pageInfo,
+                meta,
+            }));
+        },
+        initialPageParam: pagination.page,
+        ...queryOptions,
+        getNextPageParam: lastLoadedPage => {
+            if (lastLoadedPage.pageInfo) {
+                return lastLoadedPage.pageInfo.hasNextPage
+                    ? lastLoadedPage.pageParam + 1
+                    : undefined;
+            }
+            const totalPages = Math.ceil((lastLoadedPage.total || 0) / pagination.perPage);
+            return lastLoadedPage.pageParam < totalPages
+                ? Number(lastLoadedPage.pageParam) + 1
+                : undefined;
+        },
+        getPreviousPageParam: lastLoadedPage => {
+            if (lastLoadedPage.pageInfo) {
+                return lastLoadedPage.pageInfo.hasPreviousPage
+                    ? lastLoadedPage.pageParam - 1
+                    : undefined;
+            }
+            return lastLoadedPage.pageParam === 1
+                ? undefined
+                : lastLoadedPage.pageParam - 1;
+        },
+    });
+    const metaValue = useRef(meta);
+    const resourceValue = useRef(resource);
+    useEffect(() => {
+        metaValue.current = meta;
+    }, [meta]);
+    useEffect(() => {
+        resourceValue.current = resource;
+    }, [resource]);
+    useEffect(() => {
+        if (result.data === undefined ||
+            result.error != null ||
+            result.isFetching)
+            return;
+        // optimistically populate the getOne cache
+        const allPagesDataLength = result.data.pages.reduce((acc, page) => acc + page.data.length, 0);
+        if (allPagesDataLength <= MAX_DATA_LENGTH_TO_CACHE) {
+            result.data.pages.forEach(page => {
+                page.data.forEach(record => {
+                    queryClient.setQueryData([
+                        resourceValue.current,
+                        'getOne',
+                        { id: String(record.id), meta: metaValue.current },
+                    ], oldRecord => oldRecord ?? record);
+                });
+            });
+        }
+        onSuccessEvent(result.data);
+    }, [
+        onSuccessEvent,
+        queryClient,
+        result.data,
+        result.error,
+        result.isFetching,
+    ]);
+    useEffect(() => {
+        if (result.error == null || result.isFetching)
+            return;
+        onErrorEvent(result.error);
+    }, [onErrorEvent, result.error, result.isFetching]);
+    useEffect(() => {
+        if (result.status === 'pending' || result.isFetching)
+            return;
+        onSettledEvent(result.data, result.error);
+    }, [
+        onSettledEvent,
+        result.data,
+        result.error,
+        result.status,
+        result.isFetching,
+    ]);
+    return (result.data
+        ? {
+            ...result,
+            data: result.data,
+            total: result.data?.pages[0]?.total ?? undefined,
+            meta: result.data?.pages[0]?.meta,
+        }
+        : result);
+};
+const noop = () => undefined;

package/dist/ra-core/src/dataProvider/useIsDataLoaded.d.ts

@@ -0,0 +1,13 @@
+/**
+ * Check if react-query has already fetched data for a query key.
+ *
+ * This hook is reactive.
+ *
+ * @example
+ * const isCustomerLoaded = useIsDataLoaded(['customers', 'getOne', { id: customerId }]);
+ *
+ * @returns {boolean} true if the data is loaded, false otherwise
+ */
+export declare const useIsDataLoaded: (queryKey: any, options?: {
+    enabled?: boolean;
+}) => boolean;

package/dist/ra-core/src/dataProvider/useIsDataLoaded.js

@@ -0,0 +1,35 @@
+import { useEffect, useState } from 'react';
+import { useQueryClient, QueryObserver } from '@tanstack/react-query';
+/**
+ * Check if react-query has already fetched data for a query key.
+ *
+ * This hook is reactive.
+ *
+ * @example
+ * const isCustomerLoaded = useIsDataLoaded(['customers', 'getOne', { id: customerId }]);
+ *
+ * @returns {boolean} true if the data is loaded, false otherwise
+ */
+export const useIsDataLoaded = (queryKey, options = {}) => {
+    const { enabled = true } = options;
+    const queryClient = useQueryClient();
+    const [isDataLoaded, setDataLoaded] = useState(() => {
+        if (!enabled) {
+            return false;
+        }
+        return queryClient.getQueryData(queryKey) !== undefined;
+    });
+    useEffect(() => {
+        if (!enabled)
+            return;
+        if (queryClient.getQueryData(queryKey) === undefined) {
+            const observer = new QueryObserver(queryClient, { queryKey });
+            const unsubscribe = observer.subscribe(result => {
+                setDataLoaded(!result.isPending);
+                unsubscribe();
+            });
+            return unsubscribe;
+        }
+    }, [enabled, queryKey, queryClient]);
+    return isDataLoaded;
+};

package/dist/ra-core/src/dataProvider/useLoading.d.ts

@@ -0,0 +1,12 @@
+/**
+ * Get the state of the dataProvider connection.
+ *
+ * Returns true if a query or a mutation is pending.
+ *
+ * Custom implementation because react-query's useIsFetching and useIsMutating
+ * render each time the number of active queries changes, which is too often.
+ *
+ * @see useIsFetching
+ * @see useIsMutating
+ */
+export declare const useLoading: () => boolean;

package/dist/ra-core/src/dataProvider/useLoading.js

@@ -0,0 +1,41 @@
+import React from 'react';
+import { notifyManager, useQueryClient } from '@tanstack/react-query';
+/**
+ * Get the state of the dataProvider connection.
+ *
+ * Returns true if a query or a mutation is pending.
+ *
+ * Custom implementation because react-query's useIsFetching and useIsMutating
+ * render each time the number of active queries changes, which is too often.
+ *
+ * @see useIsFetching
+ * @see useIsMutating
+ */
+export const useLoading = () => {
+    const client = useQueryClient();
+    const mountedRef = React.useRef(false);
+    const isFetchingRef = React.useRef(client.isFetching() > 0);
+    const isMutatingRef = React.useRef(client.isMutating() > 0);
+    const [isLoading, setIsLoading] = React.useState(isFetchingRef.current || isMutatingRef.current);
+    React.useEffect(() => {
+        mountedRef.current = true;
+        const unsubscribeQueryCache = client.getQueryCache().subscribe(notifyManager.batchCalls(() => {
+            if (mountedRef.current) {
+                isFetchingRef.current = client.isFetching() > 0;
+                setIsLoading(isFetchingRef.current || isMutatingRef.current);
+            }
+        }));
+        const unsubscribeMutationCache = client.getMutationCache().subscribe(notifyManager.batchCalls(() => {
+            if (mountedRef.current) {
+                isMutatingRef.current = client.isMutating() > 0;
+                setIsLoading(isFetchingRef.current || isMutatingRef.current);
+            }
+        }));
+        return () => {
+            mountedRef.current = false;
+            unsubscribeQueryCache();
+            unsubscribeMutationCache();
+        };
+    }, [client]);
+    return isLoading;
+};