I built a form using react,react-query,

CodePudding user response：

You needn't call refetch. It call the API regardless of the cache. Comment/Remove this code

  // useEffect(() => {
  //   if (debounceInputValue.length > 1) {
  //     refetch();
  //   }
  // }, [debounceInputValue, refetch]);

And you should enable the useQuery

enabled: true,

And use debounceInputValue instead of inputValue for useQueryData

https://codesandbox.io/s/react-query-autocomplete-forked-d84rf4?file=/src/components/FormFields/CacheAutocompleteField.tsx:1255-1263