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.
