Cannot debounce API calls

[basslagter]

I am trying to use this for a search component, like:

  const { status, data, error, isFetching } = useQuery(
    searchQuery && ['results', searchQuery],
    getSearchAsync,
  );

I would like the call to getSearchAsync to be debounced while the user is typing the query. Tried adding lodash.debounce like:

  const { status, data, error, isFetching } = useQuery(
    searchQuery && ['results', searchQuery],
    debounce(getSearchAsync, 3000),
  );

But since this is a function component it is not working as expected. The getSearchAsync method is only called multple times after the timeout expires, which I expect to be once with the latest value (searchQuery).

[tannerlinsley]

You need to use a debounce that supports promises. It needs to return a promise immediately, then debounce off of that promise.

[basslagter]

@tannerlinsley thanks for the reply. Can you give an example?

[tannerlinsley]

https://github.com/tannerlinsley/react-table/blob/master/src/publicUtils.js

[basslagter]

Wow...there is no debounce package that does this?
Or even better...can't react-query have an option for this?

[denisborovikov]

You may try to debounce searchQuery change instead, something like that.

[basslagter]

@denisborovikov thanks...that works nicely!
Still...wouldn't it be nice to have this as an option in react-query?

[timkindberg]

I'd like to see this, since react-query is serializing the key it's doing all the heavy lifting there, and could then debounce the result of the key (which devs have no hook into that result).

Can this be reopened?

[mporkola]

@tannerlinsley could this be reconsidered? Debouncing based on the serialized query key would be an elegant solution, and in my view a reasonable responsibility for react-query. I'm interested to try my hand in making a PR if it has any chance of getting merged.

[tbntdima]

For me, if I type very fast I cannot see the input. Only after I finish typing I see the text. After that, all works fine.
Here is a my code:

const [searchTerm, setSearchTerm] = useState('')
const debouncedSearchTerm = useDebounce(searchTerm, 500)
const { data } = useSearch({ searchTerm: debouncedSearchTerm })

[denisborovikov]

@tbntdima If you use searchTerm as your input's value prop you should see as you type. You probably use debouncedSearchTerm instead and that's why the input is denounced. Debounced value should be used for the query only.

[tbntdima]

@denisborovikov the problem is a bit different. When searchTerm changes, the component was re-rendering anyway or at least tried to. And because of this, I was getting lags. My eventual solution was to move the denounce login into the upper component 🤔

[kripod]

Another issue seems to arise when dealing with debouncers. Debounced Promise objects get stuck in a "loading" state within React Query and stay inside MutationCache forever.

[plbertrand]

I'm fairly new to React Query but I haven't figured out how to serialize mutations to the same entry. It's necessary in the case of updating an input and avoid race conditions of two update queries. Am I wrong in thinking that this should be handled by React Query? Whatever I search to that end resolves here but even debouncing has this race condition, just less likely to happen. Is there a configuration for serializing updates? How about buffering updates while there is one in progress?

[GeekEast]

I probably found something very similar to react-query but with debounce built in.

https://ahooks.js.org/hooks/use-request/debounce