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
  • Blog post from maintainer explaining
• Invalidate: marks a query as stale and proactively triggers a refetch
• Remove: removes queries from the cache
• 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,
    },
  },
});

Troubleshooting

Queries running when enabled is not true

Check to see if it’s undefined; RQ will run the query when it’s undefined. Safest to make totally sure it’s actually true or false - https://github.com/TanStack/query/issues/1196#issuecomment-2043328137