tanstack-query-callbacks 0.1.0-beta.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) zhong666 <hi@zhong666.me> and bouzu contributors
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,3 @@
+# tanstack-query-callbacks
+
+🚧

package/dist/index.cjs

@@ -0,0 +1,42 @@
+'use strict';
+
+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() {
+}
+
+exports.subscribeQueryCallbacks = subscribeQueryCallbacks;

package/dist/index.d.cts

@@ -0,0 +1,17 @@
+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 { type QueryCallbacks, type QueryErrorHandler, type QuerySettledHandler, type QuerySuccessHandler, type SubscribeQueryCallbacksProps, subscribeQueryCallbacks };

package/dist/index.d.mts

@@ -0,0 +1,17 @@
+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 { type QueryCallbacks, type QueryErrorHandler, type QuerySettledHandler, type QuerySuccessHandler, type SubscribeQueryCallbacksProps, subscribeQueryCallbacks };

package/dist/index.d.ts

@@ -0,0 +1,17 @@
+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 { type QueryCallbacks, type QueryErrorHandler, type QuerySettledHandler, type QuerySuccessHandler, type SubscribeQueryCallbacksProps, subscribeQueryCallbacks };

package/dist/index.mjs

@@ -0,0 +1,40 @@
+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.cjs

@@ -0,0 +1,26 @@
+'use strict';
+
+const react = require('react');
+const reactQuery = require('@tanstack/react-query');
+const index = require('../index.cjs');
+require('@tanstack/query-core');
+
+function useQueryCallbacks(props) {
+  const queryClient = reactQuery.useQueryClient(props.queryClient);
+  react.useEffect(() => {
+    return 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;

package/dist/react/index.d.cts

@@ -0,0 +1,14 @@
+import { QueryKey, QueryClient } from '@tanstack/react-query';
+import { QueryCallbacks } from '../index.cjs';
+import '@tanstack/query-core';
+
+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;
+
+export { type UseQueryCallbacksProps, useQueryCallbacks };

package/dist/react/index.d.mts

@@ -0,0 +1,14 @@
+import { QueryKey, QueryClient } from '@tanstack/react-query';
+import { QueryCallbacks } from '../index.mjs';
+import '@tanstack/query-core';
+
+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;
+
+export { type UseQueryCallbacksProps, useQueryCallbacks };

package/dist/react/index.d.ts

@@ -0,0 +1,14 @@
+import { QueryKey, QueryClient } from '@tanstack/react-query';
+import { QueryCallbacks } from '../index.js';
+import '@tanstack/query-core';
+
+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;
+
+export { type UseQueryCallbacksProps, useQueryCallbacks };

package/dist/react/index.mjs

@@ -0,0 +1,24 @@
+import { useEffect } from 'react';
+import { useQueryClient } from '@tanstack/react-query';
+import { subscribeQueryCallbacks } from '../index.mjs';
+import '@tanstack/query-core';
+
+function useQueryCallbacks(props) {
+  const queryClient = useQueryClient(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
+  ]);
+}
+
+export { useQueryCallbacks };

package/dist/vue/index.cjs

@@ -0,0 +1,28 @@
+'use strict';
+
+const vueDemi = require('vue-demi');
+const vueQuery = require('@tanstack/vue-query');
+const index = require('../index.cjs');
+require('@tanstack/query-core');
+
+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 = index.subscribeQueryCallbacks({
+        queryClient,
+        queryKey,
+        onSuccess: props.onSuccess,
+        onError: props.onError,
+        onSettled: props.onSettled
+      });
+      onCleanup(() => {
+        unsubscribe();
+      });
+    },
+    { immediate: true }
+  );
+}
+
+exports.useQueryCallbacks = useQueryCallbacks;

package/dist/vue/index.d.cts

