user21131539
user21131539

Reputation:

react-query refetch api call with cache issue

I built a form using react,react-query,

link to the code

I built custom fields:

I have 3 fields:

My scenario:

I select any type from my hardcoded list (Type A, Type B , Type C),

I search any country, then I search any city

What I'm trying to do?

What I'm getting when I run my code?

enter image description here

Upvotes: 2

Views: 962

Answers (1)

user21116899
user21116899

Reputation:

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

Upvotes: 2

Related Questions