How to fetch existing cache data on every input change?

Question

My application has a user input an id to send as a request and the response data that matches that id is rendered.

If the data already exist in the cache, I'd like the application to fetch from the cache on each input change.

If the data does not exist in the cache, the application can only send the request by having the user click the submit button.

Once a user types in the input, I would access cache and check if the current input id exists on every input change. If so, render the data while the submit button is disabled. Else enable the submit button so that the user can send the request.

From research, React Query's queryClient.getQueryCache is what I believe I need. I would check to see if the input id exists in the cache by using .includes on queryCache. What would I do afterwards? Is this the correct direction to implement the functionality?

Here is my current setup. Please let me know how to move forward implementing the requested functionality. https://codesandbox.io/s/rick-and-morty-2gy8r?file=/src/App.js

const handleRickAndMortyFetch = () => {
  return delay()
    .then(() => axios(`https://rickandmortyapi.com/api/character/${idQuery}`))
    .then((res) => res.data);
  };

const cacheData = queryClient.getQueryData(["rickandmorty", idQuery], {
    exact: false
})

const onInputChange = event => {
    setIdQuery(event.target.value, () => {
        cacheData.includes(idQuery)
            handleRickAndMortyFetch()
    })
}

const disable = isLoading || parseFloat(formId) === idQuery || !idQuery || cacheData?.id === idQuery;

<form onSubmit={handleSubmit(onSubmit)}>
  <input
    type="number"
    name="rickAndMortyId"
    placeholder="Between 1 and 671"
    ref={register}
    disabled={isLoading}
    onChange={onInputChange}
  />
  <button type="submit" disabled={disable}>
    Search Character
  </button>
</form>

TkDodo · Accepted Answer · 2021-03-30 11:04:40Z

3

I think what you want is queryClient.getQueryData(["rickandmorty", idQuery]). This will give you data from the cache for a specific queryKey. If that is undefined, you have no data in the cache for that key, so you can enable the submit button.

But you need to let react-query manage the data for you please. That means your handleRickAndMortyFetch function should return a Promise - there is no need to use local state (rickAndMortyCharacter) - this is just the data property returned from react-query

answered Mar 30, 2021 at 11:04

TkDodo

30.4k5 gold badges85 silver badges101 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

ln09nv2 Over a year ago

Thank you, now the app on every input change will fetch if input value is nonexistent in cache and only access from cache if input value exists within. However, how do I disable the submit button if input value exist in cache. I have disable defined as const disable = isLoading || parseFloat(formId) === idQuery || cacheData.name === idQuery. But I receive a TypeError: Cannot read property name of undefined. Please take a look at the updated code.

TkDodo Over a year ago

Well as I said, the data in the cache can be undefined if it doesn’t exist, so I’d use optional chaining: cacheData?.name === idQuery

ln09nv2 Over a year ago

Thank you for your help for the fetch-on-every-input-change logic! Sorry, the cacheData. and cacheData?. wasn't working. I'll continue researching to have the disabling logic figured out. 👍🏾

Collectives™ on Stack Overflow

How to fetch existing cache data on every input change?

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related