@tanstack/react-query 5.0.0-alpha.6 → 5.0.0-alpha.62

package/build/codemods/remove-overloads/transformers/query-fn-aware-usage-transformer.js

@@ -0,0 +1,188 @@
+// eslint-disable-next-line @typescript-eslint/no-var-requires
+const createV5UtilsObject = require('../utils')
+// eslint-disable-next-line @typescript-eslint/no-var-requires
+const UnknownUsageError = require('../utils/unknown-usage-error')
+// eslint-disable-next-line @typescript-eslint/no-var-requires
+const createQueryClientTransformer = require('../../../utils/transformers/query-client-transformer')
+
+/**
+ * @param {import('jscodeshift').api} jscodeshift
+ * @param {Object} utils
+ * @param {import('jscodeshift').Collection} root
+ * @param {string} filePath
+ * @param {{keyName: "mutationKey"|"queryKey", queryClientMethods: ReadonlyArray<string>, hooks: ReadonlyArray<string>}} config
+ */
+const transformQueryFnAwareUsages = ({
+  jscodeshift,
+  utils,
+  root,
+  filePath,
+  config,
+}) => {
+  const v5Utils = createV5UtilsObject({ jscodeshift, utils })
+
+  /**
+   * @param {import('jscodeshift').CallExpression} node
+   * @returns {boolean}
+   */
+  const canSkipReplacement = (node) => {
+    const callArguments = node.arguments
+
+    const hasKeyProperty = () =>
+      callArguments[0].properties.some(
+        (property) =>
+          utils.isObjectProperty(property) &&
+          [config.keyName, 'queryFn'].includes(property.key.name),
+      )
+
+    return (
+      callArguments.length > 0 &&
+      utils.isObjectExpression(callArguments[0]) &&
+      hasKeyProperty()
+    )
+  }
+
+  const predicate = (property) => {
+    const isSpreadElement = utils.isSpreadElement(property)
+    const isObjectProperty = utils.isObjectProperty(property)
+
+    return (
+      isSpreadElement ||
+      (isObjectProperty && property.key.name !== config.keyName)
+    )
+  }
+
+  const transformArgumentToQueryFunction = (path, node) => {
+    const isIdentifier = utils.isIdentifier(node)
+    const isFunctionDefinition = utils.isFunctionDefinition(node)
+
+    if (!isIdentifier && !isFunctionDefinition) {
+      return undefined
+    }
+
+    if (isFunctionDefinition) {
+      return jscodeshift.property(
+        'init',
+        jscodeshift.identifier('queryFn'),
+        node,
+      )
+    }
+
+    const binding = v5Utils.getBindingFromScope(path, node.name, filePath)
+    const initializer = v5Utils.getInitializerByDeclarator(binding)
+
+    if (!utils.isFunctionDefinition(initializer)) {
+      return undefined
+    }
+
+    return jscodeshift.property(
+      'init',
+      jscodeshift.identifier('queryFn'),
+      binding.id,
+    )
+  }
+
+  const transformArgumentToOptionsObject = (path, node) => {
+    if (!utils.isIdentifier(node)) {
+      return undefined
+    }
+
+    const binding = v5Utils.getBindingFromScope(path, node.name, filePath)
+    const initializer = v5Utils.getInitializerByDeclarator(binding)
+
+    if (utils.isObjectExpression(initializer)) {
+      return jscodeshift.spreadElement(binding.id)
+    }
+  }
+
+  const replacer = (path) => {
+    const node = path.node
+
+    try {
+      // If the given method/function call matches certain criteria, the node doesn't need to be replaced, this step can be skipped.
+      if (canSkipReplacement(node)) {
+        return node
+      }
+
+      const keyProperty = v5Utils.transformArgumentToKey(
+        path,
+        node.arguments[0],
+        config.keyName,
+        filePath,
+      )
+
+      if (!keyProperty) {
+        throw new UnknownUsageError(node, filePath)
+      }
+
+      const parameters = [jscodeshift.objectExpression([keyProperty])]
+      const createdObjectExpression = parameters[0]
+      const secondParameter = node.arguments[1]
+
+      if (secondParameter) {
+        const queryFnProperty = transformArgumentToQueryFunction(
+          path,
+          secondParameter,
+        )
+
+        if (queryFnProperty) {
+          createdObjectExpression.properties.push(queryFnProperty)
+
+          const thirdParameter = node.arguments[2]
+
+          if (utils.isObjectExpression(thirdParameter)) {
+            v5Utils.copyPropertiesFromSource(
+              thirdParameter,
+              createdObjectExpression,
+              predicate,
+            )
+          } else {
+            createdObjectExpression.properties.push(
+              jscodeshift.spreadElement(thirdParameter),
+            )
+          }
+
+          return jscodeshift.callExpression(node.original.callee, parameters)
+        }
+
+        const optionsProperty = transformArgumentToOptionsObject(
+          path,
+          secondParameter,
+        )
+
+        if (optionsProperty) {
+          createdObjectExpression.properties.push(optionsProperty)
+
+          return jscodeshift.callExpression(node.original.callee, parameters)
+        }
+
+        if (utils.isObjectExpression(secondParameter)) {
+          v5Utils.copyPropertiesFromSource(
+            secondParameter,
+            createdObjectExpression,
+            predicate,
+          )
+        }
+
+        return jscodeshift.callExpression(node.original.callee, parameters)
+      }
+
+      return jscodeshift.callExpression(node.original.callee, parameters)
+    } catch (error) {
+      utils.warn(
+        error.name === UnknownUsageError.name
+          ? error.message
+          : `An unknown error occurred while processing the "${filePath}" file. Please review this file, because the codemod couldn't be applied.`,
+      )
+
+      return node
+    }
+  }
+
+  createQueryClientTransformer({ jscodeshift, utils, root }).execute(
+    config.queryClientMethods,
+    replacer,
+  )
+}
+
+module.exports = transformQueryFnAwareUsages

