@tanstack/react-query 4.0.5

package/codemods/v4/key-transformation.js

@@ -0,0 +1,138 @@
+// eslint-disable-next-line @typescript-eslint/no-var-requires
+const createUtilsObject = require('./utils')
+// eslint-disable-next-line @typescript-eslint/no-var-requires
+const createKeyReplacer = require('./utils/replacers/key-replacer')
+// eslint-disable-next-line @typescript-eslint/no-var-requires
+const createUseQueryLikeTransformer = require('./utils/transformers/use-query-like-transformer')
+// eslint-disable-next-line @typescript-eslint/no-var-requires
+const createQueryClientTransformer = require('./utils/transformers/query-client-transformer')
+// 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 replacer = createKeyReplacer({ jscodeshift, root, filePath })
+
+  transformer.execute(
+    [
+      // Not object syntax-aware methods.
+      'getMutationDefaults',
+      'getQueriesData',
+      'getQueryData',
+      'getQueryDefaults',
+      'getQueryState',
+      'isFetching',
+      'setMutationDefaults',
+      'setQueriesData',
+      'setQueryData',
+      'setQueryDefaults',
+      // Object syntax-aware methods.
+      'cancelQueries',
+      'fetchInfiniteQuery',
+      'fetchQuery',
+      'invalidateQueries',
+      'prefetchInfiniteQuery',
+      'prefetchQuery',
+      'refetchQueries',
+      'removeQueries',
+      'resetQueries',
+    ],
+    replacer
+  )
+}
+
+const transformUseQueriesUsages = ({ jscodeshift, utils, root }) => {
+  const transformer = createUseQueryLikeTransformer({
+    jscodeshift,
+    utils,
+    root,
+  })
+  const replacer = ({ node }) => {
+    /**
+     * When the node doesn't have the 'original' property, that means the codemod has been already applied,
+     * so we don't need to do any changes.
+     */
+    if (!node.original) {
+      return node
+    }
+
+    const newCallExpression = jscodeshift.callExpression(node.original.callee, [
+      jscodeshift.objectExpression([
+        jscodeshift.property(
+          'init',
+          jscodeshift.identifier('queries'),
+          node.original.arguments[0]
+        ),
+      ]),
+    ])
+
+    // TODO: This should be part of one function!
+    if (node.typeParameters) {
+      newCallExpression.typeArguments = node.typeParameters
+    }
+
+    return newCallExpression
+  }
+
+  transformer.execute(['useQueries'], replacer)
+}
+
+const transformUseQueryLikeUsages = ({
+  jscodeshift,
+  utils,
+  root,
+  filePath,
+}) => {
+  const transformer = createUseQueryLikeTransformer({
+    jscodeshift,
+    utils,
+    root,
+  })
+
+  transformer.execute(
+    ['useQuery', 'useInfiniteQuery', 'useIsFetching', 'useIsMutating'],
+    createKeyReplacer({
+      jscodeshift,
+      root,
+      filePath,
+      keyName: 'queryKey',
+    })
+  )
+  transformer.execute(
+    ['useMutation'],
+    createKeyReplacer({
+      jscodeshift,
+      root,
+      filePath,
+      keyName: 'mutationKey',
+    })
+  )
+}
+
+const transformQueryCacheUsages = ({ jscodeshift, utils, root, filePath }) => {
+  const transformer = createQueryCacheTransformer({ jscodeshift, utils, root })
+  const replacer = createKeyReplacer({ jscodeshift, root, filePath })
+
+  transformer.execute(replacer)
+}
+
+module.exports = (file, api) => {
+  const jscodeshift = api.jscodeshift
+  const root = jscodeshift(file.source)
+
+  // TODO: Execute the transformers only when it contains a `react-query` import!
+
+  const utils = createUtilsObject({ root, jscodeshift })
+  const filePath = file.path
+
+  // This function transforms usages like `useQuery` and `useMutation`.
+  transformUseQueryLikeUsages({ jscodeshift, utils, root, filePath })
+  // This function transforms usages of `useQueries`.
+  transformUseQueriesUsages({ jscodeshift, utils, root })
+  // This function transforms usages of `QueryClient`.
+  transformQueryClientUsages({ jscodeshift, utils, root, filePath })
+  // This function transforms usages of `QueryCache`.
+  transformQueryCacheUsages({ jscodeshift, utils, root, filePath })
+
+  return root.toSource({ quote: 'single' })
+}

