state/query-key-deps

Why

The key is the cache address and the only thing TanStack Query watches. With queryKey: ['todo'] and queryFn: () => getTodo(id), every todo shares one cache entry: open todo 2 after todo 1 and the page shows todo 1's data, and changing id never refetches.

Fix

Put every value the query function uses into the key, in order from general to specific: queryKey: ['todo', id], ['todos', { status, page }]. In Vue pass the ref or getter itself (['todo', id]), not id.value. Build keys and functions together with queryOptions() or a key factory so they cannot drift apart, and enable @tanstack/query/exhaustive-deps in ESLint.

Examples

// bad
useQuery({ queryKey: ['todo'], queryFn: () => getTodo(todoId) })
// good
useQuery({ queryKey: ['todo', todoId], queryFn: () => getTodo(todoId) })

Sources

• TanStack Query docs, Query Keys (if your query function depends on a variable, include it in your query key)
• TanStack Query docs, ESLint rule exhaustive-deps

Read it in the terminal

npx github:dawidolko/frontend-skills explain state/query-key-deps