Tanstack react query

Question

In the react query v3 or less there are onSuccess onError callbacks, i used them a lot and i find them important.

const {data, isLoading} = useQuery("my_key", myFunctionThatReturnsPromise, {
 // other settings,
 onSuccess: (data) => // do something on success,
 onError: (data) => // do something on error,
})

There isn't onSuccess and onError in the new tenstack query.... How do i handle errors? Do i simply just write my own async try catch function insead of just myFunctionThatReturnsPromise.

How can i use onSuccess and onError in tenstack query :( ?

Nicholas Tower · Accepted Answer · 2023-11-08 21:27:07Z

2

The solution depends on what you were putting into those callbacks. A few examples:

Global error handling

If you want default error handling that applies to all of your queries, you should set that up just once when creating your query client. For example:

const queryClient = new QueryClient({
  queryCache: new QueryCache({
    onError: (error) => {
      console.error('Uh oh', error.message);
    }
  }),
})

If you want to modify this for individual queries, you can use the meta option to provide data on how to handle the error. For example, if you want each query to provide its own custom error message:

const queryClient = new QueryClient({
  queryCache: new QueryCache({
    onError: (error, meta) => {
      toast(meta.errorMessage);
    }
  }),
})

// elsewhere:
useQuery({
  queryKey: ['items'],
  queryFn: fetchItems,
  meta: {
    errorMessage: 'Failed to fetch items',
  },
})

Using error for rendering

If you were using the onError to set some local state, which then gets used in the render calculation, instead use the values returned by useQuery itself to drive that ui. For example:

const { data, isError } = useQuery({
  queryKey: ['items'],
  queryFn: fetchItems,
});

if (isError) {
  return <div>Uh oh, something went wrong</div>
}
// ...

Error side effects

If you're doing some side effect (eg, logging, showing a toast, navigating to a different page), put that into a useEffect.


const { data, isError } = useQuery({
  queryKey: ['items'],
  queryFn: fetchItems,
});

useEffect(() => {
  if (isError) {
    console.error('Uh oh')
    navigate(-1);
  }
}, [isError]);

Request level error handling

Sometimes you'll have error handling which is closely related to the specific request. Like maybe you want to normalize error codes, or replace a 404 with a success that returns null. This sort of handling it typically best put in the query function (myFunctionThatReturnsPromise in your example)

const myFunctionThatReturnsPromise = async () => {
  try {
    return await axios.get(/* ... */);  
  } catch (error) {
    if (error.response.status === 404) {
      return null;
    } else {
      throw error;
    }
  }
}

If you have any specific cases that you don't think fit with these categories, please feel free to mention them in the comments.

edited Nov 8, 2023 at 21:27

answered Nov 8, 2023 at 21:12

Nicholas Tower

87k10 gold badges115 silver badges127 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Nikon George Over a year ago

I always knew that i could simply make a functionality inside my: ``` const myFunctionThatReturnsPromise = async () => { try { return await axios.get(/* ... */); } catch (error) { // do something with my error } } ``` But hell, i'll miss onError onSuccess callbacks :(

TkDodo Over a year ago

what were you doing in the callbacks please?

Collectives™ on Stack Overflow

Tanstack react query

1 Answer 1

Global error handling

Using error for rendering

Error side effects

Request level error handling

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Global error handling

Using error for rendering

Error side effects

Request level error handling

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related