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

package/src/__tests__/useQueries.test.ts

@@ -0,0 +1,256 @@
+import { onScopeDispose, ref } from 'vue-demi'
+
+import {
+  flushPromises,
+  rejectFetcher,
+  simpleFetcher,
+  getSimpleFetcherWithReturnData,
+} from './test-utils'
+import { useQueries } from '../useQueries'
+import { useQueryClient } from '../useQueryClient'
+import { QueryClient } from '../queryClient'
+import { vi } from 'vitest'
+import type { MockedFunction } from 'vitest'
+
+vi.mock('../useQueryClient')
+
+describe('useQueries', () => {
+  beforeEach(() => {
+    vi.restoreAllMocks()
+  })
+
+  test('should return result for each query', () => {
+    const queries = [
+      {
+        queryKey: ['key1'],
+        queryFn: simpleFetcher,
+      },
+      {
+        queryKey: ['key2'],
+        queryFn: simpleFetcher,
+      },
+    ]
+    const queriesState = useQueries({ queries })
+
+    expect(queriesState.value).toMatchObject([
+      {
+        status: 'pending',
+        isPending: true,
+        isFetching: true,
+        isStale: true,
+      },
+      {
+        status: 'pending',
+        isPending: true,
+        isFetching: true,
+        isStale: true,
+      },
+    ])
+  })
+
+  test('should resolve to success and update reactive state', async () => {
+    const queries = [
+      {
+        queryKey: ['key11'],
+        queryFn: simpleFetcher,
+      },
+      {
+        queryKey: ['key12'],
+        queryFn: simpleFetcher,
+      },
+    ]
+    const queriesState = useQueries({ queries })
+
+    await flushPromises()
+
+    expect(queriesState.value).toMatchObject([
+      {
+        status: 'success',
+        isPending: false,
+        isFetching: false,
+        isStale: true,
+      },
+      {
+        status: 'success',
+        isPending: false,
+        isFetching: false,
+        isStale: true,
+      },
+    ])
+  })
+
+  test('should reject one of the queries and update reactive state', async () => {
+    const queries = [
+      {
+        queryKey: ['key21'],
+        queryFn: rejectFetcher,
+      },
+      {
+        queryKey: ['key22'],
+        queryFn: simpleFetcher,
+      },
+    ]
+    const queriesState = useQueries({ queries })
+
+    await flushPromises()
+
+    expect(queriesState.value).toMatchObject([
+      {
+        status: 'error',
+        isPending: false,
+        isFetching: false,
+        isStale: true,
+      },
+      {
+        status: 'success',
+        isPending: false,
+        isFetching: false,
+        isStale: true,
+      },
+    ])
+  })
+
+  test('should return state for new queries', async () => {
+    const queries = ref([
+      {
+        queryKey: ['key31'],
+        queryFn: getSimpleFetcherWithReturnData('value31'),
+      },
+      {
+        queryKey: ['key32'],
+        queryFn: getSimpleFetcherWithReturnData('value32'),
+      },
+      {
+        queryKey: ['key33'],
+        queryFn: getSimpleFetcherWithReturnData('value33'),
+      },
+    ])
+    const queriesState = useQueries({ queries })
+
+    await flushPromises()
+
+    queries.value.splice(
+      0,
+      queries.value.length,
+      {
+        queryKey: ['key31'],
+        queryFn: getSimpleFetcherWithReturnData('value31'),
+      },
+      {
+        queryKey: ['key34'],
+        queryFn: getSimpleFetcherWithReturnData('value34'),
+      },
+    )
+
+    await flushPromises()
+    await flushPromises()
+
+    expect(queriesState.value.length).toEqual(2)
+    expect(queriesState.value).toMatchObject([
+      {
+        data: 'value31',
+        status: 'success',
+        isPending: false,
+        isFetching: false,
+        isStale: true,
+      },
+      {
+        data: 'value34',
+        status: 'success',
+        isPending: false,
+        isFetching: false,
+        isStale: true,
+      },
+    ])
+  })
+
+  test('should stop listening to changes on onScopeDispose', async () => {
+    const onScopeDisposeMock = onScopeDispose as MockedFunction<
+      typeof onScopeDispose
+    >
+    onScopeDisposeMock.mockImplementationOnce((fn) => fn())
+
+    const queries = [
+      {
+        queryKey: ['key41'],
+        queryFn: simpleFetcher,
+      },
+      {
+        queryKey: ['key42'],
+        queryFn: simpleFetcher,
+      },
+    ]
+    const queriesState = useQueries({ queries })
+    await flushPromises()
+
+    expect(queriesState.value).toMatchObject([
+      {
+        status: 'pending',
+        isPending: true,
+        isFetching: true,
+        isStale: true,
+      },
+      {
+        status: 'pending',
+        isPending: true,
+        isFetching: true,
+        isStale: true,
+      },
+    ])
+  })
+
+  test('should use queryClient provided via options', async () => {
+    const queryClient = new QueryClient()
+    const queries = [
+      {
+        queryKey: ['key41'],
+        queryFn: simpleFetcher,
+      },
+      {
+        queryKey: ['key42'],
+        queryFn: simpleFetcher,
+      },
+    ]
+
+    useQueries({ queries }, queryClient)
+    await flushPromises()
+
+    expect(useQueryClient).toHaveBeenCalledTimes(0)
+  })
+
+  test('should combine queries', async () => {
+    const firstResult = 'first result'
+    const secondResult = 'second result'
+
+    const queryClient = new QueryClient()
+    const queries = [
+      {
+        queryKey: ['key41'],
+        queryFn: getSimpleFetcherWithReturnData(firstResult),
+      },
+      {
+        queryKey: ['key42'],
+        queryFn: getSimpleFetcherWithReturnData(secondResult),
+      },
+    ]
+
+    const queriesResult = useQueries(
+      {
+        queries,
+        combine: (results) => {
+          return {
+            combined: true,
+            res: results.map((res) => res.data),
+          }
+        },
+      },
+      queryClient,
+    )
+    await flushPromises()
+
+    expect(queriesResult.value).toMatchObject({
+      combined: true,
+      res: [firstResult, secondResult],
+    })
+  })
+})

