feat: add queryClient to options (#203)

Author: ant32t

src/vuejs/types.ts

@@ -4,6 +4,7 @@ import type {
   InfiniteQueryObserverOptions,
 } from "@tanstack/query-core";
 import { Ref, UnwrapRef } from "vue-demi";
+import type { QueryClient } from "vue-query";
 
 export type MaybeRef<T> = Ref<T> | T;
 export type MaybeRefDeep<T> = T extends Function
@@ -16,7 +17,10 @@ export type MaybeRefDeep<T> = T extends Function
         : T
     >;
 
-export type WithQueryClientKey<T> = T & { queryClientKey?: string };
+export type WithQueryClientKey<T> = T & {
+  queryClientKey?: string;
+  queryClient?: QueryClient;
+};
 
 // A Vue version of QueriesObserverOptions from "@tanstack/query-core"
 // Accept refs as options

src/vuejs/useBaseQuery.ts

@@ -54,7 +54,8 @@ export function useBaseQuery<
   arg3: UseQueryOptionsGeneric<TQueryFnData, TError, TData, TQueryKey> = {}
 ): UseQueryReturnType<TData, TError> {
   const options = getQueryUnreffedOptions();
-  const queryClient = useQueryClient(options.queryClientKey);
+  const queryClient =
+    options.queryClient ?? useQueryClient(options.queryClientKey);
   const defaultedOptions = queryClient.defaultQueryOptions(options);
   const observer = new Observer(queryClient, defaultedOptions);
   const state = reactive(observer.getCurrentResult());

src/vuejs/useIsFetching.ts

@@ -17,7 +17,8 @@ export function useIsFetching(
   arg2?: QueryFilters
 ): Ref<number> {
   const filters = ref(parseFilterArgs(arg1, arg2));
-  const queryClient = useQueryClient(filters.value.queryClientKey);
+  const queryClient =
+    filters.value.queryClient ?? useQueryClient(filters.value.queryClientKey);
 
   const isFetching = ref(queryClient.isFetching(filters));
 

src/vuejs/useIsMutating.ts

@@ -17,7 +17,8 @@ export function useIsMutating(
   arg2?: Omit<MutationFilters, "mutationKey">
 ): Ref<number> {
   const filters = ref(parseMutationFilterArgs(arg1, arg2));
-  const queryClient = useQueryClient(filters.value.queryClientKey);
+  const queryClient =
+    filters.value.queryClient ?? useQueryClient(filters.value.queryClientKey);
 
   const isMutating = ref(queryClient.isMutating(filters));
 

src/vuejs/useMutation.ts

@@ -111,7 +111,8 @@ export function useMutation<
   arg3?: UseMutationOptions<TData, TError, TVariables, TContext>
 ): UseMutationReturnType<TData, TError, TVariables, TContext> {
   const options = parseMutationArgs(arg1, arg2, arg3);
-  const queryClient = useQueryClient(options.queryClientKey);
+  const queryClient =
+    options.queryClient ?? useQueryClient(options.queryClientKey);
   const defaultedOptions = queryClient.defaultMutationOptions(options);
   const observer = new MutationObserver(queryClient, defaultedOptions);
 

src/vuejs/useQueries.ts

@@ -132,7 +132,8 @@ export function useQueries<T extends any[]>({
   const unreffedQueries = cloneDeepUnref(queries) as UseQueriesOptionsArg<T>;
 
   const queryClientKey = unreffedQueries[0].queryClientKey;
-  const queryClient = useQueryClient(queryClientKey);
+  const optionsQueryClient = unreffedQueries[0].queryClient;
+  const queryClient = optionsQueryClient ?? useQueryClient(queryClientKey);
   const defaultedQueries = unreffedQueries.map((options) => {
     return queryClient.defaultQueryOptions(options);
   });