Update documentation for react-query v5 #9481
Conversation
|
We need to mention the change in |
|
We also need to mention calltime vs definition time side effects |
|
The minimal version for mui is now 5.14.18, it could be mentioned in the upgrade guide |
There was a problem hiding this comment.
In the "Query Options" sections, we now need to explain the syntax of onSuccess, onError, and onSettled since the react-query doc doesn't mention them anymore
|
All the controllers and contexts have changed, too |
|
There are many more instances of |
djhi
force-pushed
the
react-query-v5-doc
branch
from
b94b7d5 to
a5a23cc
Compare
I forgot to revert that change in the #9473 PR. Will do so now |
|
I think we should still use the name "React Query" when referring to TanStack's React Query. |
docs/Actions.md
Outdated
| }; | ||
| ``` | ||
|
|
||
| ## 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://tanstack.com/query/v3/docs/react/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/v5/docs/react/reference/useQuery): |
There was a problem hiding this comment.
There are many options, all documented in the react-query documentation:
This is not true for the onXXX methods, so I think we should extract their explanation
Also, we already have a section called "Success and Error Side Effects", perhaps we should reorganize this chapter?
docs/Actions.md
Outdated
| 'users', | ||
| { id: record.id }, | ||
| { onSettled: (data, error) => console.log(data, error) } | ||
| ); | ||
| if (isLoading) { return <Loading />; } | ||
| if (isPending) { return <Loading />; } | ||
| if (error) { return <p>ERROR</p>; } | ||
| return <div>User {data.username}</div>; | ||
| }; | ||
| ``` | ||
|
|
||
| We won't re-explain all these options here, but we'll focus on the most useful ones in react-admin. |
There was a problem hiding this comment.
This sentence feels misplaced in the new doc
docs/Actions.md
Outdated
| - `onSuccess(data, variables, context)`: The `onSuccess` function is called when the query returns. It receives the query data, the [query variables](https://tanstack.com/query/latest/docs/react/guides/query-functions#query-function-variables) and the [query context](https://tanstack.com/query/latest/docs/react/guides/query-functions#queryfunctioncontext). | ||
|
|
||
| - `onError(error, variables, context)`: The `onSuccess` function is called when the query fails. It receives the error, the [query variables](https://tanstack.com/query/latest/docs/react/guides/query-functions#query-function-variables) and the [query context](https://tanstack.com/query/latest/docs/react/guides/query-functions#queryfunctioncontext). | ||
|
|
||
| - `onSettled(data, error, variables, context)`: The `onSuccess` function is called after the query either succeeded or failed. It receives the query data (can be `undefined` if the query failed), the error (can be `undefined` when the query succeeded), the [query variables](https://tanstack.com/query/latest/docs/react/guides/query-functions#query-function-variables) and the [query context](https://tanstack.com/query/latest/docs/react/guides/query-functions#queryfunctioncontext). |
There was a problem hiding this comment.
I think we should add an example usage for each of these, with real use cases (e.g. notification, cache invalidation, etc)
docs/useListContext.md
Outdated
| isPending, // boolean that is true until the data is fetched for the first time | ||
| isPending, // boolean that is true until the data is available for the first time |
docs/useListContext.md
Outdated
| const { data, isPending } = useListContext(); | ||
| const { data, isPending } = useListContext(); | ||
| if (isPending) return null; | ||
| if (isPending) return null; |
Co-authored-by: Jean-Baptiste Kaiser <jb@marmelab.com>
Co-authored-by: Gildas Garcia <1122076+djhi@users.noreply.github.com>
No description provided.