react-query refetch api call with cache issue

Advertisements

I built a form using react,react-query,

I built custom fields:

CacheAutocompleteField – cache field using react-query
- queryAsyncFunc props – get async function and cache the data using react-query

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?

every time I select a new type (from type options) – I want the country and city fields to be reset.
every time I already search the same key (the queryKey is combined of cacheKey+inputValue) , it will not call to api, it will get the results from cache (that’s what I chose to use from react-query to do).

What I’m getting when I run my code?

When I select a type A, enter a country “Island” it will fetch data from api and get the data.
Then when I select a type B, enter a country “Island” – It will fetch data from api and get the data.
But when I select a type A and and same country “Island” again – I don’t want it to fetch data from api – I want it to get data from cache (that’s the reason I chose to work with react-query too) because it already search for this data with the same type. The queryKey is depended of other type field.
when I search anything from autocomplete and it not find it, then I try to reset it by select any other type, it will kind of reset the value of the input but it still exist in inputValue of the country.
for example I select type C, then enter "lakd" in country, then select any other type, it not reset it. reset works for me only when anything find in autocomplete and I select it. I guess it’s because the autocomplete component not have inputValue props, but when I use it it make me other issues.

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

Dev solutions