fascinating-indigo

Query & Mutation Error Handling with Notifications/Toasts

Hi all. I've been away from Tanstack Query ( read - last used v4 ) and I'm just looking to handle errors the best recommended way. I'm reading up on throwing up notifications. ( MUI Toolpads Notification API ) is being used as the display API on the client and I've got to use translated errors ( i18n ). I would use the query-cache-callbacks but the MUI API is a component based hook. So any info or pointers would help, Cheers from Croatia!

6 Replies

front-crimson•8mo ago

Maybe something like:

const [error, setError] = useState<Error | null>(null)

const [queryClient] = useState(() => new QueryClient({
  queryCache: new QueryCache({
    onError: (error): void => {
      setError(error)
    }
  })
}))

return (
  ...
  
  <Snackbar
    open={Boolean(error)}
    autoHideDuration={6000}
    message={error.message}
    onClose={(): void => {
      setError(null)
    ]}
  />
)

const [error, setError] = useState<Error | null>(null)

const [queryClient] = useState(() => new QueryClient({
  queryCache: new QueryCache({
    onError: (error): void => {
      setError(error)
    }
  })
}))

return (
  ...
  
  <Snackbar
    open={Boolean(error)}
    autoHideDuration={6000}
    message={error.message}
    onClose={(): void => {
      setError(null)
    ]}
  />
)

Haven't used MUI so not sure where the toast would need to go, but with a stable queryClient in your main application file should work

front-crimson•8mo ago

Seems like they're in the process of making toasting easier on you too? https://mui.com/material-ui/react-snackbar/?srsltid=AfmBOop3SBHPfCeoucLDFDAJHR3q_wksWQl01AjwZaCD0G0iUqBBcaio#experimental-apis-toolpad

React Snackbar component - Material UI

Snackbars (also known as toasts) are used for brief notifications of processes that have been or will be performed.

front-crimson•8mo ago

Using the hook:

const notifications = useNotifications()
const [queryClient] = useState(() => new QueryClient({
  queryCache: new QueryCache({
    onError: (error): void => {
      notifications.show(error.message, {
        severity: 'error',
        autoHideDuration: 3000,
      })
    }
  })
}))

const notifications = useNotifications()
const [queryClient] = useState(() => new QueryClient({
  queryCache: new QueryCache({
    onError: (error): void => {
      notifications.show(error.message, {
        severity: 'error',
        autoHideDuration: 3000,
      })
    }
  })
}))

fascinating-indigoOP•8mo ago

Hey @troywoy . Yeah the useNotifications are already used in the codebase in some places ( still have to replace some of the API notifications from the old Snackbars ). It's just a bit of a drag that onSuccess and onError were removed from the query. I understand it's a pitfall for bugs but still would love me a signal to pop that notification up 😄

front-crimson•8mo ago

The example is effectively the same, but Dominik always has good write ups on topics like this (in case you haven’t read it before) https://tkdodo.eu/blog/react-query-error-handling

React Query Error Handling

After covering the sunshine cases of data fetching, it's time to look at situations where things don't go as planned and "Something went wrong..."

passive-yellow•8mo ago

m doing like this .. in my app

Gaming

Programming

Query & Mutation Error Handling with Notifications/Toasts

Did you find this page helpful?