package/codemods/v4/replace-import-specifier.js

@@ -0,0 +1,25 @@
+module.exports = (file, api) => {
+  const jscodeshift = api.jscodeshift
+  const root = jscodeshift(file.source)
+
+  const replacements = [
+    { from: 'react-query', to: '@tanstack/react-query' },
+    { from: 'react-query/devtools', to: '@tanstack/react-query-devtools' },
+  ]
+
+  replacements.forEach(({ from, to }) => {
+    root
+      .find(jscodeshift.ImportDeclaration, {
+        source: {
+          value: from,
+        },
+      })
+      .replaceWith(({ node }) => {
+        node.source.value = to
+
+        return node
+      })
+  })
+
+  return root.toSource({ quote: 'single' })
+}

package/codemods/v4/utils/index.js

@@ -0,0 +1,166 @@
+module.exports = ({ root, jscodeshift }) => {
+  const findImportIdentifierOf = (importSpecifiers, identifier) => {
+    const specifier = importSpecifiers
+      .filter(node => node.value.imported.name === identifier)
+      .paths()
+
+    if (specifier.length > 0) {
+      return specifier[0].value.local
+    }
+
+    return jscodeshift.identifier(identifier)
+  }
+
+  const findImportSpecifiers = () =>
+    root
+      .find(jscodeshift.ImportDeclaration, {
+        source: {
+          value: 'react-query',
+        },
+      })
+      .find(jscodeshift.ImportSpecifier, {})
+
+  const locateImports = identifiers => {
+    const findNamespaceImportIdentifier = () => {
+      const specifier = root
+        .find(jscodeshift.ImportDeclaration, {
+          source: {
+            value: 'react-query',
+          },
+        })
+        .find(jscodeshift.ImportNamespaceSpecifier)
+        .paths()
+
+      return specifier.length > 0 ? specifier[0].value.local : null
+    }
+
+    /**
+     * First, we search for the namespace import identifier because if we have any, we assume the consumer uses
+     * namespace imports. In this case, we won't search for named imports at all.
+     */
+    const namespaceImportIdentifier = findNamespaceImportIdentifier()
+
+    if (namespaceImportIdentifier) {
+      const identifierMap = {}
+
+      for (const identifier of identifiers) {
+        identifierMap[identifier] = jscodeshift.identifier(identifier)
+      }
+
+      return {
+        namespace: namespaceImportIdentifier,
+        ...identifierMap,
+      }
+    }
+
+    const importSpecifiers = findImportSpecifiers()
+    const identifierMap = {}
+
+    for (const identifier of identifiers) {
+      identifierMap[identifier] = findImportIdentifierOf(
+        importSpecifiers,
+        identifier
+      )
+    }
+
+    return {
+      namespace: null,
+      ...identifierMap,
+    }
+  }
+
+  const findAllMethodCalls = () =>
+    root
+      // First, we need to find all method calls.
+      .find(jscodeshift.CallExpression, {
+        callee: {
+          type: jscodeshift.MemberExpression.name,
+          property: {
+            type: jscodeshift.Identifier.name,
+          },
+        },
+      })
+
+  const findQueryClientIdentifiers = importIdentifiers =>
+    root
+      .find(jscodeshift.VariableDeclarator, {})
+      .filter(node => {
+        if (node.value.init) {
+          const initializer = node.value.init
+
+          return (
+            isClassInstantiationOf(
+              initializer,
+              getSelectorByImports(importIdentifiers, 'QueryClient')
+            ) ||
+            isFunctionCallOf(
+              initializer,
+              getSelectorByImports(importIdentifiers, 'useQueryClient')
+            )
+          )
+        }
+
+        return false
+      })
+      .paths()
+      .map(node => node.value.id.name)
+
+  const isCallExpression = node =>
+    jscodeshift.match(node, { type: jscodeshift.CallExpression.name })
+
+  const isIdentifier = node =>
+    jscodeshift.match(node, { type: jscodeshift.Identifier.name })
+
+  const isMemberExpression = node =>
+    jscodeshift.match(node, { type: jscodeshift.MemberExpression.name })
+
+  const isNewExpression = node =>
+    jscodeshift.match(node, { type: jscodeshift.NewExpression.name })
+
+  const isClassInstantiationOf = (node, selector) => {
+    if (!isNewExpression(node)) {
+      return false
+    }
+
+    const parts = selector.split('.')
+
+    return parts.length === 1
+      ? isIdentifier(node.callee) && node.callee.name === parts[0]
+      : isMemberExpression(node.callee) &&
+          node.callee.object.name === parts[0] &&
+          node.callee.property.name === parts[1]
+  }
+
+  const isFunctionCallOf = (node, selector) => {
+    if (!isCallExpression(node)) {
+      return false
+    }
+
+    const parts = selector.split('.')
+
+    return parts.length === 1
+      ? isIdentifier(node.callee) && node.callee.name === parts[0]
+      : isMemberExpression(node.callee) &&
+          node.callee.object.name === parts[0] &&
+          node.callee.property.name === parts[1]
+  }
+
+  const getSelectorByImports = (imports, path) =>
+    imports.namespace
+      ? `${imports.namespace.name}.${imports[path].name}`
+      : imports[path].name
+
+  return {
+    findAllMethodCalls,
+    getSelectorByImports,
+    isCallExpression,
+    isClassInstantiationOf,
+    isFunctionCallOf,
+    isIdentifier,
+    isMemberExpression,
+    locateImports,
+    queryClient: {
+      findQueryClientIdentifiers,
+    },
+  }
+}

