diff --git a/docs/List.md b/docs/List.md index 5811d5c1ca0..9120a62060b 100644 --- a/docs/List.md +++ b/docs/List.md @@ -2318,12 +2318,22 @@ const PostList = props => ( export default withStyles(styles)(PostList); ``` -**Tip**: You can use the `<Datagrid>` component with [custom queries](./Actions.md#usequery-hook), provided you pass the result to a `<ListContextProvider>`: +### With Custom Query + +You can use the `<Datagrid>` component with [custom queries](./Actions.md#usequery-hook), provided you pass the result to a `<ListContextProvider>`: {% raw %} ```jsx import keyBy from 'lodash/keyBy' -import { useQuery, Datagrid, TextField, Pagination, Loading, ListContextProvider } from 'react-admin' +import { + useQuery, + ResourceContextProvider, + ListContextProvider + Datagrid, + TextField, + Pagination, + Loading, +} from 'react-admin' const CustomList = () => { const [page, setPage] = useState(1); @@ -2345,27 +2355,28 @@ const CustomList = () => { return <p>ERROR: {error}</p> } return ( - <ListContextProvider - value={{ - resource: 'posts', - basePath: '/posts', - data: keyBy(data, 'id'), - ids: data.map(({ id }) => id), - currentSort: { field: 'id', order: 'ASC' }, - selectedIds: [], - }} - > - <Datagrid rowClick="edit"> - <TextField source="id" /> - <TextField source="title" /> - </Datagrid> - <Pagination - page={page} - perPage={perPage} - setPage={setPage} - total={total} - /> - </ListContextProvider> + <ResourceContextProvider value="posts"> + <ListContextProvider + value={{ + basePath: '/posts', + data: keyBy(data, 'id'), + ids: data.map(({ id }) => id), + currentSort: { field: 'id', order: 'ASC' }, + selectedIds: [], + }} + > + <Datagrid rowClick="edit"> + <TextField source="id" /> + <TextField source="title" /> + </Datagrid> + <Pagination + page={page} + perPage={perPage} + setPage={setPage} + total={total} + /> + </ListContextProvider> + </ResourceContextProvider> ); } ```