@tanstack/vue-query 5.0.0-alpha.8 → 5.0.0-alpha.81

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tanstack/vue-query",
-  "version": "5.0.0-alpha.8",
+  "version": "5.0.0-alpha.81",
   "description": "Hooks for managing, caching and syncing asynchronous and remote data in Vue",
   "author": "Damian Osipiuk",
   "license": "MIT",
@@ -14,34 +14,45 @@
     "type": "github",
     "url": "https://github.com/sponsors/tannerlinsley"
   },
+  "type": "module",
   "types": "build/lib/index.d.ts",
-  "main": "build/lib/index.js",
-  "module": "build/lib/index.esm.js",
+  "main": "build/lib/index.legacy.cjs",
+  "module": "build/lib/index.legacy.js",
   "exports": {
     ".": {
       "types": "./build/lib/index.d.ts",
-      "import": "./build/lib/index.mjs",
-      "default": "./build/lib/index.js"
+      "import": "./build/lib/index.js",
+      "require": "./build/lib/index.cjs",
+      "default": "./build/lib/index.cjs"
     },
     "./package.json": "./package.json"
   },
   "sideEffects": false,
+  "nx": {
+    "targets": {
+      "test:lib": {
+        "dependsOn": [
+          "test:types"
+        ]
+      }
+    }
+  },
   "files": [
     "build/lib/*",
-    "build/umd/*"
+    "src"
   ],
+  "dependencies": {
+    "@tanstack/match-sorter-utils": "^8.8.4",
+    "@vue/devtools-api": "^6.5.0",
+    "vue-demi": "^0.13.11",
+    "@tanstack/query-core": "5.0.0-alpha.81"
+  },
   "devDependencies": {
     "@vue/composition-api": "1.7.1",
     "vue": "^3.2.47",
     "vue2": "npm:vue@2.6",
     "vue2.7": "npm:vue@2.7"
   },
-  "dependencies": {
-    "@vue/devtools-api": "^6.5.0",
-    "@tanstack/match-sorter-utils": "^8.7.6",
-    "vue-demi": "^0.13.11",
-    "@tanstack/query-core": "5.0.0-alpha.7"
-  },
   "peerDependencies": {
     "@vue/composition-api": "^1.1.2",
     "vue": "^2.5.0 || ^3.0.0"
@@ -52,14 +63,17 @@
     }
   },
   "scripts": {
-    "clean": "rimraf ./build",
+    "clean": "rimraf ./build && rimraf ./coverage",
     "test:eslint": "eslint --ext .ts,.tsx ./src",
-    "test:types": "tsc",
+    "test:types": "tsc --noEmit",
     "test:lib": "pnpm run test:2 && pnpm run test:2.7 && pnpm run test:3",
     "test:2": "vue-demi-switch 2 vue2 && vitest",
     "test:2.7": "vue-demi-switch 2.7 vue2.7 && vitest",
     "test:3": "vue-demi-switch 3 && vitest",
     "test:lib:dev": "pnpm run test:lib --watch",
-    "build:types": "tsc --build"
+    "test:build": "publint --strict",
+    "build": "pnpm build:rollup && pnpm build:types",
+    "build:rollup": "rollup --config rollup.config.js",
+    "build:types": "tsc --emitDeclarationOnly"
   }
 }

package/src/__mocks__/useBaseQuery.ts

@@ -0,0 +1,8 @@
+import { vi } from 'vitest'
+
+const { useBaseQuery: originImpl, unrefQueryArgs: originalParse } =
+  // @ts-expect-error - vitest uses esmodules; tsconfig is not set to use them
+  (await vi.importActual('../useBaseQuery')) as any
+
+export const useBaseQuery = vi.fn(originImpl)
+export const unrefQueryArgs = originalParse

package/src/__mocks__/useQueryClient.ts

@@ -0,0 +1,10 @@
+import { QueryClient } from '../queryClient'
+import { vi } from 'vitest'
+
+const queryClient = new QueryClient({
+  defaultOptions: {
+    queries: { retry: false, gcTime: Infinity },
+  },
+})
+
+export const useQueryClient = vi.fn(() => queryClient)

