Add support for offline/local first applications

[djhi]

Problem

React-admin currently don't handle well the loss of network connectivity: in any demo, if you go to a list page, then simulate being offline using the devtool and try to go to the second page of the same list, it will still display the first page data while the pagination will indeed indicate you are on page 2.

We handled it a bit better by at least showing users a notification when they try to load new data while offline but we can do better and allow for resumable mutations.

Solution

• Needs #10530
• Make sure the ListContext include the isPaused and isPlaceholderData props from react-query and update components/hooks accordingly
• Show the empty component when those two props are true (ideally we should have a dedicated component for that or handle the case in the default empty but this is achievable in userland)
• Add a mutationKey to all mutations so that we can provide default functions for them at the queryClient level (required by react-query: https://tanstack.com/query/latest/docs/framework/react/guides/mutations#persisting-offline-mutations)
• Make the simple example work offline (no pwa yet though)
• [x] Add an offline prop to reference fields components
• [x] Add an offline prop to list components
• [x] Add an offline prop to show and edit views
• [x] Add an offline prop to refenrenc inputs components
• [x] Update documentation

Screenshots

Edit view

Show view

DataTable (same for all list child components

How To Test

• Open the simple example
• Use the browser devtool to go offline
• Click the posts create button and fill it
• Go back to the posts list after and notice the new item is there
• Open the devtool and note there is no create call to the dataProvider
• Use the browser devtool to go online
• Open the devtool and note there is a create call to the dataProvider

Then:

• Follow the same steps but select the optimistic option in the form toolbar first.
• Follow the same steps but click the undoable option in the form toolbar first.
• Follow the same steps but edit a record instead of creating it.
• Follow the same steps for both edit and create but enter f00bar as the post title to trigger an error once the network is online.

In stories for list components, reference components and detail views, simply switch to offline and hit the storybook refresh button

Additional Checks

• [x] The PR targets master for a bugfix, or next for a feature
• [ ] The PR includes unit tests (if not possible, describe why)
• [ ] The PR includes one or several stories (if not possible, describe why)
• [x] The documentation is up to date

Also, please make sure to read the contributing guidelines.

[djhi]

I can't see a way to test this except e2e. Not sure if we can simulate network loss with cypress though

[slax57]

@djhi since the simple demo has the react-query DevTools enabled, you can use them to simulate network loss I believe (clicking on the 'Wifi' icon does the job). A bit ugly but it should work!

[djhi]

I think the change of the ListContext shape affects more components; e.g. useListContextWithProps.

That's the only one left AFAIK

[fzaninotto]

When going offline, I don't understand why I can't go to the detail view of a post when I've already seen it in the list view. The getList populates the cache, right?

[fzaninotto]

The 'how to test' instructions must be updated, as the tester must select the optimistic mutation mode before submitting the form.

[fzaninotto]

When doing an optimistic offline mutation, the loader in the app bar keeps spinning forever even tough the optimistic update is already applied. Is it a good UI? Instead, I think we should have a way to mention the pending updates, e.g. using a badge on the loader icon.

[djhi]

When doing an optimistic offline mutation, the loader in the app bar keeps spinning forever even tough the optimistic update is already applied. Is it a good UI? Instead, I think we should have a way to mention the pending updates, e.g. using a badge on the loader icon.

The loading indicator now has a badge when users are offline and there are pending mutations. This badge also has a tooltip that explains it.