@tanstack/vue-query 5.0.4 → 5.4.0

package/src/__tests__/queryOptions.types.test.ts

@@ -0,0 +1,142 @@
+import { describe, it } from 'vitest'
+import { QueryClient } from '@tanstack/query-core'
+import { reactive } from 'vue-demi'
+import { queryOptions } from '../queryOptions'
+import { useQuery } from '../useQuery'
+import { doNotExecute } from './test-utils'
+import type { dataTagSymbol } from '@tanstack/query-core'
+import type { Equal, Expect } from './test-utils'
+
+describe('queryOptions', () => {
+  it('should not allow excess properties', () => {
+    doNotExecute(() => {
+      return queryOptions({
+        queryKey: ['key'],
+        queryFn: () => Promise.resolve(5),
+        // @ts-expect-error this is a good error, because stallTime does not exist!
+        stallTime: 1000,
+      })
+    })
+  })
+  it('should infer types for callbacks', () => {
+    doNotExecute(() => {
+      return queryOptions({
+        queryKey: ['key'],
+        queryFn: () => Promise.resolve(5),
+        staleTime: 1000,
+        select: (data) => {
+          const result: Expect<Equal<number, typeof data>> = true
+          return result
+        },
+      })
+    })
+  })
+  it('should work when passed to useQuery', () => {
+    doNotExecute(() => {
+      const options = queryOptions({
+        queryKey: ['key'],
+        queryFn: () => Promise.resolve(5),
+      })
+
+      const { data } = reactive(useQuery(options))
+
+      const result: Expect<Equal<typeof data, number | undefined>> = true
+
+      return result
+    })
+  })
+  it('should tag the queryKey with the result type of the QueryFn', () => {
+    doNotExecute(() => {
+      const { queryKey } = queryOptions({
+        queryKey: ['key'],
+        queryFn: () => Promise.resolve(5),
+      })
+
+      const result: Expect<
+        Equal<(typeof queryKey)[typeof dataTagSymbol], number>
+      > = true
+      return result
+    })
+
+    it('should tag the queryKey even if no promise is returned', () => {
+      doNotExecute(() => {
+        const { queryKey } = queryOptions({
+          queryKey: ['key'],
+          queryFn: () => 5,
+        })
+
+        const result: Expect<
+          Equal<(typeof queryKey)[typeof dataTagSymbol], number>
+        > = true
+        return result
+      })
+    })
+
+    it('should tag the queryKey with unknown if there is no queryFn', () => {
+      doNotExecute(() => {
+        const { queryKey } = queryOptions({
+          queryKey: ['key'],
+        })
+
+        const result: Expect<
+          Equal<(typeof queryKey)[typeof dataTagSymbol], unknown>
+        > = true
+        return result
+      })
+    })
+
+    it('should return the proper type when passed to getQueryData', () => {
+      doNotExecute(() => {
+        const { queryKey } = queryOptions({
+          queryKey: ['key'],
+          queryFn: () => Promise.resolve(5),
+        })
+
+        const queryClient = new QueryClient()
+        const data = queryClient.getQueryData(queryKey)
+
+        const result: Expect<Equal<typeof data, number | undefined>> = true
+        return result
+      })
+    })
+
+    it('should properly type updaterFn when passed to setQueryData', () => {
+      doNotExecute(() => {
+        const { queryKey } = queryOptions({
+          queryKey: ['key'],
+          queryFn: () => Promise.resolve(5),
+        })
+
+        const queryClient = new QueryClient()
+        const data = queryClient.setQueryData(queryKey, (prev) => {
+          const result: Expect<Equal<typeof prev, number | undefined>> = true
+          return result ? prev : 1
+        })
+
+        const result: Expect<Equal<typeof data, number | undefined>> = true
+        return result
+      })
+    })
+
+    it('should properly type value when passed to setQueryData', () => {
+      doNotExecute(() => {
+        const { queryKey } = queryOptions({
+          queryKey: ['key'],
+          queryFn: () => Promise.resolve(5),
+        })
+
+        const queryClient = new QueryClient()
+
+        // @ts-expect-error value should be a number
+        queryClient.setQueryData(queryKey, '5')
+        // @ts-expect-error value should be a number
+        queryClient.setQueryData(queryKey, () => '5')
+
+        const data = queryClient.setQueryData(queryKey, 5)
+
+        const result: Expect<Equal<typeof data, number | undefined>> = true
+        return result
+      })
+    })
+  })
+})

package/src/__tests__/useInfiniteQuery.test.ts

@@ -1,4 +1,4 @@
-import { vi } from 'vitest'
+import { describe, expect, test, vi } from 'vitest'
 import { useInfiniteQuery } from '../useInfiniteQuery'
 import { flushPromises, infiniteFetcher } from './test-utils'
 

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

@@ -1,4 +1,5 @@
-import { reactive } from 'vue'
+import { describe, it } from 'vitest'
+import { reactive } from 'vue-demi'
 import { useInfiniteQuery } from '../useInfiniteQuery'
 import { doNotExecute, simpleFetcher } from './test-utils'
 import type { Equal, Expect } from './test-utils'

