How to to automatically refetch when the cached data is requested?

[Satosh-J]

In one page I requested classroom students data.

  const { data: students, isLoading, error } = useQuery(
    ['classroom-students', currentClassId],
    () => doFetchClassroomStudents(currentClassId)
  )

And In another page, I used that data again with queryClient.
const students = queryClient.getQuerydata(['classroom-students', currentClassId])

But this student became undefined on page refresh.

Is there any way to refetch students when the query data is accessed?

I want the fetch api is called automatically in the background when the cached data is removed by page refreshing.

Using persist query or session seems not good way.

[TkDodo]

Don't use queryClient.getQueryData in a component - always useQuery. That way, mounting of a new component will trigger a background refetch.

[Satosh-J]

Thanks, but why do we have getQueryData() then?

[TkDodo]

to get access to the cached data in an imperative way in callbacks, for example, to perform optimistic updates: https://tanstack.com/query/v4/docs/guides/optimistic-updates