Can I handle mutate error inside global <SWRConfig /> onError?

[littlee]

I find that when mutation throws an Error, it won't throw to global onError callback.

mutate('api', () => { throw Error('Api Failed') })


<SWRConfig value={{
  onError: (err) => {
    alert('error' + err.message);
  }
}} />

but I don't want to write another function to globally handle mutation error, any suggestion?

[shuding]

It seems that you are using the global mutate, and it unfortunately can't access the config because the SWRConfig is React context based. Maybe you can create a helper function which wraps mutate, so you can re-use the error handler?

[demosofa]

why is mutate from the useSWRConfig couldn't use the config from SWRConfig. Why didn't you use the useContext so that mutate could access the global config. I'm just curios when you said SWRConfig was React Context

[disazoz]

Seems like onError handler not working for { mutate } = useSWRConfig() and useSWRMutation.

import useSWR, { useSWRConfig } from 'swr';
import { SWRConfig } from 'swr';

function App() {
  return (
    <SWRConfig value={{
      onError: (error, key) => { console.log(`onError: ${error}`) }
    }}>
      <TestFetch />
      <TestMumate />
    </SWRConfig>

  )
}

export default App

function TestFetch() {
  const fetchTest = useSWR('test1', () => { throw Error('TestFetch')})
  return;
}

function TestMumate() {
  const { mutate } = useSWRConfig()

  const handleMutate = () => {
    mutate('test2', () => { throw Error('TestMumate')})
  };

  return <button onClick={handleMutate}>mutate</button>
}

What I'm doing wrong?

[eseQ]

Any updates?