@tanstack/vue-query 5.0.0-alpha.5 → 5.0.0-alpha.50

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') },
+      })
+    })
+  })
+})

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

@@ -0,0 +1,97 @@
+import { reactive } from 'vue'
+import { useMutation } from '../useMutation'
+import { doNotExecute, successMutator } from './test-utils'
+import type { Equal, Expect } from './test-utils'
+
+describe('Discriminated union return type', () => {
+  it('data should be possibly undefined by default', () => {
+    doNotExecute(() => {
+      const mutation = reactive(
+        useMutation({ mutationFn: successMutator<string> }),
+      )
+
+      const result: Expect<Equal<string | undefined, typeof mutation.data>> =
+        true
+      return result
+    })
+  })
+
+  it('data should be defined when mutation is success', () => {
+    doNotExecute(() => {
+      const mutation = reactive(
+        useMutation({ mutationFn: successMutator<string> }),
+      )
+
+      if (mutation.isSuccess) {
+        const result: Expect<Equal<string, typeof mutation.data>> = true
+        return result
+      }
+      return
+    })
+  })
+
+  it('error should be null when mutation is success', () => {
+    doNotExecute(() => {
+      const mutation = reactive(
+        useMutation({ mutationFn: successMutator<string> }),
+      )
+
+      if (mutation.isSuccess) {
+        const result: Expect<Equal<null, typeof mutation.error>> = true
+        return result
+      }
+      return
+    })
+  })
+
+  it('data should be undefined when mutation is pending', () => {
+    doNotExecute(() => {
+      const mutation = reactive(
+        useMutation({ mutationFn: successMutator<string> }),
+      )
+
+      if (mutation.isPending) {
+        const result: Expect<Equal<undefined, typeof mutation.data>> = true
+        return result
+      }
+      return
+    })
+  })
+
+  it('error should be defined when mutation is error', () => {
+    doNotExecute(() => {
+      const mutation = reactive(
+        useMutation({ mutationFn: successMutator<string> }),
+      )
+
+      if (mutation.isError) {
+        const result: Expect<Equal<Error, typeof mutation.error>> = true
+        return result
+      }
+      return
+    })
+  })
+
+  it('should narrow variables', () => {
+    doNotExecute(() => {
+      const mutation = reactive(
+        useMutation({ mutationFn: successMutator<string> }),
+      )
+
+      if (mutation.isIdle) {
+        const result: Expect<Equal<undefined, typeof mutation.variables>> = true
+        return result
+      }
+      if (mutation.isPending) {
+        const result: Expect<Equal<string, typeof mutation.variables>> = true
+        return result
+      }
+      if (mutation.isSuccess) {
+        const result: Expect<Equal<string, typeof mutation.variables>> = true
+        return result
+      }
+      const result: Expect<Equal<string, typeof mutation.variables>> = true
+      return result
+    })
+  })
+})