tanstack-query-callbacks 0.2.1 → 0.3.0

package/LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) zhong666 <hi@zhong666.me> and bouzu contributors
+Copyright (c) 2023-PRESENT zhong666 <hi@zhong666.me>
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

package/README.md

@@ -5,6 +5,10 @@
 [![bundle][bundle-src]][bundle-href]
 [![coverage][coverage-src]][coverage-href]
 
+[![npm peer dependency version - @tanstack/vue-query][peer-deps-tanstack-vue-query-src]][peer-deps-tanstack-vue-query-href]
+[![npm peer dependency version - @tanstack/react-query][peer-deps-tanstack-react-query-src]][peer-deps-tanstack-react-query-href]
+[![npm peer dependency version - @tanstack/svelte-query][peer-deps-tanstack-svelte-query-src]][peer-deps-tanstack-svelte-query-href]
+
 Use callbacks of query in the usual way, as before.
 
 The tanstack/query has removed `onSuccess`, `onError` and `onSettled` from useQuery in v5. You can find more information in the [RFC](https://github.com/TanStack/query/discussions/5279).
@@ -12,7 +16,7 @@ The tanstack/query has removed `onSuccess`, `onError` and `onSettled` from useQu
 # Features
 
 - Support Tanstack/Query v4, v5
-- Support Vue, React
+- Support Vue, React, Svelte
 
 ## Instanll
 
@@ -30,6 +34,7 @@ pnpm add tanstack-query-callbacks
 <script setup lang="ts">
 import { useQuery } from '@tanstack/vue-query'
 import { useQueryCallbacks } from 'tanstack-query-callbacks/vue'
+
 const queryKey = ['foo']
 const query = useQuery(queryKey, () => Promise.resolve('bar'))
 useQueryCallbacks({
@@ -70,6 +75,34 @@ useQueryCallbacks({
 })
 ```
 
+## Usage (Svelte)
+
+```svelte
+<script>
+	import { createQuery } from '@tanstack/svelte-query'
+	import { useQueryCallbacks } from 'tanstack-query-callbacks/svelte'
+
+	const queryKey = ['foo']
+	const query = createQuery({
+		queryKey,
+		queryFn: () => Promise.resolve('bar')
+	})
+
+	useQueryCallbacks({
+		queryKey,
+		onSuccess: (data) => {
+			console.log('success', data)
+		},
+		onError: (err) => {
+			console.error('error', err)
+		},
+		onSettled: (data, err) => {
+			console.log('settled', { data, err })
+		}
+	})
+</script>
+```
+
 <!-- Link Resources -->
 
 [npm-version-src]: https://img.shields.io/npm/v/tanstack-query-callbacks?style=flat&colorA=18181B&colorB=F0DB4F
@@ -78,5 +111,11 @@ useQueryCallbacks({
 [npm-downloads-href]: https://npmjs.com/package/tanstack-query-callbacks
 [bundle-src]: https://img.shields.io/bundlephobia/minzip/tanstack-query-callbacks?style=flat&colorA=18181B&colorB=F0DB4F
 [bundle-href]: https://bundlephobia.com/result?p=tanstack-query-callbacks
-[coverage-src]: https://img.shields.io/codecov/c/gh/aa900031/tanstack-query-callbacks?token=AG56Z6EP8U&logo=codecov&color=F0DB4F
+[coverage-src]: https://img.shields.io/codecov/c/gh/aa900031/tanstack-query-callbacks?logo=codecov&style=flat&colorA=18181B&colorB=F0DB4F
 [coverage-href]: https://codecov.io/gh/aa900031/tanstack-query-callbacks
+[peer-deps-tanstack-vue-query-src]: https://img.shields.io/npm/dependency-version/tanstack-query-callbacks/peer/@tanstack/vue-query?style=flat&colorA=18181B&colorB=F0DB4F
+[peer-deps-tanstack-vue-query-href]: https://www.npmjs.com/package/@tanstack/vue-query
+[peer-deps-tanstack-react-query-src]: https://img.shields.io/npm/dependency-version/tanstack-query-callbacks/peer/@tanstack/react-query?style=flat&colorA=18181B&colorB=F0DB4F
+[peer-deps-tanstack-react-query-href]: https://www.npmjs.com/package/@tanstack/react-query
+[peer-deps-tanstack-svelte-query-src]: https://img.shields.io/npm/dependency-version/tanstack-query-callbacks/peer/@tanstack/svelte-query?style=flat&colorA=18181B&colorB=F0DB4F
+[peer-deps-tanstack-svelte-query-href]: https://www.npmjs.com/package/@tanstack/svelte-query

package/dist/core/index.cjs

@@ -1,42 +1,35 @@
-'use strict';
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+let _tanstack_query_core = require("@tanstack/query-core");
 
-const queryCore = require('@tanstack/query-core');
-
-function subscribeQueryCallbacks({
-  queryClient,
-  queryKey,
-  onSuccess,
-  onError,
-  onSettled
-}) {
-  if (!onSuccess && !onError && !onSettled)
-    return noop;
-  const cache = queryClient.getQueryCache();
-  const unsubscribe = cache.subscribe((event) => {
-    if (event.type !== "updated")
-      return;
-    if (!queryCore.matchQuery({ queryKey, exact: true }, event.query))
-      return;
-    switch (event.action.type) {
-      case "success": {
-        if (!event.action.manual) {
-          onSuccess?.(event.action.data);
-          onSettled?.(event.action.data, null);
-        }
-        break;
-      }
-      case "error": {
-        if (!queryCore.isCancelledError(event.action.error)) {
-          onError?.(event.action.error);
-          onSettled?.(void 0, event.action.error);
-        }
-        break;
-      }
-    }
-  });
-  return unsubscribe;
-}
-function noop() {
+//#region src/core/index.ts
+function subscribeQueryCallbacks({ queryClient, queryKey, onSuccess, onError, onSettled }) {
+	if (!onSuccess && !onError && !onSettled) return noop;
+	return queryClient.getQueryCache().subscribe((event) => {
+		if (event.type !== "updated") return;
+		if (!(0, _tanstack_query_core.matchQuery)({
+			queryKey,
+			exact: true
+		}, event.query)) return;
+		switch (event.action.type) {
+			case "success":
+				/* istanbul ignore else */
+				if (!event.action.manual) {
+					onSuccess?.(event.action.data);
+					onSettled?.(event.action.data, null);
+				}
+				break;
+			case "failed":
+			case "error":
+				/* istanbul ignore else */
+				if (!(0, _tanstack_query_core.isCancelledError)(event.action.error)) {
+					onError?.(event.action.error);
+					onSettled?.(void 0, event.action.error);
+				}
+				break;
+		}
+	});
 }
+function noop() {}
 
-exports.subscribeQueryCallbacks = subscribeQueryCallbacks;
+//#endregion
+exports.subscribeQueryCallbacks = subscribeQueryCallbacks;

package/dist/core/index.d.cts

@@ -1,18 +1,24 @@
-import { QueryClient, QueryKey } from '@tanstack/query-core';
+import { QueryClient, QueryKey } from "@tanstack/query-core";
 
+//#region src/core/index.d.ts
 type QuerySuccessHandler<TQueryFnData> = (data: TQueryFnData) => void;
 type QueryErrorHandler<TError> = (err: TError) => void;
 type QuerySettledHandler<TQueryFnData, TError> = (data: TQueryFnData | undefined, error: TError | null) => void;
 interface QueryCallbacks<TQueryFnData, TError> {
-    onSuccess?: QuerySuccessHandler<TQueryFnData>;
-    onError?: QueryErrorHandler<TError>;
-    onSettled?: QuerySettledHandler<TQueryFnData, TError>;
+  onSuccess?: QuerySuccessHandler<TQueryFnData>;
+  onError?: QueryErrorHandler<TError>;
+  onSettled?: QuerySettledHandler<TQueryFnData, TError>;
 }
 interface SubscribeQueryCallbacksProps<TQueryFnData, TError> extends QueryCallbacks<TQueryFnData, TError> {
-    queryClient: QueryClient;
-    queryKey: QueryKey;
+  queryClient: QueryClient;
+  queryKey: QueryKey;
 }
-declare function subscribeQueryCallbacks<TQueryFnData = unknown, TError = unknown>({ queryClient, queryKey, onSuccess, onError, onSettled, }: SubscribeQueryCallbacksProps<TQueryFnData, TError>): () => void;
-
-export { subscribeQueryCallbacks };
-export type { QueryCallbacks, QueryErrorHandler, QuerySettledHandler, QuerySuccessHandler, SubscribeQueryCallbacksProps };
+declare function subscribeQueryCallbacks<TQueryFnData = unknown, TError = unknown>({
+  queryClient,
+  queryKey,
+  onSuccess,
+  onError,
+  onSettled
+}: SubscribeQueryCallbacksProps<TQueryFnData, TError>): () => void;
+//#endregion
+export { QueryCallbacks, QueryErrorHandler, QuerySettledHandler, QuerySuccessHandler, SubscribeQueryCallbacksProps, subscribeQueryCallbacks };

package/dist/core/index.d.ts

@@ -1,18 +1,24 @@
-import { QueryClient, QueryKey } from '@tanstack/query-core';
+import { QueryClient, QueryKey } from "@tanstack/query-core";
 
+//#region src/core/index.d.ts
 type QuerySuccessHandler<TQueryFnData> = (data: TQueryFnData) => void;
 type QueryErrorHandler<TError> = (err: TError) => void;
 type QuerySettledHandler<TQueryFnData, TError> = (data: TQueryFnData | undefined, error: TError | null) => void;
 interface QueryCallbacks<TQueryFnData, TError> {
-    onSuccess?: QuerySuccessHandler<TQueryFnData>;
-    onError?: QueryErrorHandler<TError>;
-    onSettled?: QuerySettledHandler<TQueryFnData, TError>;
+  onSuccess?: QuerySuccessHandler<TQueryFnData>;
+  onError?: QueryErrorHandler<TError>;
+  onSettled?: QuerySettledHandler<TQueryFnData, TError>;
 }
 interface SubscribeQueryCallbacksProps<TQueryFnData, TError> extends QueryCallbacks<TQueryFnData, TError> {
-    queryClient: QueryClient;
-    queryKey: QueryKey;
+  queryClient: QueryClient;
+  queryKey: QueryKey;
 }
-declare function subscribeQueryCallbacks<TQueryFnData = unknown, TError = unknown>({ queryClient, queryKey, onSuccess, onError, onSettled, }: SubscribeQueryCallbacksProps<TQueryFnData, TError>): () => void;
-
-export { subscribeQueryCallbacks };
-export type { QueryCallbacks, QueryErrorHandler, QuerySettledHandler, QuerySuccessHandler, SubscribeQueryCallbacksProps };
+declare function subscribeQueryCallbacks<TQueryFnData = unknown, TError = unknown>({
+  queryClient,
+  queryKey,
+  onSuccess,
+  onError,
+  onSettled
+}: SubscribeQueryCallbacksProps<TQueryFnData, TError>): () => void;
+//#endregion
+export { QueryCallbacks, QueryErrorHandler, QuerySettledHandler, QuerySuccessHandler, SubscribeQueryCallbacksProps, subscribeQueryCallbacks };

package/dist/core/index.js

@@ -0,0 +1,34 @@
+import { isCancelledError, matchQuery } from "@tanstack/query-core";
+
+//#region src/core/index.ts
+function subscribeQueryCallbacks({ queryClient, queryKey, onSuccess, onError, onSettled }) {
+	if (!onSuccess && !onError && !onSettled) return noop;
+	return queryClient.getQueryCache().subscribe((event) => {
+		if (event.type !== "updated") return;
+		if (!matchQuery({
+			queryKey,
+			exact: true
+		}, event.query)) return;
+		switch (event.action.type) {
+			case "success":
+				/* istanbul ignore else */
+				if (!event.action.manual) {
+					onSuccess?.(event.action.data);
+					onSettled?.(event.action.data, null);
+				}
+				break;
+			case "failed":
+			case "error":
+				/* istanbul ignore else */
+				if (!isCancelledError(event.action.error)) {
+					onError?.(event.action.error);
+					onSettled?.(void 0, event.action.error);
+				}
+				break;
+		}
+	});
+}
+function noop() {}
+
+//#endregion
+export { subscribeQueryCallbacks };

package/dist/react/index.cjs

@@ -1,29 +1,26 @@
-'use strict';
-
-const reactQuery = require('@tanstack/react-query');
-const react = require('react');
-const core_index = require('../core/index.cjs');
-require('@tanstack/query-core');
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+const require_core_index = require('../core/index.cjs');
+let _tanstack_react_query = require("@tanstack/react-query");
+let react = require("react");
 
+//#region src/react/index.ts
 function useQueryCallbacks(props) {
-  const queryClient = reactQuery.useQueryClient(
-    props.context ? { context: props.context } : props.queryClient
-    // for v5
-  );
-  react.useEffect(() => {
-    return core_index.subscribeQueryCallbacks({
-      queryClient,
-      queryKey: props.queryKey,
-      onSuccess: props.onSuccess,
-      onError: props.onError,
-      onSettled: props.onSettled
-    });
-  }, [
-    props.queryKey,
-    props.onSuccess,
-    props.onError,
-    props.onSettled
-  ]);
+	const queryClient = (0, _tanstack_react_query.useQueryClient)(props.context ? { context: props.context } : props.queryClient);
+	(0, react.useEffect)(() => {
+		return require_core_index.subscribeQueryCallbacks({
+			queryClient,
+			queryKey: props.queryKey,
+			onSuccess: props.onSuccess,
+			onError: props.onError,
+			onSettled: props.onSettled
+		});
+	}, [
+		props.queryKey,
+		props.onSuccess,
+		props.onError,
+		props.onSettled
+	]);
 }
 
-exports.useQueryCallbacks = useQueryCallbacks;
+//#endregion
+exports.useQueryCallbacks = useQueryCallbacks;

package/dist/react/index.d.cts

@@ -1,20 +1,19 @@
-import { QueryKey, QueryClient } from '@tanstack/react-query';
-import { Context } from 'react';
-import { QueryCallbacks } from '../core/index.cjs';
-import '@tanstack/query-core';
+import { QueryCallbacks } from "../core/index.cjs";
+import { QueryClient, QueryKey } from "@tanstack/react-query";
+import { Context } from "react";
 
+//#region src/react/index.d.ts
 interface UseQueryCallbacksProps<TQueryFnData, TError> extends QueryCallbacks<TQueryFnData, TError> {
-    queryKey: QueryKey;
-    /**
-     * QueryClient instance
-     */
-    queryClient?: QueryClient;
-    /**
-     * QueryClient context for v4
-     */
-    context?: Context<QueryClient | undefined>;
+  queryKey: QueryKey;
+  /**
+   * QueryClient instance
+   */
+  queryClient?: QueryClient;
+  /**
+   * QueryClient context for v4
+   */
+  context?: Context<QueryClient | undefined>;
 }
 declare function useQueryCallbacks<TQueryFnData = unknown, TError = unknown>(props: UseQueryCallbacksProps<TQueryFnData, TError>): void;
-
-export { useQueryCallbacks };
-export type { UseQueryCallbacksProps };
+//#endregion
+export { UseQueryCallbacksProps, useQueryCallbacks };

package/dist/react/index.d.ts

@@ -1,20 +1,19 @@
-import { QueryKey, QueryClient } from '@tanstack/react-query';
-import { Context } from 'react';
-import { QueryCallbacks } from '../core/index.js';
-import '@tanstack/query-core';
+import { QueryCallbacks } from "../core/index.js";
+import { QueryClient, QueryKey } from "@tanstack/react-query";
+import { Context } from "react";
 
+//#region src/react/index.d.ts
 interface UseQueryCallbacksProps<TQueryFnData, TError> extends QueryCallbacks<TQueryFnData, TError> {
-    queryKey: QueryKey;
-    /**
-     * QueryClient instance
-     */
-    queryClient?: QueryClient;
-    /**
-     * QueryClient context for v4
-     */
-    context?: Context<QueryClient | undefined>;
+  queryKey: QueryKey;
+  /**
+   * QueryClient instance
+   */
+  queryClient?: QueryClient;
+  /**
+   * QueryClient context for v4
+   */
+  context?: Context<QueryClient | undefined>;
 }
 declare function useQueryCallbacks<TQueryFnData = unknown, TError = unknown>(props: UseQueryCallbacksProps<TQueryFnData, TError>): void;
-
-export { useQueryCallbacks };
-export type { UseQueryCallbacksProps };
+//#endregion
+export { UseQueryCallbacksProps, useQueryCallbacks };

package/dist/react/index.js

@@ -0,0 +1,25 @@
+import { subscribeQueryCallbacks } from "../core/index.js";
+import { useQueryClient } from "@tanstack/react-query";
+import { useEffect } from "react";
+
+//#region src/react/index.ts
+function useQueryCallbacks(props) {
+	const queryClient = useQueryClient(props.context ? { context: props.context } : props.queryClient);
+	useEffect(() => {
+		return subscribeQueryCallbacks({
+			queryClient,
+			queryKey: props.queryKey,
+			onSuccess: props.onSuccess,
+			onError: props.onError,
+			onSettled: props.onSettled
+		});
+	}, [
+		props.queryKey,
+		props.onSuccess,
+		props.onError,
+		props.onSettled
+	]);
+}
+
+//#endregion
+export { useQueryCallbacks };

package/dist/svelte/index.cjs

@@ -0,0 +1,4 @@
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+const require_index_svelte = require('./index.svelte.cjs');
+
+exports.useQueryCallbacks = require_index_svelte.useQueryCallbacks;

package/dist/svelte/index.d.cts

@@ -0,0 +1,2 @@
+import { UseQueryCallbacksProps, useQueryCallbacks } from "./index.svelte.cjs";
+export { UseQueryCallbacksProps, useQueryCallbacks };

package/dist/svelte/index.d.ts

@@ -0,0 +1,2 @@
+import { UseQueryCallbacksProps, useQueryCallbacks } from "./index.svelte.js";
+export { UseQueryCallbacksProps, useQueryCallbacks };

package/dist/svelte/index.js

@@ -0,0 +1,3 @@
+import { useQueryCallbacks } from "./index.svelte.js";
+
+export { useQueryCallbacks };

package/dist/svelte/index.svelte.cjs

@@ -0,0 +1,23 @@
+const require_core_index = require('../core/index.cjs');
+let _tanstack_svelte_query = require("@tanstack/svelte-query");
+let svelte = require("svelte");
+
+//#region src/svelte/index.svelte.ts
+function useQueryCallbacks(props) {
+	const _props = $derived(props());
+	const queryClient = $derived((0, _tanstack_svelte_query.useQueryClient)(_props.queryClient));
+	$effect(() => {
+		const _queryKey = _props.queryKey;
+		const _queryClient = queryClient;
+		return (0, svelte.untrack)(() => require_core_index.subscribeQueryCallbacks({
+			queryClient: _queryClient,
+			queryKey: _queryKey,
+			onSuccess: _props.onSuccess,
+			onError: _props.onError,
+			onSettled: _props.onSettled
+		}));
+	});
+}
+
+//#endregion
+exports.useQueryCallbacks = useQueryCallbacks;

package/dist/svelte/index.svelte.d.cts

@@ -0,0 +1,14 @@
+import { QueryCallbacks } from "../core/index.cjs";
+import { QueryClient, QueryKey } from "@tanstack/svelte-query";
+
+//#region src/svelte/index.svelte.d.ts
+interface UseQueryCallbacksProps<TQueryFnData, TError> extends QueryCallbacks<TQueryFnData, TError> {
+  queryKey: QueryKey;
+  /**
+   * QueryClient instance
+   */
+  queryClient?: QueryClient;
+}
+declare function useQueryCallbacks<TQueryFnData = unknown, TError = unknown>(props: () => UseQueryCallbacksProps<TQueryFnData, TError>): void;
+//#endregion
+export { UseQueryCallbacksProps, useQueryCallbacks };

package/dist/svelte/index.svelte.d.ts

@@ -0,0 +1,14 @@
+import { QueryCallbacks } from "../core/index.js";
+import { QueryClient, QueryKey } from "@tanstack/svelte-query";
+
+//#region src/svelte/index.svelte.d.ts
+interface UseQueryCallbacksProps<TQueryFnData, TError> extends QueryCallbacks<TQueryFnData, TError> {
+  queryKey: QueryKey;
+  /**
+   * QueryClient instance
+   */
+  queryClient?: QueryClient;
+}
+declare function useQueryCallbacks<TQueryFnData = unknown, TError = unknown>(props: () => UseQueryCallbacksProps<TQueryFnData, TError>): void;
+//#endregion
+export { UseQueryCallbacksProps, useQueryCallbacks };

package/dist/svelte/index.svelte.js

@@ -0,0 +1,23 @@
+import { subscribeQueryCallbacks } from "../core/index.js";
+import { useQueryClient } from "@tanstack/svelte-query";
+import { untrack } from "svelte";
+
+//#region src/svelte/index.svelte.ts
+function useQueryCallbacks(props) {
+	const _props = $derived(props());
+	const queryClient = $derived(useQueryClient(_props.queryClient));
+	$effect(() => {
+		const _queryKey = _props.queryKey;
+		const _queryClient = queryClient;
+		return untrack(() => subscribeQueryCallbacks({
+			queryClient: _queryClient,
+			queryKey: _queryKey,
+			onSuccess: _props.onSuccess,
+			onError: _props.onError,
+			onSettled: _props.onSettled
+		}));
+	});
+}
+
+//#endregion
+export { useQueryCallbacks };

package/dist/vue/index.cjs

@@ -1,28 +1,27 @@
-'use strict';
-
-const vueQuery = require('@tanstack/vue-query');
-const vueDemi = require('vue-demi');
-const core_index = require('../core/index.cjs');
-require('@tanstack/query-core');
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+const require_core_index = require('../core/index.cjs');
+let _tanstack_vue_query = require("@tanstack/vue-query");
+let vue_demi = require("vue-demi");
 
+//#region src/vue/index.ts
 function useQueryCallbacks(props) {
-  const queryClient = props.queryClient ?? (props.queryClientKey ? vueDemi.inject(props.queryClientKey, void 0) : void 0) ?? vueQuery.useQueryClient(props.queryClientId);
-  vueDemi.watch(
-    () => vueDemi.unref(props.queryKey),
-    (queryKey, _oldVal, onCleanup) => {
-      const unsubscribe = core_index.subscribeQueryCallbacks({
-        queryClient,
-        queryKey,
-        onSuccess: props.onSuccess,
-        onError: props.onError,
-        onSettled: props.onSettled
-      });
-      onCleanup(() => {
-        unsubscribe();
-      });
-    },
-    { immediate: true }
-  );
+	const queryClient = props.queryClient ?? (props.queryClientKey ? (0, vue_demi.inject)(props.queryClientKey, void 0) : void 0) ?? (0, _tanstack_vue_query.useQueryClient)(props.queryClientId);
+	(0, vue_demi.watch)(() => (0, vue_demi.unref)(props.queryKey), (queryKey, _oldVal, onCleanup) => {
+		const unsubscribe = require_core_index.subscribeQueryCallbacks({
+			queryClient,
+			queryKey,
+			onSuccess: props.onSuccess,
+			onError: props.onError,
+			onSettled: props.onSettled
+		});
+		onCleanup(() => {
+			unsubscribe();
+		});
+	}, {
+		immediate: true,
+		flush: "sync"
+	});
 }
 
-exports.useQueryCallbacks = useQueryCallbacks;
+//#endregion
+exports.useQueryCallbacks = useQueryCallbacks;

package/dist/vue/index.d.cts

@@ -1,24 +1,23 @@
-import { QueryKey, QueryClient } from '@tanstack/vue-query';
-import { Ref } from 'vue-demi';
-import { QueryCallbacks } from '../core/index.cjs';
-import '@tanstack/query-core';
+import { QueryCallbacks } from "../core/index.cjs";
+import { QueryClient, QueryKey } from "@tanstack/vue-query";
+import { Ref } from "vue-demi";
 
+//#region src/vue/index.d.ts
 interface UseQueryCallbacksProps<TQueryFnData, TError> extends QueryCallbacks<TQueryFnData, TError> {
-    queryKey: QueryKey | Ref<QueryKey>;
-    /**
-     * QueryClient instance
-     */
-    queryClient?: QueryClient;
-    /**
-     * QueryClient Context Key for inject
-     */
-    queryClientKey?: string;
-    /**
-     * QueryClient ID for v5 useQueryClient()
-     */
-    queryClientId?: string;
+  queryKey: QueryKey | Ref<QueryKey>;
+  /**
+   * QueryClient instance
+   */
+  queryClient?: QueryClient;
+  /**
+   * QueryClient Context Key for inject
+   */
+  queryClientKey?: string;
+  /**
+   * QueryClient ID for v5 useQueryClient()
+   */
+  queryClientId?: string;
 }
 declare function useQueryCallbacks<TQueryFnData = unknown, TError = unknown>(props: UseQueryCallbacksProps<TQueryFnData, TError>): void;
-
-export { useQueryCallbacks };
-export type { UseQueryCallbacksProps };
+//#endregion
+export { UseQueryCallbacksProps, useQueryCallbacks };

package/dist/vue/index.d.ts

@@ -1,24 +1,23 @@
-import { QueryKey, QueryClient } from '@tanstack/vue-query';
-import { Ref } from 'vue-demi';
-import { QueryCallbacks } from '../core/index.js';
-import '@tanstack/query-core';
+import { QueryCallbacks } from "../core/index.js";
+import { QueryClient, QueryKey } from "@tanstack/vue-query";
+import { Ref } from "vue-demi";
 
+//#region src/vue/index.d.ts
 interface UseQueryCallbacksProps<TQueryFnData, TError> extends QueryCallbacks<TQueryFnData, TError> {
-    queryKey: QueryKey | Ref<QueryKey>;
-    /**
-     * QueryClient instance
-     */
-    queryClient?: QueryClient;
-    /**
-     * QueryClient Context Key for inject
-     */
-    queryClientKey?: string;
-    /**
-     * QueryClient ID for v5 useQueryClient()
-     */
-    queryClientId?: string;
+  queryKey: QueryKey | Ref<QueryKey>;
+  /**
+   * QueryClient instance
+   */
+  queryClient?: QueryClient;
+  /**
+   * QueryClient Context Key for inject
+   */
+  queryClientKey?: string;
+  /**
+   * QueryClient ID for v5 useQueryClient()
+   */
+  queryClientId?: string;
 }
 declare function useQueryCallbacks<TQueryFnData = unknown, TError = unknown>(props: UseQueryCallbacksProps<TQueryFnData, TError>): void;
-
-export { useQueryCallbacks };
-export type { UseQueryCallbacksProps };
+//#endregion
+export { UseQueryCallbacksProps, useQueryCallbacks };

package/dist/vue/index.js

@@ -0,0 +1,26 @@
+import { subscribeQueryCallbacks } from "../core/index.js";
+import { useQueryClient } from "@tanstack/vue-query";
+import { inject, unref, watch } from "vue-demi";
+
+//#region src/vue/index.ts
+function useQueryCallbacks(props) {
+	const queryClient = props.queryClient ?? (props.queryClientKey ? inject(props.queryClientKey, void 0) : void 0) ?? useQueryClient(props.queryClientId);
+	watch(() => unref(props.queryKey), (queryKey, _oldVal, onCleanup) => {
+		const unsubscribe = subscribeQueryCallbacks({
+			queryClient,
+			queryKey,
+			onSuccess: props.onSuccess,
+			onError: props.onError,
+			onSettled: props.onSettled
+		});
+		onCleanup(() => {
+			unsubscribe();
+		});
+	}, {
+		immediate: true,
+		flush: "sync"
+	});
+}
+
+//#endregion
+export { useQueryCallbacks };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "tanstack-query-callbacks",
   "type": "module",
-  "version": "0.2.1",
+  "version": "0.3.0",
   "author": "zhong666 <hi@zhong666.me>",
   "license": "MIT",
   "homepage": "https://github.com/aa900031/tanstack-query-callbacks#readme",
@@ -15,6 +15,7 @@
   "keywords": [
     "tanstack",
     "tanstack-query",
+    "svelte-query",
     "vue-query",
     "react-query"
   ],
@@ -22,29 +23,52 @@
   "exports": {
     ".": {
       "import": {
-        "types": "./dist/core/index.d.mts",
-        "default": "./dist/core/index.mjs"
+        "types": "./dist/core/index.d.ts",
+        "default": "./dist/core/index.js"
       },
       "require": {
         "types": "./dist/core/index.d.cts",
         "default": "./dist/core/index.cjs"
       }
     },
+    "./svelte": {
+      "import": {
+        "types": "./dist/svelte/index.d.ts",
+        "default": "./dist/svelte/index.js"
+      },
+      "require": {
+        "types": "./dist/svelte/index.d.cts",
+        "default": "./dist/svelte/index.cjs"
+      }
+    },
     "./vue": {
-      "import": "./dist/vue/index.mjs",
-      "require": "./dist/vue/index.cjs"
+      "import": {
+        "types": "./dist/vue/index.d.ts",
+        "default": "./dist/vue/index.js"
+      },
+      "require": {
+        "types": "./dist/vue/index.d.cts",
+        "default": "./dist/vue/index.cjs"
+      }
     },
     "./react": {
-      "import": "./dist/react/index.mjs",
-      "require": "./dist/react/index.cjs"
+      "import": {
+        "types": "./dist/react/index.d.ts",
+        "default": "./dist/react/index.js"
+      },
+      "require": {
+        "types": "./dist/react/index.d.cts",
+        "default": "./dist/react/index.cjs"
+      }
     }
   },
   "main": "dist/core/index.cjs",
-  "module": "dist/core/index.mjs",
+  "module": "dist/core/index.js",
   "types": "dist/core/index.d.ts",
   "files": [
     "dist",
     "react.d.ts",
+    "svelte.d.ts",
     "vue.d.ts"
   ],
   "publishConfig": {
@@ -53,15 +77,20 @@
   "peerDependencies": {
     "@tanstack/query-core": "^4.* || ^5.*",
     "@tanstack/react-query": "^4.* || ^5.*",
+    "@tanstack/svelte-query": "^4.* || ^5.*",
     "@tanstack/vue-query": "^4.* || ^5.*",
     "@vue/composition-api": "^1.1.0",
     "react": "^18.0.0",
+    "svelte": "^3.0.0 || ^4.0.0 || ^5.0.0",
     "vue": "^2.6.12 || ^3.2.0"
   },
   "peerDependenciesMeta": {
     "@tanstack/react-query": {
       "optional": true
     },
+    "@tanstack/svelte-query": {
+      "optional": true
+    },
     "@tanstack/vue-query": {
       "optional": true
     },
@@ -71,48 +100,55 @@
     "react": {
       "optional": true
     },
+    "svelte": {
+      "optional": true
+    },
     "vue": {
       "optional": true
     }
   },
   "devDependencies": {
-    "@aa900031/eslint-config": "^3.1.0",
-    "@release-it/conventional-changelog": "^9.0.4",
-    "@tanstack/query-core": "^5.72.1",
-    "@tanstack/query-core-v4": "npm:@tanstack/query-core@^4.36.1",
-    "@tanstack/react-query": "^5.72.1",
-    "@tanstack/react-query-v4": "npm:@tanstack/react-query@^4.36.1",
-    "@tanstack/vue-query": "^5.72.1",
-    "@tanstack/vue-query-v4": "npm:@tanstack/vue-query@^4.37.1",
+    "@aa900031/eslint-config": "^6.0.0",
+    "@aa900031/release-it-config": "^0.1.1",
+    "@sveltejs/vite-plugin-svelte": "^5.1.1",
+    "@tanstack/query-core": "^5.90.20",
+    "@tanstack/query-core-v4": "npm:@tanstack/query-core@^4.41.0",
+    "@tanstack/react-query": "^5.90.10",
+    "@tanstack/react-query-v4": "npm:@tanstack/react-query@^4.42.0",
+    "@tanstack/svelte-query": "^6.0.18",
+    "@tanstack/vue-query": "^5.91.2",
+    "@tanstack/vue-query-v4": "npm:@tanstack/vue-query@^4.41.0",
     "@testing-library/react": "14.3.1",
+    "@testing-library/svelte": "^5.2.7",
     "@testing-library/vue": "^8.1.0",
-    "@tsconfig/node18": "^18.2.4",
-    "@types/node": "^18.19.86",
-    "@types/react": "^18.3.20",
-    "@types/react-dom": "^18.3.6",
-    "@vitest/coverage-istanbul": "^3.1.1",
-    "@vitest/ui": "^3.1.1",
+    "@tsconfig/node18": "^18.2.5",
+    "@types/node": "^18.19.130",
+    "@types/react": "^18.3.28",
+    "@types/react-dom": "^18.3.7",
+    "@vitest/coverage-istanbul": "^3.2.4",
+    "@vitest/ui": "^3.2.4",
     "@vue/composition-api": "^1.7.2",
-    "conventional-changelog-unjs": "^1.0.0",
-    "eslint": "^9.24.0",
-    "happy-dom": "^17.4.4",
-    "npm-run-all2": "^7.0.2",
+    "eslint": "^9.39.3",
+    "happy-dom": "^20.7.0",
+    "npm-run-all2": "^8.0.4",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
-    "release-it": "^17.11.0",
-    "typescript": "^5.8.3",
-    "unbuild": "^3.5.0",
-    "vitest": "^3.1.1",
-    "vue": "^3.5.13",
-    "vue-2": "npm:vue@~2.6.12",
+    "release-it": "^19.2.4",
+    "svelte": "^5.53.0",
+    "tsdown": "^0.20.0",
+    "typescript": "^5.9.3",
+    "typescript-svelte-plugin": "^0.3.50",
+    "vitest": "^3.2.4",
+    "vue": "^3.5.28",
+    "vue-2": "npm:vue@~2.6.14",
     "vue-2.7": "npm:vue@~2.7.16"
   },
   "resolutions": {
     "vue-demi": "latest"
   },
   "scripts": {
-    "build": "unbuild",
-    "test": "vitest run --coverage",
+    "build": "tsdown",
+    "test": "vitest run",
     "test:vue": "vue-demi-switch 3 && vitest run --dir ./src/vue",
     "test:vue-2": "vue-demi-switch 2 vue-2 && vitest run --dir ./src/vue",
     "test:vue-2.7": "vue-demi-switch 2.7 vue-2.7 && vitest run --dir ./src/vue",
@@ -120,7 +156,7 @@
     "dev:test-vue": "vue-demi-switch 3 vue && vitest --dir ./src/vue",
     "dev:test-vue-2": "vue-demi-switch 2 vue-2 && vitest --dir ./src/vue",
     "dev:test-vue-2.7": "vue-demi-switch 2.7 vue-2.7 && vitest --dir ./src/vue",
-    "release": "release-it --ci",
+    "release": "release-it",
     "lint": "eslint . --cache --cache-location ./node_modules/.cache/eslint",
     "posttest:vue-2": "vue-demi-switch 3",
     "posttest:vue-2.7": "vue-demi-switch 3",

package/svelte.d.ts

@@ -0,0 +1,3 @@
+// eslint-disable-next-line ts/ban-ts-comment
+// @ts-ignore
+export * from './dist/svelte'

package/dist/core/index.d.mts

@@ -1,18 +0,0 @@
-import { QueryClient, QueryKey } from '@tanstack/query-core';
-
-type QuerySuccessHandler<TQueryFnData> = (data: TQueryFnData) => void;
-type QueryErrorHandler<TError> = (err: TError) => void;
-type QuerySettledHandler<TQueryFnData, TError> = (data: TQueryFnData | undefined, error: TError | null) => void;
-interface QueryCallbacks<TQueryFnData, TError> {
-    onSuccess?: QuerySuccessHandler<TQueryFnData>;
-    onError?: QueryErrorHandler<TError>;
-    onSettled?: QuerySettledHandler<TQueryFnData, TError>;
-}
-interface SubscribeQueryCallbacksProps<TQueryFnData, TError> extends QueryCallbacks<TQueryFnData, TError> {
-    queryClient: QueryClient;
-    queryKey: QueryKey;
-}
-declare function subscribeQueryCallbacks<TQueryFnData = unknown, TError = unknown>({ queryClient, queryKey, onSuccess, onError, onSettled, }: SubscribeQueryCallbacksProps<TQueryFnData, TError>): () => void;
-
-export { subscribeQueryCallbacks };
-export type { QueryCallbacks, QueryErrorHandler, QuerySettledHandler, QuerySuccessHandler, SubscribeQueryCallbacksProps };

package/dist/core/index.mjs

@@ -1,40 +0,0 @@
-import { matchQuery, isCancelledError } from '@tanstack/query-core';
-
-function subscribeQueryCallbacks({
-  queryClient,
-  queryKey,
-  onSuccess,
-  onError,
-  onSettled
-}) {
-  if (!onSuccess && !onError && !onSettled)
-    return noop;
-  const cache = queryClient.getQueryCache();
-  const unsubscribe = cache.subscribe((event) => {
-    if (event.type !== "updated")
-      return;
-    if (!matchQuery({ queryKey, exact: true }, event.query))
-      return;
-    switch (event.action.type) {
-      case "success": {
-        if (!event.action.manual) {
-          onSuccess?.(event.action.data);
-          onSettled?.(event.action.data, null);
-        }
-        break;
-      }
-      case "error": {
-        if (!isCancelledError(event.action.error)) {
-          onError?.(event.action.error);
-          onSettled?.(void 0, event.action.error);
-        }
-        break;
-      }
-    }
-  });
-  return unsubscribe;
-}
-function noop() {
-}
-
-export { subscribeQueryCallbacks };

package/dist/react/index.d.mts

@@ -1,20 +0,0 @@
-import { QueryKey, QueryClient } from '@tanstack/react-query';
-import { Context } from 'react';
-import { QueryCallbacks } from '../core/index.mjs';
-import '@tanstack/query-core';
-
-interface UseQueryCallbacksProps<TQueryFnData, TError> extends QueryCallbacks<TQueryFnData, TError> {
-    queryKey: QueryKey;
-    /**
-     * QueryClient instance
-     */
-    queryClient?: QueryClient;
-    /**
-     * QueryClient context for v4
-     */
-    context?: Context<QueryClient | undefined>;
-}
-declare function useQueryCallbacks<TQueryFnData = unknown, TError = unknown>(props: UseQueryCallbacksProps<TQueryFnData, TError>): void;
-
-export { useQueryCallbacks };
-export type { UseQueryCallbacksProps };

package/dist/react/index.mjs

@@ -1,27 +0,0 @@
-import { useQueryClient } from '@tanstack/react-query';
-import { useEffect } from 'react';
-import { subscribeQueryCallbacks } from '../core/index.mjs';
-import '@tanstack/query-core';
-
-function useQueryCallbacks(props) {
-  const queryClient = useQueryClient(
-    props.context ? { context: props.context } : props.queryClient
-    // for v5
-  );
-  useEffect(() => {
-    return subscribeQueryCallbacks({
-      queryClient,
-      queryKey: props.queryKey,
-      onSuccess: props.onSuccess,
-      onError: props.onError,
-      onSettled: props.onSettled
-    });
-  }, [
-    props.queryKey,
-    props.onSuccess,
-    props.onError,
-    props.onSettled
-  ]);
-}
-
-export { useQueryCallbacks };

package/dist/vue/index.d.mts

@@ -1,24 +0,0 @@
-import { QueryKey, QueryClient } from '@tanstack/vue-query';
-import { Ref } from 'vue-demi';
-import { QueryCallbacks } from '../core/index.mjs';
-import '@tanstack/query-core';
-
-interface UseQueryCallbacksProps<TQueryFnData, TError> extends QueryCallbacks<TQueryFnData, TError> {
-    queryKey: QueryKey | Ref<QueryKey>;
-    /**
-     * QueryClient instance
-     */
-    queryClient?: QueryClient;
-    /**
-     * QueryClient Context Key for inject
-     */
-    queryClientKey?: string;
-    /**
-     * QueryClient ID for v5 useQueryClient()
-     */
-    queryClientId?: string;
-}
-declare function useQueryCallbacks<TQueryFnData = unknown, TError = unknown>(props: UseQueryCallbacksProps<TQueryFnData, TError>): void;
-
-export { useQueryCallbacks };
-export type { UseQueryCallbacksProps };

package/dist/vue/index.mjs

@@ -1,26 +0,0 @@
-import { useQueryClient } from '@tanstack/vue-query';
-import { inject, watch, unref } from 'vue-demi';
-import { subscribeQueryCallbacks } from '../core/index.mjs';
-import '@tanstack/query-core';
-
-function useQueryCallbacks(props) {
-  const queryClient = props.queryClient ?? (props.queryClientKey ? inject(props.queryClientKey, void 0) : void 0) ?? useQueryClient(props.queryClientId);
-  watch(
-    () => unref(props.queryKey),
-    (queryKey, _oldVal, onCleanup) => {
-      const unsubscribe = subscribeQueryCallbacks({
-        queryClient,
-        queryKey,
-        onSuccess: props.onSuccess,
-        onError: props.onError,
-        onSettled: props.onSettled
-      });
-      onCleanup(() => {
-        unsubscribe();
-      });
-    },
-    { immediate: true }
-  );
-}
-
-export { useQueryCallbacks };