Query Keys and Caching

React Query uses query keys as unique identifiers to manage and cache your data. When you call the useQuery hook, you provide a query key—either a string like 'users' or an array such as ['user', userId]. The key must be unique to the specific data you want to fetch; otherwise, React Query will treat different requests as the same and share cached results.

If you change the query key, React Query sees it as a new request. It checks the cache for the new key and fetches fresh data if needed, then caches it under that key. This ensures you always get the correct data and helps avoid unnecessary network requests.

Here is a practical example that shows how query keys affect caching and fetching. Suppose you have a component that displays user details:

useQuery({
  queryKey: ['user', userId],
  queryFn: () => fetchUser(userId),
});

If userId is 1, the query key is ['user', 1]. React Query fetches and caches the data under this key. If userId changes to 2, the query key becomes ['user', 2]. React Query does not find this key in the cache, so it triggers a new fetch and stores the result under the new key.

If you later navigate back to userId = 1, React Query uses the cached data for ['user', 1] and avoids a new network request unless the data is stale or has been invalidated.