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

package/src/types.ts

@@ -0,0 +1,17 @@
+import type { Ref } from 'vue-demi'
+
+export type MaybeRef<T> = Ref<T> | T
+
+export type MaybeRefDeep<T> = MaybeRef<
+  T extends Function
+    ? T
+    : T extends object
+    ? {
+        [Property in keyof T]: MaybeRefDeep<T[Property]>
+      }
+    : T
+>
+
+export type DistributiveOmit<T, K extends keyof any> = T extends any
+  ? Omit<T, K>
+  : never

package/src/useBaseQuery.ts

@@ -0,0 +1,152 @@
+import {
+  onScopeDispose,
+  toRefs,
+  readonly,
+  reactive,
+  watch,
+  ref,
+  computed,
+} from 'vue-demi'
+import type { ToRefs } from 'vue-demi'
+import type {
+  QueryObserver,
+  QueryKey,
+  QueryObserverResult,
+  DefaultedQueryObserverOptions,
+} from '@tanstack/query-core'
+import { useQueryClient } from './useQueryClient'
+import { updateState, cloneDeepUnref } from './utils'
+import type { QueryClient } from './queryClient'
+import type { UseQueryOptions } from './useQuery'
+import type { UseInfiniteQueryOptions } from './useInfiniteQuery'
+
+export type UseBaseQueryReturnType<
+  TData,
+  TError,
+  Result = QueryObserverResult<TData, TError>,
+> = ToRefs<Readonly<Result>> & {
+  suspense: () => Promise<Result>
+}
+
+type UseQueryOptionsGeneric<
+  TQueryFnData,
+  TError,
+  TData,
+  TQueryData,
+  TQueryKey extends QueryKey = QueryKey,
+  TPageParam = unknown,
+> =
+  | UseQueryOptions<TQueryFnData, TError, TData, TQueryData, TQueryKey>
+  | UseInfiniteQueryOptions<
+      TQueryFnData,
+      TError,
+      TData,
+      TQueryData,
+      TQueryKey,
+      TPageParam
+    >
+
+export function useBaseQuery<
+  TQueryFnData,
+  TError,
+  TData,
+  TQueryData,
+  TQueryKey extends QueryKey,
+  TPageParam,
+>(
+  Observer: typeof QueryObserver,
+  options: UseQueryOptionsGeneric<
+    TQueryFnData,
+    TError,
+    TData,
+    TQueryData,
+    TQueryKey,
+    TPageParam
+  >,
+  queryClient?: QueryClient,
+): UseBaseQueryReturnType<TData, TError> {
+  const client = queryClient || useQueryClient()
+
+  const defaultedOptions = computed(() => {
+    const defaulted: DefaultedQueryObserverOptions<
+      TQueryFnData,
+      TError,
+      TData,
+      TQueryData,
+      TQueryKey
+    > = client.defaultQueryOptions(cloneDeepUnref(options as any))
+
+    defaulted._optimisticResults = client.isRestoring.value
+      ? 'isRestoring'
+      : 'optimistic'
+
+    return defaulted
+  })
+
+  const observer = new Observer(client, defaultedOptions.value)
+  const state = reactive(observer.getCurrentResult())
+
+  const unsubscribe = ref(() => {
+    // noop
+  })
+
+  watch(
+    client.isRestoring,
+    (isRestoring) => {
+      // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+      if (!isRestoring) {
+        unsubscribe.value()
+        unsubscribe.value = observer.subscribe((result) => {
+          updateState(state, result)
+        })
+      }
+    },
+    { immediate: true },
+  )
+
+  watch(
+    defaultedOptions,
+    () => {
+      observer.setOptions(defaultedOptions.value)
+      updateState(state, observer.getCurrentResult())
+    },
+    { deep: true },
+  )
+
+  onScopeDispose(() => {
+    unsubscribe.value()
+  })
+
+  const suspense = () => {
+    return new Promise<QueryObserverResult<TData, TError>>((resolve) => {
+      let stopWatch = () => {
+        //noop
+      }
+      const run = () => {
+        if (defaultedOptions.value.enabled !== false) {
+          const optimisticResult = observer.getOptimisticResult(
+            defaultedOptions.value,
+          )
+          if (optimisticResult.isStale) {
+            stopWatch()
+            resolve(observer.fetchOptimistic(defaultedOptions.value))
+          } else {
+            stopWatch()
+            resolve(optimisticResult)
+          }
+        }
+      }
+
+      run()
+
+      stopWatch = watch(defaultedOptions, run, { deep: true })
+    })
+  }
+
+  return {
+    ...(toRefs(readonly(state)) as ToRefs<
+      Readonly<QueryObserverResult<TData, TError>>
+    >),
+    suspense,
+  }
+}

