How to access cache to display data with React Query?

Question

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

I'd like to access the cache so that I can also display its data so that a user can see their previous queries. However, I receive this error with my attempts. TypeError: Cannot read property 'getQueryData' of undefined.

The following are my attempts to access the cache.

console.log(queryCache.getQueryData("rickandmorty"))
console.log(queryCache.getQueryData(["rickandmorty", idQuery]))
console.log(queryClient.getQueryData("rickandmorty"))
console.log(queryClient.getQueryData(["rickandmorty", idQuery]))

Please let me know what I'm doing wrong. I'm using version "react-query": "^3.13.0" https://codesandbox.io/s/rick-and-morty-2gy8r?file=/src/App.js

const [idQuery, setIdQuery] = useState(0);
const [rickAndMortyCharacter, setRickAndMortyCharacter] = useState({});
const queryRef = useRef(null);
const { register, handleSubmit, errors, setValue, watch } = useForm({
  resolver: yupResolver(searchSchema)
});
const formId = watch("rickAndMortyId");

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

const { isLoading, error } = useQuery(
  ["rickandmorty", idQuery],
  handleRickAndMortyFetch,
  {
    refetchOnWindowFocus: false,
    enabled: idQuery !== 0,
    useErrorBoundary: true
  }
);
const disable = isLoading || parseFloat(formId) === idQuery;
const onSubmit = (formData) => {
  setIdQuery(formData.rickAndMortyId);
};

return (
  <div>
    <ErrorBoundary
      FallbackComponent={ErrorFallback}
      onReset={() => {
        queryRef.current.focus();
      }}
      resetKeys={[idQuery]}
    >
      <div>
        <form onSubmit={handleSubmit(onSubmit)}>
          <h3>Rick and Morty</h3>
          <input
            type="number"
            name="rickAndMortyId"
            placeholder="Between 1 and 671"
            ref={register}
            disabled={isLoading}
          />
          {errors.rickAndMortyId && <span>This field is required</span>}
          {error && <p>Error occurred: {error.message}</p>}
          <button type="submit" disabled={disable}>
            Search Character
          </button>
        </form>
        <button
          onClick={() => {
            const randomId = getRandomRickAndMortyCharacterId();
            setValue("rickAndMortyId", randomId);
            setIdQuery(randomId);
          }}
        >
          Random
        </button>
      </div>
      <div>
        {isLoading && <p>Loading...</p>}
        <RickAndMortyInfo rickAndMortyCharacter={rickAndMortyCharacter} />
      </div>
      <ReactQueryDevtools initialIsOpen={true} />
    </ErrorBoundary>
  </div>
);

Answer 1

In this code:

const [rickAndMortyCharacter, setRickAndMortyCharacter] = useState({});
const handleRickAndMortyFetch = () => {
  return delay()
    .then(() => axio('...'))
    .then((res) => setRickAndMortyCharacter(res.data));
};

const { isLoading, error } = useQuery(
  ["rickandmorty", idQuery],
  handleRickAndMortyFetch
);

After a successful fetch, you assign the result to a local state instead of handing to react-query, so it doesn't know what data should be cached. You need to return the result like this:

const handleRickAndMortyFetch = () => {
  return delay()
    .then(() => axio('...'))
    .then((res) => res.data); // return instead of calling setState()
};

So react-query can 'catch' it and put it into cache. The next step is to remove your local state rickAndMortyCharacter and reference data instead. It is the resolved result after a successful fetch.

const {
  isLoading,
  error,
  data // remove rickAndMortyCharacter and reference this instead
} = useQuery(
  ["rickandmorty", idQuery],
  handleRickAndMortyFetch
);

Only then can you log the cache as normal:

queryClient.getQueryData(["rickandmorty", 518]);

Live Demo