@kimesh/query 0.2.35 → 0.2.36

package/dist/index.d.mts

@@ -741,6 +741,7 @@ declare function defer(queryClient: QueryClient$1, ...queries: DeferrableQueryOp
 declare function deferWithPromises(queryClient: QueryClient$1, ...queries: DeferrableQueryOptions[]): Promise<void>[];
 //#endregion
 //#region src/suspense.d.ts
+type MaybeRefOrGetter$1<T> = T | Ref<T> | ComputedRef<T> | (() => T);
 /**
  * Infer TData from QueryOptionsOutput
  */
@@ -763,31 +764,37 @@ interface UseSuspenseQueryResult<TData> {
  * Returns a Promise that resolves to the query result when data is ready.
  * Use with top-level await in <script setup> to trigger Suspense.
  *
+ * Supports both static options and reactive options (getter function or ComputedRef).
+ * When using reactive options, the query will automatically refetch when dependencies change.
+ *
  * @example
  * ```vue
  * <script setup>
  * import { useSuspenseQuery } from '@kimesh/query'
  * import { postsQuery } from './posts.data'
  *
- * // Awaiting triggers Suspense - component suspends until data ready
- * // data is typed as Ref<Post[]> (not Ref<Post[] | undefined>)
+ * // Static options - fetches once
  * const { data: posts } = await useSuspenseQuery(postsQuery)
- * </script>
  *
- * <template>
- *   <div v-for="post in posts" :key="post.id">{{ post.title }}</div>
- * </template>
+ * // Reactive options - refetches when filters change
+ * const filters = ref({ page: 1, status: 'active' })
+ * const { data: banners } = await useSuspenseQuery(
+ *   () => bannerListQuery(filters.value)
+ * )
+ * </script>
  * ```
  */
-declare function useSuspenseQuery<T extends QueryOptionsOutput<unknown, QueryKey$1>>(options: T): Promise<UseSuspenseQueryResult<InferQueryData<T>>>;
+declare function useSuspenseQuery<T extends QueryOptionsOutput<unknown, QueryKey$1>>(optionsOrGetter: MaybeRefOrGetter$1<T>): Promise<UseSuspenseQueryResult<InferQueryData<T>>>;
 /**
  * Suspense-compatible infinite query hook for Vue.
  *
+ * Supports both static options and reactive options (getter function or ComputedRef).
+ *
  * Note: This is a basic implementation. For full infinite query support,
  * you may need to extend the options interface to include initialPageParam
  * and getNextPageParam configuration.
  */
-declare function useSuspenseInfiniteQuery<T extends QueryOptionsOutput<unknown, QueryKey$1>>(options: T): Promise<UseInfiniteQueryReturnType<InferQueryData<T>, Error>>;
+declare function useSuspenseInfiniteQuery<T extends QueryOptionsOutput<unknown, QueryKey$1>>(optionsOrGetter: MaybeRefOrGetter$1<T>): Promise<UseInfiniteQueryReturnType<InferQueryData<T>, Error>>;
 type UseSuspenseQueryReturnType<TData = unknown> = UseSuspenseQueryResult<TData>;
 //#endregion
 export { $fetch, type DeferrableQueryOptions, type FetchContext, type FetchError, type FetchPluginOptions, type FetchResponse, type FetchRuntimeConfig, KimeshQueryPlugin, type KimeshQueryPluginOptions, type KmAsyncDataContext, type KmAsyncDataResult, type KmFetchConfig, type KmFetchCreateOptions, type KmFetchInstance, type KmFetchRequestOptions, type LayerFetchPluginOptions, type LoadableComponent, type LoaderDefinition, QueryClient, type QueryKey, type QueryKeyFactory, type QueryPrefetchOptions, type UseKmAsyncDataOptions, type UseKmFetchOptions, type UseQueryReturnType, type UseSuspenseQueryReturnType, VueQueryPlugin, createKimeshQueryClient, createKmFetch, createNamedFetchPlugin, createPrefetcher, createQueryKeyFactory, defer, deferWithPromises, defineMutation, defineQuery, defineQueryOptions, executeLoader, extractLoaders, fetchPlugin, getCurrentLayer, getLayerFetch, hasLoader, initGlobalFetch, initLayerFetch, isLayerFetchInitialized, layerFetchPlugin, queryOptions, setCurrentLayer, setupQueryPrefetching, useGlobalFetch, useInfiniteQuery, useKmAsyncData, useKmData, useKmFetch, useLazyKmAsyncData, useLazyKmFetch, useMutation, useQuery, useQueryClient, useSuspenseInfiniteQuery, useSuspenseQuery };

package/dist/index.mjs

@@ -1,6 +1,6 @@
 import { QueryClient, QueryClient as QueryClient$1, VueQueryPlugin, VueQueryPlugin as VueQueryPlugin$1, queryOptions, useInfiniteQuery, useInfiniteQuery as useInfiniteQuery$1, useMutation, useMutation as useMutation$1, useQuery, useQuery as useQuery$1, useQueryClient, useQueryClient as useQueryClient$1 } from "@tanstack/vue-query";
 import { ofetch } from "ofetch";
-import { computed, ref, toValue, watch } from "vue";
+import { computed, isRef, ref, toValue, watch } from "vue";
 import { hash } from "ohash";
 
 //#region src/plugin.ts
@@ -947,55 +947,77 @@ function deferWithPromises(queryClient, ...queries) {
 * ```
 */
 /**
+* Check if a value is a getter function (not a QueryOptionsOutput)
+*/
+function isGetter(value) {
+	return typeof value === "function" && !("queryKey" in value);
+}
+/**
+* Resolve a MaybeRefOrGetter to a computed ref
+*/
+function resolveOptions(optionsOrGetter) {
+	if (isGetter(optionsOrGetter)) return computed(optionsOrGetter);
+	if (isRef(optionsOrGetter)) return optionsOrGetter;
+	return computed(() => optionsOrGetter);
+}
+/**
 * Suspense-compatible query hook for Vue.
 *
 * Returns a Promise that resolves to the query result when data is ready.
 * Use with top-level await in <script setup> to trigger Suspense.
 *
+* Supports both static options and reactive options (getter function or ComputedRef).
+* When using reactive options, the query will automatically refetch when dependencies change.
+*
 * @example
 * ```vue
 * <script setup>
 * import { useSuspenseQuery } from '@kimesh/query'
 * import { postsQuery } from './posts.data'
 *
-* // Awaiting triggers Suspense - component suspends until data ready
-* // data is typed as Ref<Post[]> (not Ref<Post[] | undefined>)
+* // Static options - fetches once
 * const { data: posts } = await useSuspenseQuery(postsQuery)
-* <\/script>
 *
-* <template>
-*   <div v-for="post in posts" :key="post.id">{{ post.title }}</div>
-* </template>
+* // Reactive options - refetches when filters change
+* const filters = ref({ page: 1, status: 'active' })
+* const { data: banners } = await useSuspenseQuery(
+*   () => bannerListQuery(filters.value)
+* )
+* <\/script>
 * ```
 */
-async function useSuspenseQuery(options) {
-	const result = useQuery$1({
-		queryKey: options.queryKey,
-		queryFn: options.queryFn,
-		staleTime: options.staleTime,
-		gcTime: options.gcTime,
-		enabled: options.enabled
-	});
+async function useSuspenseQuery(optionsOrGetter) {
+	const resolvedOptions = resolveOptions(optionsOrGetter);
+	const result = useQuery$1(computed(() => ({
+		queryKey: resolvedOptions.value.queryKey,
+		queryFn: resolvedOptions.value.queryFn,
+		staleTime: resolvedOptions.value.staleTime,
+		gcTime: resolvedOptions.value.gcTime,
+		enabled: resolvedOptions.value.enabled
+	})));
 	await result.suspense();
 	return result;
 }
 /**
 * Suspense-compatible infinite query hook for Vue.
 *
+* Supports both static options and reactive options (getter function or ComputedRef).
+*
 * Note: This is a basic implementation. For full infinite query support,
 * you may need to extend the options interface to include initialPageParam
 * and getNextPageParam configuration.
 */
-async function useSuspenseInfiniteQuery(options) {
-	const result = useInfiniteQuery$1({
-		queryKey: options.queryKey,
-		queryFn: options.queryFn,
-		staleTime: options.staleTime,
-		gcTime: options.gcTime,
-		enabled: options.enabled,
+async function useSuspenseInfiniteQuery(optionsOrGetter) {
+	const resolvedOptions = resolveOptions(optionsOrGetter);
+	const result = useInfiniteQuery$1(computed(() => ({
+		queryKey: resolvedOptions.value.queryKey,
+		queryFn: resolvedOptions.value.queryFn,
+		staleTime: resolvedOptions.value.staleTime,
+		gcTime: resolvedOptions.value.gcTime,
+		enabled: resolvedOptions.value.enabled,
 		initialPageParam: 0,
 		getNextPageParam: () => void 0
-	});
+	})));
 	await result.suspense();
 	return result;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kimesh/query",
-  "version": "0.2.35",
+  "version": "0.2.36",
   "description": "Query utilities for Kimesh framework",
   "repository": {
     "type": "git",