How to cancel polling on Button click

[pdhruv93]

I have logic to stop the polling from within the query
refetchInterval: (data) => data?.status_code === 'SUCCESS' ? false : 5000

But how to stop the polling in some other component when a Button is clicked. I tried this
queryClient.cancelQueries({ queryKey: ['runStatus'] })
but somehow the polling still continues.

[Lisba]

@pdhruv93 Did you try using a shared state between the cancel button component and the one executing the polling? That is, adding that shared value to your condition:

(data) => {
  if(data?.status_code === 'SUCCESS' || sharedValue) {
    return false
  }
  return 1000 * 5
}

Nonetheless this would make your refetchInterval callback an impure function stopping the polling based on an external value not present into your data object, so you can use the meta option to pass that sharedValue and extract it from inside your refetchInterval callback through the query object that is the second parameter received by your refetchInterval callback:

(data, query) => {
  if(data?.status_code === 'SUCCESS' || query.options.meta.sharedValue) {
    return false
  }
  return 1000 * 5
}

[pdhruv93]

Yes, setting enabled prop of react-query through some shared state worked.