CODEWITHSUNDEEP
javascriptreact-querytanstackreact-query
Victor Zhuravlev
Victor Zhuravlev

Reputation: 23

Make react-query useMutation to handle an Error

There's a strange issue which I don't undrestand - react-query's useMutation doesn't handle an error while @tanstack/react-query's does.

A Sandbox

import { useState } from "react";
import {
  useQuery,
  useMutation,
  useQueryClient,
  QueryClient,
  QueryClientProvider,
} from 'react-query'
// import {
//   useQuery,
//   useMutation,
//   useQueryClient,
//   QueryClient,
//   QueryClientProvider,
// } from '@tanstack/react-query'

import axios from 'axios';

const postTodo = () => axios('https://ya.ru')

const ToDos = () => {
  const { mutate,isError } = useMutation({
    mutationFn: postTodo,
    onSuccess: () => {
      // Invalidate and refetch
      return true
    },
    onError: () => {
      throw new Error('this!')
    }
  })

  console.log(isError)

  return (
    <>
    <button onClick={mutate}>Mutate me!</button>
    {isError ? 'Error' : 'No Error'}
    </>
  )
}

// Create a client
const queryClient = new QueryClient()

export default function App() {

  return (
    <QueryClientProvider client={queryClient}>
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
      <ToDos />
    </div>
    </QueryClientProvider>
  );
}

In short what I want is to see an 'Error' when I press 'Mutate me', as it is when i use useMutation from @tanstack/react-query, but useMutation from react-query just throws an error and the execution breaks. I have to use react-query, not @tannstack/react-query on my project.

I tried throwOnError, but it doesn't work there

Upvotes: 0

Views: 406

Answers (1)

Sen Lin
Sen Lin

Reputation: 448

Removing throw new Error('this!') will solve the problem. Throwing an error there prevents react-query from managing the error state. I think @tanstack/react-query has an internal mechanism to catch such errors into its state management system

Upvotes: 0

Related Questions