How to disable refetch under certain conditions?

[TasukuUno]

Hi! I want to disable refetch under certain conditions.
In example below, I want to call getRandom() per 300 ms and disable when data is 3.

Is there any good API for this use case?
Or, should I use useState() and useEffect() to manage whether it is enabled?

async function getRandom() {
  return Math.random() * 10 | 0
}

const Component = () => {
  const { data } = useQuery('random', getRandom, {
    refetchInterval: 300,

    // I want to disable refetching when data is 3...
    // something like that?
    enabled: data => data !== 3
  })

  return (
    <span>{ data }</span>
  );
};

[TkDodo]

enabled is just a flag, it doesn’t take a function. I don’t think you can make a query dependent on itself like that. You could add a useEffect that sets a boolean state variable, and you enable/disable your query depending on that.

[tannerlinsley]

Precisely, you’ll need to control the boolean with your own state.

[TasukuUno]

OK, then I'll control it like this!! Thanks!!

const Component = () => {
  const [ enabled, setEnabled ] = useState(true);
  const { data } = useQuery('random', getRandom, {
    refetchInterval: 300,
    enabled: enabled,
  });
  
  useEffect(() => {
    if (data === 3) {
      setEnabled(false)
    }
  }, [ data ])

  return (
    <span>{ data }</span>
  );
};