You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: docs_headless/src/content/docs/Actions.md
+20-20Lines changed: 20 additions & 20 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -2,13 +2,13 @@
2
2
title: "Querying the API"
3
3
---
4
4
5
-
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/v5/) to call the `dataProvider` and cache the results.
5
+
Ra-core 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/v5/) to call the `dataProvider` and cache the results.
React-admin stores the `dataProvider` object in a React context, so it's available from anywhere in your application code. The `useDataProvider` hook grabs the Data Provider from that context, so you can call it directly.
11
+
Ra-core stores the `dataProvider` object in a React context, so it's available from anywhere in your application code. The `useDataProvider` hook grabs the Data Provider from that context, so you can call it directly.
12
12
13
13
As `dataProvider` methods are asynchronous, it's common to call them in a React `useEffect` (for queries) or in an event handler (for mutations).
14
14
@@ -55,7 +55,7 @@ Refer to [the `useDataProvider` hook documentation](./useDataProvider.md) for mo
55
55
56
56
## Query Hooks
57
57
58
-
React-admin provides one query hook for each of the Data Provider read 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, isPending, error }`. Query hooks are:
58
+
Ra-core provides one query hook for each of the Data Provider read 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, isPending, error }`. Query hooks are:
In addition to the `useQuery` options, react-admin query hooks also accept callbacks props in the `options` argument:
144
+
In addition to the `useQuery` options, ra-core query hooks also accept callbacks props in the `options` argument:
145
145
146
146
-`onError`
147
147
-`onSettled`
148
148
-`onSuccess`
149
149
150
150
See the [Success and Error Side Effects](#success-and-error-side-effects) below for more details.
151
151
152
-
**Tip**: In react-admin components that use the query hooks, you can override the query options using the `queryOptions` prop. For instance, to log the dataProvider calls, in the `<ListBase>` component, you can do the following:
152
+
**Tip**: In ra-core components that use the query hooks, you can override the query options using the `queryOptions` prop. For instance, to log the dataProvider calls, in the `<ListBase>` component, you can do the following:
153
153
154
154
```jsx
155
155
import { ListBase } from'ra-core';
@@ -167,7 +167,7 @@ const PostList = () => (
167
167
168
168
## Mutation Hooks
169
169
170
-
React-admin provides one mutation hook for each of the Data Provider write methods. These hooks execute the query when you call a callback. They return an array with the following items: `[mutate, { data, isPending, error }]`. `mutate` is a callback that you can call to execute the mutation.
170
+
Ra-core provides one mutation hook for each of the Data Provider write methods. These hooks execute the query when you call a callback. They return an array with the following items: `[mutate, { data, isPending, error }]`. `mutate` is a callback that you can call to execute the mutation.
In addition to the `useMutation` options, react-admin mutation hooks also accept the `mutationMode` option, letting you switch between `pessimistic` rendering, `optimistic` rendering and `undoable` modes. By default, side effect callbacks (`onSuccess`, `onError`, `onSettled`) are "pessimistic", i.e. react-admin executes them after the dataProvider responds. You can switch to "optimistic" to execute them right when the dataProvider is called, without waiting for the response.
240
+
In addition to the `useMutation` options, ra-core mutation hooks also accept the `mutationMode` option, letting you switch between `pessimistic` rendering, `optimistic` rendering and `undoable` modes. By default, side effect callbacks (`onSuccess`, `onError`, `onSettled`) are "pessimistic", i.e. ra-core executes them after the dataProvider responds. You can switch to "optimistic" to execute them right when the dataProvider is called, without waiting for the response.
See [Optimistic Rendering and Undo](#optimistic-rendering-and-undo) below for more details.
255
255
256
-
**Tip**: In react-admin components that use the mutation hooks, you can override the mutation options using the `mutationOptions` prop. This is very common when using mutation hooks like `useUpdate`, e.g. to display a notification, or redirect to another page.
256
+
**Tip**: In ra-core components that use the mutation hooks, you can override the mutation options using the `mutationOptions` prop. This is very common when using mutation hooks like `useUpdate`, e.g. to display a notification, or redirect to another page.
257
257
258
258
For instance, here is a button to approve the current comment that notifies the user of success or failure using the bottom notification banner:
259
259
@@ -293,7 +293,7 @@ All query and mutation hooks accept a `meta` key in they second argument, in add
293
293
useGetOne('books', { id, meta:/* ... */ });
294
294
```
295
295
296
-
It's the responsibility of your Data Provider to interpret this parameter. React-admin doesn't set this `meta` parameter in its queries, but you can use it in your components to pass special arguments or metadata to an API call.
296
+
It's the responsibility of your Data Provider to interpret this parameter. Ra-core doesn't set this `meta` parameter in its queries, but you can use it in your components to pass special arguments or metadata to an API call.
297
297
298
298
A common usage is to require additional information from the API. For instance, the following code fetches a book and its author in one call:
To execute some logic after a query or a mutation is complete, use the `onSuccess`, `onError` and `onSettled` options. Such logic can be showing a notification, redirecting to another page, refreshing the data, etc. React-admin uses the term "side effects" for this type of logic, as it's usually modifying another part of the UI.
309
+
To execute some logic after a query or a mutation is complete, use the `onSuccess`, `onError` and `onSettled` options. Such logic can be showing a notification, redirecting to another page, refreshing the data, etc. Ra-core uses the term "side effects" for this type of logic, as it's usually modifying another part of the UI.
310
310
311
-
**Tip**: React-admin provides the various hooks to handle the most common side effects:
311
+
**Tip**: Ra-core provides the various hooks to handle the most common side effects:
312
312
313
313
-[`useNotify`](./useNotify.md): Return a function to display a notification.
314
314
-[`useRedirect`](./useRedirect.md): Return a function to redirect the user to another page.
@@ -322,7 +322,7 @@ The `onSuccess` function is called when the query returns. It receives the query
322
322
onSuccess(data, variables, context) { /* ... */ }
323
323
```
324
324
325
-
This could be useful when you have different shapes for a resource in lists and single record views. In those cases, you might want to avoid react-admin to prefill the cache.
325
+
This could be useful when you have different shapes for a resource in lists and single record views. In those cases, you might want to avoid ra-core to prefill the cache.
326
326
327
327
```tsx
328
328
import { useGetList } from'ra-core';
@@ -407,7 +407,7 @@ const UserProfile = () => {
407
407
408
408
## `useQuery` and `useMutation`
409
409
410
-
Internally, react-admin uses [React Query](https://tanstack.com/query/v5/) to call the dataProvider. When fetching data from the dataProvider in your components, if you can't use any of the [query hooks](#query-hooks) and [mutation hooks](#mutation-hooks), you should use that library, too.
410
+
Internally, ra-core uses [React Query](https://tanstack.com/query/v5/) to call the dataProvider. When fetching data from the dataProvider in your components, if you can't use any of the [query hooks](#query-hooks) and [mutation hooks](#mutation-hooks), you should use that library, too.
411
411
412
412
It brings several benefits to [manual data fetching](#getting-the-dataprovider-instance):
413
413
@@ -424,7 +424,7 @@ React Query offers 2 main hooks to interact with the `dataProvider`:
424
424
*[`useQuery`](https://tanstack.com/query/v5/docs/react/reference/useQuery): fetches the dataProvider on mount. This is for *read* queries.
425
425
*[`useMutation`](https://tanstack.com/query/v5/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.
426
426
427
-
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.
427
+
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, ra-core uses an array of arguments as the query key.
428
428
429
429
For instance, the initial code snippet of this chapter can be rewritten with `useQuery` as follows:
430
430
@@ -620,9 +620,9 @@ But in most cases, the server returns a successful response, so the user waits f
620
620
621
621
This is called **pessimistic rendering**, as all users are forced to wait because of the (usually rare) possibility of server failure.
622
622
623
-
An alternative mode for mutations is **optimistic rendering**. The idea is to handle the calls to the `dataProvider` on the client side first (i.e. updating entities in the react-query cache), and re-render the screen immediately. The user sees the effect of their action with no delay. Then, react-admin applies the success side effects, and only after that, it triggers the call to the data provider. If the fetch ends with success, react-admin does nothing more than a refresh to grab the latest data from the server. In most cases, the user sees no difference (the data in the react-query cache and the data from the `dataProvider` are the same). If the fetch fails, react-admin shows an error notification and reverts the mutation.
623
+
An alternative mode for mutations is **optimistic rendering**. The idea is to handle the calls to the `dataProvider` on the client side first (i.e. updating entities in the react-query cache), and re-render the screen immediately. The user sees the effect of their action with no delay. Then, ra-core applies the success side effects, and only after that, it triggers the call to the data provider. If the fetch ends with success, ra-core does nothing more than a refresh to grab the latest data from the server. In most cases, the user sees no difference (the data in the react-query cache and the data from the `dataProvider` are the same). If the fetch fails, ra-core shows an error notification and reverts the mutation.
624
624
625
-
A third mutation mode is called **undoable**. It's like optimistic rendering, but with an added feature: after applying the changes and the side effects locally, react-admin*waits* for a few seconds before triggering the call to the `dataProvider`. During this delay, the end-user sees an "undo" button that, when clicked, cancels the call to the `dataProvider` and refreshes the screen.
625
+
A third mutation mode is called **undoable**. It's like optimistic rendering, but with an added feature: after applying the changes and the side effects locally, ra-core*waits* for a few seconds before triggering the call to the `dataProvider`. During this delay, the end-user sees an "undo" button that, when clicked, cancels the call to the `dataProvider` and refreshes the screen.
626
626
627
627
Here is a quick recap of the three mutation modes:
628
628
@@ -634,9 +634,9 @@ Here is a quick recap of the three mutation modes:
634
634
| cancellable | no | no | yes |
635
635
636
636
637
-
By default, react-admin uses the `undoable` mode for the Edit view. As for the data provider method hooks, they default to the `pessimistic` mode.
637
+
By default, ra-core uses the `undoable` mode for the Edit view. As for the data provider method hooks, they default to the `pessimistic` mode.
638
638
639
-
**Tip**: For the Create view, react-admin needs to wait for the response to know the id of the resource to redirect to, so the mutation mode is pessimistic.
639
+
**Tip**: For the Create view, ra-core needs to wait for the response to know the id of the resource to redirect to, so the mutation mode is pessimistic.
640
640
641
641
You can benefit from optimistic and undoable modes when you call the `useUpdate` hook, too. You just need to pass a `mutationMode` option:
Data Provider method hooks are "the react-admin way" to query the API. But nothing prevents you from using `fetch` if you want. For instance, when you don't want to add some routing logic to the data provider for an RPC method on your API, that makes perfect sense.
734
+
Data Provider method hooks are "the ra-core way" to query the API. But nothing prevents you from using `fetch` if you want. For instance, when you don't want to add some routing logic to the data provider for an RPC method on your API, that makes perfect sense.
735
735
736
-
There is no special react-admin sauce in that case. Here is an example implementation of calling `fetch` in a component:
736
+
There is no special ra-core sauce in that case. Here is an example implementation of calling `fetch` in a component:
0 commit comments