fix(codemod): add the packageName parameter to the locateImports function (#6285)

It's necessary, because before this change the above-mentioned function was looking for imports from the `react-query` package, but the package was renamed in the version 4 release. In case of the older codemods the `react-query` is still a valid package name, but for the current and future codemods we have to locate imports from the `@tanstack/react-query` package.

Author: balazsmatepetro

packages/codemods/src/utils/index.js

@@ -11,21 +11,24 @@ module.exports = ({ root, jscodeshift }) => {
     return jscodeshift.identifier(identifier)
   }
 
-  const findImportSpecifiers = () =>
+  const findImportSpecifiers = (packageName) =>
     root
       .find(jscodeshift.ImportDeclaration, {
         source: {
-          value: 'react-query',
+          value: packageName,
         },
       })
       .find(jscodeshift.ImportSpecifier, {})
 
-  const locateImports = (identifiers) => {
+  const locateImports = (
+    identifiers,
+    packageName = '@tanstack/react-query',
+  ) => {
     const findNamespaceImportIdentifier = () => {
       const specifier = root
         .find(jscodeshift.ImportDeclaration, {
           source: {
-            value: 'react-query',
+            value: packageName,
           },
         })
         .find(jscodeshift.ImportNamespaceSpecifier)
@@ -53,7 +56,7 @@ module.exports = ({ root, jscodeshift }) => {
       }
     }
 
-    const importSpecifiers = findImportSpecifiers()
+    const importSpecifiers = findImportSpecifiers(packageName)
     const identifierMap = {}
 
     for (const identifier of identifiers) {

packages/codemods/src/utils/transformers/query-cache-transformer.js

@@ -1,4 +1,9 @@
-module.exports = ({ jscodeshift, utils, root }) => {
+module.exports = ({
+  jscodeshift,
+  utils,
+  root,
+  packageName = '@tanstack/react-query',
+}) => {
   const isGetQueryCacheMethodCall = (
     initializer,
     importIdentifiers,
@@ -106,7 +111,10 @@ module.exports = ({ jscodeshift, utils, root }) => {
 
   const execute = (replacer) => {
     findQueryCacheMethodCalls(
-      utils.locateImports(['QueryCache', 'QueryClient', 'useQueryClient']),
+      utils.locateImports(
+        ['QueryCache', 'QueryClient', 'useQueryClient'],
+        packageName,
+      ),
     ).replaceWith(replacer)
   }
 

packages/codemods/src/utils/transformers/query-client-transformer.js

@@ -1,4 +1,9 @@
-module.exports = ({ jscodeshift, utils, root }) => {
+module.exports = ({
+  jscodeshift,
+  utils,
+  root,
+  packageName = '@tanstack/react-query',
+}) => {
   const filterQueryClientMethodCalls = (node, methods) =>
     utils.isIdentifier(node) && methods.includes(node.name)
 
@@ -37,7 +42,7 @@ module.exports = ({ jscodeshift, utils, root }) => {
 
   const execute = (methods, replacer) => {
     findQueryClientMethodCalls(
-      utils.locateImports(['QueryClient', 'useQueryClient']),
+      utils.locateImports(['QueryClient', 'useQueryClient'], packageName),
       methods,
     ).replaceWith(replacer)
   }

packages/codemods/src/utils/transformers/use-query-like-transformer.js

@@ -1,4 +1,9 @@
-module.exports = ({ jscodeshift, utils, root }) => {
+module.exports = ({
+  jscodeshift,
+  utils,
+  root,
+  packageName = '@tanstack/react-query',
+}) => {
   const filterUseQueryLikeHookCalls = (node, importIdentifiers, hooks) => {
     for (const hook of hooks) {
       const selector = utils.getSelectorByImports(importIdentifiers, hook)
@@ -21,9 +26,10 @@ module.exports = ({ jscodeshift, utils, root }) => {
       )
 
   const execute = (hooks, replacer) => {
-    findUseQueryLikeHookCalls(utils.locateImports(hooks), hooks).replaceWith(
-      replacer,
-    )
+    findUseQueryLikeHookCalls(
+      utils.locateImports(hooks, packageName),
+      hooks,
+    ).replaceWith(replacer)
   }
 
   return {

packages/codemods/src/v4/key-transformation.js

@@ -9,8 +9,19 @@ const createQueryClientTransformer = require('../utils/transformers/query-client
 // eslint-disable-next-line @typescript-eslint/no-var-requires
 const createQueryCacheTransformer = require('../utils/transformers/query-cache-transformer')
 
-const transformQueryClientUsages = ({ jscodeshift, utils, root, filePath }) => {
-  const transformer = createQueryClientTransformer({ jscodeshift, utils, root })
+const transformQueryClientUsages = ({
+  jscodeshift,
+  utils,
+  root,
+  filePath,
+  packageName,
+}) => {
+  const transformer = createQueryClientTransformer({
+    jscodeshift,
+    utils,
+    root,
+    packageName,
+  })
   const replacer = createKeyReplacer({ jscodeshift, root, filePath })
 
   transformer.execute(
@@ -41,11 +52,17 @@ const transformQueryClientUsages = ({ jscodeshift, utils, root, filePath }) => {
   )
 }
 
-const transformUseQueriesUsages = ({ jscodeshift, utils, root }) => {
+const transformUseQueriesUsages = ({
+  jscodeshift,
+  utils,
+  root,
+  packageName,
+}) => {
   const transformer = createUseQueryLikeTransformer({
     jscodeshift,
     utils,
     root,
+    packageName,
   })
   const replacer = ({ node }) => {
     /**
@@ -82,11 +99,13 @@ const transformUseQueryLikeUsages = ({
   utils,
   root,
   filePath,
+  packageName,
 }) => {
   const transformer = createUseQueryLikeTransformer({
     jscodeshift,
     utils,
     root,
+    packageName,
   })
 
   transformer.execute(
@@ -109,8 +128,19 @@ const transformUseQueryLikeUsages = ({
   )
 }
 
-const transformQueryCacheUsages = ({ jscodeshift, utils, root, filePath }) => {
-  const transformer = createQueryCacheTransformer({ jscodeshift, utils, root })
+const transformQueryCacheUsages = ({
+  jscodeshift,
+  utils,
+  root,
+  filePath,
+  packageName,
+}) => {
+  const transformer = createQueryCacheTransformer({
+    jscodeshift,
+    utils,
+    root,
+    packageName,
+  })
   const replacer = createKeyReplacer({ jscodeshift, root, filePath })
 
   transformer.execute(replacer)
@@ -124,15 +154,33 @@ module.exports = (file, api) => {
 
   const utils = createUtilsObject({ root, jscodeshift })
   const filePath = file.path
+  const packageName = 'react-query'
 
   // This function transforms usages like `useQuery` and `useMutation`.
-  transformUseQueryLikeUsages({ jscodeshift, utils, root, filePath })
+  transformUseQueryLikeUsages({
+    jscodeshift,
+    utils,
+    root,
+    filePath,
+    packageName,
+  })
   // This function transforms usages of `useQueries`.
-  transformUseQueriesUsages({ jscodeshift, utils, root })
+  transformUseQueriesUsages({
+    jscodeshift,
+    utils,
+    root,
+    packageName,
+  })
   // This function transforms usages of `QueryClient`.
-  transformQueryClientUsages({ jscodeshift, utils, root, filePath })
+  transformQueryClientUsages({
+    jscodeshift,
+    utils,
+    root,
+    filePath,
+    packageName,
+  })
   // This function transforms usages of `QueryCache`.
-  transformQueryCacheUsages({ jscodeshift, utils, root, filePath })
+  transformQueryCacheUsages({ jscodeshift, utils, root, filePath, packageName })
 
   return root.toSource({ quote: 'single', lineTerminator: '\n' })
 }