React Query - How to update query results in a React Query with enabled option set?

Question

I'm using React Query for async state management in my React Native app. I've a useQuery() hook with following query options:

useQuery Hook in useStudentAssignments.ts:

const data = useQuery(
  studentAssignmentKeys.list({
    assignedToIdEq: studentId
  }),
  async ({ queryKey: [{ params }] }) => {
      // Function to persist assignment media
  },
  {
    enabled: !!assignment && !!isConnected,
    cacheTime: Infinity,
    staleTime: Infinity,
    retry: 0,
    refetchOnReconnect: 'always',
    refetchOnMount: 'always',
    onSuccess(data) {
      // Async storage of assignments
  },
  onError() {
      // show error message
  }
}

App.tsx:

In the main screen I'm using the useQuery hook as:

const { data, isLoading, isSuccess, isError, refetch, isStale } = useStudentAssignments(
    studentAssignment?.id
  );

useEffect(() => {
  if (!!isConnected) {
        refetch();      
 }, [refetch, isConnected);

}

I've these questions:

Since, I've enabled option set, my understanding is that I can't use QueryClient.invalidateQueries(), since it will have no effect. How else can I mark the query key as stale so that it can automatically be refresh?
If automatic query refresh isn't possible, how can I refresh it on some condition or state change?
useQuery() method has an async function (queryFn). Does this function runs only once, or on intervals/ every fetch?

tuan.tran · Accepted Answer · 2022-10-11 15:42:30Z

1

the invalidateQueries, refetchQueries is ignored only when the enabled is false. So when it becomes true, those function could work as your expected
you could call refetch to manually update your data. In RN, it would be called when screen/components is focused.
As I know, it would be triggered when an instance of useQuery is mounted or refetch called. However, they would save the result into cache, then within the cache timeout, it would return the data from cache when you call that from second instance, while queryFn is still running on background. When completed, it updates the cache data.

answered Oct 11, 2022 at 15:42

tuan.tran

1,88119 silver badges23 bronze badges

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

4 Comments

SJaka Over a year ago

Thank you for the explanation, make sense! In my setup I've staleTime:Infinity. Does this has any bearing on refetch() and cache? My understanding is that if e.g. staleTime:1000*60, then any refetch() issued during that minute will always return the data from cache? Is my understanding correct?

tuan.tran Over a year ago

staleTime is for marking data as fresh one, when you set it to 1 minutes, and you have another instance of that query mounted or refresh called on that interval, it would return that data from cache. It also has cacheTime which manage when the data on cache will be cleared.

SJaka Over a year ago

So if I am getting it right, staleTime:Infinity will never mark the data to be refreshed and hence will always return data from cache?

tuan.tran Over a year ago

yes, it's correct

Collectives™ on Stack Overflow

React Query - How to update query results in a React Query with enabled option set?

useQuery Hook in useStudentAssignments.ts:

App.tsx:

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

useQuery Hook in useStudentAssignments.ts:

App.tsx:

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related