Merge pull request #5726 from marmelab/Fix-custom-qury-in-datagrid-do…

…cumentation [Doc] Fix custom query with Datagrid example uses incorrect resource
marmelab · Jan 4, 2021 · 9713d88 · 9713d88
2 parents 24c6d68 + a05788e
commit 9713d88
Showing 1 changed file with 34 additions and 23 deletions.
diff --git 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>
     );
 }
 ```