Using react-query, how can I toggle on and off the refetch interval without having to call reset on the query client?
I have a query client that includes the refetch interval in its default options:
new QueryClient({
defaultOptions: {
queries: {
refetchInterval: 1000,
},
},
})
And building a suspense query like so:
const query = useSuspenseQuery({queryKey: ['example'], queryFn: exampleFn});
And then elsewhere in my application I'm fetching the query client:
const queryClient = useQueryClient();
And toggling the refetch interval in a function like so:
const handlePlayback = (play: boolean) => {
queryClient.setDefaultOptions({
queries: {
refetchInterval: play ? 1000 : false,
}
})
}
This on its own doesn't do anything. It makes sense because the default options have already been applied to the relevant queries. Calling refetch, invalidate etc. doesn't update the query with the new options. This is okay.
I'm instead calling
queryClient.resetQueries();
My issue is that because I'm using suspense queries inside of suspense, the component using the query is resuspended on each toggle. Using deferred state doesn't work because the query is still suspending. Is there a way of adjusting the refetch interval that won't require a reset. Thanks.