@tanstack/vue-query 5.0.0-alpha.7 → 5.0.0-alpha.71

package/src/__tests__/useInfiniteQuery.types.test.tsx

@@ -0,0 +1,102 @@
+import type { InfiniteData } from '@tanstack/query-core'
+import { reactive } from 'vue'
+import { useInfiniteQuery } from '../useInfiniteQuery'
+import type { Equal, Expect } from './test-utils'
+import { doNotExecute, simpleFetcher } from './test-utils'
+
+describe('Discriminated union return type', () => {
+  it('data should be possibly undefined by default', () => {
+    doNotExecute(() => {
+      const query = reactive(
+        useInfiniteQuery({
+          queryKey: ['infiniteQuery'],
+          queryFn: simpleFetcher,
+          getNextPageParam: () => undefined,
+          defaultPageParam: 0,
+        }),
+      )
+
+      const result: Expect<
+        Equal<InfiniteData<string> | undefined, typeof query.data>
+      > = true
+      return result
+    })
+  })
+
+  it('data should be defined when query is success', () => {
+    doNotExecute(() => {
+      const query = reactive(
+        useInfiniteQuery({
+          queryKey: ['infiniteQuery'],
+          queryFn: simpleFetcher,
+          getNextPageParam: () => undefined,
+          defaultPageParam: 0,
+        }),
+      )
+
+      if (query.isSuccess) {
+        const result: Expect<Equal<InfiniteData<string>, typeof query.data>> =
+          true
+        return result
+      }
+      return
+    })
+  })
+
+  it('error should be null when query is success', () => {
+    doNotExecute(() => {
+      const query = reactive(
+        useInfiniteQuery({
+          queryKey: ['infiniteQuery'],
+          queryFn: simpleFetcher,
+          getNextPageParam: () => undefined,
+          defaultPageParam: 0,
+        }),
+      )
+
+      if (query.isSuccess) {
+        const result: Expect<Equal<null, typeof query.error>> = true
+        return result
+      }
+      return
+    })
+  })
+
+  it('data should be undefined when query is pending', () => {
+    doNotExecute(() => {
+      const query = reactive(
+        useInfiniteQuery({
+          queryKey: ['infiniteQuery'],
+          queryFn: simpleFetcher,
+          getNextPageParam: () => undefined,
+          defaultPageParam: 0,
+        }),
+      )
+
+      if (query.isPending) {
+        const result: Expect<Equal<undefined, typeof query.data>> = true
+        return result
+      }
+      return
+    })
+  })
+
+  it('error should be defined when query is error', () => {
+    doNotExecute(() => {
+      const query = reactive(
+        useInfiniteQuery({
+          queryKey: ['infiniteQuery'],
+          queryFn: simpleFetcher,
+          getNextPageParam: () => undefined,
+          defaultPageParam: 0,
+        }),
+      )
+
+      if (query.isError) {
+        const result: Expect<Equal<Error, typeof query.error>> = true
+        return result
+      }
+      return
+    })
+  })
+})

package/src/__tests__/useIsFetching.test.ts

@@ -0,0 +1,77 @@
+import { onScopeDispose, reactive } from 'vue-demi'
+
+import { flushPromises, simpleFetcher } from './test-utils'
+import { useQuery } from '../useQuery'
+import { useIsFetching } from '../useIsFetching'
+import { vi } from 'vitest'
+import type { MockedFunction } from 'vitest'
+
+vi.mock('../useQueryClient')
+
+describe('useIsFetching', () => {
+  test('should properly return isFetching state', async () => {
+    const { isFetching: isFetchingQuery } = useQuery({
+      queryKey: ['isFetching1'],
+      queryFn: simpleFetcher,
+    })
+    useQuery({ queryKey: ['isFetching2'], queryFn: simpleFetcher })
+    const isFetching = useIsFetching()
+
+    expect(isFetchingQuery.value).toStrictEqual(true)
+    expect(isFetching.value).toStrictEqual(2)
+
+    await flushPromises()
+
+    expect(isFetchingQuery.value).toStrictEqual(false)
+    expect(isFetching.value).toStrictEqual(0)
+  })
+
+  test('should stop listening to changes on onScopeDispose', async () => {
+    const onScopeDisposeMock = onScopeDispose as MockedFunction<
+      typeof onScopeDispose
+    >
+    onScopeDisposeMock.mockImplementation((fn) => fn())
+
+    const { status } = useQuery({
+      queryKey: ['onScopeDispose'],
+      queryFn: simpleFetcher,
+    })
+    const isFetching = useIsFetching()
+
+    expect(status.value).toStrictEqual('pending')
+    expect(isFetching.value).toStrictEqual(1)
+
+    await flushPromises()
+
+    expect(status.value).toStrictEqual('pending')
+    expect(isFetching.value).toStrictEqual(1)
+
+    await flushPromises()
+
+    expect(status.value).toStrictEqual('pending')
+    expect(isFetching.value).toStrictEqual(1)
+
+    onScopeDisposeMock.mockReset()
+  })
+
+  test('should properly update filters', async () => {
+    const filter = reactive({ stale: false })
+    useQuery({
+      queryKey: ['isFetching'],
+      queryFn: () =>
+        new Promise((resolve) => {
+          setTimeout(() => {
+            return resolve('Some data')
+          }, 100)
+        }),
+    })
+    const isFetching = useIsFetching(filter)
+
+    expect(isFetching.value).toStrictEqual(0)
+
+    filter.stale = true
+    await flushPromises()
+
+    expect(isFetching.value).toStrictEqual(1)
+  })
+})

