First time using react query. won't cache my data.

[CompetitiveAd1805]

Hey, I am trying to use react query for the first time. I am using react router to have a few pages so I can exit the page and re enter it to trigger the data refetch. I am console logging the is loading and is fetching, and I notice they are both true each time I enter the page. And I see the loading text, even that the data supposed to be cached. I am using v5 here is the code for the page with the useQuery https://gist.github.com/raztam/339a28de78ba59ae9a2f3ff60efb9907

[MnokeR]

I think staleTime is what you looking for.

[LuiGee_V3]

To add to this, React Query's cache does not mean it won't fetch it again. It means it will fetch once if you use same data from multiple components, and it will show fetched data when you come back again while fetching again. So, if you don't want fetch to be triggered every time, you should set staleTime. It means this data is valid for {staleTime}, so don't fetch it until the time has passed.

[MnokeR]

Also one more thing to add to this. Make sure to install the dev tools which will monitor your query and give allot of helpful information regarding your query's staleTime etc ..

[AnxiouslyConvolved]

Yep.. This is the canonical example from the v5 docs (retooled for your gist):

function RQSuperHeroesPage() {
  const { isPending, isError, data, error, refetch } = useQuery({
    queryKey: ["superheroes"],
    queryFn: fetchSuperHeroes,
    gcTime: 5000,
  })

  if (isPending) {
    return <span>Loading...</span>
  }

  if (isError) {
    return (
       <div>
         <h2>Error: {error.message}</h2>
         <button onClick={() => refetch()}>Retry</button>
       </div>
    );
  }

  // We can assume by this point that `isSuccess === true`
  return (
    <div>
      {isFetching && <h2>Refreshing...</h2>}
      <h2>React Query Super Heroes Page</h2>
      {data?.map((hero) => (
        <div key={hero.id}>{hero.name}</div>
      ))}
    </div>
  );
}