idiomatic react-query implementation for an address search input?

[vonovak]

Hello, I have a question on react-query usage that is similar to #1897 and #1549 but my question includes a use case, so perhaps I'll get more specific answers.

Intuitively, I think I'm looking for a way to call react-query imperatively which does not seem to play well with its api, so I'm looking for idiomatic react-query solution to this problem from someone more experienced.

Consider an address-suggestion input that you can use in a form. It can look something like this:

What I want to do is

(1) fetch address results as user types a search query in
(2) have the results cached
(3) show an activity indicator when results are loading (isLoading in RQ)

A dummy implementation will look something like this

const { data, isLoading } = useQuery('addresses', fetchAddresses)

Now, consider the following user flow:

User opens a page with the form. Problem (P1) is that fetchAddresses function will be called right away even though the user has not typed any query. This is easy to fix by adding enabled: searchQuery.lenght > 0 config.
Now, as the user types eg. "King's cross", results start showing up. When they see "king's cross, London" they tap on the result and the result gets inserted into the text input.
Problem (P2) that happens now is that because the search query has changed, the fetchAddresses api call will fire again, which is unnecessary at this point, and it's also confusing because isLoading will be true and the activity indicator will show up. I just want to update the textinput and not do any api requests at this point.

Here's what I tried so far: disable the query and use refetch when user types into the textinput (using onChange event). This works but the results are not cached.
Should I instead force-disable the query when user taps onto a search result? Should I use state or ref to disable the query? Note that I need to re-enable the query as user starts typing again - which means I need to toggle some boolean on and off which I don't quite like, when fundamentally, what I'm looking for is make an api request if and only if user fires a certain action.

So, what is the idiomatic, elegant react-query solution to the problem?

Thank you! 🙂

[TkDodo]

I think this question highly depends on the implementation of the search component. I think there should be an event like onInput that is only called when the user typed something into the field vs. onChange or onSelect that is triggered when the user really selects an entry. Those are two different things and need to be treated separately by a "Combobox" component.

Generally, your flow is absolutely right:

• have local state for the search input
• maybe debounce it
• put it into the query key for efficient caching
• only enable it for length > 0
• maybe set keepPreviousData to not remove the current search results and show a loading indicator depending on isPreviousData or isFetching - but using isLoading and a hard loading state is also fine.

All the other approaches seem more like workarounds that originate from the component not having fine-grained support for different events...

[vonovak]

hi @TkDodo thanks for the reply. The search is based on React native's textInput https://reactnative.dev/docs/textinput (so I can use onChange / onChangeText to listen to the user typing.), The "combobox" is indeed a different component, but upon tapping the search result, I set it into the textinput's state (the value prop) and that triggers another fetch which I want to avoid. keepPreviousData will not prevent the last fetch from happening, will it? How do I nicely prevent that last fetch? Thank you :)

[TkDodo]

keepPreviousData will not prevent the last fetch from happening, will it

it will not.

How do I nicely prevent that last fetch?

I don't know how the components work together. If you set the search result programmatically into the text input's state, and that triggers an onChangeText event, in which case the query will refetch, then yeah, there is only so much you can do:

• don't write the search result into the text input's state. most comboboxes have selected results separated from the actual search input. (e.g. the multi example of react-select)
• don't trigger onChangeText (not sure if thats in your reach)
• disable the query for search results that were added to the input field by selecting them