React-query: 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 getSearchAsyncto 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 getSearchAsyncmethod 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 🤔