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] fix links to TanStack Query V3 doc #9057

Merged
merged 1 commit into from
Jun 28, 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
10 changes: 5 additions & 5 deletions docs/Actions.md
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ title: "Querying the API"

# Querying the API

React-admin provides special hooks to emit read and write queries to the [`dataProvider`](./DataProviders.md), which in turn sends requests to your API. Under the hood, it uses [react-query](https://react-query-v3.tanstack.com/) to call the `dataProvider` and cache the results.
React-admin provides special hooks to emit read and write queries to the [`dataProvider`](./DataProviders.md), which in turn sends requests to your API. Under the hood, it uses [react-query](https://tanstack.com/query/v3/) to call the `dataProvider` and cache the results.

## Getting The `dataProvider` Instance

Expand Down Expand Up @@ -119,7 +119,7 @@ It's up to the Data Provider to interpret this parameter.

## `useQuery` and `useMutation`

Internally, react-admin uses [react-query](https://react-query-v3.tanstack.com/) to call the dataProvider. When fetching data from the dataProvider in your components, if you can't use any of the dataProvider method hooks, you should use that library, too. It brings several benefits:
Internally, react-admin uses [react-query](https://tanstack.com/query/v3/) to call the dataProvider. When fetching data from the dataProvider in your components, if you can't use any of the dataProvider method hooks, you should use that library, too. It brings several benefits:

1. It triggers the loader in the AppBar when the query is running.
2. It reduces the boilerplate code since you don't need to use `useState`.
Expand All @@ -128,8 +128,8 @@ Internally, react-admin uses [react-query](https://react-query-v3.tanstack.com/)

React-query offers 2 main hooks to interact with the dataProvider:

* [`useQuery`](https://react-query-v3.tanstack.com/reference/useQuery): fetches the dataProvider on mount. This is for *read* queries.
* [`useMutation`](https://react-query-v3.tanstack.com/reference/useMutation): fetches the dataProvider when you call a callback. This is for *write* queries, and *read* queries that execute on user interaction.
* [`useQuery`](https://tanstack.com/query/v3/docs/react/reference/useQuery): fetches the dataProvider on mount. This is for *read* queries.
* [`useMutation`](https://tanstack.com/query/v3/docs/react/reference/useMutation): fetches the dataProvider when you call a callback. This is for *write* queries, and *read* queries that execute on user interaction.

Both these hooks accept a query *key* (identifying the query in the cache), and a query *function* (executing the query and returning a Promise). Internally, react-admin uses an array of arguments as the query key.

Expand Down Expand Up @@ -254,7 +254,7 @@ const BanUserButton = ({ userId }) => {

## Query Options

The data provider method hooks (like `useGetOne`) and react-query's hooks (like `useQuery`) accept a query options object as the last argument. This object can be used to modify the way the query is executed. There are many options, all documented [in the react-query documentation](https://react-query-v3.tanstack.com/reference/useQuery):
The data provider method hooks (like `useGetOne`) and react-query's hooks (like `useQuery`) accept a query options object as the last argument. This object can be used to modify the way the query is executed. There are many options, all documented [in the react-query documentation](https://tanstack.com/query/v3/docs/react/reference/useQuery):

- `cacheTime`
- `enabled`
Expand Down
4 changes: 2 additions & 2 deletions docs/Admin.md
Original file line number Diff line number Diff line change
Expand Up @@ -616,7 +616,7 @@ const App = () => (

## `queryClient`

React-admin uses [react-query](https://react-query-v3.tanstack.com/) to fetch, cache and update data. Internally, the `<Admin>` component creates a react-query [`QueryClient`](https://react-query-v3.tanstack.com/reference/QueryClient) on mount, using [react-query's "aggressive but sane" defaults](https://react-query-v3.tanstack.com/guides/important-defaults):
React-admin uses [react-query](https://react-query-v3.tanstack.com/) to fetch, cache and update data. Internally, the `<Admin>` component creates a react-query [`QueryClient`](https://tanstack.com/query/v3/docs/react/reference/QueryClient) on mount, using [react-query's "aggressive but sane" defaults](https://react-query-v3.tanstack.com/guides/important-defaults):

* Queries consider cached data as stale
* Stale queries are refetched automatically in the background when:
Expand Down Expand Up @@ -654,7 +654,7 @@ const App = () => (
);
```

To know which options you can pass to the `QueryClient` constructor, check the [react-query documentation](https://react-query-v3.tanstack.com/reference/QueryClient) and the [query options](https://react-query-v3.tanstack.com/reference/useQuery) and [mutation options](https://react-query-v3.tanstack.com/reference/useMutation) sections.
To know which options you can pass to the `QueryClient` constructor, check the [react-query documentation](https://tanstack.com/query/v3/docs/react/reference/QueryClient) and the [query options](https://tanstack.com/query/v3/docs/react/reference/useQuery) and [mutation options](https://tanstack.com/query/v3/docs/react/reference/useMutation) sections.

The common settings that react-admin developers often overwrite are:

Expand Down
2 changes: 1 addition & 1 deletion docs/Create.md
Original file line number Diff line number Diff line change
Expand Up @@ -168,7 +168,7 @@ const PostCreate = () => (
```
{% endraw %}

You can also use `mutationOptions` to override success or error side effects, by setting the `mutationOptions` prop. Refer to the [useMutation documentation](https://react-query-v3.tanstack.com/reference/useMutation) in the react-query website for a list of the possible options.
You can also use `mutationOptions` to override success or error side effects, by setting the `mutationOptions` prop. Refer to the [useMutation documentation](https://tanstack.com/query/v3/docs/react/reference/useMutation) in the react-query website for a list of the possible options.

Let's see an example with the success side effect. By default, when the save action succeeds, react-admin shows a notification, and redirects to the new record edit page. You can override this behavior and pass custom success side effects by providing a `mutationOptions` prop with an `onSuccess` key:

Expand Down
4 changes: 2 additions & 2 deletions docs/Edit.md
Original file line number Diff line number Diff line change
Expand Up @@ -281,7 +281,7 @@ const PostEdit = () => (
```
{% endraw %}

You can also use `mutationOptions` to override success or error side effects, by setting the `mutationOptions` prop. Refer to the [useMutation documentation](https://react-query-v3.tanstack.com/reference/useMutation) in the react-query website for a list of the possible options.
You can also use `mutationOptions` to override success or error side effects, by setting the `mutationOptions` prop. Refer to the [useMutation documentation](https://tanstack.com/query/v3/docs/react/reference/useMutation) in the react-query website for a list of the possible options.

Let's see an example with the success side effect. By default, when the save action succeeds, react-admin shows a notification, and redirects to the list page. You can override this behavior and pass custom success side effects by providing a `mutationOptions` prop with an `onSuccess` key:

Expand Down Expand Up @@ -431,7 +431,7 @@ const PostEdit = () => (
```
{% endraw %}

Refer to the [useQuery documentation](https://react-query-v3.tanstack.com/reference/useQuery) in the react-query website for a list of the possible options.
Refer to the [useQuery documentation](https://tanstack.com/query/v3/docs/react/reference/useQuery) in the react-query website for a list of the possible options.

## `redirect`

Expand Down
2 changes: 1 addition & 1 deletion docs/PredictiveTextInput.md
Original file line number Diff line number Diff line change
Expand Up @@ -196,7 +196,7 @@ const myPromptGenerator = ({ name, value, resource, record = {} }) => {

## `queryOptions`

`<PredictiveTextInput>` uses react-query to fetch the related record. You can set [any of `useQuery` options](https://react-query-v3.tanstack.com/reference/useQuery) via the the `queryOptions` prop.
`<PredictiveTextInput>` uses react-query to fetch the related record. You can set [any of `useQuery` options](https://tanstack.com/query/v3/docs/react/reference/useQuery) via the the `queryOptions` prop.

For instance, if you want to disable the refetch on window focus for this query, you can use:

Expand Down
2 changes: 1 addition & 1 deletion docs/ReferenceArrayInput.md
Original file line number Diff line number Diff line change
Expand Up @@ -106,7 +106,7 @@ See the [`children`](#children) section for more details.
| `label` | Optional | `string` | - | Useful only when `ReferenceArrayInput` is in a Filter array, the label is used as the Filter label. |
| `page` | Optional | `number` | 1 | The current page number |
| `perPage` | Optional | `number` | 25 | Number of suggestions to show |
| `queryOptions` | Optional | [`UseQueryOptions`](https://tanstack.com/query/v4/docs/reference/useQuery?from=reactQueryV3&original=https://react-query-v3.tanstack.com/reference/useQuery) | `{}` | `react-query` client options |
| `queryOptions` | Optional | [`UseQueryOptions`](https://tanstack.com/query/v3/docs/react/reference/useQuery) | `{}` | `react-query` client options |
| `sort` | Optional | `{ field: String, order: 'ASC' or 'DESC' }` | `{ field: 'id', order: 'DESC' }` | How to order the list of suggestions |

**Note**: `<ReferenceArrayInput>` doesn't accept the [common input props](./Inputs.md#common-input-props) ; it is the responsability of children to apply them.
Expand Down
2 changes: 1 addition & 1 deletion docs/ReferenceField.md
Original file line number Diff line number Diff line change
Expand Up @@ -79,7 +79,7 @@ With this configuration, `<ReferenceField>` wraps the user's name in a link to t
| `emptyText` | Optional | `string` | '' | Defines a text to be shown when the field has no value or when the reference is missing |
| `label` | Optional | `string | Function` | `resources. [resource]. fields.[source]` | Label to use for the field when rendered in layout components |
| `link` | Optional | `string | Function` | `edit` | Target of the link wrapping the rendered child. Set to `false` to disable the link. |
| `queryOptions` | Optional | [`UseQuery Options`](https://tanstack.com/query/v4/docs/reference/useQuery?from=reactQueryV3&original=https://react-query-v3.tanstack.com/reference/useQuery) | `{}` | `react-query` client options |
| `queryOptions` | Optional | [`UseQuery Options`](https://tanstack.com/query/v3/docs/react/reference/useQuery) | `{}` | `react-query` client options |
| `sortBy` | Optional | `string | Function` | `source` | Name of the field to use for sorting when used in a Datagrid |

`<ReferenceField>` also accepts the [common field props](./Fields.md#common-field-props).
Expand Down
2 changes: 1 addition & 1 deletion docs/ReferenceInput.md
Original file line number Diff line number Diff line change
Expand Up @@ -107,7 +107,7 @@ See the [`children`](#children) section for more details.
| `label` | Optional | `string` | - | Useful only when `ReferenceInput` is in a Filter array, the label is used as the Filter label. |
| `page` | Optional | `number` | 1 | The current page number |
| `perPage` | Optional | `number` | 25 | Number of suggestions to show |
| `queryOptions` | Optional | [`UseQueryOptions`](https://tanstack.com/query/v4/docs/reference/useQuery?from=reactQueryV3&original=https://react-query-v3.tanstack.com/reference/useQuery) | `{}` | `react-query` client options |
| `queryOptions` | Optional | [`UseQueryOptions`](https://tanstack.com/query/v3/docs/react/reference/useQuery) | `{}` | `react-query` client options |
| `sort` | Optional | `{ field: String, order: 'ASC' or 'DESC' }` | `{ field:'id', order:'DESC' }` | How to order the list of suggestions |

**Note**: `<ReferenceInput>` doesn't accept the [common input props](./Inputs.md#common-input-props) (like `label`) ; it is the responsibility of the child component to apply them.
Expand Down
4 changes: 2 additions & 2 deletions docs/ReferenceOneField.md
Original file line number Diff line number Diff line change
Expand Up @@ -61,7 +61,7 @@ const BookShow = () => (
| `children` | Optional | `Element` | - | The Field element used to render the referenced record |
| `filter` | Optional | `Object` | `{}` | Used to filter referenced records |
| `link` | Optional | `string | Function` | `edit` | Target of the link wrapping the rendered child. Set to `false` to disable the link. |
| `queryOptions` | Optional | [`UseQueryOptions`](https://tanstack.com/query/v4/docs/reference/useQuery?from=reactQueryV3&original=https://react-query-v3.tanstack.com/reference/useQuery) | `{}` | `react-query` client options |
| `queryOptions` | Optional | [`UseQueryOptions`](https://tanstack.com/query/v3/docs/react/reference/useQuery) | `{}` | `react-query` client options |
| `sort` | Optional | `{ field: String, order: 'ASC' or 'DESC' }` | `{ field: 'id', order: 'ASC' }` | Used to order referenced records |

`<ReferenceOneField>` also accepts the [common field props](./Fields.md#common-field-props), except `emptyText` (use the child `empty` prop instead).
Expand Down Expand Up @@ -122,7 +122,7 @@ You can also set the `link` prop to a string, which will be used as the link typ

## `queryOptions`

`<ReferenceOneField>` uses `react-query` to fetch the related record. You can set [any of `useQuery` options](https://react-query-v3.tanstack.com/reference/useQuery) via the the `queryOptions` prop.
`<ReferenceOneField>` uses `react-query` to fetch the related record. You can set [any of `useQuery` options](https://tanstack.com/query/v3/docs/react/reference/useQuery) via the the `queryOptions` prop.

For instance, if you want to disable the refetch on window focus for this query, you can use:

Expand Down
4 changes: 2 additions & 2 deletions docs/Upgrade.md
Original file line number Diff line number Diff line change
Expand Up @@ -665,7 +665,7 @@ To upgrade, check every instance of your code of the following hooks:

And update the calls. If you're using TypeScript, your code won't compile until you properly upgrade the calls.

These hooks are now powered by react-query, so the state argument contains way more than just `isLoading` (`reset`, `status`, `refetch`, etc.). Check the [`useQuery`](https://react-query-v3.tanstack.com/reference/useQuery) and the [`useMutation`](https://react-query-v3.tanstack.com/reference/useMutation) documentation on the react-query website for more details.
These hooks are now powered by react-query, so the state argument contains way more than just `isLoading` (`reset`, `status`, `refetch`, etc.). Check the [`useQuery`](https://tanstack.com/query/v3/docs/react/reference/useQuery) and the [`useMutation`](https://tanstack.com/query/v3/docs/react/reference/useMutation) documentation on the react-query website for more details.

### `useQuery`, `useMutation`, and `useQueryWithStore` Have Been Removed

Expand Down Expand Up @@ -981,7 +981,7 @@ const BookDetail = ({ id }) => {

In general, you should use `isLoading`. It's false as long as the data has never been loaded (whether from the dataProvider or from the cache).

The new props are actually returned by react-query's `useQuery` hook. Check [their documentation](https://react-query-v3.tanstack.com/reference/useQuery) for more information.
The new props are actually returned by react-query's `useQuery` hook. Check [their documentation](https://tanstack.com/query/v3/docs/react/reference/useQuery) for more information.


## Auth Provider
Expand Down
4 changes: 2 additions & 2 deletions docs/useGetIdentity.md
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@ Once loaded, the `data` object contains the following properties:
const { id, fullName, avatar } = data;
```

`useGetIdentity` uses [react-query's `useQuery` hook](https://react-query-v3.tanstack.com/reference/useQuery) to call the `authProvider`.
`useGetIdentity` uses [react-query's `useQuery` hook](https://tanstack.com/query/v3/docs/react/reference/useQuery) to call the `authProvider`.

## Usage

Expand All @@ -48,7 +48,7 @@ const PostDetail = ({ id }) => {

## Refreshing The Identity

If your application contains a form letting the current user update their name and/or avatar, you may want to refresh the identity after the form is submitted. As `useGetIdentity` uses [react-query's `useQuery` hook](https://react-query-v3.tanstack.com/reference/useQuery) to call the `authProvider`, you can take advantage of the `refetch` function to do so:
If your application contains a form letting the current user update their name and/or avatar, you may want to refresh the identity after the form is submitted. As `useGetIdentity` uses [react-query's `useQuery` hook](https://tanstack.com/query/v3/docs/react/reference/useQuery) to call the `authProvider`, you can take advantage of the `refetch` function to do so:

```jsx
const IdentityForm = () => {
Expand Down
4 changes: 2 additions & 2 deletions docs/useGetOne.md
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@ const { data, isLoading, error, refetch } = useGetOne(

The `meta` argument is optional. It can be anything you want to pass to the data provider, e.g. a list of fields to show in the result.

The `options` parameter is optional, and is passed to [react-query's `useQuery` hook](https://react-query-v3.tanstack.com/reference/useQuery). It may contain the following options:
The `options` parameter is optional, and is passed to [react-query's `useQuery` hook](https://tanstack.com/query/v3/docs/react/reference/useQuery). It may contain the following options:

* `cacheTime`
* `enabled`
Expand Down Expand Up @@ -49,7 +49,7 @@ The `options` parameter is optional, and is passed to [react-query's `useQuery`
* `suspense`
* `useErrorBoundary`

Check [react-query's `useQuery` hook documentation](https://react-query-v3.tanstack.com/reference/useQuery) for details on each of these options.
Check [react-query's `useQuery` hook documentation](https://tanstack.com/query/v3/docs/react/reference/useQuery) for details on each of these options.

The react-query [query key](https://react-query-v3.tanstack.com/guides/query-keys) for this hook is `[resource, 'getOne', { id: String(id), meta }]`.

Expand Down
6 changes: 3 additions & 3 deletions docs/useInfiniteGetList.md
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ This hook calls `dataProvider.getList()` when the component mounts. It returns a
</video>


It is based on react-query's [`useInfiniteQuery`](https://react-query-v3.tanstack.com/reference/useInfiniteQuery) hook.
It is based on react-query's [`useInfiniteQuery`](https://tanstack.com/query/v3/docs/react/reference/useInfiniteQuery) hook.

## Syntax

Expand Down Expand Up @@ -89,7 +89,7 @@ const LatestNews = () => {
};
```

Check [react-query's `useInfiniteQuery` documentation](https://react-query-v3.tanstack.com/reference/useInfiniteQuery) for more details and examples.
Check [react-query's `useInfiniteQuery` documentation](https://tanstack.com/query/v3/docs/react/reference/useInfiniteQuery) for more details and examples.

## `resource`

Expand Down Expand Up @@ -168,7 +168,7 @@ const { data } = useInfiniteGetList(
);
```

Additional options are passed to react-query's `useQuery` hook. Check the [react-query documentation](https://react-query-v3.tanstack.com/reference/useQuery) for more information.
Additional options are passed to react-query's `useQuery` hook. Check the [react-query documentation](https://tanstack.com/query/v3/docs/react/reference/useQuery) for more information.

## Infinite Scrolling

Expand Down
Loading