package/build/codemods/remove-overloads/utils/index.js

@@ -0,0 +1,124 @@
+// eslint-disable-next-line @typescript-eslint/no-var-requires
+const UnknownUsageError = require('./unknown-usage-error')
+
+module.exports = ({ jscodeshift, utils }) => {
+  /**
+   *
+   * @param {import('jscodeshift').ObjectExpression} source
+   * @param {import('jscodeshift').ObjectExpression} target
+   * @param {(node: import('jscodeshift').Node) => boolean} predicate
+   */
+  const copyPropertiesFromSource = (source, target, predicate) => {
+    source.properties.forEach((property) => {
+      if (predicate(property)) {
+        target.properties.push(property)
+      }
+    })
+  }
+
+  /**
+   * @param {import('jscodeshift').NodePath} path
+   * @param {string} argumentName
+   * @param {string} filePath
+   * @returns {*}
+   */
+  const getBindingFromScope = (path, argumentName, filePath) => {
+    /**
+     * If the current scope contains the declaration then we can use the actual one else we attempt to find the
+     * binding from above.
+     */
+    const scope = path.scope.declares(argumentName)
+      ? path.scope
+      : path.scope.lookup(argumentName)
+
+    /**
+     * The declaration couldn't be found for some reason, time to move on. We warn the user it needs to be rewritten
+     * by themselves.
+     */
+    if (!scope) {
+      return undefined
+    }
+
+    const binding = scope.bindings[argumentName]
+      .filter((item) => utils.isIdentifier(item.value))
+      .map((item) => item.parentPath.value)
+      .at(0)
+
+    if (!binding) {
+      throw new UnknownUsageError(path.node, filePath)
+    }
+
+    return binding
+  }
+
+  /**
+   * @param {import('jscodeshift').VariableDeclarator} binding
+   * @returns {import('jscodeshift').Node|undefined}
+   */
+  const getInitializerByDeclarator = (binding) => {
+    const isVariableDeclaration = jscodeshift.match(binding, {
+      type: jscodeshift.VariableDeclarator.name,
+    })
+
+    if (!isVariableDeclaration) {
+      return undefined
+    }
+
+    const isTSAsExpression = jscodeshift.match(binding.init, {
+      type: jscodeshift.TSAsExpression.name,
+    })
+
+    return isTSAsExpression ? binding.init.expression : binding.init
+  }
+
+  /**
+   * @param {import('jscodeshift').Node} node
+   * @returns {boolean}
+   */
+  const isArrayExpressionVariable = (node) =>
+    jscodeshift.match(node, {
+      type: jscodeshift.VariableDeclarator.name,
+      init: {
+        type: jscodeshift.ArrayExpression.name,
+      },
+    })
+
+  /**
+   * @param {import('jscodeshift').NodePath} path
+   * @param {import('jscodeshift').Node} node
+   * @param {"queryKey"|"mutationKey"} keyName
+   * @param {string} filePath
+   * @returns {import('jscodeshift').Property|undefined}
+   */
+  const transformArgumentToKey = (path, node, keyName, filePath) => {
+    // If the first argument is an identifier we have to infer its type if possible.
+    if (utils.isIdentifier(node)) {
+      const binding = getBindingFromScope(path, node.name, filePath)
+
+      if (isArrayExpressionVariable(binding)) {
+        return jscodeshift.property(
+          'init',
+          jscodeshift.identifier(keyName),
+          jscodeshift.identifier(binding.id.name),
+        )
+      }
+    }
+
+    // If the first argument is an array, then it matches the following overload:
+    // methodName(queryKey?: QueryKey, firstObject?: TFirstObject, secondObject?: TSecondObject)
+    if (utils.isArrayExpression(node)) {
+      // Then we create the 'queryKey' property based on it, because it will be passed to the first argument
+      // that should be an object according to the new signature.
+      return jscodeshift.property('init', jscodeshift.identifier(keyName), node)
+    }
+
+    return undefined
+  }
+
+  return {
+    copyPropertiesFromSource,
+    getInitializerByDeclarator,
+    getBindingFromScope,
+    transformArgumentToKey,
+  }
+}

