Skip to content

Commit a6edd1d

Browse files
committed
Update <Edit> documentation
1 parent 7a4c47d commit a6edd1d

File tree

1 file changed

+30
-0
lines changed

1 file changed

+30
-0
lines changed

docs/Edit.md

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -76,6 +76,7 @@ You can customize the `<Edit>` component using the following props:
7676
| `id` | Optional | `string`/`number` | - | The id of the record to edit |
7777
| `mutationMode` | Optional | `'undoable' \| 'optimistic' \| 'pessimistic'` | `'undoable'` | Switch to optimistic or pessimistic mutations |
7878
| `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
7980
| `queryOptions` | Optional | `object` | - | Options for the `dataProvider.getOne()` call |
8081
| `redirect` | Optional | `'list' \| 'show' \| false \| function` | `'list'` | Change the redirect location after successful update |
8182
| `resource` | Optional | `string` | - | Override the name of the resource to edit |
@@ -539,6 +540,35 @@ The default `onError` function is:
539540

540541
**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.
541542

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+
export const PostEdit = () => (
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+
export const PostEdit = () => (
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+
542572
## `queryOptions`
543573

544574
`<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

Comments
 (0)