@@ -0,0 +1,23 @@
+import { MaybeRef } from 'vue-demi';
+import { QueryKey, QueryClient } from '@tanstack/vue-query';
+import { QueryCallbacks } from '../index.cjs';
+import '@tanstack/query-core';
+
+interface UseQueryCallbacksProps<TQueryFnData, TError> extends QueryCallbacks<TQueryFnData, TError> {
+    queryKey: MaybeRef<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 { type UseQueryCallbacksProps, useQueryCallbacks };

package/dist/vue/index.d.mts

@@ -0,0 +1,23 @@
+import { MaybeRef } from 'vue-demi';
+import { QueryKey, QueryClient } from '@tanstack/vue-query';
+import { QueryCallbacks } from '../index.mjs';
+import '@tanstack/query-core';
+
+interface UseQueryCallbacksProps<TQueryFnData, TError> extends QueryCallbacks<TQueryFnData, TError> {
+    queryKey: MaybeRef<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 { type UseQueryCallbacksProps, useQueryCallbacks };

package/dist/vue/index.d.ts

@@ -0,0 +1,23 @@
+import { MaybeRef } from 'vue-demi';
+import { QueryKey, QueryClient } from '@tanstack/vue-query';
+import { QueryCallbacks } from '../index.js';
+import '@tanstack/query-core';
+
+interface UseQueryCallbacksProps<TQueryFnData, TError> extends QueryCallbacks<TQueryFnData, TError> {
+    queryKey: MaybeRef<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 { type UseQueryCallbacksProps, useQueryCallbacks };

package/dist/vue/index.mjs

@@ -0,0 +1,26 @@
+import { inject, watch, unref } from 'vue-demi';
+import { useQueryClient } from '@tanstack/vue-query';
+import { subscribeQueryCallbacks } from '../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 };

package/package.json

@@ -0,0 +1,101 @@
+{
+  "name": "tanstack-query-callbacks",
+  "type": "module",
+  "version": "0.1.0-beta.0",
+  "packageManager": "pnpm@8.10.0",
+  "author": "zhong666 <hi@zhong666.me>",
+  "license": "MIT",
+  "keywords": [
+    "tanstack",
+    "tanstack-query",
+    "vue-query",
+    "react-query"
+  ],
+  "sideEffects": false,
+  "exports": {
+    ".": {
+      "import": {
+        "types": "./dist/index.d.mts",
+        "default": "./dist/index.mjs"
+      },
+      "require": {
+        "types": "./dist/index.d.cts",
+        "default": "./dist/index.cjs"
+      }
+    },
+    "./vue": {
+      "import": "./dist/vue/index.mjs",
+      "require": "./dist/vue/index.cjs"
+    },
+    "./react": {
+      "import": "./dist/react/index.mjs",
+      "require": "./dist/react/index.cjs"
+    }
+  },
+  "main": "dist/index.cjs",
+  "module": "dist/index.mjs",
+  "types": "dist/index.d.ts",
+  "files": [
+    "dist",
+    "vue.d.ts",
+    "react.d.ts"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "peerDependencies": {
+    "@tanstack/query-core": "^5.*",
+    "@tanstack/vue-query": "^5.*",
+    "@tanstack/react-query": "^5.*",
+    "@vue/composition-api": "^1.1.0",
+    "vue": "^2.6.12 || ^3.2.0",
+    "react": "^18.0.0"
+  },
+  "peerDependenciesMeta": {
+    "@tanstack/vue-query": {
+      "optional": true
+    },
+    "@tanstack/react-query": {
+      "optional": true
+    },
+    "@vue/composition-api": {
+      "optional": true
+    },
+    "vue": {
+      "optional": true
+    },
+    "react": {
+      "optional": true
+    }
+  },
+  "devDependencies": {
+    "@aa900031/eslint-config": "^1.0.1",
+    "@release-it/conventional-changelog": "^7.0.2",
+    "@tanstack/query-core": "^5.14.2",
+    "@tanstack/vue-query": "^5.14.2",
+    "@tanstack/react-query": "^5.14.2",
+    "@testing-library/vue": "^8.0.1",
+    "@testing-library/react": "14.1.2",
+    "@tsconfig/node18": "^18.2.2",
+    "@types/node": "^18.18.7",
+    "@types/react": "^18.2.45",
+    "@types/react-dom": "^18.2.18",
+    "conventional-changelog-unjs": "^0.1.0",
+    "eslint": "^8.52.0",
+    "happy-dom": "^12.10.3",
+    "release-it": "^16.2.1",
+    "typescript": "^5.2.2",
+    "unbuild": "^2.0.0",
+    "vitest": "^1.1.0",
+    "vue": "^3.3.13",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  },
+  "scripts": {
+    "build": "unbuild",
+    "test": "vitest run",
+    "dev:test": "vitest",
+    "release": "release-it --ci",
+    "lint": "eslint . --cache --cache-location ./node_modules/.cache/eslint"
+  }
+}

package/react.d.ts

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

package/vue.d.ts

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