deep-jade

Expo + React Query issue with cache

Well I try to use React Query in Expo. I have some trouble with queries not added to cache (like every first query in the start of the app arent store in cache). There is an example (here the cache is empty, doesnt make sense because I get movies with useQuery in the home screen) :

2 Replies

deep-jadeOP•9mo ago

I did a little test :

const {
  data: test,
  isSuccess,
} = useQuery({
  queryKey: ['test'],
  queryFn: () => {
    console.log('salamaaaa');
    return {
      title: 'fake',
    }
  },
})
React.useEffect(() => {
  // show all queries
  console.log('isSuccess', isSuccess);
  console.log('queryClient', queryClient.getQueryCache().findAll());
}, [isSuccess]);

const {
  data: test,
  isSuccess,
} = useQuery({
  queryKey: ['test'],
  queryFn: () => {
    console.log('salamaaaa');
    return {
      title: 'fake',
    }
  },
})
React.useEffect(() => {
  // show all queries
  console.log('isSuccess', isSuccess);
  console.log('queryClient', queryClient.getQueryCache().findAll());
}, [isSuccess]);

And there is something weird, the cache is directly cleaned :

(NOBRIDGE) LOG  salamaaaa
 (NOBRIDGE) LOG  isSuccess false
 (NOBRIDGE) LOG  queryClient [{"gcTime": 300000, "observers": [[QueryObserver]], "options": {"_defaulted": true, "_optimisticResults": "optimistic", "queryFn": [Function queryFn], "queryHash": "[\"test\"]", "queryKey": [Array], "refetchOnReconnect": true, "refetchOnWindowFocus": false, "staleTime": 60000, "throwOnError": false}, "queryHash": "[\"test\"]", "queryKey": ["test"], "state": {"data": undefined, "dataUpdateCount": 0, "dataUpdatedAt": 0, "error": null, "errorUpdateCount": 0, "errorUpdatedAt": 0, "fetchFailureCount": 0, "fetchFailureReason": null, "fetchMeta": null, "fetchStatus": "fetching", "isInvalidated": false, "status": "pending"}}]
 (NOBRIDGE) LOG  isSuccess true
 (NOBRIDGE) LOG  queryClient []

(NOBRIDGE) LOG  salamaaaa
 (NOBRIDGE) LOG  isSuccess false
 (NOBRIDGE) LOG  queryClient [{"gcTime": 300000, "observers": [[QueryObserver]], "options": {"_defaulted": true, "_optimisticResults": "optimistic", "queryFn": [Function queryFn], "queryHash": "[\"test\"]", "queryKey": [Array], "refetchOnReconnect": true, "refetchOnWindowFocus": false, "staleTime": 60000, "throwOnError": false}, "queryHash": "[\"test\"]", "queryKey": ["test"], "state": {"data": undefined, "dataUpdateCount": 0, "dataUpdatedAt": 0, "error": null, "errorUpdateCount": 0, "errorUpdatedAt": 0, "fetchFailureCount": 0, "fetchFailureReason": null, "fetchMeta": null, "fetchStatus": "fetching", "isInvalidated": false, "status": "pending"}}]
 (NOBRIDGE) LOG  isSuccess true
 (NOBRIDGE) LOG  queryClient []

Why is empty at the end...

passive-yellow•9mo ago

you're not showing where queryClient is coming from, so my guess is: https://tkdodo.eu/blog/react-query-fa-qs#2-the-queryclient-is-not-stable

React Query FAQs

Answering the most frequently asked React Query questions

Gaming

Programming

Expo + React Query issue with cache

Did you find this page helpful?