package/src/__tests__/useIsFetching.test.ts

@@ -1,6 +1,5 @@
+import { describe, expect, test, vi } from 'vitest'
 import { onScopeDispose, reactive } from 'vue-demi'
-
-import { vi } from 'vitest'
 import { useQuery } from '../useQuery'
 import { useIsFetching } from '../useIsFetching'
 import { flushPromises, simpleFetcher } from './test-utils'

package/src/__tests__/useIsMutating.test.ts

@@ -1,6 +1,5 @@
+import { describe, expect, it, test, vi } from 'vitest'
 import { onScopeDispose, reactive } from 'vue-demi'
-
-import { vi } from 'vitest'
 import { useMutation } from '../useMutation'
 import { useIsMutating, useMutationState } from '../useMutationState'
 import { useQueryClient } from '../useQueryClient'

package/src/__tests__/useMutation.test.ts

@@ -1,5 +1,5 @@
+import { beforeEach, describe, expect, test, vi } from 'vitest'
 import { reactive, ref } from 'vue-demi'
-import { vi } from 'vitest'
 import { useMutation } from '../useMutation'
 import { useQueryClient } from '../useQueryClient'
 import { errorMutator, flushPromises, successMutator } from './test-utils'

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

@@ -1,4 +1,5 @@
-import { reactive } from 'vue'
+import { describe, it } from 'vitest'
+import { reactive } from 'vue-demi'
 import { useMutation } from '../useMutation'
 import { doNotExecute, successMutator } from './test-utils'
 import type { Equal, Expect } from './test-utils'

package/src/__tests__/useQueries.test.ts

@@ -1,6 +1,5 @@
+import { beforeEach, describe, expect, test, vi } from 'vitest'
 import { onScopeDispose, ref } from 'vue-demi'
-
-import { vi } from 'vitest'
 import { useQueries } from '../useQueries'
 import { useQueryClient } from '../useQueryClient'
 import { QueryClient } from '../queryClient'

package/src/__tests__/useQuery.test.ts

