Merge pull request #9200 from marmelab/doc-data-provider

[Doc] Update the Data Fetching documentation

Author: fzaninotto

docs/Actions.md

@@ -30,6 +30,21 @@ Refer to [the `useDataProvider` hook documentation](./useDataProvider.md) for mo
 
 React-admin provides one hook for each of the Data Provider methods. They are useful shortcuts that make your code more readable and more robust.
 
+The query hooks execute on mount. They return an object with the following properties: `{ data, isLoading, error }`. Query hooks are:
+
+* [`useGetList`](./useGetList.md)
+* [`useGetOne`](./useGetOne.md)
+* [`useGetMany`](./useGetMany.md)
+* [`useGetManyReference`](./useGetManyReference.md)
+
+The mutation hooks execute the query when you call a callback. They return an array with the following items: `[mutate, { data, isLoading, error }]`. Mutation hooks are:
+
+* [`useCreate`](./useCreate.md)
+* [`useUpdate`](./useUpdate.md)
+* [`useUpdateMany`](./useUpdateMany.md)
+* [`useDelete`](./useDelete.md)
+* [`useDeleteMany`](./useDeleteMany.md)
+
 Their signature is the same as the related dataProvider method, e.g.:
 
 ```jsx
@@ -59,29 +74,7 @@ const UserProfile = ({ userId }) => {
 };
 ```
 
-**Tip**: If you use TypeScript, you can specify the record type for more type safety:
-
-```jsx
-const { data, isLoading } = useGetOne<Product>('products', { id: 123 });
-//        \- type of data is Product
-```
-
-The query hooks execute on mount. They return an object with the following properties: `{ data, isLoading, error }`. Query hooks are:
-
-* [`useGetList`](./useGetList.md)
-* [`useGetOne`](./useGetOne.md)
-* [`useGetMany`](./useGetMany.md)
-* [`useGetManyReference`](./useGetManyReference.md)
-
-The mutation hooks execute the query when you call a callback. They return an array with the following items: `[mutate, { data, isLoading, error }]`. Mutation hooks are:
-
-* [`useCreate`](./useCreate.md)
-* [`useUpdate`](./useUpdate.md)
-* [`useUpdateMany`](./useUpdateMany.md)
-* [`useDelete`](./useDelete.md)
-* [`useDeleteMany`](./useDeleteMany.md)
-
-For instance, here is an example using `useUpdate()`:
+Here is another example, using `useUpdate()`:
 
 ```jsx
 import * as React from 'react';
@@ -104,6 +97,13 @@ const { data: user, isLoading, error } = useGetOne(
 );
 ```
 
+**Tip**: If you use TypeScript, you can specify the record type for more type safety:
+
+```jsx
+const { data, isLoading } = useGetOne<Product>('products', { id: 123 });
+//        \- type of data is Product
+```
+
 ## `meta` Parameter
 
 All Data Provider methods accept a `meta` parameter. React-admin doesn't set this parameter by default in its queries, but it's a good way to pass special arguments or metadata to an API call.
@@ -227,12 +227,12 @@ const dataProvider = {
     getList: /* ... */,
     getOne: /* ... */,
     getMany: /* ... */,
-    getManyReference /* ... */,
+    getManyReference: /* ... */,
     create: /* ... */,
     update: /* ... */,
-    updateMany /* ... */,
+    updateMany: /* ... */,
     delete: /* ... */,
-    deleteMany /* ... */,
+    deleteMany: /* ... */,
     banUser: (userId) => {
         return fetch(`/api/user/${userId}/ban`, { method: 'POST' })
             .then(response => response.json());

docs/Admin.md

@@ -200,7 +200,7 @@ const dataProvider = {
 
 Check the [Writing a Data Provider](./DataProviderWriting.md) chapter for detailed instructions on how to write a data provider for your API.
 
-The `dataProvider` is also the ideal place to add custom HTTP headers, handle file uploads, map resource names to API endpoints, pass credentials to the API, put business logic, reformat API errors, etc. Check [the Data Provider documentation](./DataProviderIntroduction.md) for more details.
+The `dataProvider` is also the ideal place to add custom HTTP headers, handle file uploads, map resource names to API endpoints, pass credentials to the API, put business logic, reformat API errors, etc. Check [the Data Provider documentation](./DataProviders.md) for more details.
 
 ## `children`