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?
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>
)
}