package/src/__tests__/useQuery.test.ts

@@ -0,0 +1,290 @@
+import {
+  computed,
+  reactive,
+  ref,
+  onScopeDispose,
+  getCurrentInstance,
+} from 'vue-demi'
+import { QueryObserver } from '@tanstack/query-core'
+
+import {
+  flushPromises,
+  rejectFetcher,
+  simpleFetcher,
+  getSimpleFetcherWithReturnData,
+} from './test-utils'
+import { useQuery } from '../useQuery'
+import { useBaseQuery } from '../useBaseQuery'
+import { vi } from 'vitest'
+import type { Mock, MockedFunction } from 'vitest'
+
+vi.mock('../useQueryClient')
+vi.mock('../useBaseQuery')
+
+describe('useQuery', () => {
+  test('should properly execute query', () => {
+    useQuery({ queryKey: ['key0'], queryFn: simpleFetcher, staleTime: 1000 })
+
+    expect(useBaseQuery).toBeCalledWith(
+      QueryObserver,
+      {
+        queryKey: ['key0'],
+        queryFn: simpleFetcher,
+        staleTime: 1000,
+      },
+      undefined,
+    )
+  })
+
+  test('should return pending status initially', () => {
+    const query = useQuery({ queryKey: ['key1'], queryFn: simpleFetcher })
+
+    expect(query).toMatchObject({
+      status: { value: 'pending' },
+      isPending: { value: true },
+      isFetching: { value: true },
+      isStale: { value: true },
+    })
+  })
+
+  test('should resolve to success and update reactive state: useQuery(key, dataFn)', async () => {
+    const query = useQuery({
+      queryKey: ['key2'],
+      queryFn: getSimpleFetcherWithReturnData('result2'),
+    })
+
+    await flushPromises()
+
+    expect(query).toMatchObject({
+      status: { value: 'success' },
+      data: { value: 'result2' },
+      isPending: { value: false },
+      isFetching: { value: false },
+      isFetched: { value: true },
+      isSuccess: { value: true },
+    })
+  })
+
+  test('should resolve to success and update reactive state: useQuery(optionsObj)', async () => {
+    const query = useQuery({
+      queryKey: ['key31'],
+      queryFn: getSimpleFetcherWithReturnData('result31'),
+      enabled: true,
+    })
+
+    await flushPromises()
+
+    expect(query).toMatchObject({
+      status: { value: 'success' },
+      data: { value: 'result31' },
+      isPending: { value: false },
+      isFetching: { value: false },
+      isFetched: { value: true },
+      isSuccess: { value: true },
+    })
+  })
+
+  test('should resolve to success and update reactive state: useQuery(key, optionsObj)', async () => {
+    const query = useQuery({
+      queryKey: ['key32'],
+      queryFn: getSimpleFetcherWithReturnData('result32'),
+      enabled: true,
+    })
+
+    await flushPromises()
+
+    expect(query).toMatchObject({
+      status: { value: 'success' },
+      data: { value: 'result32' },
+      isPending: { value: false },
+      isFetching: { value: false },
+      isFetched: { value: true },
+      isSuccess: { value: true },
+    })
+  })
+
+  test('should reject and update reactive state', async () => {
+    const query = useQuery({
+      queryKey: ['key3'],
+      queryFn: rejectFetcher,
+    })
+
+    await flushPromises()
+
+    expect(query).toMatchObject({
+      status: { value: 'error' },
+      data: { value: undefined },
+      error: { value: { message: 'Some error' } },
+      isPending: { value: false },
+      isFetching: { value: false },
+      isFetched: { value: true },
+      isError: { value: true },
+      failureCount: { value: 1 },
+      failureReason: { value: { message: 'Some error' } },
+    })
+  })
+
+  test('should update query on reactive (Ref) key change', async () => {
+    const secondKeyRef = ref('key7')
+    const query = useQuery({
+      queryKey: ['key6', secondKeyRef],
+      queryFn: simpleFetcher,
+    })
+
+    await flushPromises()
+
+    expect(query).toMatchObject({
+      status: { value: 'success' },
+    })
+
+    secondKeyRef.value = 'key8'
+    await flushPromises()
+
+    expect(query).toMatchObject({
+      status: { value: 'pending' },
+      data: { value: undefined },
+    })
+
+    await flushPromises()
+
+    expect(query).toMatchObject({
+      status: { value: 'success' },
+    })
+  })
+
+  test("should update query when an option is passed as Ref and it's changed", async () => {
+    const enabled = ref(false)
+    const query = useQuery({
+      queryKey: ['key9'],
+      queryFn: simpleFetcher,
+      enabled,
+    })
+
+    await flushPromises()
+
+    expect(query).toMatchObject({
+      fetchStatus: { value: 'idle' },
+      data: { value: undefined },
+    })
+
+    enabled.value = true
+
+    await flushPromises()
+
+    expect(query).toMatchObject({
+      fetchStatus: { value: 'fetching' },
+      data: { value: undefined },
+    })
+
+    await flushPromises()
+
+    expect(query).toMatchObject({
+      status: { value: 'success' },
+    })
+  })
+
+  test('should properly execute dependant queries', async () => {
+    const { data } = useQuery({
+      queryKey: ['dependant1'],
+      queryFn: simpleFetcher,
+    })
+
+    const enabled = computed(() => !!data.value)
+
+    const { fetchStatus, status } = useQuery(
+      reactive({
+        queryKey: ['dependant2'],
+        queryFn: simpleFetcher,
+        enabled,
+      }),
+    )
+
+    expect(data.value).toStrictEqual(undefined)
+    expect(fetchStatus.value).toStrictEqual('idle')
+
+    await flushPromises()
+
+    expect(data.value).toStrictEqual('Some data')
+    expect(fetchStatus.value).toStrictEqual('fetching')
+
+    await flushPromises()
+
+    expect(fetchStatus.value).toStrictEqual('idle')
+    expect(status.value).toStrictEqual('success')
+  })
+
+  test('should stop listening to changes on onScopeDispose', async () => {
+    const onScopeDisposeMock = onScopeDispose as MockedFunction<
+      typeof onScopeDispose
+    >
+    onScopeDisposeMock.mockImplementationOnce((fn) => fn())
+
+    const { status } = useQuery({
+      queryKey: ['onScopeDispose'],
+      queryFn: simpleFetcher,
+    })
+
+    expect(status.value).toStrictEqual('pending')
+
+    await flushPromises()
+
+    expect(status.value).toStrictEqual('pending')
+
+    await flushPromises()
+
+    expect(status.value).toStrictEqual('pending')
+  })
+
+  describe('suspense', () => {
+    test('should return a Promise', () => {
+      const getCurrentInstanceSpy = getCurrentInstance as Mock
+      getCurrentInstanceSpy.mockImplementation(() => ({ suspense: {} }))
+
+      const query = useQuery({ queryKey: ['suspense'], queryFn: simpleFetcher })
+      const result = query.suspense()
+
+      expect(result).toBeInstanceOf(Promise)
+    })
+
+    test('should resolve after being enabled', () => {
+      const getCurrentInstanceSpy = getCurrentInstance as Mock
+      getCurrentInstanceSpy.mockImplementation(() => ({ suspense: {} }))
+
+      let afterTimeout = false
+      const isEnabeld = ref(false)
+      const query = useQuery({
+        queryKey: ['suspense'],
+        queryFn: simpleFetcher,
+        enabled: isEnabeld,
+      })
+
+      setTimeout(() => {
+        afterTimeout = true
+        isEnabeld.value = true
+      }, 200)
+
+      return query.suspense().then(() => {
+        expect(afterTimeout).toBe(true)
+      })
+    })
+
+    test('should resolve immidiately when stale without refetching', () => {
+      const getCurrentInstanceSpy = getCurrentInstance as Mock
+      getCurrentInstanceSpy.mockImplementation(() => ({ suspense: {} }))
+
+      const fetcherSpy = vi.fn(() => simpleFetcher())
+
+      // let afterTimeout = false;
+      const query = useQuery({
+        queryKey: ['suspense'],
+        queryFn: simpleFetcher,
+        staleTime: 10000,
+        initialData: 'foo',
+      })
+
+      return query.suspense().then(() => {
+        expect(fetcherSpy).toHaveBeenCalledTimes(0)
+      })
+    })
+  })
+})

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

