Skip to content

Commit

Permalink
feat(eslint-plugin): use typescript-eslint v8 stable (#7968)
Browse files Browse the repository at this point in the history 
* feat(eslint-plugin-query): use @typescript-eslint/utils stable v8

* test(eslint-plugin-query): fix missing parser

* Remove @typescript-eslint/parser

* Fix suggestion for empty queryKey array

---------

Co-authored-by: Lachlan Collins <1667261+lachlancollins@users.noreply.github.com>
  • Loading branch information
@rivajunior @lachlancollins
rivajunior and lachlancollins authored Aug 30, 2024
1 parent 9e75547 commit f3aad7c
Show file tree
Hide file tree
Showing 7 changed files with 153 additions and 86 deletions.
8 changes: 4 additions & 4 deletions packages/eslint-plugin-query/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -50,13 +50,13 @@
"src"
],
"dependencies": {
"@typescript-eslint/utils": "8.0.0-alpha.30"
"@typescript-eslint/utils": "^8.3.0"
},
"devDependencies": {
"@typescript-eslint/rule-tester": "8.0.0-alpha.30",
"eslint": "^9.5.0"
"@typescript-eslint/rule-tester": "^8.3.0",
"eslint": "^9.9.1"
},
"peerDependencies": {
"eslint": "^8 || ^9"
"eslint": "^8.57.0 || ^9.0.0"
}
}
71 changes: 56 additions & 15 deletions packages/eslint-plugin-query/src/__tests__/exhaustive-deps.test.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,10 +2,7 @@ import { RuleTester } from '@typescript-eslint/rule-tester'
import { rule } from '../rules/exhaustive-deps/exhaustive-deps.rule'
import { normalizeIndent } from './test-utils'

const ruleTester = new RuleTester({
parser: '@typescript-eslint/parser',
settings: {},
})
const ruleTester = new RuleTester()

