You can use useQuery in two different ways.
Standard
useQuery(queryKey, queryFn?, options?)
// or
useQuery(options)
useQuery(queryKey, queryFn?, options?)
// or
useQuery(options)
This rule prefers the second option, as it is more consistent with other React Query hooks, like useQueries. It will also be the only available option in a future major version.
Examples of incorrect code for this rule:
/* eslint "@tanstack/query/prefer-query-object-syntax": "error" */
import { useQuery } from '@tanstack/react-query';
useQuery(queryKey, queryFn, {
onSuccess,
});
useQuery(queryKey, {
queryFn,
onSuccess,
});
/* eslint "@tanstack/query/prefer-query-object-syntax": "error" */
import { useQuery } from '@tanstack/react-query';
useQuery(queryKey, queryFn, {
onSuccess,
});
useQuery(queryKey, {
queryFn,
onSuccess,
});
Examples of correct code for this rule:
import { useQuery } from '@tanstack/react-query';
useQuery({
queryKey,
queryFn,
onSuccess,
});
import { useQuery } from '@tanstack/react-query';
useQuery({
queryKey,
queryFn,
onSuccess,
});
If you don't care about useQuery consistency, then you will not need this rule.
This rule was initially developed by KubaJastrz in eslint-plugin-react-query.
“This course is the best way to learn how to use React Query in real-world applications.”—Tanner LinsleyGet the course