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.

TanStack•7mo ago•

3 replies

primary-violet

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 />}

Combining debounced query with `isFetching`

Similar Threads

Combining debounced query with `isFetching`

Similar Threads

Similar Threads

Similar Threads