Start popup scenario
Show project info
Show react query controls

React Query mutations and error handling example

There is a list of users. These users are loaded via a fake API (checkout sources on github for more info).

That fake API implements CRUD operations with users. Moreover, read operations allow you to filter the list or even load the next page. You can add a new user or edit somebody from the list. The list will be updated with a new data and all your edits/additions will be dropped on a new release. But do not worry, I do not have a lot of releases =)

In the bottom of the page you can find a fake latency/error response configuration. These optins will be useful, if you want to test loading or error states. Just check a checkbox and try to update/filter the list. Be careful, these options use cookies! =)

And the last interesting thing — optimistic update/always invalidate data for a user edit. Try it by yourself, to understand, where is a problem with the optimistic update.

I have one case:

  • Filter the list by any status
  • Click the Edit button in any user from that list
  • Update a status of that user

If you use the always invalidate strategy — there are no any problems. But, in case of using the optimistic update strategy — you will see a bug. You can switch the strategy in the user editor.



Loading ⏱ for UserList data loading





Add user