Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Doc] Update the Data Fetching documentation #9200

Merged
merged 3 commits into from
Aug 23, 2023
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
52 changes: 26 additions & 26 deletions docs/Actions.md
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -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';
Expand All @@ -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.
Expand Down Expand Up @@ -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());
Expand Down
2 changes: 1 addition & 1 deletion docs/Admin.md
Original file line number Diff line number Diff line change
Expand Up @@ -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`

Expand Down
46 changes: 0 additions & 46 deletions docs/DataProviderIntroduction.md

This file was deleted.

Loading