I have a requirement to keep fetching data until a condition is met
I can set up the fetch on an interval with the snippet below but I can't figure out how to stop the fetchData when needed. Is this possible?
const { status: answersStatus, data: answers } = useQuery(
['fetchData', { context, activity, stage, country }],
fetchData,
{refetchInterval: 2000});
update:
since react-query v3.25.0, refetchInterval can accept a function to accommodate this use-case better:
refetchInterval: data => (isConditionMet(data) ? false : 2000)
original answer:
with a local state:
const [refetchInterval, setRefetchInterval] = React.useState(2000)
const { status: answersStatus, data: answers } = useQuery(
['fetchData', { context, activity, stage, country }],
fetchData,
{refetchInterval});
you can set the refetchInterval to false or 0 to turn it off. If you want to do it depending on the response, the onSuccess, onError or onSettled callbacks are likely the best place:
const [refetchInterval, setRefetchInterval] = React.useState(2000)
const { status: answersStatus, data: answers } = useQuery(
['fetchData', { context, activity, stage, country }],
fetchData,
{
refetchInterval,
onError: () => setRefetchInterval(0)
});
refetchInterval: data => (checkMyResponseHere(data) ? false : 2000) function because it doesn't require state
As of Tanstack Query v5, the signature has changed from
refetchInterval: number | false | ((data: TData | undefined, query: Query) => number | false)
to
refetchInterval: number | false | ((query: Query) => number | false | undefined)
So instead of doing
refetchInterval: data => (isConditionMet(data) ? false : 2000)
like in TkDodo's answer, you'll need to do:
refetchInterval: query => (isConditionMet(query.state.data) ? false : 2000)
For me, it was causing infinite loop until passing function to the refetchInterval like so:
refetchInterval: data => (checkMyResponseHere(data) ? false : 2000)
P.S. react-query v.3.38.0
refetchInterval: number | false | ((data: TData | undefined, query: Query) => number | false)In the end I leveraged short-circuit evaluation so my call is now
const { data: answers } = useQuery(
isThereSomethingToGet && [`fetchData`, { ...qmfRouteParams, context: appContext }],
fetchData,
{
refetchIntervalInBackground: true,
refetchInterval: DocusignPolling.INTERVAL,
},
);
When isThereSomethingToGet is falsy the function isn't called.
With React Query v4, you need to pass the 'refetchInterval' like below:
useQuery({ queryKey: ['todos'], queryFn: ()=>{}, refetchInterval: (data)=> data.refetchNeeded? 5000: false })
Here, refetchNeeded is the boolean field from the previously fetched data.
