Add useInfiniteGetList hook

packages/ra-core/src/dataProvider/index.ts

@@ -22,6 +22,7 @@ export * from './useUpdate';
 export * from './useUpdateMany';
 export * from './useDelete';
 export * from './useDeleteMany';
+export * from './useInfiniteGetList';
 
 export type { Options } from './fetch';
 

packages/ra-core/src/dataProvider/useInfiniteGetList.spec.tsx

@@ -0,0 +1,141 @@
+import * as React from 'react';
+import expect from 'expect';
+import { screen, render, waitFor } from '@testing-library/react';
+import { UseInfiniteListCore } from './useInfiniteGetList.stories';
+
+describe('useInfiniteGetList', () => {
+    it('should call dataProvider.getList() on mount', async () => {
+        const dataProvider = {
+            getList: jest.fn(() =>
+                Promise.resolve({
+                    data: [{ id: 73, name: 'France', code: 'FR' }],
+                    total: 1,
+                })
+            ),
+        } as any;
+
+        render(
+            <UseInfiniteListCore
+                dataProvider={dataProvider}
+                resource="heroes"
+            />
+        );
+        await waitFor(() => {
+            expect(dataProvider.getList).toBeCalledTimes(1);
+            expect(dataProvider.getList).toBeCalledWith('heroes', {
+                filter: {},
+                pagination: { page: 1, perPage: 20 },
+                sort: { field: 'id', order: 'DESC' },
+            });
+        });
+    });
+
+    it('should not call the dataProvider on update', async () => {
+        const dataProvider = {
+            getList: jest.fn(() =>
+                Promise.resolve({
+                    data: [{ id: 73, name: 'France', code: 'FR' }],
+                    total: 1,
+                })
+            ),
+        } as any;
+        const { rerender } = render(
+            <UseInfiniteListCore dataProvider={dataProvider} />
+        );
+        await waitFor(() => {
+            expect(dataProvider.getList).toBeCalledTimes(1);
+        });
+        rerender(<UseInfiniteListCore dataProvider={dataProvider} />);
+        await waitFor(() => {
+            expect(dataProvider.getList).toBeCalledTimes(1);
+        });
+    });
+
+    it('should call the dataProvider on update when the resource changes', async () => {
+        const dataProvider = {
+            getList: jest.fn(() =>
+                Promise.resolve({
+                    data: [{ id: 73, name: 'France', code: 'FR' }],
+                    total: 1,
+                })
+            ),
+        } as any;
+        const { rerender } = render(
+            <UseInfiniteListCore
+                dataProvider={dataProvider}
+                resource="heroes"
+            />
+        );
+        await waitFor(() => {
+            expect(dataProvider.getList).toBeCalledTimes(1);
+        });
+        rerender(<UseInfiniteListCore dataProvider={dataProvider} />);
+        await waitFor(() => {
+            expect(dataProvider.getList).toBeCalledTimes(2);
+        });
+    });
+
+    it('should accept a meta parameter', async () => {
+        const dataProvider = {
+            getList: jest.fn(() =>
+                Promise.resolve({
+                    data: [{ id: 73, name: 'France', code: 'FR' }],
+                    total: 1,
+                })
+            ),
+        } as any;
+        render(
+            <UseInfiniteListCore
+                dataProvider={dataProvider}
+                pagination={{ page: 1, perPage: 20 }}
+                meta={{ hello: 'world' }}
+                resource="heroes"
+            />
+        );
+        await waitFor(() => {
+            expect(dataProvider.getList).toBeCalledWith('heroes', {
+                filter: {},
+                pagination: { page: 1, perPage: 20 },
+                sort: { field: 'id', order: 'DESC' },
+                meta: { hello: 'world' },
+            });
+        });
+    });
+
+    it('should execute success side effects on success', async () => {
+        const countries = [
+            { id: 73, name: 'France', code: 'FR' },
+            { id: 74, name: 'Italia', code: 'IT' },
+        ];
+        const dataProvider = {
+            getList: (resource, params) => {
+                return Promise.resolve({
+                    data: countries.slice(
+                        (params.pagination.page - 1) *
+                            params.pagination.perPage,
+                        (params.pagination.page - 1) *
+                            params.pagination.perPage +
+                            params.pagination.perPage
+                    ),
+                    total: countries.length,
+                });
+            },
+        };
+
+        render(
+            <UseInfiniteListCore
+                dataProvider={dataProvider}
+                pagination={{ page: 1, perPage: 1 }}
+            />
+        );
+        await waitFor(async () => {
+            expect(screen.getByLabelText('country').innerHTML).toContain(
+                'France'
+            );
+            screen.getByLabelText('refetch-button').click();
+            await waitFor(async () => {
+                expect(screen.queryAllByLabelText('country')).toHaveLength(2);
+            });
+        });
+    });
+});

