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

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

package/src/__tests__/utils.test.ts

@@ -0,0 +1,148 @@
+import { updateState, cloneDeep, cloneDeepUnref } from '../utils'
+import { reactive, ref } from 'vue-demi'
+
+describe('utils', () => {
+  describe('updateState', () => {
+    test('should update first object with values from the second one', () => {
+      const origin = { option1: 'a', option2: 'b', option3: 'c' }
+      const update = { option1: 'x', option2: 'y', option3: 'z' }
+      const expected = { option1: 'x', option2: 'y', option3: 'z' }
+
+      updateState(origin, update)
+      expect(origin).toEqual(expected)
+    })
+
+    test('should update only existing keys', () => {
+      const origin = { option1: 'a', option2: 'b' }
+      const update = { option1: 'x', option2: 'y', option3: 'z' }
+      const expected = { option1: 'x', option2: 'y' }
+
+      updateState(origin, update)
+      expect(origin).toEqual(expected)
+    })
+
+    test('should remove non existing keys', () => {
+      const origin = { option1: 'a', option2: 'b', option3: 'c' }
+      const update = { option1: 'x', option2: 'y' }
+      const expected = { option1: 'x', option2: 'y' }
+
+      updateState(origin, update)
+      expect(origin).toEqual(expected)
+    })
+  })
+
+  describe('cloneDeep', () => {
+    test('should copy primitives and functions AS-IS', () => {
+      expect(cloneDeep(3456)).toBe(3456)
+      expect(cloneDeep('theString')).toBe('theString')
+      expect(cloneDeep(null)).toBe(null)
+    })
+
+    test('should copy Maps and Sets AS-IS', () => {
+      const setVal = new Set([3, 4, 5])
+      const setValCopy = cloneDeep(setVal)
+      expect(setValCopy).toBe(setVal)
+      expect(setValCopy).toStrictEqual(new Set([3, 4, 5]))
+
+      const mapVal = new Map([
+        ['a', 'aVal'],
+        ['b', 'bVal'],
+      ])
+      const mapValCopy = cloneDeep(mapVal)
+      expect(mapValCopy).toBe(mapVal)
+      expect(mapValCopy).toStrictEqual(
+        new Map([
+          ['a', 'aVal'],
+          ['b', 'bVal'],
+        ]),
+      )
+    })
+
+    test('should deeply copy arrays', () => {
+      const val = [
+        25,
+        'str',
+        null,
+        new Set([3, 4]),
+        [5, 6, { a: 1 }],
+        undefined,
+      ]
+      const cp = cloneDeep(val)
+      expect(cp).toStrictEqual([
+        25,
+        'str',
+        null,
+        new Set([3, 4]),
+        [5, 6, { a: 1 }],
+        undefined,
+      ])
+      expect(cp).not.toBe(val)
+      expect(cp[3]).toBe(val[3]) // Set([3, 4])
+      expect(cp[4]).not.toBe(val[4]) // [5, 6, { a: 1 }]
+      expect((cp[4] as number[])[2]).not.toBe((val[4] as number[])[2]) // { a : 1 }
+    })
+
+    test('should deeply copy object', () => {
+      const val = reactive({
+        a: 25,
+        b: 'str',
+        c: null,
+        d: undefined,
+        e: new Set([5, 6]),
+        f: [3, 4],
+        g: { fa: 26 },
+      })
+      const cp = cloneDeep(val)
+
+      expect(cp).toStrictEqual({
+        a: 25,
+        b: 'str',
+        c: null,
+        d: undefined,
+        e: new Set([5, 6]),
+        f: [3, 4],
+        g: { fa: 26 },
+      })
+
+      expect(cp.e).toBe(val.e) // Set
+      expect(cp.f).not.toBe(val.f) // []
+      expect(cp.g).not.toBe(val.g) // {}
+    })
+  })
+
+  describe('cloneDeepUnref', () => {
+    test('should unref primitives', () => {
+      expect(cloneDeepUnref(ref(34))).toBe(34)
+      expect(cloneDeepUnref(ref('mystr'))).toBe('mystr')
+    })
+
+    test('should deeply unref arrays', () => {
+      const val = ref([2, 3, ref(4), ref('5'), { a: ref(6) }, [ref(7)]])
+      const cp = cloneDeepUnref(val)
+      expect(cp).toStrictEqual([2, 3, 4, '5', { a: 6 }, [7]])
+    })
+
+    test('should deeply unref objects', () => {
+      const val = ref({
+        a: 1,
+        b: ref(2),
+        c: [ref('c1'), ref(['c2'])],
+        d: {
+          e: ref('e'),
+        },
+      })
+      const cp = cloneDeepUnref(val)
+
+      expect(cp).toEqual({
+        a: 1,
+        b: 2,
+        c: ['c1', ['c2']],
+        d: { e: 'e' },
+      })
+    })
+
+    test('should unref undefined', () => {
+      expect(cloneDeepUnref(ref(undefined))).toBe(undefined)
+    })
+  })
+})