@@ -0,0 +1,88 @@
+import { reactive } from 'vue'
+import { useQuery } from '../useQuery'
+import { doNotExecute, simpleFetcher } 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 query = reactive(
+        useQuery({
+          queryKey: ['key'],
+          queryFn: simpleFetcher,
+        }),
+      )
+
+      const result: Expect<Equal<string | undefined, typeof query.data>> = true
+      return result
+    })
+  })
+
+  it('data should be defined when query is success', () => {
+    doNotExecute(() => {
+      const query = reactive(
+        useQuery({
+          queryKey: ['key'],
+          queryFn: simpleFetcher,
+        }),
+      )
+
+      if (query.isSuccess) {
+        const result: Expect<Equal<string, typeof query.data>> = true
+        return result
+      }
+      return
+    })
+  })
+
+  it('error should be null when query is success', () => {
+    doNotExecute(() => {
+      const query = reactive(
+        useQuery({
+          queryKey: ['key'],
+          queryFn: simpleFetcher,
+        }),
+      )
+
+      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(
+        useQuery({
+          queryKey: ['key'],
+          queryFn: simpleFetcher,
+        }),
+      )
+
+      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(
+        useQuery({
+          queryKey: ['key'],
+          queryFn: simpleFetcher,
+        }),
+      )
+
+      if (query.isError) {
+        const result: Expect<Equal<Error, typeof query.error>> = true
+        return result
+      }
+      return
+    })
+  })
+})

