state/query-object-syntax

Why

Version 5 removed the overloads that took the key, the function and the options as separate arguments. Code copied from older tutorials, or written from memory by an agent, fails type checking or throws at run time after an upgrade.

Fix

Pass one object: useQuery({ queryKey: ['todos'], queryFn: getTodos }), useMutation({ mutationFn: addTodo }). While upgrading, also rename cacheTime to gcTime and isLoading (first load) to isPending.

Examples

// bad
useQuery(['todos'], getTodos, { staleTime: 60_000 })
useMutation((todo) => addTodo(todo))
// good
useQuery({ queryKey: ['todos'], queryFn: getTodos, staleTime: 60_000 })
useMutation({ mutationFn: addTodo })

Sources

• TanStack Query docs, Migrating to TanStack Query v5 (supports a single signature, one object)

Read it in the terminal

npx github:dawidolko/frontend-skills explain state/query-object-syntax