@tanstack/react-query 5.0.0-alpha.3 → 5.0.0-alpha.31

package/build/codemods/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/utils/transformers/query-cache-transformer.js

@@ -0,0 +1,116 @@
+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/build/codemods/utils/transformers/query-client-transformer.js

@@ -0,0 +1,48 @@
+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/build/codemods/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/build/codemods/v4/__testfixtures__/default-import.input.tsx

@@ -0,0 +1,94 @@
+import * as React from 'react'
+import {
+  QueryCache,
+  QueryClient,
+  useInfiniteQuery,
+  useIsFetching,
+  useIsMutating,
+  useMutation,
+  useQueries,
+  useQuery,
+  useQueryClient,
+} from 'react-query'
+
+export const Examples = () => {
+  useQuery('todos')
+  useInfiniteQuery('todos')
+  useMutation('todos')
+  useIsFetching('todos')
+  useIsMutating('todos')
+  useQueries([query1, query2])
+  // QueryClient methods
+  // --- Instantiated hook call.
+  const queryClient = useQueryClient()
+  queryClient.getMutationDefaults('todos')
+  queryClient.getQueriesData('todos')
+  queryClient.getQueryData('todos')
+  queryClient.getQueryDefaults('todos')
+  queryClient.getQueryState('todos')
+  queryClient.isFetching('todos')
+  queryClient.setMutationDefaults('todos', { mutationFn: async () => null })
+  queryClient.setQueriesData('todos', () => null)
+  queryClient.setQueryData('todos', () => null)
+  queryClient.setQueryDefaults('todos', { queryFn: async () => null })
+  queryClient.cancelQueries('todos')
+  queryClient.fetchInfiniteQuery('todos')
+  queryClient.fetchQuery('todos')
+  queryClient.invalidateQueries('todos')
+  queryClient.prefetchInfiniteQuery('todos')
+  queryClient.prefetchQuery('todos')
+  queryClient.refetchQueries('todos')
+  queryClient.removeQueries('todos')
+  queryClient.resetQueries('todos')
+  // --- Direct hook call.
+  useQueryClient().getMutationDefaults('todos')
+  useQueryClient().getQueriesData('todos')
+  useQueryClient().getQueryData('todos')
+  useQueryClient().getQueryDefaults('todos')
+  useQueryClient().getQueryState('todos')
+  useQueryClient().isFetching('todos')
+  useQueryClient().setMutationDefaults('todos', {
+    mutationFn: async () => null,
+  })
+  useQueryClient().setQueriesData('todos', () => null)
+  useQueryClient().setQueryData('todos', () => null)
+  useQueryClient().setQueryDefaults('todos', { queryFn: async () => null })
+  useQueryClient().cancelQueries('todos')
+  useQueryClient().fetchInfiniteQuery('todos')
+  useQueryClient().fetchQuery('todos')
+  useQueryClient().invalidateQueries('todos')
+  useQueryClient().prefetchInfiniteQuery('todos')
+  useQueryClient().prefetchQuery('todos')
+  useQueryClient().refetchQueries('todos')
+  useQueryClient().removeQueries('todos')
+  useQueryClient().resetQueries('todos')
+  // QueryCache
+  // --- NewExpression
+  const queryCache1 = new QueryCache({
+    onError: (error) => console.log(error),
+    onSuccess: (success) => console.log(success)
+  })
+  queryCache1.find('todos')
+  queryCache1.findAll('todos')
+  // --- Instantiated hook call.
+  const queryClient1 = useQueryClient()
+  queryClient1.getQueryCache().find('todos')
+  queryClient1.getQueryCache().findAll('todos')
+  //
+  const queryClient2 = new QueryClient({})
+  queryClient2.getQueryCache().find('todos')
+  queryClient2.getQueryCache().findAll('todos')
+  //
+  const queryCache2 = queryClient1.getQueryCache()
+  queryCache2.find('todos')
+  queryCache2.findAll('todos')
+  // --- Direct hook call.
+  useQueryClient().getQueryCache().find('todos')
+  useQueryClient().getQueryCache().findAll('todos')
+  //
+  const queryCache3 = useQueryClient().getQueryCache()
+  queryCache3.find('todos')
+  queryCache3.findAll('todos')
+
+  return <div>Example Component</div>
+}

package/build/codemods/v4/__testfixtures__/default-import.output.tsx