package/src/__tests__/useQueryClient.test.ts

@@ -0,0 +1,51 @@
+import { getCurrentInstance, inject } from 'vue-demi'
+import { useQueryClient } from '../useQueryClient'
+import { VUE_QUERY_CLIENT } from '../utils'
+import { vi } from 'vitest'
+import type { Mock } from 'vitest'
+
+describe('useQueryClient', () => {
+  const injectSpy = inject as Mock
+  const getCurrentInstanceSpy = getCurrentInstance as Mock
+
+  beforeEach(() => {
+    vi.restoreAllMocks()
+  })
+
+  test('should return queryClient when it is provided in the context', () => {
+    const queryClientMock = { name: 'Mocked client' }
+    injectSpy.mockReturnValueOnce(queryClientMock)
+
+    const queryClient = useQueryClient()
+
+    expect(queryClient).toStrictEqual(queryClientMock)
+    expect(injectSpy).toHaveBeenCalledTimes(1)
+    expect(injectSpy).toHaveBeenCalledWith(VUE_QUERY_CLIENT)
+  })
+
+  test('should throw an error when queryClient does not exist in the context', () => {
+    injectSpy.mockReturnValueOnce(undefined)
+
+    expect(useQueryClient).toThrowError()
+    expect(injectSpy).toHaveBeenCalledTimes(1)
+    expect(injectSpy).toHaveBeenCalledWith(VUE_QUERY_CLIENT)
+  })
+
+  test('should throw an error when used outside of setup function', () => {
+    getCurrentInstanceSpy.mockReturnValueOnce(undefined)
+
+    expect(useQueryClient).toThrowError()
+    expect(getCurrentInstanceSpy).toHaveBeenCalledTimes(1)
+  })
+
+  test('should call inject with a custom key as a suffix', () => {
+    const queryClientKey = 'foo'
+    const expectedKeyParameter = `${VUE_QUERY_CLIENT}:${queryClientKey}`
+    const queryClientMock = { name: 'Mocked client' }
+    injectSpy.mockReturnValueOnce(queryClientMock)
+
+    useQueryClient(queryClientKey)
+
+    expect(injectSpy).toHaveBeenCalledWith(expectedKeyParameter)
+  })
+})