Query keys should be seen like a dependency array to your query function: Every variable that is used inside the queryFn should be added to the query key. This makes sure that queries are cached independently and that queries are refetched automatically when the variables changes.
Examples of incorrect code for this rule:
/* eslint "@tanstack/query/exhaustive-deps": "error" */
useQuery({ queryKey: ["todo"], queryFn: () => api.getTodo(todoId)})
const todoQueries = { detail: (id) => ({ queryKey: ["todo"], queryFn: () => api.getTodo(id) })}
Examples of correct code for this rule:
useQuery({ queryKey: ["todo", todoId], queryFn: () => api.getTodo(todoId)})
const todoQueries = { detail: (id) => ({ queryKey: ["todo", id], queryFn: () => api.getTodo(id) })}
If you don't care about the rules of the query keys, then you will not need this rule.
Fast track your learning and
take the offical React Query course ↗️
Your weekly dose of JavaScript news. Delivered every Monday to over 100,000 devs, for free.