package/src/__tests__/mutationCache.test.ts

@@ -0,0 +1,40 @@
+import { ref } from 'vue-demi'
+import { MutationCache as MutationCacheOrigin } from '@tanstack/query-core'
+
+import { MutationCache } from '../mutationCache'
+import { vi } from 'vitest'
+
+describe('MutationCache', () => {
+  beforeAll(() => {
+    vi.spyOn(MutationCacheOrigin.prototype, 'find')
+    vi.spyOn(MutationCacheOrigin.prototype, 'findAll')
+  })
+
+  describe('find', () => {
+    test('should properly unwrap parameters', async () => {
+      const mutationCache = new MutationCache()
+
+      mutationCache.find({
+        mutationKey: ref(['baz']),
+      })
+
+      expect(MutationCacheOrigin.prototype.find).toBeCalledWith({
+        mutationKey: ['baz'],
+      })
+    })
+  })
+
+  describe('findAll', () => {
+    test('should properly unwrap parameters', async () => {
+      const mutationCache = new MutationCache()
+
+      mutationCache.findAll({
+        mutationKey: ref(['baz']),
+      })
+
+      expect(MutationCacheOrigin.prototype.findAll).toBeCalledWith({
+        mutationKey: ['baz'],
+      })
+    })
+  })
+})

package/src/__tests__/queryCache.test.ts

@@ -0,0 +1,48 @@
+import { ref } from 'vue-demi'
+import { QueryCache as QueryCacheOrigin } from '@tanstack/query-core'
+
+import { QueryCache } from '../queryCache'
+import { vi } from 'vitest'
+
+describe('QueryCache', () => {
+  beforeAll(() => {
+    vi.spyOn(QueryCacheOrigin.prototype, 'find')
+    vi.spyOn(QueryCacheOrigin.prototype, 'findAll')
+  })
+
+  describe('find', () => {
+    test('should properly unwrap parameters', async () => {
+      const queryCache = new QueryCache()
+
+      queryCache.find({
+        queryKey: ['foo', ref('bar')],
+      })
+
+      expect(QueryCacheOrigin.prototype.find).toBeCalledWith({
+        queryKey: ['foo', 'bar'],
+      })
+    })
+  })
+
+  describe('findAll', () => {
+    test('should properly unwrap two parameters', async () => {
+      const queryCache = new QueryCache()
+
+      queryCache.findAll({
+        queryKey: ['foo', ref('bar')],
+      })
+
+      expect(QueryCacheOrigin.prototype.findAll).toBeCalledWith({
+        queryKey: ['foo', 'bar'],
+      })
+    })
+
+    test('should default to empty filters', async () => {
+      const queryCache = new QueryCache()
+
+      queryCache.findAll()
+
+      expect(QueryCacheOrigin.prototype.findAll).toBeCalledWith({})
+    })
+  })
+})

package/src/__tests__/queryClient.test.ts

