Inconsecutive responses

[antti-neurali]

Hi, I'm quite novice to using React-query and I have this combobox -style component that offers automatic completions (from quite large collection) for user as they type in their search terms. The backend response times are so inconsistent I often receive the results from older requests after newest call finishes.

I haven't been able to yet find bulletproof solution to ensure correct sequence. I believe adding debounce is often how these cases can be remedied but I also feel that it is not sufficient in our case to keep the component as responsive as possible. I also tried aborting any old calls with AbortSignal whenever new one is created but that also was somewhat unreliable due the asynchronous nature of the problem.

Perhaps my only option is to attach sequence number (or timestamp) to my useQuery calls to ensure any late responses can be ignored? Perhaps there even already is some mechanism in React-query how to implement such functionality?

I'm sure many have struggled with the same problem, any advice and/or code examples?

[TkDodo]

The important part is that you add the search parameters to the query key (all "dependencies" to the query should go to the query key!). Then, if the search input changes, react-query will automatically fire off a new request. The old request can finish later, and it will be put into the cache, but under a different cache key, which will make it not interfere with your currently displayed result.