packages/ra-core/src/dataProvider/useInfiniteGetList.stories.tsx

@@ -0,0 +1,74 @@
+import * as React from 'react';
+import { useInfiniteGetList } from '..';
+
+import { CoreAdminContext } from '../core';
+import { countries } from '../storybook/data';
+
+export default { title: 'ra-core/dataProvider/useInfiniteGetList' };
+
+export const UseInfiniteListCore = props => {
+    let { dataProvider, ...rest } = props;
+
+    if (!dataProvider) {
+        dataProvider = {
+            getList: (resource, params) => {
+                return Promise.resolve({
+                    data: countries.slice(
+                        (params.pagination.page - 1) *
+                            params.pagination.perPage,
+                        (params.pagination.page - 1) *
+                            params.pagination.perPage +
+                            params.pagination.perPage
+                    ),
+                    total: countries.length,
+                });
+            },
+        } as any;
+    }
+
+    return (
+        <CoreAdminContext dataProvider={dataProvider}>
+            <UseInfiniteComponent {...rest} />
+        </CoreAdminContext>
+    );
+};
+
+const UseInfiniteComponent = ({
+    resource = 'countries',
+    pagination = { page: 1, perPage: 20 },
+    sort = { field: 'id', order: 'DESC' },
+    filter = {},
+    options = {},
+    meta = undefined,
+    callback = null,
+    ...rest
+}) => {
+    const { data, fetchNextPage, hasNextPage } = useInfiniteGetList(
+        resource,
+        { pagination, sort, filter, meta },
+        options
+    );
+
+    return (
+        <>
+            <ul>
+                {data?.pages.map(page => {
+                    return page.data.map(country => (
+                        <li aria-label="country" key={country.code}>
+                            {country.name} -- {country.code}
+                        </li>
+                    ));
+                })}
+            </ul>
+            <div>
+                <button
+                    aria-label="refetch-button"
+                    disabled={!hasNextPage}
+                    onClick={() => fetchNextPage()}
+                >
+                    Refetch
+                </button>
+            </div>
+        </>
+    );
+};

packages/ra-core/src/dataProvider/useInfiniteGetList.ts

@@ -0,0 +1,138 @@
+import {
+    useInfiniteQuery,
+    UseInfiniteQueryResult,
+    useQueryClient,
+} from 'react-query';
+
+import { RaRecord, GetListParams, GetInfiniteListResult } from '../types';
+import { useDataProvider } from './useDataProvider';
+
+/**
+ * Call the dataProvider.getList() method and return the resolved result
+ * as well as the loading state.
+ *
+ *
+ * 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, isLoading, isSuccess, hasNextPage, fetchNextPage }.
+ *
+ * @example
+ *
+ * import { useInfinteGetList } from 'react-admin';
+ *
+ * const LatestNews = () => {
+ *     const { data, total, isLoading, error, hasNextPage, fetchNextPage } = useInfiniteGetList(
+ *         'posts',
+ *         { pagination: { page: 1, perPage: 10 }, sort: { field: 'published_at', order: 'DESC' } }
+ *     );
+ *     if (isLoading) { 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()}>
+ *                    Refetch
+ *                </button>
+ *            </div>
+ *        </>
+ *    );
+ * };
+ */
+
+export const useInfiniteGetList = <RecordType extends RaRecord = any>(
+    resource: string,
+    params: Partial<GetListParams> = {},
+    options?: any
+): UseInfiniteQueryResult<GetInfiniteListResult> => {
+    const {
+        pagination = { page: 1, perPage: 25 },
+        sort = { field: 'id', order: 'DESC' },
+        filter = {},
+        meta,
+    } = params;
+    const dataProvider = useDataProvider();
+    const queryClient = useQueryClient();
+
+    return useInfiniteQuery(
+        [resource, 'getList', { pagination, sort, filter, meta }],
+        ({ pageParam = pagination.page }) =>
+            dataProvider
+                .getList<RecordType>(resource, {
+                    pagination: {
+                        page: pageParam,
+                        perPage: pagination.perPage,
+                    },
+                    sort,
+                    filter,
+                    meta,
+                })
+                .then(({ data, pageInfo, total }) => ({
+                    data,
+                    total,
+                    pageParam,
+                    pageInfo,
+                })),
+        {
+            ...options,
+            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;
+            },
+            onSuccess: data => {
+                // optimistically populate the getOne cache
+                data.pages.forEach(page => {
+                    page.data.forEach(record => {
+                        queryClient.setQueryData(
+                            [
+                                resource,
+                                'getOne',
+                                { id: String(record.id), meta },
+                            ],
+                            oldRecord => oldRecord ?? record
+                        );
+                    });
+                });
+            },
+        }
+    );
+};