package/src/useInfiniteQuery.ts

@@ -0,0 +1,105 @@
+import { InfiniteQueryObserver } from '@tanstack/query-core'
+import type {
+  InfiniteData,
+  QueryObserver,
+  WithRequired,
+  QueryKey,
+  InfiniteQueryObserverResult,
+  InfiniteQueryObserverOptions,
+  DefaultError,
+} from '@tanstack/query-core'
+
+import { useBaseQuery } from './useBaseQuery'
+import type { UseBaseQueryReturnType } from './useBaseQuery'
+
+import type { DistributiveOmit, MaybeRefDeep } from './types'
+import type { QueryClient } from './queryClient'
+import type { UnwrapRef } from 'vue-demi'
+
+export type UseInfiniteQueryOptions<
+  TQueryFnData = unknown,
+  TError = DefaultError,
+  TData = TQueryFnData,
+  TQueryData = TQueryFnData,
+  TQueryKey extends QueryKey = QueryKey,
+  TPageParam = unknown,
+> = {
+  [Property in keyof InfiniteQueryObserverOptions<
+    TQueryFnData,
+    TError,
+    TData,
+    TQueryData,
+    TQueryKey,
+    TPageParam
+  >]: Property extends 'queryFn'
+    ? InfiniteQueryObserverOptions<
+        TQueryFnData,
+        TError,
+        TData,
+        TQueryData,
+        UnwrapRef<TQueryKey>,
+        TPageParam
+      >[Property]
+    : MaybeRefDeep<
+        WithRequired<
+          InfiniteQueryObserverOptions<
+            TQueryFnData,
+            TError,
+            TData,
+            TQueryData,
+            TQueryKey,
+            TPageParam
+          >,
+          'queryKey'
+        >[Property]
+      >
+}
+
+type InfiniteQueryReturnType<TData, TError> = UseBaseQueryReturnType<
+  TData,
+  TError,
+  InfiniteQueryObserverResult<TData, TError>
+>
+export type UseInfiniteQueryReturnType<TData, TError> = DistributiveOmit<
+  InfiniteQueryReturnType<TData, TError>,
+  'fetchNextPage' | 'fetchPreviousPage' | 'refetch'
+> & {
+  fetchNextPage: InfiniteQueryObserverResult<TData, TError>['fetchNextPage']
+  fetchPreviousPage: InfiniteQueryObserverResult<
+    TData,
+    TError
+  >['fetchPreviousPage']
+  refetch: InfiniteQueryObserverResult<TData, TError>['refetch']
+}
+
+export function useInfiniteQuery<
+  TQueryFnData,
+  TError = DefaultError,
+  TData = InfiniteData<TQueryFnData>,
+  TQueryKey extends QueryKey = QueryKey,
+  TPageParam = unknown,
+>(
+  options: UseInfiniteQueryOptions<
+    TQueryFnData,
+    TError,
+    TData,
+    TQueryFnData,
+    TQueryKey,
+    TPageParam
+  >,
+  queryClient?: QueryClient,
+): UseInfiniteQueryReturnType<TData, TError> {
+  // eslint-disable-next-line @typescript-eslint/no-unnecessary-type-assertion
+  const result = useBaseQuery(
+    // eslint-disable-next-line @typescript-eslint/no-unnecessary-type-assertion
+    InfiniteQueryObserver as typeof QueryObserver,
+    options,
+    queryClient,
+  ) as InfiniteQueryReturnType<TData, TError>
+  return {
+    ...result,
+    fetchNextPage: result.fetchNextPage.value,
+    fetchPreviousPage: result.fetchPreviousPage.value,
+    refetch: result.refetch.value,
+  }
+}

