Multiple useQuery Calls Returning Out of Order

I have a useQuery that calls a resolver that searches a database.

Say someone is searching for medical conditions that include the word “therapy”. They type in “the” and the search immediately kicks off, because that’s what it does after the first 3 characters are input.

Even if I debounce at 600 ms, the search still kicks off on “the” before the word “therapy” has been input.

So now I have two or more useQuery searches launched.

The first one, on the word “the”, returns a lot more results, so it takes longer to come back.

The second one, on the word “therapy”, comes back first.

The screen paints with the desired results for the complete word “therapy”. Then the second search comes in and the screen re-paints, with the first (and no longer desired) search results, for the word “the”.

What’s the best practices way of fixing this?

Hey @vikr00001 :wave:

Would you be willing to create a reproduction that demonstrates this? You shouldn’t need to worry about race conditions if your variables are set correctly, so even if the call for “therapy” finishes first, useQuery should give you the right values. I’d love to understand more about your setup and see if there is something that I can spot that might help here.

It is very kind of you to offer! I’ve solved it by removing the auto-search capability and adding a “search” button that must be clicked to initiate the search. I think this is better for this use case and makes the search function more discoverable on this particular page.

Hmmmmmm… could someone suggest an suitable codesandbox or something like that that I could throw a useQuery and a demo resolver into?

Yes! Feel free to use our error template as a starting point. This one uses a local schema so you should be able to adjust the timings of the resolvers and such. Hope this helps!