Mutations - unified error handling & retries

[Izhaki]

SWR offers fantastic abstractions when it comes to data fetching. However, there seem to have been a deliberated design decision to exclude some of the abstractions when it comes to mutations.

Rationale

We would like to use the same API/abstractions for both queries and mutations.

Use case

Consider a user profile page, that has a checkbox:

[ ] Email me marketing updates

• The value of this checkbox is already included in the payload of the page (so no need to fetch it at any point). In other words, there is some initial data regarding this value.
• When the user clicks the checkbox, we want to send a mutation to the backend.
• If the user is offline (or the target endpoint is down), we would like to show a Toast (global onError configuration) and retry.

With the current API, we can use trigger alright, but would need to do the retries ourselves...

Issues

mutate does not handle errors if the remote mutation fails

  const { data, mutate } = useSWR("/whatever", null, {
    onError: (err, key, config) => {
      console.log("onError");
    },
  });

  // Won't invoke `onError`
  mutate(Promise.reject("Error"));

I guess this is because onError is already used for throws from the fetcher?

trigger does

This does work with useSWRMutation:

  const { trigger } = useSWRMutation(
    "/whatever",
    () => Promise.reject("Error"),
    {
      onError: (err, key, config) => {
        console.log("Error");
      }
    }
  );


  // Will invoke `onError`
  trigger();

Neither mutate nor trigger support retries

Title says it all.

mutate supports fallbackData but trigger doesn't

You could overcome this with React.useState, but it is tempting to use data as a state variable.

You can provide fallbackData with mutate, but not with trigger - you have to wait for the mutation to fire before data is populated.

Current support

• query
  • ✅ onError
  • ✅ retries
  • ✅ fallbackData
• mutate (for remote mutation failures)
  • ❌ onError
  • ❌ retries
  • ✅ fallbackData
• trigger
  • ✅ onError
  • ❌ retries
  • ❌ fallbackData