feat(eslint-plugin): no void queryFn (#8878)

Newbie012 · autofix-ci[bot] · web-flow · commit c2e5272346b9 · 2025-03-30T10:49:49.000+02:00
* feat(eslint-plugin-query): implement no-void-query-fn rule

* add docs

* ci: apply automated fixes

---------

Co-authored-by: autofix-ci[bot] &lt;114827586+autofix-ci[bot]@users.noreply.github.com&gt;
diff --git a/docs/eslint/eslint-plugin-query.md b/docs/eslint/eslint-plugin-query.md
@@ -98,3 +98,4 @@ Alternatively, add `@tanstack/query` to the plugins section, and configure the r
 - [@tanstack/query/stable-query-client](./stable-query-client.md)
 - [@tanstack/query/no-unstable-deps](./no-unstable-deps.md)
 - [@tanstack/query/infinite-query-property-order](./infinite-query-property-order.md)
+- [@tanstack/query/no-void-query-fn](./no-void-query-fn.md)
diff --git a/docs/eslint/no-void-query-fn.md b/docs/eslint/no-void-query-fn.md
@@ -0,0 +1,39 @@
+---
+id: no-void-query-fn
+title: Disallow returning void from query functions
+---
+
+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.
+
+## Rule Details
+
+Example of **incorrect** code for this rule:
+
+```tsx
+/* 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:
+
+```tsx
+/* eslint "@tanstack/query/no-void-query-fn": "error" */
+useQuery({
+  queryKey: ['todos'],
+  queryFn: async () => {
+    const todos = await api.todos.fetch()
+    return todos
+  },
+})
+```
+
+## Attributes
+
+- [x] ✅ Recommended
+- [ ] 🔧 Fixable
diff --git a/packages/eslint-plugin-query/src/__tests__/no-void-query-fn.test.ts b/packages/eslint-plugin-query/src/__tests__/no-void-query-fn.test.ts
@@ -0,0 +1,325 @@
+import path from 'node:path'
+import { RuleTester } from '@typescript-eslint/rule-tester'
+import { afterAll, describe, it } from 'vitest'
+import { rule } from '../rules/no-void-query-fn/no-void-query-fn.rule'
+import { normalizeIndent } from './test-utils'
+
+RuleTester.afterAll = afterAll
+RuleTester.describe = describe
+RuleTester.it = it
+
+const ruleTester = new RuleTester({
+  languageOptions: {
+    parser: await import('@typescript-eslint/parser'),
+    parserOptions: {
+      project: true,
+      tsconfigRootDir: path.resolve(__dirname, './ts-fixture'),
+    },
+  },
+})
+
+ruleTester.run('no-void-query-fn', rule, {
+  valid: [
+    {
+      name: 'queryFn returns a value',
+      code: normalizeIndent`
+        import { useQuery } from '@tanstack/react-query'
+
+        function Component() {
+          const query = useQuery({
+            queryKey: ['test'],
+            queryFn: () => ({ data: 'test' }),
+          })
+          return null
+        }
+      `,
+    },
+    {
+      name: 'queryFn returns a Promise',
+      code: normalizeIndent`
+        import { useQuery } from '@tanstack/react-query'
+
+        function Component() {
+          const query = useQuery({
+            queryKey: ['test'],
+            queryFn: async () => ({ data: 'test' }),
+          })
+          return null
+        }
+      `,
+    },
+    {
+      name: 'queryFn returns Promise.resolve',
+      code: normalizeIndent`
+        import { useQuery } from '@tanstack/react-query'
+
+        function Component() {
+          const query = useQuery({
+            queryKey: ['test'],
+            queryFn: () => Promise.resolve({ data: 'test' }),
+          })
+          return null
+        }
+      `,
+    },
+    {
+      name: 'queryFn with explicit Promise type',
+      code: normalizeIndent`
+        import { useQuery } from '@tanstack/react-query'
+
+        interface Data {
+          value: string
+        }
+
+        function Component() {
+          const query = useQuery({
+            queryKey: ['test'],
+            queryFn: async (): Promise<Data> => {
+              return { value: 'test' }
+            },
+          })
+          return null
+        }
+      `,
+    },
+    {
+      name: 'queryFn with generic Promise type',
+      code: normalizeIndent`
+        import { useQuery } from '@tanstack/react-query'
+
+        interface Response<T> {
+          data: T
+        }
+
+        function Component() {
+          const query = useQuery({
+            queryKey: ['test'],
+            queryFn: async (): Promise<Response<string>> => {
+              return { data: 'test' }
+            },
+          })
+          return null
+        }
+      `,
+    },
+    {
+      name: 'queryFn with external async function',
+      code: normalizeIndent`
+        import { useQuery } from '@tanstack/react-query'
+
+        async function fetchData(): Promise<{ data: string }> {
+          return { data: 'test' }
+        }
+
+        function Component() {
+          const query = useQuery({
+            queryKey: ['test'],
+            queryFn: fetchData,
+          })
+          return null
+        }
+      `,
+    },
+    {
+      name: 'queryFn returns null',
+      code: normalizeIndent`
+        import { useQuery } from '@tanstack/react-query'
+
+        function Component() {
+          const query = useQuery({
+            queryKey: ['test'],
+            queryFn: () => null,
+          })
+          return null
+        }
+      `,
+    },
+    {
+      name: 'queryFn returns 0',
+      code: normalizeIndent`
+        import { useQuery } from '@tanstack/react-query'
+
+        function Component() {
+          const query = useQuery({
+            queryKey: ['test'],
+            queryFn: () => 0,
+          })
+          return null
+        }
+      `,
+    },
+    {
+      name: 'queryFn returns false',
+      code: normalizeIndent`
+        import { useQuery } from '@tanstack/react-query'
+
+        function Component() {
+          const query = useQuery({
+            queryKey: ['test'],
+            queryFn: () => false,
+          })
+          return null
+        }
+      `,
+    },
+  ],
+  invalid: [
+    {
+      name: 'queryFn returns void',
+      code: normalizeIndent`
+        import { useQuery } from '@tanstack/react-query'
+
+        function Component() {
+          const query = useQuery({
+            queryKey: ['test'],
+            queryFn: () => {
+              console.log('test')
+            },
+          })
+          return null
+        }
+      `,
+      errors: [{ messageId: 'noVoidReturn' }],
+    },
+    {
+      name: 'queryFn returns undefined',
+      code: normalizeIndent`
+        import { useQuery } from '@tanstack/react-query'
+
+        function Component() {
+          const query = useQuery({
+            queryKey: ['test'],
+            queryFn: () => undefined,
+          })
+          return null
+        }
+      `,
+      errors: [{ messageId: 'noVoidReturn' }],
+    },
+    {
+      name: 'async queryFn returns void',
+      code: normalizeIndent`
+        import { useQuery } from '@tanstack/react-query'
+
+        function Component() {
+          const query = useQuery({
+            queryKey: ['test'],
+            queryFn: async () => {
+              await someOperation()
+            },
+          })
+          return null
+        }
+      `,
+      errors: [{ messageId: 'noVoidReturn' }],
+    },
+    {
+      name: 'queryFn with explicit void Promise',
+      code: normalizeIndent`
+        import { useQuery } from '@tanstack/react-query'
+
+        function Component() {
+          const query = useQuery({
+            queryKey: ['test'],
+            queryFn: async (): Promise<void> => {
+              await someOperation()
+            },
+          })
+          return null
+        }
+      `,
+      errors: [{ messageId: 'noVoidReturn' }],
+    },
+    {
+      name: 'queryFn with Promise.resolve(undefined)',
+      code: normalizeIndent`
+        import { useQuery } from '@tanstack/react-query'
+
+        function Component() {
+          const query = useQuery({
+            queryKey: ['test'],
+            queryFn: () => Promise.resolve(undefined),
+          })
+          return null
+        }
+      `,
+      errors: [{ messageId: 'noVoidReturn' }],
+    },
+    {
+      name: 'queryFn with external void async function',
+      code: normalizeIndent`
+        import { useQuery } from '@tanstack/react-query'
+
+        async function voidOperation(): Promise<void> {
+          await someOperation()
+        }
+
+        function Component() {
+          const query = useQuery({
+            queryKey: ['test'],
+            queryFn: voidOperation,
+          })
+          return null
+        }
+      `,
+      errors: [{ messageId: 'noVoidReturn' }],
+    },
+    {
+      name: 'queryFn with conditional return (one branch missing)',
+      code: normalizeIndent`
+        import { useQuery } from '@tanstack/react-query'
+
+        function Component() {
+          const query = useQuery({
+            queryKey: ['test'],
+            queryFn: () => {
+              if (Math.random() > 0.5) {
+                return { data: 'test' }
+              }
+              // Missing return in the else case
+            },
+          })
+          return null
+        }
+      `,
+      errors: [{ messageId: 'noVoidReturn' }],
+    },
+    {
+      name: 'queryFn with ternary operator returning undefined',
+      code: normalizeIndent`
+        import { useQuery } from '@tanstack/react-query'
+
+        function Component() {
+          const query = useQuery({
+            queryKey: ['test'],
+            queryFn: () => Math.random() > 0.5 ? { data: 'test' } : undefined,
+          })
+          return null
+        }
+      `,
+      errors: [{ messageId: 'noVoidReturn' }],
+    },
+    {
+      name: 'async queryFn with try/catch missing return in catch',
+      code: normalizeIndent`
+        import { useQuery } from '@tanstack/react-query'
+
+        function Component() {
+          const query = useQuery({
+            queryKey: ['test'],
+            queryFn: async () => {
+              try {
+                return { data: 'test' }
+              } catch (error) {
+                console.error(error)
+                // No return here results in an implicit undefined
+              }
+            },
+          })
+          return null
+        }
+      `,
+      errors: [{ messageId: 'noVoidReturn' }],
+    },
+  ],
+})
diff --git a/packages/eslint-plugin-query/src/__tests__/ts-fixture/file.ts b/packages/eslint-plugin-query/src/__tests__/ts-fixture/file.ts
@@ -0,0 +1 @@
+// File needs to exists
diff --git a/packages/eslint-plugin-query/src/__tests__/ts-fixture/tsconfig.json b/packages/eslint-plugin-query/src/__tests__/ts-fixture/tsconfig.json
@@ -0,0 +1,10 @@
+{
+  "compilerOptions": {
+    "target": "ESNext",
+    "module": "ESNext",
+    "moduleResolution": "Bundler",
+    "strict": true,
+    "skipLibCheck": true
+  },
+  "include": ["**/*"]
+}
diff --git a/packages/eslint-plugin-query/src/index.ts b/packages/eslint-plugin-query/src/index.ts
@@ -30,6 +30,7 @@ Object.assign(plugin.configs, {
       '@tanstack/query/stable-query-client': 'error',
       '@tanstack/query/no-unstable-deps': 'error',
       '@tanstack/query/infinite-query-property-order': 'error',
+      '@tanstack/query/no-void-query-fn': 'error',
     },
   },
   'flat/recommended': [
@@ -44,6 +45,7 @@ Object.assign(plugin.configs, {
         '@tanstack/query/stable-query-client': 'error',
         '@tanstack/query/no-unstable-deps': 'error',
         '@tanstack/query/infinite-query-property-order': 'error',
+        '@tanstack/query/no-void-query-fn': 'error',
       },
     },
   ],
diff --git a/packages/eslint-plugin-query/src/rules.ts b/packages/eslint-plugin-query/src/rules.ts
diff --git a/packages/eslint-plugin-query/src/rules/no-void-query-fn/no-void-query-fn.rule.ts b/packages/eslint-plugin-query/src/rules/no-void-query-fn/no-void-query-fn.rule.ts