package/codemods/v4/utils/replacers/key-replacer.js

@@ -0,0 +1,160 @@
+// eslint-disable-next-line @typescript-eslint/no-var-requires
+const UnprocessableKeyError = require('../unprocessable-key-error')
+
+module.exports = ({ jscodeshift, root, filePath, keyName = 'queryKey' }) => {
+  const isArrayExpression = node =>
+    jscodeshift.match(node, { type: jscodeshift.ArrayExpression.name })
+
+  const isStringLiteral = node =>
+    jscodeshift.match(node, { type: jscodeshift.StringLiteral.name }) ||
+    jscodeshift.match(node, { type: jscodeshift.Literal.name })
+
+  const isTemplateLiteral = node =>
+    jscodeshift.match(node, { type: jscodeshift.TemplateLiteral.name })
+
+  const findVariableDeclaration = node => {
+    const declarations = root
+      .find(jscodeshift.VariableDeclarator, {
+        id: {
+          type: jscodeshift.Identifier.name,
+          name: node.name,
+        },
+      })
+      .paths()
+
+    return declarations.length > 0 ? declarations[0] : null
+  }
+
+  const createKeyValue = node => {
+    // When the node is a string literal we convert it into an array of strings.
+    if (isStringLiteral(node)) {
+      return jscodeshift.arrayExpression([
+        jscodeshift.stringLiteral(node.value),
+      ])
+    }
+
+    // When the node is a template literal we convert it into an array of template literals.
+    if (isTemplateLiteral(node)) {
+      return jscodeshift.arrayExpression([
+        jscodeshift.templateLiteral(node.quasis, node.expressions),
+      ])
+    }
+
+    if (jscodeshift.match(node, { type: jscodeshift.Identifier.name })) {
+      // When the node is an identifier at first, we try to find its declaration, because we will try
+      // to guess its type.
+      const variableDeclaration = findVariableDeclaration(node)
+
+      if (!variableDeclaration) {
+        throw new UnprocessableKeyError(
+          `In file ${filePath} at line ${node.loc.start.line} the type of identifier \`${node.name}\` couldn't be recognized, so the codemod couldn't be applied. Please migrate manually.`
+        )
+      }
+
+      const initializer = variableDeclaration.value.init
+
+      // When it's a string, we just wrap it into an array expression.
+      if (isStringLiteral(initializer) || isTemplateLiteral(initializer)) {
+        return jscodeshift.arrayExpression([node])
+      }
+    }
+
+    throw new UnprocessableKeyError(
+      `In file ${filePath} at line ${node.loc.start.line} the type of the \`${keyName}\` couldn't be recognized, so the codemod couldn't be applied. Please migrate manually.`
+    )
+  }
+
+  const createKeyProperty = node =>
+    jscodeshift.property(
+      'init',
+      jscodeshift.identifier(keyName),
+      createKeyValue(node)
+    )
+
+  const getPropertyFromObjectExpression = (objectExpression, propertyName) =>
+    objectExpression.properties.find(
+      property => property.key.name === propertyName
+    ) ?? null
+
+  const buildWithTypeArguments = (node, builder) => {
+    const newNode = builder(node)
+
+    if (node.typeParameters) {
+      newNode.typeArguments = node.typeParameters
+    }
+
+    return newNode
+  }
+
+  return ({ node }) => {
+    // When the node doesn't have the 'original' property, that means the codemod has been already applied,
+    // so we don't need to do any changes.
+    if (!node.original) {
+      return node
+    }
+
+    const methodArguments = node.arguments
+
+    // The method call doesn't have any arguments, we have nothing to do in this case.
+    if (methodArguments.length === 0) {
+      return node
+    }
+
+    try {
+      const [firstArgument, ...restOfTheArguments] = methodArguments
+
+      if (
+        jscodeshift.match(firstArgument, {
+          type: jscodeshift.ObjectExpression.name,
+        })
+      ) {
+        const originalKey = getPropertyFromObjectExpression(
+          firstArgument,
+          keyName
+        )
+
+        if (!originalKey) {
+          throw new UnprocessableKeyError(
+            `In file ${filePath} at line ${node.loc.start.line} the \`${keyName}\` couldn't be found. Did you forget to add it?`
+          )
+        }
+
+        const restOfTheProperties = firstArgument.properties.filter(
+          item => item.key.name !== keyName
+        )
+
+        return buildWithTypeArguments(node, originalNode =>
+          jscodeshift.callExpression(originalNode.original.callee, [
+            jscodeshift.objectExpression([
+              createKeyProperty(originalKey.value),
+              ...restOfTheProperties,
+            ]),
+            ...restOfTheArguments,
+          ])
+        )
+      }
+
+      // When the node is an array expression we just simply return it because we want query keys to be arrays.
+      if (isArrayExpression(firstArgument)) {
+        return node
+      }
+
+      return buildWithTypeArguments(node, originalNode =>
+        jscodeshift.callExpression(originalNode.original.callee, [
+          createKeyValue(firstArgument),
+          ...restOfTheArguments,
+        ])
+      )
+    } catch (error) {
+      if (error.name === 'UnprocessableKeyError') {
+        if (process.env.NODE_ENV !== 'test') {
+          console.warn(error.message)
+        }
+
+        return node
+      }
+
+      throw error
+    }
+  }
+}