package/src/__tests__/useIsMutating.test.ts

@@ -0,0 +1,123 @@
+import { onScopeDispose, reactive } from 'vue-demi'
+
+import { flushPromises, successMutator } from './test-utils'
+import { useMutation } from '../useMutation'
+import { useIsMutating, useMutationState } from '../useMutationState'
+import { vi } from 'vitest'
+import type { MockedFunction } from 'vitest'
+import { useQueryClient } from '../useQueryClient'
+
+vi.mock('../useQueryClient')
+
+describe('useIsMutating', () => {
+  test('should properly return isMutating state', async () => {
+    const mutation = useMutation({
+      mutationFn: (params: string) => successMutator(params),
+    })
+    const mutation2 = useMutation({
+      mutationFn: (params: string) => successMutator(params),
+    })
+    const isMutating = useIsMutating()
+
+    expect(isMutating.value).toStrictEqual(0)
+
+    mutation.mutateAsync('a')
+    mutation2.mutateAsync('b')
+
+    await flushPromises()
+
+    expect(isMutating.value).toStrictEqual(2)
+
+    await flushPromises()
+
+    expect(isMutating.value).toStrictEqual(0)
+  })
+
+  test('should stop listening to changes on onScopeDispose', async () => {
+    const onScopeDisposeMock = onScopeDispose as MockedFunction<
+      typeof onScopeDispose
+    >
+    onScopeDisposeMock.mockImplementation((fn) => fn())
+
+    const mutation = useMutation({
+      mutationFn: (params: string) => successMutator(params),
+    })
+    const mutation2 = useMutation({
+      mutationFn: (params: string) => successMutator(params),
+    })
+    const isMutating = useIsMutating()
+
+    expect(isMutating.value).toStrictEqual(0)
+
+    mutation.mutateAsync('a')
+    mutation2.mutateAsync('b')
+
+    await flushPromises()
+
+    expect(isMutating.value).toStrictEqual(0)
+
+    await flushPromises()
+
+    expect(isMutating.value).toStrictEqual(0)
+
+    onScopeDisposeMock.mockReset()
+  })
+
+  test('should properly update filters', async () => {
+    const filter = reactive({ mutationKey: ['foo'] })
+    const { mutate } = useMutation({
+      mutationKey: ['isMutating'],
+      mutationFn: (params: string) => successMutator(params),
+    })
+    mutate('foo')
+
+    const isMutating = useIsMutating(filter)
+
+    expect(isMutating.value).toStrictEqual(0)
+
+    filter.mutationKey = ['isMutating']
+
+    await flushPromises()
+
+    expect(isMutating.value).toStrictEqual(1)
+  })
+})
+
+describe('useMutationState', () => {
+  it('should return variables after calling mutate', async () => {
+    const mutationKey = ['mutation']
+    const variables = 'foo123'
+
+    const { mutate } = useMutation({
+      mutationKey: mutationKey,
+      mutationFn: (params: string) => successMutator(params),
+    })
+
+    mutate(variables)
+
+    const mutationState = useMutationState({
+      filters: { mutationKey, status: 'pending' },
+      select: (mutation) => mutation.state.variables,
+    })
+
+    expect(mutationState.value).toEqual([variables])
+  })
+
+  it('should return variables after calling mutate', async () => {
+    const queryClient = useQueryClient()
+    queryClient.clear()
+    const mutationKey = ['mutation']
+    const variables = 'bar234'
+
+    const { mutate } = useMutation({
+      mutationKey: mutationKey,
+      mutationFn: (params: string) => successMutator(params),
+    })
+
+    mutate(variables)
+
+    const mutationState = useMutationState()
+
+    expect(mutationState.value[0]).toContain({ variables: variables })
+  })
+})

package/src/__tests__/useMutation.test.ts

