Debouncing a query based on a frequent state change

[cubecleveland]

Hello i have a simple query that uses a state as part of its parameteres to change the query params.

import debounce from "debounce-promise";

const debouncedLoadOptions = debounce(() => query(), 2000, {
leading: false,
});

const query= useQuery(
[some Var, currentSiteState],
() =>
debouncedLoadOptions({
...params
}),
{ enabled: currentSiteState ? true : false, cacheTime: 0 }
);

as u can see i have wrappe the query with a debounce handler but waht it does is that after the debounce the query gets fire as many times as the state changes...
Are there any possible fixes for this ?

FYI, im using import debounce from "debounce-promise";

which worked well in the past in debouncing promisses

[TkDodo]

what I would do is not debounce the function, but debounce the piece of state that goes into the query key. every query key change triggers a new cache entry, and just because you debounce the the queryFn that doesn't mean that they are then batched together. They represent separate cache entries, which have already been created.

Here is a good example for use-debounce: https://usehooks.com/useDebounce/

It would be something like this:

const [someVar, setSomeVar] = React.useState()
const debouncedVar = useDebounce(someVar, 2000)

useQuery([debouncedVar, currentSiteState], ...)

since the debouncedVar doesn't change during the debounce time, the key stays the same and nothing happens. Then, after 2 seconds, the value changes to the latest value and the new cache entry with the new key is created. No in between states will show up because react-query never sees them.