Cancel query when query value reaches to 0
Im making a query that returns me a set of values and that value with decrease over time till it reaches 0. I need to fetch every 100ms the query but I want to be able to cancel the query when outdatedObjects reaches 0.
const useDeviceStatus = (options?: UseQueryOptions<any, AxiosError>) => {
const queryData = useQuery(
'device',
async () => {
const { data } = await Axios.get<Device[]>('/system/status/info')
return data
},
{
enabled: true,
keepPreviousData: true,
refetchOnWindowFocus: false,
staleTime: Infinity,
refetchInterval: 100,
...options
}
)
return queryData
}
export default useDeviceStatus
const useDeviceStatus = (options?: UseQueryOptions<any, AxiosError>) => {
const queryData = useQuery(
'device',
async () => {
const { data } = await Axios.get<Device[]>('/system/status/info')
return data
},
{
enabled: true,
keepPreviousData: true,
refetchOnWindowFocus: false,
staleTime: Infinity,
refetchInterval: 100,
...options
}
)
return queryData
}
export default useDeviceStatus
export default function LinearWithValueLabel() {
const [progress, setProgress] = React.useState(1)
const { status, data: deviceStatus, error, isFetching } = useDeviceStatus()
const outdatedObjects = deviceStatus?.info.outdated_objects_count
const total_objects_count = deviceStatus?.info.total_objects_count
const queryClient = useQueryClient()
React.useEffect(() => {
if (!outdatedObjects || outdatedObjects === 0) {
setProgress(0)
return
}
if (outdatedObjects < 1) {
queryClient.setQueryData('device', null)
queryClient.cancelQueries('device')
return
}
const percentage = ((total_objects_count - outdatedObjects) / total_objects_count) * 100
setProgress(percentage)
}, [outdatedObjects])
return (
<>
{outdatedObjects > 0 && (
<Box display="flex" alignItems="center" width={'600px'}>
<LinearProgress
variant="determinate"
value={progress}
sx={{ width: '100%', padding: '2px', borderRadius: '5px', marginRight: '10px' }}
/>
{`${total_objects_count} ` +
'of ' +
`${outdatedObjects}`}
</Box>
)}
</>
)
}
export default function LinearWithValueLabel() {
const [progress, setProgress] = React.useState(1)
const { status, data: deviceStatus, error, isFetching } = useDeviceStatus()
const outdatedObjects = deviceStatus?.info.outdated_objects_count
const total_objects_count = deviceStatus?.info.total_objects_count
const queryClient = useQueryClient()
React.useEffect(() => {
if (!outdatedObjects || outdatedObjects === 0) {
setProgress(0)
return
}
if (outdatedObjects < 1) {
queryClient.setQueryData('device', null)
queryClient.cancelQueries('device')
return
}
const percentage = ((total_objects_count - outdatedObjects) / total_objects_count) * 100
setProgress(percentage)
}, [outdatedObjects])
return (
<>
{outdatedObjects > 0 && (
<Box display="flex" alignItems="center" width={'600px'}>
<LinearProgress
variant="determinate"
value={progress}
sx={{ width: '100%', padding: '2px', borderRadius: '5px', marginRight: '10px' }}
/>
{`${total_objects_count} ` +
'of ' +
`${outdatedObjects}`}
</Box>
)}
</>
)
}
1 Reply
Anyone has a tip on how I can do this ? I feel I have done it and erased my implementation before when I tried to pass things as props. This is using react-query v3