import { computed, getCurrentScope, onScopeDispose, shallowReadonly, shallowRef, watch, } from 'vue-demi' import { useQueryClient } from './useQueryClient' import { cloneDeepUnref } from './utils' import type { Ref } from 'vue-demi' import type { MutationFilters as MF, Mutation, MutationState, } from '@tanstack/query-core' import type { QueryClient } from './queryClient' import type { MaybeRefDeep } from './types' import type { MutationCache } from './mutationCache' export type MutationFilters = MaybeRefDeep export function useIsMutating( filters: MutationFilters | (() => MutationFilters) = {}, queryClient?: QueryClient, ): Ref { if (process.env.NODE_ENV === 'development') { if (!getCurrentScope()) { console.warn( 'vue-query composable like "useQuery()" should only be used inside a "setup()" function or a running effect scope. They might otherwise lead to memory leaks.', ) } } const client = queryClient || useQueryClient() const mutationState = useMutationState( { filters: computed(() => ({ ...cloneDeepUnref(typeof filters === 'function' ? filters() : filters), status: 'pending' as const, })), }, client, ) const length = computed(() => mutationState.value.length) return length } export type MutationStateOptions = { filters?: MutationFilters select?: (mutation: Mutation) => TResult } function getResult( mutationCache: MutationCache, options: MutationStateOptions, ): Array { return mutationCache .findAll(options.filters) .map( (mutation): TResult => (options.select ? options.select(mutation) : mutation.state) as TResult, ) } export function useMutationState( options: | MutationStateOptions | (() => MutationStateOptions) = {}, queryClient?: QueryClient, ): Readonly>> { const resolvedOptions = computed(() => { const newOptions = typeof options === 'function' ? options() : options return { filters: cloneDeepUnref(newOptions.filters), select: newOptions.select, } }) const mutationCache = (queryClient || useQueryClient()).getMutationCache() const state = shallowRef(getResult(mutationCache, resolvedOptions.value)) const unsubscribe = mutationCache.subscribe(() => { state.value = getResult(mutationCache, resolvedOptions.value) }) watch(resolvedOptions, () => { state.value = getResult(mutationCache, resolvedOptions.value) }) onScopeDispose(() => { unsubscribe() }) return shallowReadonly(state) }