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

package/build/codemods/remove-overloads/__testfixtures__/default-import.output.tsx

@@ -0,0 +1,484 @@
+import * as React from 'react'
+import {
+  useIsFetching,
+  useIsMutating,
+  useQueryClient,
+} from '@tanstack/react-query'
+import { queryKeysFromAnotherModule } from '../another/module'
+
+export const WithKnownParameters = () => {
+  useIsFetching({
+    queryKey: ['foo', 'bar']
+  })
+  useIsFetching({
+    queryKey: ['foo', 'bar'],
+    type: 'all',
+    exact: true
+  })
+  useIsFetching({
+    queryKey: ['foo', 'bar'],
+    type: 'all',
+    exact: true
+  }, { context: undefined })
+  useIsFetching({
+    queryKey: ['foo', 'bar'],
+    type: 'all',
+    exact: true
+  })
+  useIsFetching({
+    queryKey: ['foo', 'bar'],
+    type: 'all',
+    exact: true
+  }, { context: undefined })
+  useIsFetching({ queryKey: ['foo', 'bar'], type: 'all', exact: true })
+  useIsFetching({ queryKey: ['foo', 'bar'], type: 'all', exact: true }, { context: undefined })
+
+  useIsMutating({
+    mutationKey: ['foo', 'bar']
+  })
+  useIsMutating({
+    mutationKey: ['foo', 'bar'],
+    exact: true
+  })
+  useIsMutating({
+    mutationKey: ['foo', 'bar'],
+    exact: true
+  }, { context: undefined })
+  useIsMutating({ mutationKey: ['foo', 'bar'], exact: true })
+  useIsMutating({ mutationKey: ['foo', 'bar'], exact: true }, { context: undefined })
+
+  // QueryClient methods
+  // --- Instantiated hook call.
+  const queryClient = useQueryClient()
+  queryClient.cancelQueries({
+    queryKey: ['foo', 'bar']
+  })
+  queryClient.cancelQueries({
+    queryKey: ['foo', 'bar'],
+    type: 'all',
+    exact: true
+  })
+  queryClient.cancelQueries({
+    queryKey: ['foo', 'bar'],
+    type: 'all',
+    exact: true
+  }, { silent: true })
+  queryClient.cancelQueries({
+    queryKey: ['foo', 'bar'],
+    type: 'all',
+    exact: true
+  })
+  queryClient.cancelQueries({
+    queryKey: ['foo', 'bar'],
+    type: 'all',
+    exact: true
+  }, { silent: true })
+  queryClient.cancelQueries({ queryKey: ['foo', 'bar'], type: 'all', exact: true })
+  queryClient.cancelQueries({ queryKey: ['foo', 'bar'], type: 'all', exact: true }, { silent: true })
+
+  queryClient.getQueriesData({
+    queryKey: ['foo', 'bar']
+  })
+  queryClient.getQueriesData({ queryKey: ['foo', 'bar'], type: 'all', exact: true })
+
+  queryClient.invalidateQueries({
+    queryKey: ['foo', 'bar']
+  })
+  queryClient.invalidateQueries({
+    queryKey: ['foo', 'bar'],
+    type: 'all',
+    exact: true
+  })
+  queryClient.invalidateQueries({
+    queryKey: ['foo', 'bar'],
+    type: 'all',
+    exact: true
+  }, { cancelRefetch: false, throwOnError: true })
+  queryClient.invalidateQueries({
+    queryKey: ['foo', 'bar'],
+    type: 'all',
+    exact: true
+  })
+  queryClient.invalidateQueries({
+    queryKey: ['foo', 'bar'],
+    type: 'all',
+    exact: true
+  }, { cancelRefetch: false, throwOnError: true })
+  queryClient.invalidateQueries({ queryKey: ['foo', 'bar'], type: 'all', exact: true })
+  queryClient.invalidateQueries({ queryKey: ['foo', 'bar'], type: 'all', exact: true }, { cancelRefetch: false, throwOnError: true })
+
+  queryClient.isFetching({
+    queryKey: ['foo', 'bar']
+  })
+  queryClient.isFetching({
+    queryKey: ['foo', 'bar'],
+    type: 'all',
+    exact: true
+  })
+  queryClient.isFetching({
+    queryKey: ['foo', 'bar'],
+    type: 'all',
+    exact: true
+  })
+  queryClient.isFetching({ queryKey: ['foo', 'bar'], type: 'all', exact: true })
+
+  queryClient.refetchQueries({
+    queryKey: ['foo', 'bar']
+  })
+  queryClient.refetchQueries({
+    queryKey: ['foo', 'bar'],
+    type: 'all',
+    exact: true
+  })
+  queryClient.refetchQueries({
+    queryKey: ['foo', 'bar'],
+    type: 'all',
+    exact: true
+  }, { cancelRefetch: false, throwOnError: true })
+  queryClient.refetchQueries({
+    queryKey: ['foo', 'bar'],
+    type: 'all',
+    exact: true
+  })
+  queryClient.refetchQueries({
+    queryKey: ['foo', 'bar'],
+    type: 'all',
+    exact: true
+  }, { cancelRefetch: false, throwOnError: true })
+  queryClient.refetchQueries({ queryKey: ['foo', 'bar'], type: 'all', exact: true })
+  queryClient.refetchQueries({ queryKey: ['foo', 'bar'], type: 'all', exact: true }, { cancelRefetch: false, throwOnError: true })
+
+  queryClient.removeQueries({
+    queryKey: ['foo', 'bar']
+  })
+  queryClient.removeQueries({
+    queryKey: ['foo', 'bar'],
+    type: 'all',
+    exact: true
+  })
+  queryClient.removeQueries({ queryKey: ['foo', 'bar'], type: 'all', exact: true })
+
+  queryClient.resetQueries({
+    queryKey: ['foo', 'bar']
+  })
+  queryClient.resetQueries({
+    queryKey: ['foo', 'bar'],
+    type: 'all',
+    exact: true
+  })
+  queryClient.resetQueries({
+    queryKey: ['foo', 'bar'],
+    type: 'all',
+    exact: true
+  }, { cancelRefetch: false, throwOnError: true })
+  queryClient.resetQueries({
+    queryKey: ['foo', 'bar'],
+    type: 'all',
+    exact: true
+  })
+  queryClient.resetQueries({
+    queryKey: ['foo', 'bar'],
+    type: 'all',
+    exact: true
+  }, { cancelRefetch: false, throwOnError: true })
+  queryClient.resetQueries({ queryKey: ['foo', 'bar'], exact: true })
+  queryClient.resetQueries({ queryKey: ['foo', 'bar'], exact: true }, { cancelRefetch: false, throwOnError: true })
+
+  queryClient.setQueriesData(['foo', 'bar'], null)
+  queryClient.setQueriesData(['foo', 'bar'], null, { updatedAt: 1000 })
+  queryClient.setQueriesData({ queryKey: ['foo', 'bar'] }, null)
+  queryClient.setQueriesData({ queryKey: ['foo', 'bar'] }, null, { updatedAt: 1000 })
+
+  queryClient.fetchQuery({
+    queryKey: ['foo', 'bar']
+  })
+  queryClient.fetchQuery({
+    queryKey: ['foo', 'bar'],
+    staleTime: 1000
+  })
+  queryClient.fetchQuery({
+    queryKey: ['foo', 'bar'],
+    queryFn: () => 'data',
+    staleTime: 1000
+  })
+  queryClient.fetchQuery({
+    queryKey: ['foo', 'bar'],
+    queryFn: () => 'data',
+    staleTime: 1000
+  })
+  queryClient.fetchQuery({
+    queryKey: ['foo', 'bar'],
+    queryFn: function myFn() { return 'data' },
+    staleTime: 1000
+  })
+  queryClient.fetchQuery({ queryKey: ['foo', 'bar'], queryFn: () => 'data', retry: true })
+
+  const queryCache = queryClient.getQueryCache()
+
+  queryCache.find({
+    queryKey: ['foo', 'bar']
+  })
+  queryCache.find({
+    queryKey: ['foo', 'bar'],
+    type: 'all',
+    exact: true
+  })
+  queryCache.find({
+    queryKey: ['foo', 'bar'],
+    type: 'all',
+    exact: true
+  })
+
+  queryCache.findAll({
+    queryKey: ['foo', 'bar']
+  })
+  queryCache.findAll({
+    queryKey: ['foo', 'bar'],
+    type: 'all',
+    exact: true
+  })
+  queryCache.findAll({
+    queryKey: ['foo', 'bar'],
+    type: 'all',
+    exact: true
+  })
+  queryCache.findAll({ queryKey: ['foo', 'bar'], type: 'all', exact: true })
+
+  return <div>Example Component</div>
+}
+
+const globalQueryKey = ['module', 'level']
+
+export const WithIdentifiers = () => {
+  const queryKey = ['foo', 'bar']
+  const mutationKey = ['posts', 'articles']
+  const filters = { type: 'all', exact: true } as const
+  const options = { context: undefined } as const
+  const mutationOptions = { exact: true, fetching: false } as const
+  const cancelOptions = { silent: true } as const
+  const invalidateOptions = { cancelRefetch: true, throwOnError: true } as const
+  const refetchOptions = { cancelRefetch: false, throwOnError: true } as const
+  const resetOptions = { cancelRefetch: false, throwOnError: true } as const
+  const fetchOptions = { queryFn: () => 'data', retry: true } as const
+  const queryFn = () => 'data'
+
+  useIsFetching({
+    queryKey: queryKey
+  })
+  useIsFetching({
+    queryKey: queryKey,
+    ...filters
+  })
+  useIsFetching({
+    queryKey: queryKey,
+    ...filters
+  }, options)
+  useIsFetching({
+    queryKey: queryKey,
+    type: 'all',
+    exact: true
+  })
+  useIsFetching({
+    queryKey: queryKey,
+    type: 'all',
+    exact: true
+  }, { context: undefined })
+  useIsFetching({
+    queryKey: queryKey,
+    ...filters
+  }, options)
+  useIsFetching({ queryKey: queryKey, ...filters })
+  useIsFetching({ queryKey: queryKey, ...filters }, { context: undefined })
+
+  useIsMutating({
+    mutationKey: mutationKey
+  })
+  useIsMutating({
+    mutationKey: mutationKey,
+    exact: true,
+    status: 'idle'
+  })
+  useIsMutating({
+    mutationKey: mutationKey,
+    ...mutationOptions,
+    exact: false
+  })
+  useIsMutating({ mutationKey, ...mutationOptions })
+  useIsMutating({ mutationKey: ['foo', 'bar'], exact: true, status: 'idle' })
+
+  // QueryClient methods
+  // --- Instantiated hook call.
+  const queryClient = useQueryClient()
+  queryClient.cancelQueries({
+    queryKey: queryKey
+  })
+  queryClient.cancelQueries({
+    queryKey: queryKey,
+    ...filters
+  })
+  queryClient.cancelQueries({
+    queryKey: queryKey,
+    ...filters
+  }, cancelOptions)
+  queryClient.cancelQueries({
+    queryKey: queryKey,
+    type: 'all',
+    exact: true
+  })
+  queryClient.cancelQueries({
+    queryKey: queryKey,
+    type: 'all',
+    exact: true
+  }, { revert: true })
+  queryClient.cancelQueries({
+    queryKey: queryKey,
+    ...filters
+  }, cancelOptions)
+  queryClient.cancelQueries({ queryKey: queryKey, type: 'all', exact: true })
+  queryClient.cancelQueries({ queryKey: ['foo', 'bar'], ...filters }, cancelOptions)
+
+  queryClient.getQueriesData({
+    queryKey: globalQueryKey
+  })
+  queryClient.getQueriesData({ queryKey: globalQueryKey, ...filters })
+  queryClient.getQueriesData({ queryKey: ['foo', 'bar'], type: 'all' })
+
+  queryClient.invalidateQueries({
+    queryKey: queryKey
+  })
+  queryClient.invalidateQueries({
+    queryKey: queryKey,
+    ...filters
+  })
+  queryClient.invalidateQueries({
+    queryKey: queryKey,
+    ...filters
+  }, invalidateOptions)
+  queryClient.invalidateQueries({
+    queryKey: queryKey,
+    stale: true,
+    ...filters
+  })
+  queryClient.invalidateQueries({
+    queryKey: queryKey,
+    stale: true,
+    ...filters
+  }, invalidateOptions)
+  queryClient.invalidateQueries({ queryKey: globalQueryKey, ...filters, stale: true })
+  queryClient.invalidateQueries({ queryKey: globalQueryKey, ...filters, stale: true }, invalidateOptions)
+
+  queryClient.isFetching({
+    queryKey: globalQueryKey
+  })
+  queryClient.isFetching({
+    queryKey: globalQueryKey,
+    ...filters
+  })
+  queryClient.isFetching({
+    queryKey: globalQueryKey,
+    type: 'all',
+    exact: true
+  })
+  queryClient.isFetching({
+    queryKey: globalQueryKey,
+    ...filters
+  })
+  queryClient.isFetching({ queryKey: globalQueryKey, ...filters, stale: true })
+  // Stays as it is because the code couldn't infer the type of the "queryKeysFromAnotherModule" identifier.
+  queryClient.isFetching(queryKeysFromAnotherModule)
+
+  queryClient.refetchQueries({
+    queryKey: queryKey
+  })
+  queryClient.refetchQueries({
+    queryKey: queryKey,
+    ...filters
+  })
+  queryClient.refetchQueries({
+    queryKey: queryKey,
+    ...filters
+  }, refetchOptions)
+  queryClient.refetchQueries({
+    queryKey: queryKey,
+    ...filters
+  }, { ...refetchOptions, cancelRefetch: true })
+  queryClient.refetchQueries({ queryKey: queryKey, ...filters })
+  queryClient.refetchQueries({ queryKey: queryKey, ...filters }, { ...refetchOptions, cancelRefetch: true })
+  // Stays as it is because the code couldn't infer the type of the "queryKeysFromAnotherModule" identifier.
+  queryClient.refetchQueries(queryKeysFromAnotherModule)
+  queryClient.refetchQueries(queryKeysFromAnotherModule, filters)
+  queryClient.refetchQueries(queryKeysFromAnotherModule, filters, refetchOptions)
+
+  queryClient.removeQueries({
+    queryKey: queryKey
+  })
+  queryClient.removeQueries({
+    queryKey: queryKey,
+    ...filters
+  })
+  queryClient.removeQueries({
+    queryKey: queryKey,
+    ...filters,
+    stale: true
+  })
+  queryClient.removeQueries({ queryKey, ...filters, stale: true })
+  // Stays as it is because the code couldn't infer the type of the "queryKeysFromAnotherModule" identifier.
+  queryClient.removeQueries(queryKeysFromAnotherModule)
+  queryClient.removeQueries(queryKeysFromAnotherModule, filters)
+
+  queryClient.resetQueries({
+    queryKey: queryKey
+  })
+  queryClient.resetQueries({
+    queryKey: queryKey,
+    ...filters
+  })
+  queryClient.resetQueries({
+    queryKey: queryKey,
+    ...filters
+  }, resetOptions)
+  queryClient.resetQueries({
+    queryKey: queryKey,
+    ...filters,
+    stale: true
+  })
+  queryClient.resetQueries({
+    queryKey: queryKey,
+    ...filters,
+    stale: true
+  }, resetOptions)
+  queryClient.resetQueries({ queryKey, ...filters, stale: true })
+  queryClient.resetQueries({ queryKey, ...filters, stale: true }, resetOptions)
+  // Stays as it is because the code couldn't infer the type of the "queryKeysFromAnotherModule" identifier.
+  queryClient.resetQueries(queryKeysFromAnotherModule)
+  queryClient.resetQueries(queryKeysFromAnotherModule, filters)
+  queryClient.resetQueries(queryKeysFromAnotherModule, filters, resetOptions)
+
+  queryClient.fetchQuery({
+    queryKey: queryKey
+  })
+  queryClient.fetchQuery({
+    queryKey: queryKey,
+    ...fetchOptions
+  })
+  queryClient.fetchQuery({
+    queryKey: queryKey,
+    networkMode: 'always',
+    ...fetchOptions
+  })
+  queryClient.fetchQuery({
+    queryKey: queryKey,
+    queryFn: queryFn,
+    ...fetchOptions
+  })
+  queryClient.fetchQuery({
+    queryKey: queryKey,
+    queryFn: () => 'data',
+    networkMode: 'always',
+    ...fetchOptions
+  })
+  // Stays as it is because the code couldn't infer the type of the "queryKeysFromAnotherModule" identifier.
+  queryClient.fetchQuery(queryKeysFromAnotherModule)
+  queryClient.fetchQuery(queryKeysFromAnotherModule, fetchOptions)
+  queryClient.fetchQuery(queryKeysFromAnotherModule, queryFn, fetchOptions)
+}

