Query keeps retrying despite 'enabled' set to false after first error

[asliwinski]

Describe the bug
I want to set up my query so that it retries infinitely unless it receives a particular type of error, such as 404 or 401, at which point it should stop immediately (basically retry only when the error is network related). I couldn't find a way to do it with React Query API (is there any?), but I figured I can provide a callback setting enabled to false to my fetch wrapper and call it when such an error occurs.

To Reproduce
Run the following code:

async function fetchItems(onError) {
  return fetch("https://pokeapi.co/api/v2/404").then(async (response) => {
    if (response.ok) {
      return await response.json();
    } else {
      if (response.status === 404) onError();
      throw new Error(response.statusText);
    }
  });
}

export default function App() {
  const [isEnabled, setIsEnabled] = useState(true);
  const { data } = useQuery(
    "data",
    () => fetchItems(() => setIsEnabled(false)),
    {
      enabled: isEnabled,
      retry: true
    }
  );

  return <div>{data}</div>;
}

Observe that the query is being called more than once.

Expected behavior
Stop retrying as soon as enabled becomes false.

Additional context
Sandbox

[TkDodo]

According to the docs: https://react-query.tanstack.com/docs/guides/query-retries

retry can also be a function: (failureCount, error) => ... for this exact use case - so that you can react on specific errors and then continue to retry or abort retries.

[asliwinski]

@TkDodo Thanks, I missed that, it solves my problem indeed! However, I think the behavior described is an issue anyway.

[TkDodo]

hmm, I don't think so. while retrying, you are never really exiting react-queries "inner fetching" loop / logic. You query is always in loading / fetching state - it will only transition to success / error if all the retries have been made. So I don't think we can expect that a callback that triggers some state will somehow "interrupt" an ongoing retry cycle. That's what the retry function is for - that is essentially the callback you are seeking.

Even the below code would work, but I would not advise that. It basically sets a state value as side-effect and then does retry depending on it 🙃

  const [isEnabled, setIsEnabled] = useState(true);
  const { data } = useQuery(
    "data",
    () => fetchItems(() => setIsEnabled(false)),
    {
      retry: () => !isEnabled
    }
  );

but it works because we now use the retry function.

So I'm gonna close this for now.

[powah]

@TkDodo doesn't look like this code is working either. Tried retry: () => isEnabled and retry: isEnabled

[TkDodo]

right, because if we use isEnabled from the closure, we still wouldn't see it in the retry function probably. my bad. seems like the error that you throw from the fetchFn needs to contain all the information needed calculate retries.

[powah]

but why retry: isEnabled doesn't work? Can't query config change? enabled works fine in this way.

My use case is the following: multiple queries are fetched periodically but when some expensive operation needs to be run all queries must be disabled to save resources. So I have Redux state variable for that const enabled = useSelector(selectHeartbeatsEnabled); - if it's true - all queries work, if it's false - no endpoint should be called / retried. I think this is a quite common use case. And enabled imo should enable/disable query including retry logic.

[iPwnPancakes]

If you got here from google like I did:

I was trying to implement controlled indefinite retries in a hook like so:

const useCr3000InfoFetch = (keypad: Keypad, csrfToken: string, open: boolean = false) => {
    const getKeypadDimensionInfo = () =>
        fetch(`/keypad/cr3/info/${keypad.id}`, { headers: { 'X-CSRF-TOKEN': csrfToken } })
            .then(res => res.json());
    
    const { data, failureCount } = useQuery({
        queryKey: ['cr3000Info', keypad.id],
        queryFn: getKeypadDimensionInfo,
        enabled: open,
        retryDelay: 1000,
        retry: open, // Retry indefinitely while open is true
    });
    
    // ...
    
    return { data, retryCount: failureCount };
}; 

I figured the retry key would be reactive without having to do anything else, but it's not.
I had to include it in the queryKey like so:

const useCr3000InfoFetch = (keypad: Keypad, csrfToken: string, open: boolean = false) => {
    const getKeypadDimensionInfo = () =>
        fetch(`/keypad/cr3/info/${keypad.id}`, { headers: { 'X-CSRF-TOKEN': csrfToken } })
            .then(res => res.json());

    const { data, failureCount } = useQuery({
        queryKey: ['cr3000Info', keypad.id, open], // added open to queryKey
        queryFn: getKeypadDimensionInfo,
        enabled: open,
        retryDelay: 1000,
        retry: open,
    });

    // ...

    return { data, retryCount: failureCount };
};

Sorry for reviving a super old post, but this is where I landed from google. Figure I might try and save someone else some time.