useGetList
This hook calls dataProvider.getList()
when the component mounts. It’s ideal for getting a list of records. It supports filtering, sorting, and pagination.
Syntax
const { data, total, isLoading, error, refetch } = useGetList(
resource,
{ pagination, sort, filter, meta },
options
);
Usage
import { useGetList } from 'react-admin';
const LatestNews = () => {
const { data, total, isLoading, error } = useGetList(
'posts',
{
pagination: { page: 1, perPage: 10 },
sort: { field: 'published_at', order: 'DESC' }
}
);
if (isLoading) { return <Loading />; }
if (error) { return <p>ERROR</p>; }
return (
<>
<h1>Latest news</h1>
<ul>
{data.map(record =>
<li key={record.id}>{record.title}</li>
)}
</ul>
<p>{data.length} / {total} articles</p>
</>
);
};
Partial Pagination
If your data provider doesn’t return the total
number of records (see Partial Pagination), you can use the pageInfo
field to determine if there are more records to fetch.
import { useState } from 'react';
import { useGetList } from 'react-admin';
const LatestNews = () => {
const [page, setPage] = useState(1);
const { data, pageInfo, isLoading, error } = useGetList(
'posts',
{
pagination: { page, perPage: 10 },
sort: { field: 'published_at', order: 'DESC' }
}
);
if (isLoading) { return <Loading />; }
if (error) { return <p>ERROR</p>; }
const { hasNextPage, hasPreviousPage } = pageInfo;
const getNextPage = () => setPage(page + 1);
return (
<>
<h1>Latest news</h1>
<ul>
{data.map(record =>
<li key={record.id}>{record.title}</li>
)}
</ul>
{hasNextPage && <button onClick={getNextPage}>More articles</button>}
</>
);
};
Alternately, you can use the useInfiniteGetList
hook to keep the previous pages on screen while loading new pages - just like users see older content when they scroll down their feed on social media.