Autosuggest component with useMutation or useQuery?

[A11oW]

Hello! Please help me to understand how I'm must use 'react-query'. I need to create autosuggest component: when user input some value, component send request to server for suggestions and show it to user in dropdown. The user can enter the same text many times, and I would like to receive a response from the cache and not request it. I should used useMutation and queryCache instead of useQuery, right?

[cherniavskii]

You should use useQuery and pass input value as query key variable
To avoid fetching suggestion for same input value too often - tune useQuery cacheTime option

[teetotum]

And how can I utilize best the various options to ensure that the request is only sent if the search string is at least 3 characters long (and otherwise my returned data is empty or null)?
Will this do the job? (plus my homegrown debounce)

const [value, setValue] = useState('');
const searchText= useDebounce(value, 250);
const { data } = useQuery([searchText], ()=>api.getSuggestions(searchText), { enabled: searchtext.length > 2 });

[TkDodo]

Yes, this is the best solution 🙌

[teetotum]

Thank you for the fast affirmation.

[NarenderDhamarlapally]

const [value, setValue] = useState('');
const searchText= useDebounce(value, 250);
const { data } = useQuery([searchText], ()=>api.getSuggestions(searchText), { enabled: !!searchtext });

I want to call api on focus . when i remove enabled it is working as expected
but api is calling on onblur event in mui autocomplete