How To Fetch Existing Cache Data On Every Input Change?

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

Solution 1:

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