package/build/codemods/remove-overloads/utils/unknown-usage-error.js

@@ -0,0 +1,27 @@
+class UnknownUsageError extends Error {
+  /**
+   * @param {import('jscodeshift').CallExpression} callExpression
+   * @param {string} filePath
+   */
+  constructor(callExpression, filePath) {
+    super('')
+    this.message = this.buildMessage(callExpression, filePath)
+    this.name = 'UnknownUsageError'
+  }
+
+  /**
+   *
+   * @param {import('jscodeshift').CallExpression} callExpression
+   * @param {string} filePath
+   * @returns {string}
+   */
+  buildMessage(callExpression, filePath) {
+    const location = callExpression.callee.loc
+    const start = location.start.line
+    const end = location.end.line
+
+    return `The usage in file "${filePath}" at line ${start}:${end} could not be transformed into the new syntax. Please do this manually.`
+  }
+}
+
+module.exports = UnknownUsageError

package/build/codemods/src/utils/index.js

@@ -0,0 +1,205 @@
+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 isArrayExpression = (node) =>
+    jscodeshift.match(node, { type: jscodeshift.ArrayExpression.name })
+
+  const isObjectExpression = (node) =>
+    jscodeshift.match(node, { type: jscodeshift.ObjectExpression.name })
+
+  const isObjectProperty = (node) =>
+    jscodeshift.match(node, { type: jscodeshift.ObjectProperty.name })
+
+  const isSpreadElement = (node) =>
+    jscodeshift.match(node, { type: jscodeshift.SpreadElement.name })
+
+  /**
+   * @param {import('jscodeshift').Node} node
+   * @returns {boolean}
+   */
+  const isFunctionDefinition = (node) => {
+    const isArrowFunctionExpression = jscodeshift.match(node, {
+      type: jscodeshift.ArrowFunctionExpression.name,
+    })
+    const isFunctionExpression = jscodeshift.match(node, {
+      type: jscodeshift.FunctionExpression.name,
+    })
+
+    return isArrowFunctionExpression || isFunctionExpression
+  }
+
+  const warn = (message) => {
+    if (process.env.NODE_ENV !== 'test') {
+      console.warn(message)
+    }
+  }
+
+  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,
+    isArrayExpression,
+    isObjectExpression,
+    isObjectProperty,
+    isSpreadElement,
+    isFunctionDefinition,
+    locateImports,
+    warn,
+    queryClient: {
+      findQueryClientIdentifiers,
+    },
+  }
+}

package/build/codemods/src/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/build/codemods/src/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' })
+}