ruleTester.run('exhaustive-deps', rule, {
valid: [
Expand Down Expand Up @@ -146,7 +143,7 @@ ruleTester.run('exhaustive-deps', rule, {
foo: () => ['foo'] as const,
num: (num: number) => [...fooQueryKeyFactory.foo(), num] as const,
}
const useFoo = (num: number) =>
useQuery({
queryKey: fooQueryKeyFactory.foo(num),
Expand All @@ -161,7 +158,7 @@ ruleTester.run('exhaustive-deps', rule, {
foo: () => ['foo'] as const,
num: (num: number) => [...fooQueryKeyFactory.foo(), num] as const,
}
const useFoo = (num: number) =>
useQuery({
queryKey: fooQueryKeyFactory.foo({ x: num }),
Expand All @@ -176,7 +173,7 @@ ruleTester.run('exhaustive-deps', rule, {
foo: () => ['foo'] as const,
num: (num: number) => [...fooQueryKeyFactory.foo(), num] as const,
}
const useFoo = (num: number) =>
useQuery({
queryKey: fooQueryKeyFactory.foo({ num }),
Expand All @@ -191,7 +188,7 @@ ruleTester.run('exhaustive-deps', rule, {
foo: () => ['foo'] as const,
num: (num: number) => [...fooQueryKeyFactory.foo(), num] as const,
}
const useFoo = (num: number) =>
useQuery({
queryKey: fooQueryKeyFactory.foo([num]),
Expand All @@ -206,7 +203,7 @@ ruleTester.run('exhaustive-deps', rule, {
foo: () => ['foo'] as const,
num: (num: number) => [...fooQueryKeyFactory.foo(), num] as const,
}
const useFoo = (num: number) =>
useQuery({
queryKey: fooQueryKeyFactory.foo(1, num),
Expand All @@ -221,7 +218,7 @@ ruleTester.run('exhaustive-deps', rule, {
foo: () => ['foo'] as const,
num: (num: number) => [...fooQueryKeyFactory.foo(), num] as const,
}
const useFoo = (obj: { num: number }) =>
useQuery({
queryKey: fooQueryKeyFactory.foo(obj.num),
Expand Down Expand Up @@ -253,7 +250,7 @@ ruleTester.run('exhaustive-deps', rule, {
name: 'should not fail if queryKey is having the whole object while queryFn uses some props of it',
code: normalizeIndent`
const state = { foo: 'foo', bar: 'bar' }
useQuery({
queryKey: ['state', state],
queryFn: () => Promise.resolve({ foo: state.foo, bar: state.bar })
Expand Down Expand Up @@ -407,7 +404,7 @@ ruleTester.run('exhaustive-deps', rule, {
code: normalizeIndent`
import { useQuery, skipToken } from "@tanstack/react-query";
const fetch = true
function Component({ id }) {
useQuery({
queryKey: [id],
Expand Down Expand Up @@ -715,14 +712,27 @@ ruleTester.run('exhaustive-deps', rule, {
name: 'should fail if queryFn is using multiple object props when only one of them is in the queryKey',
code: normalizeIndent`
const state = { foo: 'foo', bar: 'bar' }
useQuery({
queryKey: ['state', state.foo],
queryFn: () => Promise.resolve({ foo: state.foo, bar: state.bar })
})
`,
errors: [
{
suggestions: [
{
messageId: 'fixTo',
output: normalizeIndent`
const state = { foo: 'foo', bar: 'bar' }
useQuery({
queryKey: ['state', state.foo, state.bar],
queryFn: () => Promise.resolve({ foo: state.foo, bar: state.bar })
})
`,
},
],
messageId: 'missingDeps',
data: { deps: 'state.bar' },
},
Expand All @@ -732,7 +742,7 @@ ruleTester.run('exhaustive-deps', rule, {
name: 'should fail if queryFn is invalid while using FunctionExpression syntax',
code: normalizeIndent`
const id = 1;
useQuery({
queryKey: [],
queryFn() {
Expand All @@ -742,6 +752,21 @@ ruleTester.run('exhaustive-deps', rule, {
`,
errors: [
{
suggestions: [
{
messageId: 'fixTo',
output: normalizeIndent`
const id = 1;
useQuery({
queryKey: [id],
queryFn() {
Promise.resolve(id)
}
})
`,
},
],
messageId: 'missingDeps',
data: { deps: 'id' },
},
Expand All @@ -752,7 +777,7 @@ ruleTester.run('exhaustive-deps', rule, {
code: normalizeIndent`
import { useQuery, skipToken } from "@tanstack/react-query";
const fetch = true
function Component({ id }) {
useQuery({
queryKey: [],
Expand All @@ -762,6 +787,22 @@ ruleTester.run('exhaustive-deps', rule, {
`,
errors: [
{
suggestions: [
{
messageId: 'fixTo',
output: normalizeIndent`
import { useQuery, skipToken } from "@tanstack/react-query";
const fetch = true
function Component({ id }) {
useQuery({
queryKey: [id],
queryFn: fetch ? () => Promise.resolve(id) : skipToken
})
}
`,
},
],
messageId: 'missingDeps',
data: { deps: 'id' },
},
Expand Down
5 changes: 1 addition & 4 deletions packages/eslint-plugin-query/src/__tests__/no-rest-destructuring.test.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,10 +2,7 @@ import { RuleTester } from '@typescript-eslint/rule-tester'
import { rule } from '../rules/no-rest-destructuring/no-rest-destructuring.rule'
import { normalizeIndent } from './test-utils'

const ruleTester = new RuleTester({
parser: '@typescript-eslint/parser',
settings: {},
})
const ruleTester = new RuleTester()

ruleTester.run('no-rest-destructuring', rule, {
valid: [
Expand Down
11 changes: 4 additions & 7 deletions packages/eslint-plugin-query/src/__tests__/no-unstable-deps.test.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,10 +5,7 @@ import {
useQueryHookNames,
} from '../rules/no-unstable-deps/no-unstable-deps.rule'

const ruleTester = new RuleTester({
parser: '@typescript-eslint/parser',
settings: {},
})
const ruleTester = new RuleTester()

interface TestCase {
reactHookImport: string
Expand Down Expand Up @@ -37,7 +34,7 @@ const baseTestCases = {
code: `
${reactHookImport}
import { ${queryHook} } from "@tanstack/react-query";
function Component() {
const { refetch } = ${queryHook}({ queryFn: (value: string) => value });
const callback = ${reactHookInvocation}(() => { query.refetch() }, [refetch]);
Expand All @@ -57,7 +54,7 @@ const baseTestCases = {
code: `
${reactHookImport}
import { useMutation } from "@tanstack/react-query";
function Component() {
const mutation = useMutation({ mutationFn: (value: string) => value });
const callback = ${reactHookInvocation}(() => { mutation.mutate('hello') }, [mutation]);
Expand All @@ -77,7 +74,7 @@ const baseTestCases = {
code: `
${reactHookImport}
import { ${queryHook} } from "@tanstack/react-query";
function Component() {
const query = ${queryHook}({ queryFn: (value: string) => value });
const callback = ${reactHookInvocation}(() => { query.refetch() }, [query]);
Expand Down
9 changes: 3 additions & 6 deletions packages/eslint-plugin-query/src/__tests__/stable-query-client.test.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,10 +2,7 @@ import { RuleTester } from '@typescript-eslint/rule-tester'
import { rule } from '../rules/stable-query-client/stable-query-client.rule'
import { normalizeIndent } from './test-utils'

const ruleTester = new RuleTester({
parser: '@typescript-eslint/parser',
settings: {},
})
const ruleTester = new RuleTester()

ruleTester.run('stable-query-client', rule, {
valid: [
Expand Down Expand Up @@ -35,7 +32,7 @@ ruleTester.run('stable-query-client', rule, {
name: 'QueryClient is stable when wrapped in React.useMemo',
code: normalizeIndent`
import { QueryClient } from "@tanstack/react-query";
function Component() {
const [queryClient] = React.useMemo(() => new QueryClient(), []);
return;
Expand All @@ -46,7 +43,7 @@ ruleTester.run('stable-query-client', rule, {
name: 'QueryClient is stable when wrapped in useAnything',
code: normalizeIndent`
import { QueryClient } from "@tanstack/react-query";
function Component() {
const [queryClient] = useAnything(() => new QueryClient());
return;
Expand Down
14 changes: 8 additions & 6 deletions packages/eslint-plugin-query/src/rules/exhaustive-deps/exhaustive-deps.rule.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -85,7 +85,6 @@ export const rule = createRule({
}
}

const queryKeyValue = queryKeyNode
const externalRefs = ASTUtils.getExternalRefs({
scopeManager,
sourceCode: context.sourceCode,
Expand All @@ -101,7 +100,7 @@ export const rule = createRule({
}),
)

const existingKeys = ASTUtils.getNestedIdentifiers(queryKeyValue).map(
const existingKeys = ASTUtils.getNestedIdentifiers(queryKeyNode).map(
(identifier) =>
ASTUtils.mapKeyNodeToText(identifier, context.sourceCode),
)
Expand Down Expand Up @@ -133,9 +132,12 @@ export const rule = createRule({
)
.join(', ')

const existingWithMissing = context.sourceCode
.getText(queryKeyValue)
.replace(/\]$/, `, ${missingAsText}]`)
const queryKeyValue = context.sourceCode.getText(queryKeyNode)

const existingWithMissing =
queryKeyValue === '[]'
? `[${missingAsText}]`
: queryKeyValue.replace(/\]$/, `, ${missingAsText}]`)

const suggestions: TSESLint.ReportSuggestionArray<string> = []

Expand All @@ -144,7 +146,7 @@ export const rule = createRule({
messageId: 'fixTo',
data: { result: existingWithMissing },
fix(fixer) {
return fixer.replaceText(queryKeyValue, existingWithMissing)
return fixer.replaceText(queryKeyNode, existingWithMissing)
},
})
}
Expand Down
Loading

0 comments on commit f3aad7c

Please sign in to comment.