@@ -0,0 +1,335 @@
+import { reactive, ref } from 'vue-demi'
+import { errorMutator, flushPromises, successMutator } from './test-utils'
+import { useMutation } from '../useMutation'
+import { useQueryClient } from '../useQueryClient'
+import { vi } from 'vitest'
+
+vi.mock('../useQueryClient')
+
+describe('useMutation', () => {
+  test('should be in idle state initially', () => {
+    const mutation = useMutation({
+      mutationFn: (params) => successMutator(params),
+    })
+
+    expect(mutation).toMatchObject({
+      isIdle: { value: true },
+      isPending: { value: false },
+      isError: { value: false },
+      isSuccess: { value: false },
+    })
+  })
+
+  test('should change state after invoking mutate', () => {
+    const result = 'Mock data'
+    const mutation = useMutation({
+      mutationFn: (params: string) => successMutator(params),
+    })
+
+    mutation.mutate(result)
+
+    expect(mutation).toMatchObject({
+      isIdle: { value: false },
+      isPending: { value: true },
+      isError: { value: false },
+      isSuccess: { value: false },
+      data: { value: undefined },
+      error: { value: null },
+    })
+  })
+
+  test('should return error when request fails', async () => {
+    const mutation = useMutation({ mutationFn: errorMutator })
+    mutation.mutate({})
+    await flushPromises(10)
+    expect(mutation).toMatchObject({
+      isIdle: { value: false },
+      isPending: { value: false },
+      isError: { value: true },
+      isSuccess: { value: false },
+      data: { value: undefined },
+      error: { value: Error('Some error') },
+    })
+  })
+
+  test('should return data when request succeeds', async () => {
+    const result = 'Mock data'
+    const mutation = useMutation({
+      mutationFn: (params: string) => successMutator(params),
+    })
+
+    mutation.mutate(result)
+
+    await flushPromises(10)
+
+    expect(mutation).toMatchObject({
+      isIdle: { value: false },
+      isPending: { value: false },
+      isError: { value: false },
+      isSuccess: { value: true },
+      data: { value: 'Mock data' },
+      error: { value: null },
+    })
+  })
+
+  test('should update reactive options', async () => {
+    const queryClient = useQueryClient()
+    const mutationCache = queryClient.getMutationCache()
+    const options = reactive({
+      mutationKey: ['foo'],
+      mutationFn: (params: string) => successMutator(params),
+    })
+    const mutation = useMutation(options)
+
+    options.mutationKey = ['bar']
+    await flushPromises()
+    mutation.mutate('xyz')
+
+    await flushPromises()
+
+    const mutations = mutationCache.find({ mutationKey: ['bar'] })
+
+    expect(mutations?.options.mutationKey).toEqual(['bar'])
+  })
+
+  test('should update reactive options deeply', async () => {
+    type MutationKeyTest = {
+      entity: string
+      otherObject: {
+        name: string
+      }
+    }
+    const mutationKey = ref<MutationKeyTest[]>([
+      {
+        entity: 'test',
+        otherObject: { name: 'objectName' },
+      },
+    ])
+    const queryClient = useQueryClient()
+    const mutationCache = queryClient.getMutationCache()
+    const options = reactive({
+      mutationKey,
+      mutationFn: (params: string) => successMutator(params),
+    })
+    const mutation = useMutation(options)
+
+    mutationKey.value[0]!.otherObject.name = 'someOtherObjectName'
+    await flushPromises()
+    mutation.mutate('xyz')
+
+    await flushPromises()
+
+    const mutations = mutationCache.getAll()
+    const relevantMutation = mutations.find((m) => {
+      return (
+        Array.isArray(m.options.mutationKey) &&
+        !!m.options.mutationKey[0].otherObject
+      )
+    })
+
+    expect(
+      (relevantMutation?.options.mutationKey as MutationKeyTest[])[0]
+        ?.otherObject.name === 'someOtherObjectName',
+    )
+  })
+
+  test('should allow for non-options object (mutationFn or mutationKey) passed as arg1 & arg2 to trigger reactive updates', async () => {
+    const mutationKey = ref<string[]>(['foo2'])
+    const mutationFn = ref((params: string) => successMutator(params))
+    const queryClient = useQueryClient()
+    const mutationCache = queryClient.getMutationCache()
+    const mutation = useMutation({ mutationKey, mutationFn })
+
+    mutationKey.value = ['bar2']
+    let proof = false
+    mutationFn.value = (params: string) => {
+      proof = true
+      return successMutator(params)
+    }
+    await flushPromises()
+
+    mutation.mutate('xyz')
+    await flushPromises()
+
+    const mutations = mutationCache.find({ mutationKey: ['bar2'] })
+    expect(mutations?.options.mutationKey).toEqual(['bar2'])
+    expect(proof).toEqual(true)
+  })
+
+  test('should reset state after invoking mutation.reset', async () => {
+    const mutation = useMutation({
+      mutationFn: (params: string) => errorMutator(params),
+    })
+
+    mutation.mutate('')
+
+    await flushPromises(10)
+
+    mutation.reset()
+
+    expect(mutation).toMatchObject({
+      isIdle: { value: true },
+      isPending: { value: false },
+      isError: { value: false },
+      isSuccess: { value: false },
+      data: { value: undefined },
+      error: { value: null },
+    })
+  })
+
+  describe('side effects', () => {
+    beforeEach(() => {
+      vi.clearAllMocks()
+    })
+
+    test('should call onMutate when passed as an option', async () => {
+      const onMutate = vi.fn()
+      const mutation = useMutation({
+        mutationFn: (params: string) => successMutator(params),
+        onMutate,
+      })
+
+      mutation.mutate('')
+
+      await flushPromises(10)
+
+      expect(onMutate).toHaveBeenCalledTimes(1)
+    })
+
+    test('should call onError when passed as an option', async () => {
+      const onError = vi.fn()
+      const mutation = useMutation({
+        mutationFn: (params: string) => errorMutator(params),
+        onError,
+      })
+
+      mutation.mutate('')
+
+      await flushPromises(10)
+
+      expect(onError).toHaveBeenCalledTimes(1)
+    })
+
+    test('should call onSuccess when passed as an option', async () => {
+      const onSuccess = vi.fn()
+      const mutation = useMutation({
+        mutationFn: (params: string) => successMutator(params),
+        onSuccess,
+      })
+
+      mutation.mutate('')
+
+      await flushPromises(10)
+
+      expect(onSuccess).toHaveBeenCalledTimes(1)
+    })
+
+    test('should call onSettled when passed as an option', async () => {
+      const onSettled = vi.fn()
+      const mutation = useMutation({
+        mutationFn: (params: string) => successMutator(params),
+        onSettled,
+      })
+
+      mutation.mutate('')
+
+      await flushPromises(10)
+
+      expect(onSettled).toHaveBeenCalledTimes(1)
+    })
+
+    test('should call onError when passed as an argument of mutate function', async () => {
+      const onError = vi.fn()
+      const mutation = useMutation({
+        mutationFn: (params: string) => errorMutator(params),
+      })
+
+      mutation.mutate('', { onError })
+
+      await flushPromises(10)
+
+      expect(onError).toHaveBeenCalledTimes(1)
+    })
+
+    test('should call onSuccess when passed as an argument of mutate function', async () => {
+      const onSuccess = vi.fn()
+      const mutation = useMutation({
+        mutationFn: (params: string) => successMutator(params),
+      })
+
+      mutation.mutate('', { onSuccess })
+
+      await flushPromises(10)
+
+      expect(onSuccess).toHaveBeenCalledTimes(1)
+    })
+
+    test('should call onSettled when passed as an argument of mutate function', async () => {
+      const onSettled = vi.fn()
+      const mutation = useMutation({
+        mutationFn: (params: string) => successMutator(params),
+      })
+
+      mutation.mutate('', { onSettled })
+
+      await flushPromises(10)
+
+      expect(onSettled).toHaveBeenCalledTimes(1)
+    })
+
+    test('should fire both onSettled functions', async () => {
+      const onSettled = vi.fn()
+      const onSettledOnFunction = vi.fn()
+      const mutation = useMutation({
+        mutationFn: (params: string) => successMutator(params),
+        onSettled,
+      })
+
+      mutation.mutate('', { onSettled: onSettledOnFunction })
+
+      await flushPromises(10)
+
+      expect(onSettled).toHaveBeenCalledTimes(1)
+      expect(onSettledOnFunction).toHaveBeenCalledTimes(1)
+    })
+  })
+
+  describe('async', () => {
+    beforeEach(() => {
+      vi.clearAllMocks()
+    })
+
+    test('should resolve properly', async () => {
+      const result = 'Mock data'
+      const mutation = useMutation({
+        mutationFn: (params: string) => successMutator(params),
+      })
+
+      await expect(mutation.mutateAsync(result)).resolves.toBe(result)
+
+      expect(mutation).toMatchObject({
+        isIdle: { value: false },
+        isPending: { value: false },
+        isError: { value: false },
+        isSuccess: { value: true },
+        data: { value: 'Mock data' },
+        error: { value: null },
+      })
+    })
+
+    test('should throw on error', async () => {
+      const mutation = useMutation({ mutationFn: errorMutator })
+
+      await expect(mutation.mutateAsync({})).rejects.toThrowError('Some error')
+
+      expect(mutation).toMatchObject({
+        isIdle: { value: false },
+        isPending: { value: false },
+        isError: { value: true },
+        isSuccess: { value: false },
+        data: { value: undefined },
+        error: { value: Error('Some error') },
+      })
+    })
+  })
+})