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/Edit.md
+30Lines changed: 30 additions & 0 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -76,6 +76,7 @@ You can customize the `<Edit>` component using the following props:
76
76
|`id`| Optional |`string`/`number`| - | The id of the record to edit |
77
77
|`mutationMode`| Optional |`'undoable' \| 'optimistic' \| 'pessimistic'`|`'undoable'`| Switch to optimistic or pessimistic mutations |
78
78
|`mutationOptions`| Optional |`object`| - | Options for the `dataProvider.update()` call |
79
+
| `offline` | Optional | `ReactNode` | | The component to render when there is no connectivity and the record isn't in the cache
79
80
|`queryOptions`| Optional |`object`| - | Options for the `dataProvider.getOne()` call |
80
81
|`redirect`| Optional |`'list' \| 'show' \| false \| function`|`'list'`| Change the redirect location after successful update |
81
82
|`resource`| Optional |`string`| - | Override the name of the resource to edit |
@@ -539,6 +540,35 @@ The default `onError` function is:
539
540
540
541
**Tip**: If you want to have different failure side effects based on the button clicked by the user, you can set the `mutationOptions` prop on the `<SaveButton>` component, too.
541
542
543
+
## `offline`
544
+
545
+
By default, `<EditBase>` renders nothing when there is no connectivity and the record hasn't been cached yet. You can provide your own component via the `offline` prop:
546
+
547
+
```jsx
548
+
import { Edit } from'react-admin';
549
+
550
+
exportconstPostEdit= () => (
551
+
<Edit offline={<p>No network. Could not load the post.</p>}>
552
+
...
553
+
</Edit>
554
+
);
555
+
```
556
+
557
+
**Tip**: If the record is in the Tanstack Query cache but you want to warn the user that they may see an outdated version, you can use the `<IsOffline>` component:
558
+
559
+
```jsx
560
+
import { Edit, IsOffline } from'react-admin';
561
+
562
+
exportconstPostEdit= () => (
563
+
<Edit offline={<p>No network. Could not load the post.</p>}>
564
+
<IsOffline>
565
+
No network. The post data may be outdated.
566
+
</IsOffline>
567
+
...
568
+
</Edit>
569
+
);
570
+
```
571
+
542
572
## `queryOptions`
543
573
544
574
`<Edit>` calls `dataProvider.getOne()` on mount via react-query's `useQuery` hook. You can customize the options you pass to this hook by setting the `queryOptions` prop.
0 commit comments