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 Add support for mutationMode in useCreate #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)

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 click the ?mutationMode=optimistic link first.
• Follow the same steps but click the ?mutationMode=undoable link 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.

Additional Checks

• 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)
• The documentation is up to date

Also, please make sure to read the contributing guidelines.

[djhi]

Because react-query now persist queries and mutations for offline mode, the previous test now leaks into the second (e.g. this post has its title changed to Lorem Ipsum). I tried to configure testIsolation in Cypress but our version is probably too old

[djhi]

Those linter warnings make no sense

[slax57]

Fixed: it just needed a rebase 😊

[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!