package/codemods/v4/utils/transformers/query-cache-transformer.js

@@ -0,0 +1,115 @@
+module.exports = ({ jscodeshift, utils, root }) => {
+  const isGetQueryCacheMethodCall = (
+    initializer,
+    importIdentifiers,
+    knownQueryClientIds
+  ) => {
+    const isKnownQueryClient = node =>
+      utils.isIdentifier(node) && knownQueryClientIds.includes(node.name)
+
+    const isGetQueryCacheIdentifier = node =>
+      utils.isIdentifier(node) && node.name === 'getQueryCache'
+
+    const isValidInitializer = node =>
+      utils.isCallExpression(node) && utils.isMemberExpression(node.callee)
+
+    if (isValidInitializer(initializer)) {
+      const instance = initializer.callee.object
+
+      return (
+        isGetQueryCacheIdentifier(initializer.callee.property) &&
+        (isKnownQueryClient(instance) ||
+          utils.isFunctionCallOf(
+            instance,
+            utils.getSelectorByImports(importIdentifiers, 'useQueryClient')
+          ))
+      )
+    }
+
+    return false
+  }
+
+  const findQueryCacheInstantiations = (
+    importIdentifiers,
+    knownQueryClientIds
+  ) =>
+    root.find(jscodeshift.VariableDeclarator, {}).filter(node => {
+      if (node.value.init) {
+        const initializer = node.value.init
+
+        return (
+          utils.isClassInstantiationOf(
+            initializer,
+            utils.getSelectorByImports(importIdentifiers, 'QueryCache')
+          ) ||
+          isGetQueryCacheMethodCall(
+            initializer,
+            importIdentifiers,
+            knownQueryClientIds
+          )
+        )
+      }
+
+      return false
+    })
+
+  const filterQueryCacheMethodCalls = node =>
+    utils.isIdentifier(node) && ['find', 'findAll'].includes(node.name)
+
+  const findQueryCacheMethodCalls = importIdentifiers => {
+    /**
+     * Here we collect all query client instantiations. We have to make aware of them because the query cache can be
+     * accessed by the query client as well.
+     */
+    const queryClientIdentifiers = utils.queryClient.findQueryClientIdentifiers(
+      importIdentifiers
+    )
+    /**
+     * Here we collect all query cache instantiations. The reason is simple: the methods can be called on query cache
+     * instances, to locate the possible usages we need to be aware of the identifier names.
+     */
+    const queryCacheIdentifiers = findQueryCacheInstantiations(
+      importIdentifiers,
+      queryClientIdentifiers
+    )
+      .paths()
+      .map(node => node.value.id.name)
+
+    return (
+      utils
+        // First, we need to find all method calls.
+        .findAllMethodCalls()
+        // Then we narrow the collection to all `fetch` and `fetchAll` methods.
+        .filter(node => filterQueryCacheMethodCalls(node.value.callee.property))
+        .filter(node => {
+          const object = node.value.callee.object
+
+          // If the method is called on a `QueryCache` instance, we keep it in the collection.
+          if (utils.isIdentifier(object)) {
+            return queryCacheIdentifiers.includes(object.name)
+          }
+
+          // If the method is called on a `QueryClient` instance, we keep it in the collection.
+          if (utils.isCallExpression(object)) {
+            return isGetQueryCacheMethodCall(
+              object,
+              importIdentifiers,
+              queryClientIdentifiers
+            )
+          }
+
+          return false
+        })
+    )
+  }
+
+  const execute = replacer => {
+    findQueryCacheMethodCalls(
+      utils.locateImports(['QueryCache', 'QueryClient', 'useQueryClient'])
+    ).replaceWith(replacer)
+  }
+
+  return {
+    execute,
+  }
+}

