@tanstack/react-query 4.24.9 → 5.0.0-alpha.0

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

@@ -1,160 +0,0 @@
-// 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

@@ -1,115 +0,0 @@
-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

@@ -1,49 +0,0 @@
-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

@@ -1,32 +0,0 @@
-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

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

package/src/__tests__/useIsMutating.test.tsx

@@ -1,259 +0,0 @@
-import { fireEvent, waitFor } from '@testing-library/react'
-import * as React from 'react'
-import { useIsMutating } from '../useIsMutating'
-import { useMutation } from '../useMutation'
-import {
-  createQueryClient,
-  renderWithClient,
-  setActTimeout,
-  sleep,
-} from './utils'
-import { ErrorBoundary } from 'react-error-boundary'
-import { QueryClient } from '@tanstack/query-core'
-import * as MutationCacheModule from '../../../query-core/src/mutationCache'
-
-describe('useIsMutating', () => {
-  it('should return the number of fetching mutations', async () => {
-    const isMutatings: number[] = []
-    const queryClient = createQueryClient()
-
-    function IsMutating() {
-      const isMutating = useIsMutating()
-      isMutatings.push(isMutating)
-      return null
-    }
-
-    function Mutations() {
-      const { mutate: mutate1 } = useMutation(['mutation1'], async () => {
-        await sleep(150)
-        return 'data'
-      })
-      const { mutate: mutate2 } = useMutation(['mutation2'], async () => {
-        await sleep(50)
-        return 'data'
-      })
-
-      React.useEffect(() => {
-        mutate1()
-        setActTimeout(() => {
-          mutate2()
-        }, 50)
-      }, [mutate1, mutate2])
-
-      return null
-    }
-
-    function Page() {
-      return (
-        <div>
-          <IsMutating />
-          <Mutations />
-        </div>
-      )
-    }
-
-    renderWithClient(queryClient, <Page />)
-    await waitFor(() => expect(isMutatings).toEqual([0, 1, 2, 1, 0]))
-  })
-
-  it('should filter correctly by mutationKey', async () => {
-    const isMutatings: number[] = []
-    const queryClient = createQueryClient()
-
-    function IsMutating() {
-      const isMutating = useIsMutating(['mutation1'])
-      isMutatings.push(isMutating)
-      return null
-    }
-
-    function Page() {
-      const { mutate: mutate1 } = useMutation(['mutation1'], async () => {
-        await sleep(100)
-        return 'data'
-      })
-      const { mutate: mutate2 } = useMutation(['mutation2'], async () => {
-        await sleep(100)
-        return 'data'
-      })
-
-      React.useEffect(() => {
-        mutate1()
-        mutate2()
-      }, [mutate1, mutate2])
-
-      return <IsMutating />
-    }
-
-    renderWithClient(queryClient, <Page />)
-    await waitFor(() => expect(isMutatings).toEqual([0, 1, 1, 0]))
-  })
-
-  it('should filter correctly by predicate', async () => {
-    const isMutatings: number[] = []
-    const queryClient = createQueryClient()
-
-    function IsMutating() {
-      const isMutating = useIsMutating({
-        predicate: (mutation) =>
-          mutation.options.mutationKey?.[0] === 'mutation1',
-      })
-      isMutatings.push(isMutating)
-      return null
-    }
-
-    function Page() {
-      const { mutate: mutate1 } = useMutation(['mutation1'], async () => {
-        await sleep(100)
-        return 'data'
-      })
-      const { mutate: mutate2 } = useMutation(['mutation2'], async () => {
-        await sleep(100)
-        return 'data'
-      })
-
-      React.useEffect(() => {
-        mutate1()
-        mutate2()
-      }, [mutate1, mutate2])
-
-      return <IsMutating />
-    }
-
-    renderWithClient(queryClient, <Page />)
-    await waitFor(() => expect(isMutatings).toEqual([0, 1, 1, 0]))
-  })
-
-  it('should not change state if unmounted', async () => {
-    // We have to mock the MutationCache to not unsubscribe
-    // the listener when the component is unmounted
-    class MutationCacheMock extends MutationCacheModule.MutationCache {
-      subscribe(listener: any) {
-        super.subscribe(listener)
-        return () => void 0
-      }
-    }
-
-    const MutationCacheSpy = jest
-      .spyOn(MutationCacheModule, 'MutationCache')
-      .mockImplementation((fn) => {
-        return new MutationCacheMock(fn)
-      })
-
-    const queryClient = createQueryClient()
-
-    function IsMutating() {
-      useIsMutating()
-      return null
-    }
-
-    function Page() {
-      const [mounted, setMounted] = React.useState(true)
-      const { mutate: mutate1 } = useMutation(['mutation1'], async () => {
-        await sleep(10)
-        return 'data'
-      })
-
-      React.useEffect(() => {
-        mutate1()
-      }, [mutate1])
-
-      return (
-        <div>
-          <button onClick={() => setMounted(false)}>unmount</button>
-          {mounted && <IsMutating />}
-        </div>
-      )
-    }
-
-    const { getByText } = renderWithClient(queryClient, <Page />)
-    fireEvent.click(getByText('unmount'))
-
-    // Should not display the console error
-    // "Warning: Can't perform a React state update on an unmounted component"
-
-    await sleep(20)
-    MutationCacheSpy.mockRestore()
-  })
-
-  describe('with custom context', () => {
-    it('should return the number of fetching mutations', async () => {
-      const context = React.createContext<QueryClient | undefined>(undefined)
-
-      const isMutatings: number[] = []
-      const queryClient = new QueryClient()
-
-      function IsMutating() {
-        const isMutating = useIsMutating(undefined, { context })
-        isMutatings.push(isMutating)
-        return null
-      }
-
-      function Page() {
-        const { mutate: mutate1 } = useMutation(
-          ['mutation1'],
-          async () => {
-            await sleep(150)
-            return 'data'
-          },
-          { context },
-        )
-        const { mutate: mutate2 } = useMutation(
-          ['mutation2'],
-          async () => {
-            await sleep(50)
-            return 'data'
-          },
-          { context },
-        )
-
-        React.useEffect(() => {
-          mutate1()
-          setActTimeout(() => {
-            mutate2()
-          }, 50)
-        }, [mutate1, mutate2])
-
-        return <IsMutating />
-      }
-
-      renderWithClient(queryClient, <Page />, { context })
-      await waitFor(() => expect(isMutatings).toEqual([0, 1, 1, 2, 2, 1, 0]))
-    })
-
-    it('should throw if the context is not passed to useIsMutating', async () => {
-      const context = React.createContext<QueryClient | undefined>(undefined)
-
-      const isMutatings: number[] = []
-      const queryClient = new QueryClient()
-
-      function IsMutating() {
-        const isMutating = useIsMutating(undefined)
-        isMutatings.push(isMutating)
-        return null
-      }
-
-      function Page() {
-        const { mutate } = useMutation(['mutation'], async () => 'data', {
-          useErrorBoundary: true,
-          context,
-        })
-
-        React.useEffect(() => {
-          mutate()
-        }, [mutate])
-
-        return <IsMutating />
-      }
-
-      const rendered = renderWithClient(
-        queryClient,
-        <ErrorBoundary fallbackRender={() => <div>error boundary</div>}>
-          <Page />
-        </ErrorBoundary>,
-        { context },
-      )
-
-      await waitFor(() => rendered.getByText('error boundary'))
-    })
-  })
-})

