React Query

Concepts

  • Loading: means there is not yet data to provide, it is being loaded. Not true during a background fetch
  • Fetching: meaning data is being requested, whether or not cached data has already been returned
  • Stale time: refers to “I need to be fetched again”, but it will still be returned by the query initially while a background fetch happens
  • Cache time (now GC time): how long until unused cached data will be cleared out of memory, meaning they will not be in the cache to return the next time they’re requested
    • removeQueries: remove from cache
  • Refetch interval: how often it’s automatically reloaded

Ensuring Not Receiving Stale Data

This can be useful if you’re initially populating a form object from the data, so a rerender later won’t update it.

The most reliable way is to call queryClient.removeQueries() so the data is not present at all.

QueryClient Options

new QueryClient({
  defaultOptions: {
    queries: {
      refetchOnWindowFocus: false,
      retry: false,
      staleTime: 5000,
    },
  },
});