Is there a way to stop my API refetch "refetchInterval" once the API is failed due to 404 or other reason

[JSDUNIYA]

Basically I am trying use "isError " property to stop refetch query when error occurs. below is the code sample I'm trying but it is not working.

const { isError, isLoading } = useQuery(
['MakeSureColorIsOrange', url],
fetchColorCheckApi,
{
refetchInterval: 1
enabled: !!isError, // this is not working
}
)

Note : I also tried to use react useState to track its status but that also didn't work as expected.

please let me know if you have any thoughts on this.

[TkDodo]

refetchInterval can be a function:

refetchInterval: (data, query) => // return number | false for dynamic interval here

[matowang]

Here's a simple util function to implement it.

export const refetchWhileSuccess =
  (options: { refetchIntervalSeconds?: number } = {}) =>
  (query: {
    state: {
      status: "pending" | "success" | "error";
    };
  }): number | false => {
    const _interval = options.refetchIntervalSeconds ?? 1000;
    return query.state.status === "error" ? false : _interval;
  };
  
// query options
refetchInterval: refetchWhileSuccess({
    refetchIntervalSeconds: 1000,
}),