package/src/reactBatchedUpdates.native.ts

@@ -1,4 +0,0 @@
-// @ts-ignore
-// eslint-disable-next-line import/no-unresolved
-import { unstable_batchedUpdates } from 'react-native'
-export { unstable_batchedUpdates }

package/src/reactBatchedUpdates.ts

@@ -1,2 +0,0 @@
-import * as ReactDOM from 'react-dom'
-export const unstable_batchedUpdates = ReactDOM.unstable_batchedUpdates

package/src/setBatchUpdatesFn.ts

@@ -1,4 +0,0 @@
-import { notifyManager } from '@tanstack/query-core'
-import { unstable_batchedUpdates } from './reactBatchedUpdates'
-
-notifyManager.setBatchNotifyFunction(unstable_batchedUpdates)

package/src/useIsMutating.ts

@@ -1,39 +0,0 @@
-import * as React from 'react'
-import { useSyncExternalStore } from './useSyncExternalStore'
-
-import type { MutationKey, MutationFilters } from '@tanstack/query-core'
-import { notifyManager, parseMutationFilterArgs } from '@tanstack/query-core'
-import type { ContextOptions } from './types'
-import { useQueryClient } from './QueryClientProvider'
-
-interface Options extends ContextOptions {}
-
-export function useIsMutating(
-  filters?: MutationFilters,
-  options?: Options,
-): number
-export function useIsMutating(
-  mutationKey?: MutationKey,
-  filters?: Omit<MutationFilters, 'mutationKey'>,
-  options?: Options,
-): number
-export function useIsMutating(
-  arg1?: MutationKey | MutationFilters,
-  arg2?: Omit<MutationFilters, 'mutationKey'> | Options,
-  arg3?: Options,
-): number {
-  const [filters, options = {}] = parseMutationFilterArgs(arg1, arg2, arg3)
-
-  const queryClient = useQueryClient({ context: options.context })
-  const mutationCache = queryClient.getMutationCache()
-
-  return useSyncExternalStore(
-    React.useCallback(
-      (onStoreChange) =>
-        mutationCache.subscribe(notifyManager.batchCalls(onStoreChange)),
-      [mutationCache],
-    ),
-    () => queryClient.isMutating(filters),
-    () => queryClient.isMutating(filters),
-  )
-}

package/src/useSyncExternalStore.native.ts

@@ -1,5 +0,0 @@
-// Temporary workaround due to an issue with react-native uSES - https://github.com/TanStack/query/pull/3601
-// @ts-ignore
-import { useSyncExternalStore } from 'use-sync-external-store/shim/index.native.js'
-
-export { useSyncExternalStore }

package/src/useSyncExternalStore.ts

@@ -1,4 +0,0 @@
-// Temporary workaround due to an issue with react-native uSES - https://github.com/TanStack/query/pull/3601
-import { useSyncExternalStore as uSES } from 'use-sync-external-store/shim/index.js'
-
-export const useSyncExternalStore = uSES