package/src/useIsFetching.ts

@@ -0,0 +1,37 @@
+import { computed, onScopeDispose, ref, watch } from 'vue-demi'
+import type { Ref } from 'vue-demi'
+import type { QueryFilters as QF } from '@tanstack/query-core'
+import { useQueryClient } from './useQueryClient'
+import { cloneDeepUnref } from './utils'
+import type { MaybeRefDeep } from './types'
+import type { QueryClient } from './queryClient'
+
+export type QueryFilters = MaybeRefDeep<QF>
+
+export function useIsFetching(
+  fetchingFilters: MaybeRefDeep<QF> = {},
+  queryClient?: QueryClient,
+): Ref<number> {
+  const filters = computed(() => cloneDeepUnref(fetchingFilters))
+  const client = queryClient || useQueryClient()
+
+  const isFetching = ref(client.isFetching(filters))
+
+  const unsubscribe = client.getQueryCache().subscribe(() => {
+    isFetching.value = client.isFetching(filters)
+  })
+
+  watch(
+    filters,
+    () => {
+      isFetching.value = client.isFetching(filters)
+    },
+    { deep: true },
+  )
+
+  onScopeDispose(() => {
+    unsubscribe()
+  })
+
+  return isFetching
+}

package/src/useMutation.ts

@@ -0,0 +1,109 @@
+import {
+  onScopeDispose,
+  reactive,
+  readonly,
+  toRefs,
+  watch,
+  computed,
+} from 'vue-demi'
+import type { ToRefs } from 'vue-demi'
+import type {
+  MutateOptions,
+  MutateFunction,
+  MutationObserverResult,
+  MutationObserverOptions,
+  DefaultError,
+} from '@tanstack/query-core'
+import type { MaybeRefDeep, DistributiveOmit } from './types'
+import { MutationObserver } from '@tanstack/query-core'
+import { cloneDeepUnref, updateState } from './utils'
+import { useQueryClient } from './useQueryClient'
+import type { QueryClient } from './queryClient'
+
+type MutationResult<TData, TError, TVariables, TContext> = DistributiveOmit<
+  MutationObserverResult<TData, TError, TVariables, TContext>,
+  'mutate' | 'reset'
+>
+
+export type UseMutationOptions<
+  TData = unknown,
+  TError = DefaultError,
+  TVariables = void,
+  TContext = unknown,
+> = MaybeRefDeep<MutationObserverOptions<TData, TError, TVariables, TContext>>
+
+type MutateSyncFunction<
+  TData = unknown,
+  TError = DefaultError,
+  TVariables = void,
+  TContext = unknown,
+> = (
+  ...options: Parameters<MutateFunction<TData, TError, TVariables, TContext>>
+) => void
+
+export type UseMutationReturnType<
+  TData,
+  TError,
+  TVariables,
+  TContext,
+  Result = MutationResult<TData, TError, TVariables, TContext>,
+> = ToRefs<Readonly<Result>> & {
+  mutate: MutateSyncFunction<TData, TError, TVariables, TContext>
+  mutateAsync: MutateFunction<TData, TError, TVariables, TContext>
+  reset: MutationObserverResult<TData, TError, TVariables, TContext>['reset']
+}
+
+export function useMutation<
+  TData = unknown,
+  TError = DefaultError,
+  TVariables = void,
+  TContext = unknown,
+>(
+  mutationOptions: MaybeRefDeep<
+    MutationObserverOptions<TData, TError, TVariables, TContext>
+  >,
+  queryClient?: QueryClient,
+): UseMutationReturnType<TData, TError, TVariables, TContext> {
+  const client = queryClient || useQueryClient()
+  const options = computed(() => {
+    return client.defaultMutationOptions(cloneDeepUnref(mutationOptions))
+  })
+  const observer = new MutationObserver(client, options.value)
+  const state = reactive(observer.getCurrentResult())
+
+  const unsubscribe = observer.subscribe((result) => {
+    updateState(state, result)
+  })
+
+  const mutate = (
+    variables: TVariables,
+    mutateOptions?: MutateOptions<TData, TError, TVariables, TContext>,
+  ) => {
+    observer.mutate(variables, mutateOptions).catch(() => {
+      // This is intentional
+    })
+  }
+
+  watch(
+    options,
+    () => {
+      observer.setOptions(options.value)
+    },
+    { deep: true },
+  )
+
+  onScopeDispose(() => {
+    unsubscribe()
+  })
+
+  const resultRefs = toRefs(readonly(state)) as unknown as ToRefs<
+    Readonly<MutationResult<TData, TError, TVariables, TContext>>
+  >
+
+  return {
+    ...resultRefs,
+    mutate,
+    mutateAsync: state.mutate,
+    reset: state.reset,
+  }
+}