package/src/__tests__/vueQueryPlugin.test.ts

@@ -0,0 +1,351 @@
+import type { App, ComponentOptions } from 'vue'
+import { isVue2, isVue3, ref } from 'vue-demi'
+
+import { QueryClient } from '../queryClient'
+import { VueQueryPlugin } from '../vueQueryPlugin'
+import { VUE_QUERY_CLIENT } from '../utils'
+import { setupDevtools } from '../devtools/devtools'
+import { flushPromises } from './test-utils'
+import { useQuery } from '../useQuery'
+import { useQueries } from '../useQueries'
+import { vi } from 'vitest'
+import type { Mock } from 'vitest'
+
+vi.mock('../devtools/devtools')
+vi.mock('../useQueryClient')
+vi.mock('../useBaseQuery')
+
+interface TestApp extends App {
+  onUnmount: Function
+  _unmount: Function
+  _mixin: ComponentOptions
+  _provided: Record<string, any>
+  $root: TestApp
+}
+
+const testIf = (condition: boolean) => (condition ? test : test.skip)
+
+function getAppMock(withUnmountHook = false): TestApp {
+  const mock = {
+    provide: vi.fn(),
+    unmount: vi.fn(),
+    onUnmount: withUnmountHook
+      ? vi.fn((u: Function) => {
+          mock._unmount = u
+        })
+      : undefined,
+    mixin: (m: ComponentOptions): any => {
+      mock._mixin = m
+    },
+  } as unknown as TestApp
+
+  return mock
+}
+
+describe('VueQueryPlugin', () => {
+  describe('devtools', () => {
+    test('should NOT setup devtools', () => {
+      const setupDevtoolsMock = setupDevtools as Mock
+      const appMock = getAppMock()
+      VueQueryPlugin.install(appMock)
+
+      expect(setupDevtoolsMock).toHaveBeenCalledTimes(0)
+    })
+
+    testIf(isVue2)('should setup devtools', () => {
+      const envCopy = process.env.NODE_ENV
+      process.env.NODE_ENV = 'development'
+      const setupDevtoolsMock = setupDevtools as Mock
+      const appMock = getAppMock()
+      VueQueryPlugin.install(appMock)
+
+      appMock.$root = appMock
+      appMock._mixin.beforeCreate?.call(appMock)
+      process.env.NODE_ENV = envCopy
+
+      expect(setupDevtoolsMock).toHaveBeenCalledTimes(1)
+    })
+
+    testIf(isVue3)('should setup devtools', () => {
+      const envCopy = process.env.NODE_ENV
+      process.env.NODE_ENV = 'development'
+      const setupDevtoolsMock = setupDevtools as Mock
+      const appMock = getAppMock()
+      VueQueryPlugin.install(appMock)
+      process.env.NODE_ENV = envCopy
+
+      expect(setupDevtoolsMock).toHaveBeenCalledTimes(1)
+    })
+  })
+
+  describe('when app unmounts', () => {
+    test('should call unmount on each client when onUnmount is missing', () => {
+      const appMock = getAppMock()
+      const customClient = {
+        mount: vi.fn(),
+        unmount: vi.fn(),
+      } as unknown as QueryClient
+      const originalUnmount = appMock.unmount
+      VueQueryPlugin.install(appMock, {
+        queryClient: customClient,
+      })
+
+      appMock.unmount()
+
+      expect(appMock.unmount).not.toEqual(originalUnmount)
+      expect(customClient.unmount).toHaveBeenCalledTimes(1)
+      expect(originalUnmount).toHaveBeenCalledTimes(1)
+    })
+
+    test('should call onUnmount if present', () => {
+      const appMock = getAppMock(true)
+      const customClient = {
+        mount: vi.fn(),
+        unmount: vi.fn(),
+      } as unknown as QueryClient
+      const originalUnmount = appMock.unmount
+      VueQueryPlugin.install(appMock, { queryClient: customClient })
+
+      appMock._unmount()
+
+      expect(appMock.unmount).toEqual(originalUnmount)
+      expect(customClient.unmount).toHaveBeenCalledTimes(1)
+    })
+  })
+
+  describe('when called without additional options', () => {
+    testIf(isVue2)('should provide a client with default clientKey', () => {
+      const appMock = getAppMock()
+      VueQueryPlugin.install(appMock)
+
+      appMock._mixin.beforeCreate?.call(appMock)
+
+      expect(appMock._provided).toMatchObject({
+        VUE_QUERY_CLIENT: expect.any(QueryClient),
+      })
+    })
+
+    testIf(isVue3)('should provide a client with default clientKey', () => {
+      const appMock = getAppMock()
+      VueQueryPlugin.install(appMock)
+
+      expect(appMock.provide).toHaveBeenCalledWith(
+        VUE_QUERY_CLIENT,
+        expect.any(QueryClient),
+      )
+    })
+  })
+
+  describe('when called with custom clientKey', () => {
+    testIf(isVue2)('should provide a client with customized clientKey', () => {
+      const appMock = getAppMock()
+      VueQueryPlugin.install(appMock, { queryClientKey: 'CUSTOM' })
+
+      appMock._mixin.beforeCreate?.call(appMock)
+
+      expect(appMock._provided).toMatchObject({
+        [VUE_QUERY_CLIENT + ':CUSTOM']: expect.any(QueryClient),
+      })
+    })
+
+    testIf(isVue3)('should provide a client with customized clientKey', () => {
+      const appMock = getAppMock()
+      VueQueryPlugin.install(appMock, { queryClientKey: 'CUSTOM' })
+
+      expect(appMock.provide).toHaveBeenCalledWith(
+        VUE_QUERY_CLIENT + ':CUSTOM',
+        expect.any(QueryClient),
+      )
+    })
+  })
+
+  describe('when called with custom client', () => {
+    testIf(isVue2)('should provide that custom client', () => {
+      const appMock = getAppMock()
+      const customClient = { mount: vi.fn() } as unknown as QueryClient
+      VueQueryPlugin.install(appMock, { queryClient: customClient })
+
+      appMock._mixin.beforeCreate?.call(appMock)
+
+      expect(customClient.mount).toHaveBeenCalled()
+      expect(appMock._provided).toMatchObject({
+        VUE_QUERY_CLIENT: customClient,
+      })
+    })
+
+    testIf(isVue3)('should provide that custom client', () => {
+      const appMock = getAppMock()
+      const customClient = { mount: vi.fn() } as unknown as QueryClient
+      VueQueryPlugin.install(appMock, { queryClient: customClient })
+
+      expect(customClient.mount).toHaveBeenCalled()
+      expect(appMock.provide).toHaveBeenCalledWith(
+        VUE_QUERY_CLIENT,
+        customClient,
+      )
+    })
+  })
+
+  describe('when called with custom client config', () => {
+    testIf(isVue2)(
+      'should instantiate a client with the provided config',
+      () => {
+        const appMock = getAppMock()
+        const config = {
+          defaultOptions: { queries: { enabled: true } },
+        }
+        VueQueryPlugin.install(appMock, {
+          queryClientConfig: config,
+        })
+
+        appMock._mixin.beforeCreate?.call(appMock)
+        const client = appMock._provided.VUE_QUERY_CLIENT as QueryClient
+        const defaultOptions = client.getDefaultOptions()
+
+        expect(defaultOptions).toEqual(config.defaultOptions)
+      },
+    )
+
+    testIf(isVue3)(
+      'should instantiate a client with the provided config',
+      () => {
+        const appMock = getAppMock()
+        const config = {
+          defaultOptions: { queries: { enabled: true } },
+        }
+        VueQueryPlugin.install(appMock, {
+          queryClientConfig: config,
+        })
+
+        const client = (appMock.provide as Mock).mock.calls[0][1]
+        const defaultOptions = client.getDefaultOptions()
+
+        expect(defaultOptions).toEqual(config.defaultOptions)
+      },
+    )
+  })
+
+  describe('when persister is provided', () => {
+    test('should properly modify isRestoring flag on queryClient', async () => {
+      const appMock = getAppMock()
+      const customClient = {
+        mount: vi.fn(),
+        isRestoring: ref(false),
+      } as unknown as QueryClient
+
+      VueQueryPlugin.install(appMock, {
+        queryClient: customClient,
+        clientPersister: () => [
+          vi.fn(),
+          new Promise((resolve) => {
+            resolve()
+          }),
+        ],
+      })
+
+      expect(customClient.isRestoring.value).toBeTruthy()
+
+      await flushPromises()
+
+      expect(customClient.isRestoring.value).toBeFalsy()
+    })
+
+    test('should delay useQuery subscription and not call fetcher if data is not stale', async () => {
+      const appMock = getAppMock()
+      const customClient = new QueryClient({
+        defaultOptions: {
+          queries: {
+            staleTime: 1000 * 60 * 60,
+          },
+        },
+      })
+
+      VueQueryPlugin.install(appMock, {
+        queryClient: customClient,
+        clientPersister: (client) => [
+          vi.fn(),
+          new Promise((resolve) => {
+            setTimeout(() => {
+              client.setQueryData(['persist'], () => ({
+                foo: 'bar',
+              }))
+              resolve()
+            }, 0)
+          }),
+        ],
+      })
+
+      const fnSpy = vi.fn()
+
+      const query = useQuery(
+        {
+          queryKey: ['persist'],
+          queryFn: fnSpy,
+        },
+        customClient,
+      )
+
+      expect(customClient.isRestoring.value).toBeTruthy()
+      expect(query.isFetching.value).toBeFalsy()
+      expect(query.data.value).toStrictEqual(undefined)
+      expect(fnSpy).toHaveBeenCalledTimes(0)
+
+      await flushPromises()
+
+      expect(customClient.isRestoring.value).toBeFalsy()
+      expect(query.data.value).toStrictEqual({ foo: 'bar' })
+      expect(fnSpy).toHaveBeenCalledTimes(0)
+    })
+
+    test('should delay useQueries subscription and not call fetcher if data is not stale', async () => {
+      const appMock = getAppMock()
+      const customClient = new QueryClient({
+        defaultOptions: {
+          queries: {
+            staleTime: 1000 * 60 * 60,
+          },
+        },
+      })
+
+      VueQueryPlugin.install(appMock, {
+        queryClient: customClient,
+        clientPersister: (client) => [
+          vi.fn(),
+          new Promise((resolve) => {
+            setTimeout(() => {
+              client.setQueryData(['persist'], () => ({
+                foo: 'bar',
+              }))
+              resolve()
+            }, 0)
+          }),
+        ],
+      })
+
+      const fnSpy = vi.fn()
+
+      const queries = useQueries(
+        {
+          queries: [
+            {
+              queryKey: ['persist'],
+              queryFn: fnSpy,
+            },
+          ],
+        },
+        customClient,
+      )
+
+      expect(customClient.isRestoring.value).toBeTruthy()
+      expect(queries.value[0].isFetching).toBeFalsy()
+      expect(queries.value[0].data).toStrictEqual(undefined)
+      expect(fnSpy).toHaveBeenCalledTimes(0)
+
+      await flushPromises()
+
+      expect(customClient.isRestoring.value).toBeFalsy()
+      expect(queries.value[0].data).toStrictEqual({ foo: 'bar' })
+      expect(fnSpy).toHaveBeenCalledTimes(0)
+    })
+  })
+})