package/build/codemods/remove-overloads/__tests__/remove-overloads.test.js

@@ -0,0 +1,6 @@
+// eslint-disable-next-line @typescript-eslint/no-var-requires
+const defineTest = require('jscodeshift/dist/testUtils').defineTest
+
+defineTest(__dirname, 'remove-overloads', null, 'default-import', {
+  parser: 'tsx',
+})

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

@@ -0,0 +1,59 @@
+// eslint-disable-next-line @typescript-eslint/no-var-requires
+const createUtilsObject = require('../../utils')
+// eslint-disable-next-line @typescript-eslint/no-var-requires
+const transformFilterAwareUsages = require('./transformers/filter-aware-usage-transformer')
+// eslint-disable-next-line @typescript-eslint/no-var-requires
+const transformQueryFnAwareUsages = require('./transformers/query-fn-aware-usage-transformer')
+
+module.exports = (file, api) => {
+  const jscodeshift = api.jscodeshift
+  const root = jscodeshift(file.source)
+  const utils = createUtilsObject({ root, jscodeshift })
+  const filePath = file.path
+
+  const dependencies = { jscodeshift, utils, root, filePath }
+
+  transformFilterAwareUsages({
+    ...dependencies,
+    config: {
+      keyName: 'queryKey',
+      queryClientMethods: [
+        'cancelQueries',
+        'getQueriesData',
+        'invalidateQueries',
+        'isFetching',
+        'refetchQueries',
+        'removeQueries',
+        'resetQueries',
+        // 'setQueriesData',
+      ],
+      hooks: ['useIsFetching'],
+    },
+  })
+
+  transformFilterAwareUsages({
+    ...dependencies,
+    config: {
+      keyName: 'mutationKey',
+      queryClientMethods: [],
+      hooks: ['useIsMutating'],
+    },
+  })
+
+  transformQueryFnAwareUsages({
+    ...dependencies,
+    config: {
+      keyName: 'queryKey',
+      queryClientMethods: [
+        'ensureQueryData',
+        'fetchQuery',
+        'prefetchQuery',
+        'fetchInfiniteQuery',
+        'prefetchInfiniteQuery',
+      ],
+      hooks: [],
+    },
+  })
+
+  return root.toSource({ quote: 'single' })
+}

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

