Query functions must return a value that will be cached by TanStack Query. Functions that don't return a value (void functions) can lead to unexpected behavior and might indicate a mistake in the implementation.
Example of incorrect code for this rule:
/* eslint "@tanstack/query/no-void-query-fn": "error" */
useQuery({
queryKey: ['todos'],
queryFn: async () => {
await api.todos.fetch() // Function doesn't return the fetched data
},
})
/* eslint "@tanstack/query/no-void-query-fn": "error" */
useQuery({
queryKey: ['todos'],
queryFn: async () => {
await api.todos.fetch() // Function doesn't return the fetched data
},
})
Example of correct code for this rule:
/* eslint "@tanstack/query/no-void-query-fn": "error" */
useQuery({
queryKey: ['todos'],
queryFn: async () => {
const todos = await api.todos.fetch()
return todos
},
})
/* eslint "@tanstack/query/no-void-query-fn": "error" */
useQuery({
queryKey: ['todos'],
queryFn: async () => {
const todos = await api.todos.fetch()
return todos
},
})