@@ -0,0 +1,96 @@
+import * as React from 'react'
+import {
+  QueryCache,
+  QueryClient,
+  useInfiniteQuery,
+  useIsFetching,
+  useIsMutating,
+  useMutation,
+  useQueries,
+  useQuery,
+  useQueryClient,
+} from 'react-query'
+
+export const Examples = () => {
+  useQuery(['todos'])
+  useInfiniteQuery(['todos'])
+  useMutation(['todos'])
+  useIsFetching(['todos'])
+  useIsMutating(['todos'])
+  useQueries({
+    queries: [query1, query2]
+  })
+  // QueryClient methods
+  // --- Instantiated hook call.
+  const queryClient = useQueryClient()
+  queryClient.getMutationDefaults(['todos'])
+  queryClient.getQueriesData(['todos'])
+  queryClient.getQueryData(['todos'])
+  queryClient.getQueryDefaults(['todos'])
+  queryClient.getQueryState(['todos'])
+  queryClient.isFetching(['todos'])
+  queryClient.setMutationDefaults(['todos'], { mutationFn: async () => null })
+  queryClient.setQueriesData(['todos'], () => null)
+  queryClient.setQueryData(['todos'], () => null)
+  queryClient.setQueryDefaults(['todos'], { queryFn: async () => null })
+  queryClient.cancelQueries(['todos'])
+  queryClient.fetchInfiniteQuery(['todos'])
+  queryClient.fetchQuery(['todos'])
+  queryClient.invalidateQueries(['todos'])
+  queryClient.prefetchInfiniteQuery(['todos'])
+  queryClient.prefetchQuery(['todos'])
+  queryClient.refetchQueries(['todos'])
+  queryClient.removeQueries(['todos'])
+  queryClient.resetQueries(['todos'])
+  // --- Direct hook call.
+  useQueryClient().getMutationDefaults(['todos'])
+  useQueryClient().getQueriesData(['todos'])
+  useQueryClient().getQueryData(['todos'])
+  useQueryClient().getQueryDefaults(['todos'])
+  useQueryClient().getQueryState(['todos'])
+  useQueryClient().isFetching(['todos'])
+  useQueryClient().setMutationDefaults(['todos'], {
+    mutationFn: async () => null,
+  })
+  useQueryClient().setQueriesData(['todos'], () => null)
+  useQueryClient().setQueryData(['todos'], () => null)
+  useQueryClient().setQueryDefaults(['todos'], { queryFn: async () => null })
+  useQueryClient().cancelQueries(['todos'])
+  useQueryClient().fetchInfiniteQuery(['todos'])
+  useQueryClient().fetchQuery(['todos'])
+  useQueryClient().invalidateQueries(['todos'])
+  useQueryClient().prefetchInfiniteQuery(['todos'])
+  useQueryClient().prefetchQuery(['todos'])
+  useQueryClient().refetchQueries(['todos'])
+  useQueryClient().removeQueries(['todos'])
+  useQueryClient().resetQueries(['todos'])
+  // QueryCache
+  // --- NewExpression
+  const queryCache1 = new QueryCache({
+    onError: (error) => console.log(error),
+    onSuccess: (success) => console.log(success)
+  })
+  queryCache1.find(['todos'])
+  queryCache1.findAll(['todos'])
+  // --- Instantiated hook call.
+  const queryClient1 = useQueryClient()
+  queryClient1.getQueryCache().find(['todos'])
+  queryClient1.getQueryCache().findAll(['todos'])
+  //
+  const queryClient2 = new QueryClient({})
+  queryClient2.getQueryCache().find(['todos'])
+  queryClient2.getQueryCache().findAll(['todos'])
+  //
+  const queryCache2 = queryClient1.getQueryCache()
+  queryCache2.find(['todos'])
+  queryCache2.findAll(['todos'])
+  // --- Direct hook call.
+  useQueryClient().getQueryCache().find(['todos'])
+  useQueryClient().getQueryCache().findAll(['todos'])
+  //
+  const queryCache3 = useQueryClient().getQueryCache()
+  queryCache3.find(['todos'])
+  queryCache3.findAll(['todos'])
+
+  return <div>Example Component</div>
+}

package/build/codemods/v4/__testfixtures__/named-import.input.tsx

