feat(codemod): isLoading codemod (#6388)

* feat(codemod): implement codemod that replaces the `isLoading` usages with `isPending` * fix(codemod): differentiate shorthand property usages in the codemod * chore(codemod): add the `useMutation` hook as well to the "affected hooks" list --------- Co-authored-by: Dominik Dorfmeister <office@dorfmeister.cc>
TanStack · Nov 28, 2023 · f62e079 · f62e079
1 parent 5039113
commit f62e079
Show file tree

Hide file tree

Showing 6 changed files with 582 additions and 0 deletions.
diff --git a/packages/codemods/src/v5/is-loading/__testfixtures__/default-import.input.tsx b/packages/codemods/src/v5/is-loading/__testfixtures__/default-import.input.tsx
@@ -0,0 +1,81 @@
+import * as React from 'react'
+import { useQuery } from '@tanstack/react-query'
+
+export const WithObjectPattern = () => {
+  const { isError, isLoading, isSuccess, status } = useQuery({
+    queryKey: ['queryKey'],
+    queryFn: () => ['data'],
+  })
+
+  if (isError || isLoading || isSuccess) {
+    console.log('Do something')
+  }
+
+  return <div>{JSON.stringify({ isError, isLoading, isSuccess, status })}</div>
+}
+
+export const WithObjectPatternAndRename = () => {
+  const { isError, isLoading: isLoadingRenamed, isSuccess, status } = useQuery({
+    queryKey: ['queryKey'],
+    queryFn: () => ['data'],
+  })
+
+  if (isError || isLoadingRenamed || isSuccess) {
+    console.log('Do something')
+  }
+
+  return <div>{JSON.stringify({ isError, isLoadingRenamed, isSuccess, status })}</div>
+}
+
+export const WithObjectPatternAndRestElement = () => {
+  const { isError, ...rest } = useQuery({
+    queryKey: ['queryKey'],
+    queryFn: () => ['data'],
+  })
+
+  if (isError || rest.isLoading || rest.isSuccess) {
+    console.log('Do something')
+  }
+
+  return <div>{JSON.stringify({ isError, isLoading: rest.isLoading, isSuccess: rest.isSuccess })}</div>
+}
+
+export const WithIdentifier = () => {
+  const queryResult = useQuery({
+    queryKey: ['queryKey'],
+    queryFn: () => ['data'],
+  })
+
+  if (queryResult.isError || queryResult.isLoading || queryResult.isSuccess) {
+    console.log('Do something')
+  }
+
+  return <div>{JSON.stringify(queryResult)}</div>
+}
+
+export const WithCombinations = () => {
+  function useSomethingElse() {
+    const { isError, isLoading, isSuccess, status } = useQuery({
+      queryKey: ['somethingElse'],
+      queryFn: () => ['data'],
+    })
+
+    return { isError, isLoading, isSuccess, status }
+  }
+
+  function useAnotherThing() {
+    const { isLoading, ...rest } = useQuery({
+      queryKey: ['anotherThing'],
+      queryFn: () => ['anotherData'],
+    })
+
+    return { isLoading: rest.isLoading, ...rest }
+  }
+
+  const { isError, isLoading: isLoadingRenamed, isSuccess, status } = useQuery({
+    queryKey: ['queryKey'],
+    queryFn: () => ['data'],
+  })
+
+  return isLoadingRenamed
+}
diff --git a/packages/codemods/src/v5/is-loading/__testfixtures__/default-import.output.tsx b/packages/codemods/src/v5/is-loading/__testfixtures__/default-import.output.tsx
@@ -0,0 +1,82 @@
+import * as React from 'react'
+import { useQuery } from '@tanstack/react-query'
+
+export const WithObjectPattern = () => {
+  const { isError, isPending, isSuccess, status } = useQuery({
+    queryKey: ['queryKey'],
+    queryFn: () => ['data'],
+  })
+
+  if (isError || isPending || isSuccess) {
+    console.log('Do something')
+  }
+
+  return <div>{JSON.stringify({ isError, isPending, isSuccess, status })}</div>;
+}
+
+export const WithObjectPatternAndRename = () => {
+  const { isError, isPending: isLoadingRenamed, isSuccess, status } = useQuery({
+    queryKey: ['queryKey'],
+    queryFn: () => ['data'],
+  })
+
+  if (isError || isLoadingRenamed || isSuccess) {
+    console.log('Do something')
+  }
+
+  return <div>{JSON.stringify({ isError, isLoadingRenamed, isSuccess, status })}</div>
+}
+
+export const WithObjectPatternAndRestElement = () => {
+  const { isError, ...rest } = useQuery({
+    queryKey: ['queryKey'],
+    queryFn: () => ['data'],
+  })
+
+  if (isError || rest.isPending || rest.isSuccess) {
+    console.log('Do something')
+  }
+
+  return <div>{JSON.stringify({ isError, isLoading: rest.isPending, isSuccess: rest.isSuccess })}</div>;
+}
+
+export const WithIdentifier = () => {
+  const queryResult = useQuery({
+    queryKey: ['queryKey'],
+    queryFn: () => ['data'],
+  })
+
+  if (queryResult.isError || queryResult.isPending || queryResult.isSuccess) {
+    console.log('Do something')
+  }
+
+  return <div>{JSON.stringify(queryResult)}</div>
+}
+
+export const WithCombinations = () => {
+  function useSomethingElse() {
+    const { isError, isPending, isSuccess, status } = useQuery({
+      queryKey: ['somethingElse'],
+      queryFn: () => ['data'],
+    })
+
+    return { isError, isPending, isSuccess, status };
+  }
+
+  function useAnotherThing() {
+    const { isPending, ...rest } = useQuery({
+      queryKey: ['anotherThing'],
+      queryFn: () => ['anotherData'],
+    })
+
+    return { isLoading: rest.isPending, ...rest };
+  }
+
+  const { isError, isPending: isLoadingRenamed, isSuccess, status } = useQuery({
+    queryKey: ['queryKey'],
+    queryFn: () => ['data'],
+  })
+
+  return isLoadingRenamed
+}
+
diff --git a/packages/codemods/src/v5/is-loading/__testfixtures__/named-import.input.tsx b/packages/codemods/src/v5/is-loading/__testfixtures__/named-import.input.tsx
@@ -0,0 +1,81 @@
+import * as React from 'react'
+import { useQuery as useRenamedUseQuery } from '@tanstack/react-query'
+
+export const WithObjectPattern = () => {
+  const { isError, isLoading, isSuccess, status } = useRenamedUseQuery({
+    queryKey: ['queryKey'],
+    queryFn: () => ['data'],
+  })
+
+  if (isError || isLoading || isSuccess) {
+    console.log('Do something')
+  }
+
+  return <div>{JSON.stringify({ isError, isLoading, isSuccess, status })}</div>
+}
+
+export const WithObjectPatternAndRename = () => {
+  const { isError, isLoading: isLoadingRenamed, isSuccess, status } = useRenamedUseQuery({
+    queryKey: ['queryKey'],
+    queryFn: () => ['data'],
+  })
+
+  if (isError || isLoadingRenamed || isSuccess) {
+    console.log('Do something')
+  }
+
+  return <div>{JSON.stringify({ isError, isLoadingRenamed, isSuccess, status })}</div>
+}
+
+export const WithObjectPatternAndRestElement = () => {
+  const { isError, ...rest } = useRenamedUseQuery({
+    queryKey: ['queryKey'],
+    queryFn: () => ['data'],
+  })
+
+  if (isError || rest.isLoading || rest.isSuccess) {
+    console.log('Do something')
+  }
+
+  return <div>{JSON.stringify({ isError, isLoading: rest.isLoading, isSuccess: rest.isSuccess })}</div>
+}
+
+export const WithIdentifier = () => {
+  const queryResult = useRenamedUseQuery({
+    queryKey: ['queryKey'],
+    queryFn: () => ['data'],
+  })
+
+  if (queryResult.isError || queryResult.isLoading || queryResult.isSuccess) {
+    console.log('Do something')
+  }
+
+  return <div>{JSON.stringify(queryResult)}</div>
+}
+
+export const WithCombinations = () => {
+  function useSomethingElse() {
+    const { isError, isLoading, isSuccess, status } = useRenamedUseQuery({
+      queryKey: ['somethingElse'],
+      queryFn: () => ['data'],
+    })
+
+    return { isError, isLoading, isSuccess, status }
+  }
+
+  function useAnotherThing() {
+    const { isLoading, ...rest } = useRenamedUseQuery({
+      queryKey: ['anotherThing'],
+      queryFn: () => ['anotherData'],
+    })
+
+    return { isLoading: rest.isLoading, ...rest }
+  }
+
+  const { isError, isLoading: isLoadingRenamed, isSuccess, status } = useRenamedUseQuery({
+    queryKey: ['queryKey'],
+    queryFn: () => ['data'],
+  })
+
+  return isLoadingRenamed
+}
diff --git a/packages/codemods/src/v5/is-loading/__testfixtures__/named-import.output.tsx b/packages/codemods/src/v5/is-loading/__testfixtures__/named-import.output.tsx
@@ -0,0 +1,81 @@
+import * as React from 'react'
+import { useQuery as useRenamedUseQuery } from '@tanstack/react-query'
+
+export const WithObjectPattern = () => {
+  const { isError, isPending, isSuccess, status } = useRenamedUseQuery({
+    queryKey: ['queryKey'],
+    queryFn: () => ['data'],
+  })
+
+  if (isError || isPending || isSuccess) {
+    console.log('Do something')
+  }
+
+  return <div>{JSON.stringify({ isError, isPending, isSuccess, status })}</div>;
+}
+
+export const WithObjectPatternAndRename = () => {
+  const { isError, isPending: isLoadingRenamed, isSuccess, status } = useRenamedUseQuery({
+    queryKey: ['queryKey'],
+    queryFn: () => ['data'],
+  })
+
+  if (isError || isLoadingRenamed || isSuccess) {
+    console.log('Do something')
+  }
+
+  return <div>{JSON.stringify({ isError, isLoadingRenamed, isSuccess, status })}</div>
+}
+
+export const WithObjectPatternAndRestElement = () => {
+  const { isError, ...rest } = useRenamedUseQuery({
+    queryKey: ['queryKey'],
+    queryFn: () => ['data'],
+  })
+
+  if (isError || rest.isPending || rest.isSuccess) {
+    console.log('Do something')
+  }
+
+  return <div>{JSON.stringify({ isError, isLoading: rest.isPending, isSuccess: rest.isSuccess })}</div>;
+}
+
+export const WithIdentifier = () => {
+  const queryResult = useRenamedUseQuery({
+    queryKey: ['queryKey'],
+    queryFn: () => ['data'],
+  })
+
+  if (queryResult.isError || queryResult.isPending || queryResult.isSuccess) {
+    console.log('Do something')
+  }
+
+  return <div>{JSON.stringify(queryResult)}</div>
+}
+
+export const WithCombinations = () => {
+  function useSomethingElse() {
+    const { isError, isPending, isSuccess, status } = useRenamedUseQuery({
+      queryKey: ['somethingElse'],
+      queryFn: () => ['data'],
+    })
+
+    return { isError, isPending, isSuccess, status };
+  }
+
+  function useAnotherThing() {
+    const { isPending, ...rest } = useRenamedUseQuery({
+      queryKey: ['anotherThing'],
+      queryFn: () => ['anotherData'],
+    })
+
+    return { isLoading: rest.isPending, ...rest };
+  }
+
+  const { isError, isPending: isLoadingRenamed, isSuccess, status } = useRenamedUseQuery({
+    queryKey: ['queryKey'],
+    queryFn: () => ['data'],
+  })
+
+  return isLoadingRenamed
+}
diff --git a/packages/codemods/src/v5/is-loading/__tests__/is-loading.test.js b/packages/codemods/src/v5/is-loading/__tests__/is-loading.test.js
@@ -0,0 +1,10 @@
+// eslint-disable-next-line @typescript-eslint/no-var-requires
+const defineTest = require('jscodeshift/dist/testUtils').defineTest
+
+defineTest(__dirname, 'is-loading', null, 'default-import', {
+  parser: 'tsx',
+})
+
+defineTest(__dirname, 'is-loading', null, 'named-import', {
+  parser: 'tsx',
+})