T
TanStack•7d ago
fair-rose

Combining debounced query with `isFetching`

Hi! I'm running into an issue that I'm not sure how to approach. It seems like I'm somewhat on the right track, but I'm a bit stumped on what to do to resolve this. I have the following situation: 
// Calling a summary endpoint with debounce to avoid excessive calls

// This debounce function is a custom hook, just a useEffect wrapper
const debouncedDto = useDebouncedValueDeep(template, 800);

const blockSummaryQuery = useQuery({
    queryKey: ['Api', 'templateSummary', debouncedDto],
    queryFn: () => Api.templateSummary(debouncedDto)
    placeholderData: keepPreviousData,
});
// Calling a summary endpoint with debounce to avoid excessive calls

// This debounce function is a custom hook, just a useEffect wrapper
const debouncedDto = useDebouncedValueDeep(template, 800);

const blockSummaryQuery = useQuery({
    queryKey: ['Api', 'templateSummary', debouncedDto],
    queryFn: () => Api.templateSummary(debouncedDto)
    placeholderData: keepPreviousData,
});
This nicely waits for quick changes to be done before calling a summary again. However, there is one problem related to stale data: 
{blockSummaryQuery.isFetching && <LoadingSpinner />}
{blockSummaryQuery.isFetching && <LoadingSpinner />}
This loading spinner almost never shows up, because it doesn't consider the 800 ms of 'stale' data being displayed. I need to somehow know that a debounce is currently happening OR that a fetch is pending. Do you have suggestions or ideas on how to solve this properly? From searching the docs, it seems like there's no debounce for tanstack query OOTB.
2 Replies
eastern-cyan
eastern-cyan•7d ago
You could return a isDebouncing boolean from your useDebouncedValueDeep I'd assume you set a timeout somewhere in that hook, when you set that timeout you could also set isDebouncing to true, then, when the setTimeout finishes you'd set it to false
fair-rose
fair-roseOP•7d ago
yeah, I guess keeping that state myself will make more sense here. Thanks for the suggestion!

Did you find this page helpful?