@@ -0,0 +1,96 @@
+import * as React from 'react'
+import {
+  QueryCache as RenamedQueryCache,
+  QueryClient as RenamedQueryClient,
+  useInfiniteQuery as useRenamedInfiniteQuery,
+  useIsFetching as useRenamedIsFetching,
+  useIsMutating as useRenamedIsMutating,
+  useMutation as useRenamedMutation,
+  useQueries as useRenamedQueries,
+  useQuery as useRenamedQuery,
+  useQueryClient as useRenamedQueryClient,
+} from 'react-query'
+
+export const Examples = () => {
+  useRenamedQuery('todos')
+  useRenamedInfiniteQuery('todos')
+  useRenamedMutation('todos')
+  useRenamedIsFetching('todos')
+  useRenamedIsMutating('todos')
+  useRenamedQueries([query1, query2])
+  // QueryClient methods
+  // --- Instantiated hook call.
+  const queryClient = useRenamedQueryClient()
+  queryClient.getMutationDefaults('todos')
+  queryClient.getQueriesData('todos')
+  queryClient.getQueryData('todos')
+  queryClient.getQueryDefaults('todos')
+  queryClient.getQueryState('todos')
+  queryClient.isFetching('todos')
+  queryClient.setMutationDefaults('todos', { mutationFn: async () => null })
+  queryClient.setQueriesData('todos', () => null)
+  queryClient.setQueryData('todos', () => null)
+  queryClient.setQueryDefaults('todos', { queryFn: async () => null })
+  queryClient.cancelQueries('todos')
+  queryClient.fetchInfiniteQuery('todos')
+  queryClient.fetchQuery('todos')
+  queryClient.invalidateQueries('todos')
+  queryClient.prefetchInfiniteQuery('todos')
+  queryClient.prefetchQuery('todos')
+  queryClient.refetchQueries('todos')
+  queryClient.removeQueries('todos')
+  queryClient.resetQueries('todos')
+  // --- Direct hook call.
+  useRenamedQueryClient().getMutationDefaults('todos')
+  useRenamedQueryClient().getQueriesData('todos')
+  useRenamedQueryClient().getQueryData('todos')
+  useRenamedQueryClient().getQueryDefaults('todos')
+  useRenamedQueryClient().getQueryState('todos')
+  useRenamedQueryClient().isFetching('todos')
+  useRenamedQueryClient().setMutationDefaults('todos', {
+    mutationFn: async () => null,
+  })
+  useRenamedQueryClient().setQueriesData('todos', () => null)
+  useRenamedQueryClient().setQueryData('todos', () => null)
+  useRenamedQueryClient().setQueryDefaults('todos', {
+    queryFn: async () => null,
+  })
+  useRenamedQueryClient().cancelQueries('todos')
+  useRenamedQueryClient().fetchInfiniteQuery('todos')
+  useRenamedQueryClient().fetchQuery('todos')
+  useRenamedQueryClient().invalidateQueries('todos')
+  useRenamedQueryClient().prefetchInfiniteQuery('todos')
+  useRenamedQueryClient().prefetchQuery('todos')
+  useRenamedQueryClient().refetchQueries('todos')
+  useRenamedQueryClient().removeQueries('todos')
+  useRenamedQueryClient().resetQueries('todos')
+  // QueryCache
+  // --- NewExpression
+  const queryCache1 = new RenamedQueryCache({
+    onError: (error) => console.log(error),
+    onSuccess: (success) => console.log(success)
+  })
+  queryCache1.find('todos')
+  queryCache1.findAll('todos')
+  // --- Instantiated hook call.
+  const queryClient1 = useRenamedQueryClient()
+  queryClient1.getQueryCache().find('todos')
+  queryClient1.getQueryCache().findAll('todos')
+  //
+  const queryClient2 = new RenamedQueryClient({})
+  queryClient2.getQueryCache().find('todos')
+  queryClient2.getQueryCache().findAll('todos')
+  //
+  const queryCache2 = queryClient1.getQueryCache()
+  queryCache2.find('todos')
+  queryCache2.findAll('todos')
+  // --- Direct hook call.
+  useRenamedQueryClient().getQueryCache().find('todos')
+  useRenamedQueryClient().getQueryCache().findAll('todos')
+  //
+  const queryCache3 = useRenamedQueryClient().getQueryCache()
+  queryCache3.find('todos')
+  queryCache3.findAll('todos')
+
+  return <div>Example Component</div>
+}