package/src/useMutationState.ts

@@ -0,0 +1,73 @@
+import { onScopeDispose, readonly, computed, ref } from 'vue-demi'
+import type { Ref, DeepReadonly } from 'vue-demi'
+import type {
+  MutationFilters as MF,
+  Mutation,
+  DefaultError,
+  MutationState,
+} from '@tanstack/query-core'
+import { useQueryClient } from './useQueryClient'
+import { cloneDeepUnref } from './utils'
+import type { QueryClient } from './queryClient'
+import type { MaybeRefDeep } from './types'
+import type { MutationCache } from './mutationCache'
+
+export type MutationFilters = MaybeRefDeep<MF>
+
+export function useIsMutating(
+  filters: MutationFilters = {},
+  queryClient?: QueryClient,
+): Ref<number> {
+  const client = queryClient || useQueryClient()
+  const unreffedFilters = computed(() => ({
+    ...cloneDeepUnref(filters),
+    status: 'pending' as const,
+  }))
+
+  const length = computed(
+    () => useMutationState({ filters: unreffedFilters }, client).value.length,
+  )
+
+  return length
+}
+
+export type MutationStateOptions<TResult = MutationState> = {
+  filters?: MutationFilters
+  select?: (
+    mutation: Mutation<unknown, DefaultError, unknown, unknown>,
+  ) => TResult
+}
+
+function getResult<TResult = MutationState>(
+  mutationCache: MutationCache,
+  options: MutationStateOptions<TResult>,
+): Array<TResult> {
+  return mutationCache
+    .findAll(options.filters)
+    .map(
+      (mutation): TResult =>
+        (options.select
+          ? options.select(
+              mutation as Mutation<unknown, DefaultError, unknown, unknown>,
+            )
+          : mutation.state) as TResult,
+    )
+}
+
+export function useMutationState<TResult = MutationState>(
+  options: MutationStateOptions<TResult> = {},
+  queryClient?: QueryClient,
+): DeepReadonly<Ref<Array<TResult>>> {
+  const mutationCache = (queryClient || useQueryClient()).getMutationCache()
+  const state = ref(getResult(mutationCache, options)) as Ref<TResult[]>
+  const unsubscribe = mutationCache.subscribe(() => {
+    const result = getResult(mutationCache, options)
+    state.value = result
+  })
+
+  onScopeDispose(() => {
+    unsubscribe()
+  })
+
+  return readonly(state)
+}