package/codemods/v4/utils/transformers/query-client-transformer.js

@@ -0,0 +1,49 @@
+module.exports = ({ jscodeshift, utils, root }) => {
+  const filterQueryClientMethodCalls = (node, methods) =>
+    utils.isIdentifier(node) && methods.includes(node.name)
+
+  const findQueryClientMethodCalls = (importIdentifiers, methods) => {
+    /**
+     * Here we collect all query client instantiations. We have to make aware of them because some method calls might
+     * be invoked on these instances.
+     */
+    const queryClientIdentifiers = utils.queryClient.findQueryClientIdentifiers(
+      importIdentifiers
+    )
+
+    return (
+      utils
+        // First, we need to find all method calls.
+        .findAllMethodCalls()
+        // Then we narrow the collection to `QueryClient` methods.
+        .filter(node =>
+          filterQueryClientMethodCalls(node.value.callee.property, methods)
+        )
+        .filter(node => {
+          const object = node.value.callee.object
+
+          // If the method is called on a `QueryClient` instance, we keep it in the collection.
+          if (utils.isIdentifier(object)) {
+            return queryClientIdentifiers.includes(object.name)
+          }
+
+          // If the method is called on the return value of `useQueryClient` hook, we keep it in the collection.
+          return utils.isFunctionCallOf(
+            object,
+            utils.getSelectorByImports(importIdentifiers, 'useQueryClient')
+          )
+        })
+    )
+  }
+
+  const execute = (methods, replacer) => {
+    findQueryClientMethodCalls(
+      utils.locateImports(['QueryClient', 'useQueryClient']),
+      methods
+    ).replaceWith(replacer)
+  }
+
+  return {
+    execute,
+  }
+}

package/codemods/v4/utils/transformers/use-query-like-transformer.js

@@ -0,0 +1,32 @@
+module.exports = ({ jscodeshift, utils, root }) => {
+  const filterUseQueryLikeHookCalls = (node, importIdentifiers, hooks) => {
+    for (const hook of hooks) {
+      const selector = utils.getSelectorByImports(importIdentifiers, hook)
+
+      if (utils.isFunctionCallOf(node, selector)) {
+        return true
+      }
+    }
+
+    return false
+  }
+
+  const findUseQueryLikeHookCalls = (importIdentifiers, hooks) =>
+    root
+      // First, we need to find all call expressions.
+      .find(jscodeshift.CallExpression, {})
+      // Then we narrow the collection to the `useQuery` like hook calls.
+      .filter(node =>
+        filterUseQueryLikeHookCalls(node.value, importIdentifiers, hooks)
+      )
+
+  const execute = (hooks, replacer) => {
+    findUseQueryLikeHookCalls(utils.locateImports(hooks), hooks).replaceWith(
+      replacer
+    )
+  }
+
+  return {
+    execute,
+  }
+}

package/codemods/v4/utils/unprocessable-key-error.js

@@ -0,0 +1,8 @@
+class UnprocessableKeyError extends Error {
+  constructor(message) {
+    super(message)
+    this.name = 'UnprocessableKeyError'
+  }
+}
+
+module.exports = UnprocessableKeyError