@@ -0,0 +1,365 @@
+import { ref } from 'vue-demi'
+import { QueryClient as QueryClientOrigin } from '@tanstack/query-core'
+
+import { QueryClient } from '../queryClient'
+import { vi } from 'vitest'
+
+vi.mock('@tanstack/query-core')
+
+const queryKeyRef = ['foo', ref('bar')]
+const queryKeyUnref = ['foo', 'bar']
+
+const fn = () => 'mock'
+
+describe('QueryCache', () => {
+  describe('isFetching', () => {
+    test('should properly unwrap 1 parameter', async () => {
+      const queryClient = new QueryClient()
+
+      queryClient.isFetching({
+        queryKey: queryKeyRef,
+      })
+
+      expect(QueryClientOrigin.prototype.isFetching).toBeCalledWith({
+        queryKey: queryKeyUnref,
+      })
+    })
+  })
+
+  describe('isMutating', () => {
+    test('should properly unwrap 1 parameter', async () => {
+      const queryClient = new QueryClient()
+
+      queryClient.isMutating({
+        mutationKey: queryKeyRef,
+      })
+
+      expect(QueryClientOrigin.prototype.isMutating).toBeCalledWith({
+        mutationKey: queryKeyUnref,
+      })
+    })
+  })
+
+  describe('getQueryData', () => {
+    test('should properly unwrap 1 parameter', async () => {
+      const queryClient = new QueryClient()
+
+      queryClient.getQueryData(queryKeyRef)
+
+      expect(QueryClientOrigin.prototype.getQueryData).toBeCalledWith(
+        queryKeyUnref,
+      )
+    })
+  })
+
+  describe('getQueriesData', () => {
+    test('should properly unwrap queryKey param', async () => {
+      const queryClient = new QueryClient()
+
+      queryClient.getQueriesData({ queryKey: queryKeyRef })
+
+      expect(QueryClientOrigin.prototype.getQueriesData).toBeCalledWith({
+        queryKey: queryKeyUnref,
+      })
+    })
+
+    test('should properly unwrap filters param', async () => {
+      const queryClient = new QueryClient()
+
+      queryClient.getQueriesData({ queryKey: queryKeyRef })
+
+      expect(QueryClientOrigin.prototype.getQueriesData).toBeCalledWith({
+        queryKey: queryKeyUnref,
+      })
+    })
+  })
+
+  describe('setQueryData', () => {
+    test('should properly unwrap 3 parameter', async () => {
+      const queryClient = new QueryClient()
+
+      queryClient.setQueryData(queryKeyRef, fn, {
+        updatedAt: ref(3),
+      })
+
+      expect(QueryClientOrigin.prototype.setQueryData).toBeCalledWith(
+        queryKeyUnref,
+        fn,
+        { updatedAt: 3 },
+      )
+    })
+  })
+
+  describe('setQueriesData', () => {
+    test('should properly unwrap params with queryKey', async () => {
+      const queryClient = new QueryClient()
+
+      queryClient.setQueriesData({ queryKey: queryKeyRef }, fn, {
+        updatedAt: ref(3),
+      })
+
+      expect(QueryClientOrigin.prototype.setQueriesData).toBeCalledWith(
+        { queryKey: queryKeyUnref },
+        fn,
+        { updatedAt: 3 },
+      )
+    })
+
+    test('should properly unwrap params with filters', async () => {
+      const queryClient = new QueryClient()
+
+      queryClient.setQueriesData({ queryKey: queryKeyRef }, fn, {
+        updatedAt: ref(3),
+      })
+
+      expect(QueryClientOrigin.prototype.setQueriesData).toBeCalledWith(
+        { queryKey: queryKeyUnref },
+        fn,
+        { updatedAt: 3 },
+      )
+    })
+  })
+
+  describe('getQueryState', () => {
+    test('should properly unwrap 1 parameter', async () => {
+      const queryClient = new QueryClient()
+
+      queryClient.getQueryState(queryKeyRef)
+
+      expect(QueryClientOrigin.prototype.getQueryState).toBeCalledWith(
+        queryKeyUnref,
+      )
+    })
+  })
+
+  describe('removeQueries', () => {
+    test('should properly unwrap 1 parameter', async () => {
+      const queryClient = new QueryClient()
+
+      queryClient.removeQueries({
+        queryKey: queryKeyRef,
+      })
+
+      expect(QueryClientOrigin.prototype.removeQueries).toBeCalledWith({
+        queryKey: queryKeyUnref,
+      })
+    })
+  })
+
+  describe('resetQueries', () => {
+    test('should properly unwrap 2 parameter', async () => {
+      const queryClient = new QueryClient()
+
+      queryClient.resetQueries(
+        {
+          queryKey: queryKeyRef,
+        },
+        { cancelRefetch: ref(false) },
+      )
+
+      expect(QueryClientOrigin.prototype.resetQueries).toBeCalledWith(
+        {
+          queryKey: queryKeyUnref,
+        },
+        { cancelRefetch: false },
+      )
+    })
+  })
+
+  describe('cancelQueries', () => {
+    test('should properly unwrap 2 parameter', async () => {
+      const queryClient = new QueryClient()
+
+      queryClient.cancelQueries(
+        {
+          queryKey: queryKeyRef,
+        },
+        { revert: ref(false) },
+      )
+
+      expect(QueryClientOrigin.prototype.cancelQueries).toBeCalledWith(
+        {
+          queryKey: queryKeyUnref,
+        },
+        { revert: false },
+      )
+    })
+  })
+
+  describe('invalidateQueries', () => {
+    test('should properly unwrap 2 parameter', async () => {
+      const queryClient = new QueryClient()
+
+      queryClient.invalidateQueries(
+        {
+          queryKey: queryKeyRef,
+        },
+        { cancelRefetch: ref(false) },
+      )
+
+      expect(QueryClientOrigin.prototype.invalidateQueries).toBeCalledWith(
+        {
+          queryKey: queryKeyUnref,
+        },
+        { cancelRefetch: false },
+      )
+    })
+  })
+
+  describe('refetchQueries', () => {
+    test('should properly unwrap 2 parameter', async () => {
+      const queryClient = new QueryClient()
+
+      queryClient.refetchQueries(
+        {
+          queryKey: queryKeyRef,
+        },
+        { cancelRefetch: ref(false) },
+      )
+
+      expect(QueryClientOrigin.prototype.refetchQueries).toBeCalledWith(
+        {
+          queryKey: queryKeyUnref,
+        },
+        { cancelRefetch: false },
+      )
+    })
+  })
+
+  describe('fetchQuery', () => {
+    test('should properly unwrap parameter', async () => {
+      const queryClient = new QueryClient()
+
+      queryClient.fetchQuery({
+        queryKey: queryKeyRef,
+      })
+
+      expect(QueryClientOrigin.prototype.fetchQuery).toBeCalledWith({
+        queryKey: queryKeyUnref,
+      })
+    })
+  })
+
+  describe('prefetchQuery', () => {
+    test('should properly unwrap parameters', async () => {
+      const queryClient = new QueryClient()
+
+      queryClient.prefetchQuery({ queryKey: queryKeyRef, queryFn: fn })
+
+      expect(QueryClientOrigin.prototype.prefetchQuery).toBeCalledWith({
+        queryKey: queryKeyUnref,
+        queryFn: fn,
+      })
+    })
+  })
+
+  describe('fetchInfiniteQuery', () => {
+    test('should properly unwrap parameter', async () => {
+      const queryClient = new QueryClient()
+
+      queryClient.fetchInfiniteQuery({
+        queryKey: queryKeyRef,
+        defaultPageParam: 0,
+      })
+
+      expect(QueryClientOrigin.prototype.fetchInfiniteQuery).toBeCalledWith({
+        defaultPageParam: 0,
+        queryKey: queryKeyUnref,
+      })
+    })
+  })
+
+  describe('prefetchInfiniteQuery', () => {
+    test('should properly unwrap parameters', async () => {
+      const queryClient = new QueryClient()
+
+      queryClient.prefetchInfiniteQuery({
+        queryKey: queryKeyRef,
+        queryFn: fn,
+        defaultPageParam: 0,
+      })
+
+      expect(QueryClientOrigin.prototype.prefetchInfiniteQuery).toBeCalledWith({
+        defaultPageParam: 0,
+        queryKey: queryKeyUnref,
+        queryFn: fn,
+      })
+    })
+  })
+
+  describe('setDefaultOptions', () => {
+    test('should properly unwrap parameters', async () => {
+      const queryClient = new QueryClient()
+
+      queryClient.setDefaultOptions({
+        queries: {
+          enabled: ref(false),
+        },
+      })
+
+      expect(QueryClientOrigin.prototype.setDefaultOptions).toBeCalledWith({
+        queries: {
+          enabled: false,
+        },
+      })
+    })
+  })
+
+  describe('setQueryDefaults', () => {
+    test('should properly unwrap parameters', async () => {
+      const queryClient = new QueryClient()
+
+      queryClient.setQueryDefaults(queryKeyRef, {
+        enabled: ref(false),
+      })
+
+      expect(QueryClientOrigin.prototype.setQueryDefaults).toBeCalledWith(
+        queryKeyUnref,
+        {
+          enabled: false,
+        },
+      )
+    })
+  })
+
+  describe('getQueryDefaults', () => {
+    test('should properly unwrap parameters', async () => {
+      const queryClient = new QueryClient()
+
+      queryClient.getQueryDefaults(queryKeyRef)
+
+      expect(QueryClientOrigin.prototype.getQueryDefaults).toBeCalledWith(
+        queryKeyUnref,
+      )
+    })
+  })
+
+  describe('setMutationDefaults', () => {
+    test('should properly unwrap parameters', async () => {
+      const queryClient = new QueryClient()
+
+      queryClient.setMutationDefaults(queryKeyRef, {
+        mutationKey: queryKeyRef,
+      })
+
+      expect(QueryClientOrigin.prototype.setMutationDefaults).toBeCalledWith(
+        queryKeyUnref,
+        {
+          mutationKey: queryKeyUnref,
+        },
+      )
+    })
+  })
+
+  describe('getMutationDefaults', () => {
+    test('should properly unwrap parameters', async () => {
+      const queryClient = new QueryClient()
+
+      queryClient.getMutationDefaults(queryKeyRef)
+
+      expect(QueryClientOrigin.prototype.getMutationDefaults).toBeCalledWith(
+        queryKeyUnref,
+      )
+    })
+  })
+})

