React Query Retry explained

What is React Query

React query or as it is now called Tanstack Query is a library that helps you fetch, cache and update data in your React applications. It's a great tool to completely replace your fetching and state management / caching logic and separating your state into, remote, app and local as advised by my guide on The Three States of React

What is retry in React Query

retry is an option that you can pass into your react query that will basically tell it to retry fetching the data if it fails.
You can control it further by passing either a number of times for it to retry(default is 3), telling it to retry indefinitely (not advised unless you have a very specific use case) or passing a callback that will allow you to write your own logic when and how to retry or what to do on a retry.

to sum it up:

• retry = false will disable retrying
• retry = number will retry that number of times e.g retry = 5 will retry 5 times
• retry = true will retry indefinitely again only do this if you are sure you want to retry indefinitely
• retry = (failureCount, error) => boolean will allow you to write your own logic and give you access to the number of times it has failed and the error that caused the failure.

How to use retry in React Query

It's perfectly simple and straightforward to use retry in React Query. You just need to pass it as an option to your query like so:

const data = useQuery(['someKey'], fetchData, {
  retry: 5
})

That's a very simple and basic example right and you can kinda see how you can use the rest of the options stated above in here, so I won't waste your time with more examples.

I will however show you some cool stuff you can do with this.

Cool stuff you can do with retry in React Query

Show a toast on failure

You can use the retry callback to show a toast on failure like so:

const data = useQuery(['someKey'], fetchData, {
  retry: (failureCount, error) => {
    toast.error(`Failed to fetch data: ${error.message}`)
    return failureCount < 5
  }
})

Implement exponential backoff

Exponential backoff is a technique that will increase the time between retries exponentially. This is a great way to reduce the load on your server and make your app more resilient to network failures. You can implement it like so:

const data = useQuery(['someKey'], fetchData, {
  retry: (failureCount, error) => {
    const retryDelay = Math.min(1000 * 2 ** failureCount, 30000)
    setTimeout(() => {
      queryClient.invalidateQueries('someKey')
    }, retryDelay)
    return failureCount < 5
  }
})

Implement custom logging or error handling

You can also use the retry callback to implement custom logging or error handling like so:

const data = useQuery(['someKey'], fetchData, {
  retry: (failureCount, error) => {
    Logger.log(
      `${date}: Failed to fetch data, ERROR: ${error.message}`
    )
    console.error(`Failed to fetch data: ${error.message}`)
    return failureCount < 5
  }
})

Implement a custom retry strategy

Let's say that you know that your server is going to be down for maintenance every so often and during that time it will return a 503(service unavailable) error. You can implement a custom retry strategy like so:

const data = useQuery(['someKey'], fetchData, {
  retry: (failureCount, error) => {
    if (error.status === 503) {
      return false
    }
    return failureCount < 5
  }
})

The above code will retry 5 times unless the error is a 503 in which case it will stop retrying. You could even hook this up to a toast or a notification to let the user know that the server is down for maintenance.

Conclusion

retry is a simple yet very powerful option in React Query/Tanstack Query that can make your app more resilient to network failures and give you far more control over your fetching logic than you would have with a simple fetch or axios call. I hope this article has given you some ideas on how to use it in your own projects.