Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/TanStack/query/llms.txt

Use this file to discover all available pages before exploring further.

​
useQueryErrorResetBoundary

The useQueryErrorResetBoundary hook provides access to the nearest QueryErrorResetBoundary context. It returns methods to reset queries and manage error boundary state.

​
Import

import { useQueryErrorResetBoundary } from '@tanstack/react-query'

​
Signature

function useQueryErrorResetBoundary(): QueryErrorResetBoundaryValue

​
Returns

​
reset
() => void
Call this function to reset all queries within the boundary and trigger error boundary reset
​
clearReset
() => void
Manually clear the reset flag (usually handled automatically)
​
isReset
() => boolean
Check if the boundary is currently in reset state

​
Examples

​
Basic Usage

import { useQueryErrorResetBoundary } from '@tanstack/react-query'
import { ErrorBoundary } from 'react-error-boundary'

function ErrorFallback({ error, resetErrorBoundary }) {
  const { reset } = useQueryErrorResetBoundary()

  return (
    <div role="alert">
      <p>Something went wrong:</p>
      <pre>{error.message}</pre>
      <button
        onClick={() => {
          // Reset queries and error boundary
          reset()
          resetErrorBoundary()
        }}
      >
        Try again
      </button>
    </div>
  )
}

function App() {
  return (
    <QueryErrorResetBoundary>
      <ErrorBoundary FallbackComponent={ErrorFallback}>
        <Page />
      </ErrorBoundary>
    </QueryErrorResetBoundary>
  )
}

​
Custom Retry Button

import { useQueryErrorResetBoundary } from '@tanstack/react-query'

function RetryButton() {
  const { reset } = useQueryErrorResetBoundary()

  return (
    <button onClick={reset}>
      Retry Failed Queries
    </button>
  )
}

​
Checking Reset State

import { useQueryErrorResetBoundary } from '@tanstack/react-query'

function Component() {
  const { reset, isReset } = useQueryErrorResetBoundary()

  const handleRetry = () => {
    if (isReset()) {
      console.log('Already resetting')
      return
    }
    reset()
  }

  return <button onClick={handleRetry}>Retry</button>
}

​
With Loading State

import { useState } from 'react'
import { useQueryErrorResetBoundary } from '@tanstack/react-query'

function ErrorFallback({ error, resetErrorBoundary }) {
  const { reset } = useQueryErrorResetBoundary()
  const [isRetrying, setIsRetrying] = useState(false)

  const handleRetry = async () => {
    setIsRetrying(true)
    reset()
    resetErrorBoundary()
    // Reset will clear when queries retry
  }

  return (
    <div>
      <p>Error: {error.message}</p>
      <button onClick={handleRetry} disabled={isRetrying}>
        {isRetrying ? 'Retrying...' : 'Retry'}
      </button>
    </div>
  )
}

​
Multiple Reset Actions

import { useQueryErrorResetBoundary } from '@tanstack/react-query'
import { useQueryClient } from '@tanstack/react-query'

function ErrorFallback({ error, resetErrorBoundary }) {
  const { reset } = useQueryErrorResetBoundary()
  const queryClient = useQueryClient()

  const handleRetry = () => {
    reset()
    resetErrorBoundary()
  }

  const handleClearAndRetry = () => {
    // Clear all caches and retry
    queryClient.clear()
    reset()
    resetErrorBoundary()
  }

  return (
    <div>
      <p>Error: {error.message}</p>
      <button onClick={handleRetry}>Retry</button>
      <button onClick={handleClearAndRetry}>Clear Cache & Retry</button>
    </div>
  )
}

​
Conditional Reset

import { useQueryErrorResetBoundary } from '@tanstack/react-query'

function ErrorFallback({ error, resetErrorBoundary }) {
  const { reset } = useQueryErrorResetBoundary()

  const handleRetry = () => {
    if (error.message.includes('network')) {
      // Only reset for network errors
      reset()
      resetErrorBoundary()
    } else {
      // For other errors, just reset the boundary
      resetErrorBoundary()
    }
  }

  return (
    <div>
      <p>Error: {error.message}</p>
      <button onClick={handleRetry}>Retry</button>
    </div>
  )
}

​
Notes

  • Must be used within a QueryErrorResetBoundary component
  • The reset() function triggers all queries within the boundary to retry
  • Commonly used in Error Boundary fallback components
  • The reset state is automatically cleared after queries have retried
  • Can be called multiple times safely
  • Works with nested boundaries - only affects queries within the nearest boundary

Build docs developers (and LLMs) love

Get started for freeTalk to us