react-query doesn't stop retrying to fetch an API

Question

I want to implement this scenario by react-query:

My component gets an API and should try once when the client's internet was disconnected and never re-fetch if internet was reconnected... and after 3 seconds if retry was not successful, should show an error with a button for retrying the request.

const URL = 'https://randomuser.me/api/?results=5&inc=name';

const Example = () => {
  const { error, data, isLoading, refetch } = useQuery('test', () =>
    fetch(URL).then(response => response.json()).then(data => data.results), {
    refetchOnWindowFocus: false,
    refetchOnReconnect: false,
    retry: 1,
    retryDelay: 3000
  });

  if (isLoading) return <span>Loading...</span>

  if (error) return <span>Error: {error.message} <button onClick={refetch}>retry</button></span>

  return (
    <div>
      <h1>Length: {data ? console.log(data.length) : null}</h1>
      <button onClick={refetch}>Refetch</button>
    </div>
  )
}

As considering the above code, I set refetchOnReconnect: false to disable the refetch after internet was connected, retry: 1 to set once try and retryDelay: 3000 to set a limit for retrying time.

But when I use Throttling -> offline in DevTools, after clicking on button just shows the last result and doesn't show error and retry button after 3 seconds...

So, is there any way to I handle this feature?

Bourg

Answer 1

React-query is using the data in the cache, you should invalidate the query to fetch the data again by calling the function invalidateQueries:

onst URL = 'https://randomuser.me/api/?results=5&inc=name'

const Example = () => {
  // Get QueryClient from the context
  const queryClient = useQueryClient()
  const { error, data, isLoading, refetch } = useQuery(
    'test',
    () =>
      fetch(URL)
        .then(response => response.json())
        .then(data => data.results),
    {
      refetchOnWindowFocus: false,
      refetchOnReconnect: false,
      retry: 1,
      retryDelay: 3000
    }
  )

  const buttonClickHandler = () => queryClient.invalidateQueries('test') // <=== invalidate the cache

  if (isLoading) return <span>Loading...</span>

  if (error)
    return (
      <span>
        Error: {error.message} <button onClick={refetch}>retry</button>
      </span>
    )

  return (
    <div>
      <h1>Length: {data ? console.log(data.length) : null}</h1>
      <button onClick={buttonClickHandler}>Refetch</button>
    </div>
  )
}

Beaver

but with this scenario, i have to import queryClient for each pages... i think it's not the best practice and this package should handle this issue internally – Hundredweight

Answer 2

Looks like you should check staleTime or cacheTime logic. As far as I understood your problem, you are getting old data because react query doesnt know if this data new or old. Use staleTime:0 to get exactly what you want.

Mayhew