You can use useQuery
in two different ways.
Standard
tsx
useQuery(queryKey, queryFn?, options?)// oruseQuery(options)
tsx
useQuery(queryKey, queryFn?, options?)// oruseQuery(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:
js
/* eslint "@tanstack/query/prefer-query-object-syntax": "error" */import { useQuery } from '@tanstack/react-query';useQuery(queryKey, queryFn, {onSuccess,});useQuery(queryKey, {queryFn,onSuccess,});
js
/* 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:
js
import { useQuery } from '@tanstack/react-query';useQuery({queryKey,queryFn,onSuccess,});
js
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 LinsleyCheck it out