package/src/__tests__/test-utils.ts

@@ -0,0 +1,62 @@
+/* istanbul ignore file */
+
+export function flushPromises(timeout = 0): Promise<unknown> {
+  return new Promise(function (resolve) {
+    setTimeout(resolve, timeout)
+  })
+}
+
+export function simpleFetcher(): Promise<string> {
+  return new Promise((resolve) => {
+    setTimeout(() => {
+      return resolve('Some data')
+    }, 0)
+  })
+}
+
+export function getSimpleFetcherWithReturnData(returnData: unknown) {
+  return () =>
+    new Promise((resolve) => setTimeout(() => resolve(returnData), 0))
+}
+
+export function infiniteFetcher({
+  pageParam,
+}: {
+  pageParam?: number
+}): Promise<string> {
+  return new Promise((resolve) => {
+    setTimeout(() => {
+      return resolve('data on page ' + pageParam)
+    }, 0)
+  })
+}
+
+export function rejectFetcher(): Promise<Error> {
+  return new Promise((_, reject) => {
+    setTimeout(() => {
+      return reject(new Error('Some error'))
+    }, 0)
+  })
+}
+
+export function successMutator<T>(param: T): Promise<T> {
+  return new Promise((resolve) => {
+    setTimeout(() => {
+      return resolve(param)
+    }, 0)
+  })
+}
+
+export function errorMutator<T>(_: T): Promise<Error> {
+  return rejectFetcher()
+}
+
+export type Equal<X, Y> = (<T>() => T extends X ? 1 : 2) extends <
+  T,
+>() => T extends Y ? 1 : 2
+  ? true
+  : false
+
+export type Expect<T extends true> = T
+
+export const doNotExecute = (_func: () => void) => true

package/src/__tests__/useInfiniteQuery.test.ts

@@ -0,0 +1,37 @@
+import { infiniteFetcher, flushPromises } from './test-utils'
+import { useInfiniteQuery } from '../useInfiniteQuery'
+import { vi } from 'vitest'
+
+vi.mock('../useQueryClient')
+
+describe('useQuery', () => {
+  test('should properly execute infinite query', async () => {
+    const { data, fetchNextPage, status } = useInfiniteQuery({
+      queryKey: ['infiniteQuery'],
+      queryFn: infiniteFetcher,
+      defaultPageParam: 0,
+      getNextPageParam: () => 12,
+    })
+
+    expect(data.value).toStrictEqual(undefined)
+    expect(status.value).toStrictEqual('pending')
+
+    await flushPromises()
+
+    expect(data.value).toStrictEqual({
+      pageParams: [0],
+      pages: ['data on page 0'],
+    })
+    expect(status.value).toStrictEqual('success')
+
+    fetchNextPage()
+
+    await flushPromises()
+
+    expect(data.value).toStrictEqual({
+      pageParams: [0, 12],
+      pages: ['data on page 0', 'data on page 12'],
+    })
+    expect(status.value).toStrictEqual('success')
+  })
+})