@@ -1,3 +1,4 @@
+import { describe, expect, test, vi } from 'vitest'
 import {
   computed,
   getCurrentInstance,
@@ -6,8 +7,6 @@ import {
   ref,
 } from 'vue-demi'
 import { QueryObserver } from '@tanstack/query-core'
-
-import { vi } from 'vitest'
 import { useQuery } from '../useQuery'
 import { useBaseQuery } from '../useBaseQuery'
 import {

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

@@ -0,0 +1,277 @@
+import { describe, it } from 'vitest'
+import { reactive } from 'vue-demi'
+import { useQuery } from '../useQuery'
+import { queryOptions } from '../queryOptions'
+import { doNotExecute, simpleFetcher } from './test-utils'
+import type { UseQueryOptions } from '../useQuery'
+import type { Equal, Expect } from './test-utils'
+
+describe('initialData', () => {
+  describe('Config object overload', () => {
+    it('TData should always be defined when initialData is provided as an object', () => {
+      doNotExecute(() => {
+        const { data } = reactive(
+          useQuery({
+            queryKey: ['key'],
+            queryFn: () => {
+              return {
+                wow: true,
+              }
+            },
+            initialData: {
+              wow: true,
+            },
+          }),
+        )
+
+        const result: Expect<Equal<{ wow: boolean }, typeof data>> = true
+
+        return result
+      })
+    })
+
+    it('TData should be defined when passed through queryOptions', () => {
+      doNotExecute(() => {
+        const options = queryOptions({
+          queryKey: ['key'],
+          queryFn: () => {
+            return {
+              wow: true,
+            }
+          },
+          initialData: {
+            wow: true,
+          },
+        })
+        const { data } = reactive(useQuery(options))
+
+        const result: Expect<Equal<{ wow: boolean }, typeof data>> = true
+        return result
+      })
+    })
+
+    it('it should be possible to define a different TData than TQueryFnData using select with queryOptions spread into useQuery', () => {
+      doNotExecute(() => {
+        const options = queryOptions({
+          queryKey: ['key'],
+          queryFn: () => Promise.resolve(1),
+        })
+
+        const query = reactive(
+          useQuery({
+            ...options,
+            select: (data) => data > 1,
+          }),
+        )
+
+        const result: Expect<Equal<boolean | undefined, typeof query.data>> =
+          true
+        return result
+      })
+    })
+
+    it('TData should always be defined when initialData is provided as a function which ALWAYS returns the data', () => {
+      doNotExecute(() => {
+        const { data } = reactive(
+          useQuery({
+            queryKey: ['key'],
+            queryFn: () => {
+              return {
+                wow: true,
+              }
+            },
+            initialData: () => ({
+              wow: true,
+            }),
+          }),
+        )
+
+        const result: Expect<Equal<{ wow: boolean }, typeof data>> = true
+        return result
+      })
+    })
+
+    it('TData should have undefined in the union when initialData is NOT provided', () => {
+      doNotExecute(() => {
+        const { data } = reactive(
+          useQuery({
+            queryKey: ['key'],
+            queryFn: () => {
+              return {
+                wow: true,
+              }
+            },
+          }),
+        )
+
+        const result: Expect<Equal<{ wow: boolean } | undefined, typeof data>> =
+          true
+        return result
+      })
+    })
+
+    it('TData should have undefined in the union when initialData is provided as a function which can return undefined', () => {
+      doNotExecute(() => {
+        const { data } = reactive(
+          useQuery({
+            queryKey: ['key'],
+            queryFn: () => {
+              return {
+                wow: true,
+              }
+            },
+            initialData: () => undefined as { wow: boolean } | undefined,
+          }),
+        )
+
+        const result: Expect<Equal<{ wow: boolean } | undefined, typeof data>> =
+          true
+        return result
+      })
+    })
+
+    it('TData should be narrowed after an isSuccess check when initialData is provided as a function which can return undefined', () => {
+      doNotExecute(() => {
+        const { data, isSuccess } = reactive(
+          useQuery({
+            queryKey: ['key'],
+            queryFn: () => {
+              return {
+                wow: true,
+              }
+            },
+            initialData: () => undefined as { wow: boolean } | undefined,
+          }),
+        )
+
+        if (isSuccess) {
+          const result: Expect<Equal<{ wow: boolean }, typeof data>> = true
+          return result
+        }
+        return false
+      })
+    })
+  })
+
+  describe('custom composables', () => {
+    it('should allow custom composables using UseQueryOptions', () => {
+      doNotExecute(() => {
+        type Data = string
+
+        const useCustomQuery = (
+          options?: Omit<UseQueryOptions<Data>, 'queryKey' | 'queryFn'>,
+        ) => {
+          return useQuery({
+            ...options,
+            queryKey: ['todos-key'],
+            queryFn: () => Promise.resolve('data'),
+          })
+        }
+
+        const { data } = reactive(useCustomQuery())
+
+        const result: Expect<Equal<Data | undefined, typeof data>> = true
+        return result
+      })
+    })
+  })
+
+  describe('structuralSharing', () => {
+    it('should restrict to same types', () => {
+      doNotExecute(() => {
+        useQuery({
+          queryKey: ['key'],
+          queryFn: () => 5,
+          structuralSharing: (_oldData, newData) => {
+            return newData
+          },
+        })
+      })
+    })
+  })
+
+  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

@@ -1,5 +1,5 @@
+import { beforeEach, describe, expect, test, vi } from 'vitest'
 import { hasInjectionContext, inject } from 'vue-demi'
-import { vi } from 'vitest'
 import { useQueryClient } from '../useQueryClient'
 import { VUE_QUERY_CLIENT } from '../utils'
 import type { Mock } from 'vitest'

package/src/__tests__/utils.test.ts

@@ -1,3 +1,4 @@
+import { describe, expect, test } from 'vitest'
 import { reactive, ref } from 'vue-demi'
 import { cloneDeep, cloneDeepUnref, updateState } from '../utils'
 

package/src/__tests__/vueQueryPlugin.test.ts

@@ -1,6 +1,5 @@
+import { describe, expect, test, vi } from 'vitest'
 import { isVue2, isVue3, ref } from 'vue-demi'
-
-import { vi } from 'vitest'
 import { QueryClient } from '../queryClient'
 import { VueQueryPlugin } from '../vueQueryPlugin'
 import { VUE_QUERY_CLIENT } from '../utils'

package/src/index.ts

@@ -5,6 +5,7 @@ export { VueQueryPlugin } from './vueQueryPlugin'
 
 export { QueryClient } from './queryClient'
 export { QueryCache } from './queryCache'
+export { queryOptions } from './queryOptions'
 export { MutationCache } from './mutationCache'
 export { useQuery } from './useQuery'
 export { useQueries } from './useQueries'

package/src/queryOptions.ts

@@ -0,0 +1,31 @@
+import type { DataTag, DefaultError, QueryKey } from '@tanstack/query-core'
+import type {
+  DefinedInitialQueryOptions,
+  UndefinedInitialQueryOptions,
+} from './useQuery'
+
+export function queryOptions<
+  TQueryFnData = unknown,
+  TError = DefaultError,
+  TData = TQueryFnData,
+  TQueryKey extends QueryKey = QueryKey,
+>(
+  options: UndefinedInitialQueryOptions<TQueryFnData, TError, TData, TQueryKey>,
+): UndefinedInitialQueryOptions<TQueryFnData, TError, TData, TQueryKey> & {
+  queryKey: DataTag<TQueryKey, TData>
+}
+
+export function queryOptions<
+  TQueryFnData = unknown,
+  TError = DefaultError,
+  TData = TQueryFnData,
+  TQueryKey extends QueryKey = QueryKey,
+>(
+  options: DefinedInitialQueryOptions<TQueryFnData, TError, TData, TQueryKey>,
+): DefinedInitialQueryOptions<TQueryFnData, TError, TData, TQueryKey> & {
+  queryKey: DataTag<TQueryKey, TData>
+}
+
+export function queryOptions(options: unknown) {
+  return options
+}

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

@@ -1,88 +0,0 @@
-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
-    })
-  })
-})