@@ -0,0 +1,153 @@
+// 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')
+// eslint-disable-next-line @typescript-eslint/no-var-requires
+const createQueryCacheTransformer = require('../../../utils/transformers/query-cache-transformer')
+// eslint-disable-next-line @typescript-eslint/no-var-requires
+const createUseQueryLikeTransformer = require('../../../utils/transformers/use-query-like-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 transformFilterAwareUsages = ({
+  jscodeshift,
+  utils,
+  root,
+  filePath,
+  config,
+}) => {
+  const v5Utils = createV5UtilsObject({ jscodeshift, utils })
+
+  /**
+   * @param {import('jscodeshift').CallExpression} node
+   * @param {"mutationKey"|"queryKey"} keyName
+   * @returns {boolean}
+   */
+  const canSkipReplacement = (node, keyName) => {
+    const callArguments = node.arguments
+
+    const hasKeyProperty = () =>
+      callArguments[0].properties.some(
+        (property) =>
+          utils.isObjectProperty(property) && property.key.name !== keyName,
+      )
+
+    /**
+     * This call has at least one argument. If it's an object expression and contains the "queryKey" or "mutationKey"
+     * field, the transformation can be skipped, because it's already matching the expected signature.
+     */
+    return (
+      callArguments.length > 0 &&
+      utils.isObjectExpression(callArguments[0]) &&
+      hasKeyProperty()
+    )
+  }
+
+  /**
+   * This function checks whether the given object property is a spread element or a property that's not named
+   * "queryKey" or "mutationKey".
+   *
+   * @param {import('jscodeshift').ObjectProperty} property
+   * @returns {boolean}
+   */
+  const predicate = (property) => {
+    const isSpreadElement = utils.isSpreadElement(property)
+    const isObjectProperty = utils.isObjectProperty(property)
+
+    return (
+      isSpreadElement ||
+      (isObjectProperty && property.key.name !== config.keyName)
+    )
+  }
+
+  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, config.keyName)) {
+        return node
+      }
+
+      /**
+       * Here we attempt to determine the first parameter of the function call. If it's an array expression or an
+       * identifier that references an array expression then we create an object property from it.
+       *
+       * @type {import('jscodeshift').Property|undefined}
+       */
+      const keyProperty = v5Utils.transformArgumentToKey(
+        path,
+        node.arguments[0],
+        config.keyName,
+        filePath,
+      )
+
+      /**
+       * The first parameter couldn't be transformed into an object property, so it's time to throw an exception,
+       * it will notify the consumers that they need to rewrite this usage manually.
+       */
+      if (!keyProperty) {
+        throw new UnknownUsageError(node, filePath)
+      }
+
+      const parameters = [jscodeshift.objectExpression([keyProperty])]
+      const secondParameter = node.arguments[1]
+
+      if (secondParameter) {
+        const createdObjectExpression = parameters[0]
+
+        /**
+         * If it has a second argument, and it's an object expression, then we get the properties from it
+         * (except the "queryKey" or "mutationKey" properties), because these arguments will also be moved to the
+         * newly created object expression.
+         */
+        if (utils.isObjectExpression(secondParameter)) {
+          v5Utils.copyPropertiesFromSource(
+            secondParameter,
+            createdObjectExpression,
+            predicate,
+          )
+        } else {
+          // Otherwise, we simply spread the second parameter in the newly created object expression.
+          createdObjectExpression.properties.push(
+            jscodeshift.spreadElement(secondParameter),
+          )
+        }
+      }
+
+      // The rest of the parameters can be simply pushed to the parameters object so all will be kept.
+      parameters.push(...node.arguments.slice(2))
+
+      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,
+  )
+
+  createUseQueryLikeTransformer({ jscodeshift, utils, root }).execute(
+    config.hooks,
+    replacer,
+  )
+
+  createQueryCacheTransformer({ jscodeshift, utils, root }).execute(replacer)
+}
+
+module.exports = transformFilterAwareUsages