tanstack-query-callbacks 0.1.0 → 0.2.1

package/README.md

@@ -3,11 +3,17 @@
 [![npm version][npm-version-src]][npm-version-href]
 [![npm downloads][npm-downloads-src]][npm-downloads-href]
 [![bundle][bundle-src]][bundle-href]
+[![coverage][coverage-src]][coverage-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).
 
+# Features
+
+- Support Tanstack/Query v4, v5
+- Support Vue, React
+
 ## Instanll
 
 ```shell
@@ -21,7 +27,7 @@ pnpm add tanstack-query-callbacks
 ## Usage (Vue)
 
 ```vue
-<script setup lang=ts>
+<script setup lang="ts">
 import { useQuery } from '@tanstack/vue-query'
 import { useQueryCallbacks } from 'tanstack-query-callbacks/vue'
 const queryKey = ['foo']
@@ -72,3 +78,5 @@ 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-href]: https://codecov.io/gh/aa900031/tanstack-query-callbacks

package/dist/{index.d.cts → core/index.d.cts}

@@ -14,4 +14,5 @@ interface SubscribeQueryCallbacksProps<TQueryFnData, TError> extends QueryCallba
 }
 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 };
+export { subscribeQueryCallbacks };
+export type { QueryCallbacks, QueryErrorHandler, QuerySettledHandler, QuerySuccessHandler, SubscribeQueryCallbacksProps };

package/dist/{index.d.mts → core/index.d.mts}

@@ -14,4 +14,5 @@ interface SubscribeQueryCallbacksProps<TQueryFnData, TError> extends QueryCallba
 }
 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 };
+export { subscribeQueryCallbacks };
+export type { QueryCallbacks, QueryErrorHandler, QuerySettledHandler, QuerySuccessHandler, SubscribeQueryCallbacksProps };

package/dist/{index.d.ts → core/index.d.ts}

@@ -14,4 +14,5 @@ interface SubscribeQueryCallbacksProps<TQueryFnData, TError> extends QueryCallba
 }
 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 };
+export { subscribeQueryCallbacks };
+export type { QueryCallbacks, QueryErrorHandler, QuerySettledHandler, QuerySuccessHandler, SubscribeQueryCallbacksProps };

package/dist/react/index.cjs

@@ -1,14 +1,17 @@
 'use strict';
 
-const react = require('react');
 const reactQuery = require('@tanstack/react-query');
-const index = require('../index.cjs');
+const react = require('react');
+const core_index = require('../core/index.cjs');
 require('@tanstack/query-core');
 
 function useQueryCallbacks(props) {
-  const queryClient = reactQuery.useQueryClient(props.queryClient);
+  const queryClient = reactQuery.useQueryClient(
+    props.context ? { context: props.context } : props.queryClient
+    // for v5
+  );
   react.useEffect(() => {
-    return index.subscribeQueryCallbacks({
+    return core_index.subscribeQueryCallbacks({
       queryClient,
       queryKey: props.queryKey,
       onSuccess: props.onSuccess,

package/dist/react/index.d.cts

@@ -1,5 +1,6 @@
 import { QueryKey, QueryClient } from '@tanstack/react-query';
-import { QueryCallbacks } from '../index.cjs';
+import { Context } from 'react';
+import { QueryCallbacks } from '../core/index.cjs';
 import '@tanstack/query-core';
 
 interface UseQueryCallbacksProps<TQueryFnData, TError> extends QueryCallbacks<TQueryFnData, TError> {
@@ -8,7 +9,12 @@ interface UseQueryCallbacksProps<TQueryFnData, TError> extends QueryCallbacks<TQ
      * 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 { type UseQueryCallbacksProps, useQueryCallbacks };
+export { useQueryCallbacks };
+export type { UseQueryCallbacksProps };

package/dist/react/index.d.mts

@@ -1,5 +1,6 @@
 import { QueryKey, QueryClient } from '@tanstack/react-query';
-import { QueryCallbacks } from '../index.mjs';
+import { Context } from 'react';
+import { QueryCallbacks } from '../core/index.mjs';
 import '@tanstack/query-core';
 
 interface UseQueryCallbacksProps<TQueryFnData, TError> extends QueryCallbacks<TQueryFnData, TError> {
@@ -8,7 +9,12 @@ interface UseQueryCallbacksProps<TQueryFnData, TError> extends QueryCallbacks<TQ
      * 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 { type UseQueryCallbacksProps, useQueryCallbacks };
+export { useQueryCallbacks };
+export type { UseQueryCallbacksProps };

package/dist/react/index.d.ts

@@ -1,5 +1,6 @@
 import { QueryKey, QueryClient } from '@tanstack/react-query';
-import { QueryCallbacks } from '../index.js';
+import { Context } from 'react';
+import { QueryCallbacks } from '../core/index.js';
 import '@tanstack/query-core';
 
 interface UseQueryCallbacksProps<TQueryFnData, TError> extends QueryCallbacks<TQueryFnData, TError> {
@@ -8,7 +9,12 @@ interface UseQueryCallbacksProps<TQueryFnData, TError> extends QueryCallbacks<TQ
      * 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 { type UseQueryCallbacksProps, useQueryCallbacks };
+export { useQueryCallbacks };
+export type { UseQueryCallbacksProps };

package/dist/react/index.mjs

@@ -1,10 +1,13 @@
-import { useEffect } from 'react';
 import { useQueryClient } from '@tanstack/react-query';
-import { subscribeQueryCallbacks } from '../index.mjs';
+import { useEffect } from 'react';
+import { subscribeQueryCallbacks } from '../core/index.mjs';
 import '@tanstack/query-core';
 
 function useQueryCallbacks(props) {
-  const queryClient = useQueryClient(props.queryClient);
+  const queryClient = useQueryClient(
+    props.context ? { context: props.context } : props.queryClient
+    // for v5
+  );
   useEffect(() => {
     return subscribeQueryCallbacks({
       queryClient,

package/dist/vue/index.cjs

@@ -1,8 +1,8 @@
 'use strict';
 
-const vueDemi = require('vue-demi');
 const vueQuery = require('@tanstack/vue-query');
-const index = require('../index.cjs');
+const vueDemi = require('vue-demi');
+const core_index = require('../core/index.cjs');
 require('@tanstack/query-core');
 
 function useQueryCallbacks(props) {
@@ -10,7 +10,7 @@ function useQueryCallbacks(props) {
   vueDemi.watch(
     () => vueDemi.unref(props.queryKey),
     (queryKey, _oldVal, onCleanup) => {
-      const unsubscribe = index.subscribeQueryCallbacks({
+      const unsubscribe = core_index.subscribeQueryCallbacks({
         queryClient,
         queryKey,
         onSuccess: props.onSuccess,

package/dist/vue/index.d.cts

@@ -1,10 +1,10 @@
-import { MaybeRef } from 'vue-demi';
 import { QueryKey, QueryClient } from '@tanstack/vue-query';
-import { QueryCallbacks } from '../index.cjs';
+import { Ref } from 'vue-demi';
+import { QueryCallbacks } from '../core/index.cjs';
 import '@tanstack/query-core';
 
 interface UseQueryCallbacksProps<TQueryFnData, TError> extends QueryCallbacks<TQueryFnData, TError> {
-    queryKey: MaybeRef<QueryKey>;
+    queryKey: QueryKey | Ref<QueryKey>;
     /**
      * QueryClient instance
      */
@@ -20,4 +20,5 @@ interface UseQueryCallbacksProps<TQueryFnData, TError> extends QueryCallbacks<TQ
 }
 declare function useQueryCallbacks<TQueryFnData = unknown, TError = unknown>(props: UseQueryCallbacksProps<TQueryFnData, TError>): void;
 
-export { type UseQueryCallbacksProps, useQueryCallbacks };
+export { useQueryCallbacks };
+export type { UseQueryCallbacksProps };

package/dist/vue/index.d.mts

@@ -1,10 +1,10 @@
-import { MaybeRef } from 'vue-demi';
 import { QueryKey, QueryClient } from '@tanstack/vue-query';
-import { QueryCallbacks } from '../index.mjs';
+import { Ref } from 'vue-demi';
+import { QueryCallbacks } from '../core/index.mjs';
 import '@tanstack/query-core';
 
 interface UseQueryCallbacksProps<TQueryFnData, TError> extends QueryCallbacks<TQueryFnData, TError> {
-    queryKey: MaybeRef<QueryKey>;
+    queryKey: QueryKey | Ref<QueryKey>;
     /**
      * QueryClient instance
      */
@@ -20,4 +20,5 @@ interface UseQueryCallbacksProps<TQueryFnData, TError> extends QueryCallbacks<TQ
 }
 declare function useQueryCallbacks<TQueryFnData = unknown, TError = unknown>(props: UseQueryCallbacksProps<TQueryFnData, TError>): void;
 
-export { type UseQueryCallbacksProps, useQueryCallbacks };
+export { useQueryCallbacks };
+export type { UseQueryCallbacksProps };

package/dist/vue/index.d.ts

@@ -1,10 +1,10 @@
-import { MaybeRef } from 'vue-demi';
 import { QueryKey, QueryClient } from '@tanstack/vue-query';
-import { QueryCallbacks } from '../index.js';
+import { Ref } from 'vue-demi';
+import { QueryCallbacks } from '../core/index.js';
 import '@tanstack/query-core';
 
 interface UseQueryCallbacksProps<TQueryFnData, TError> extends QueryCallbacks<TQueryFnData, TError> {
-    queryKey: MaybeRef<QueryKey>;
+    queryKey: QueryKey | Ref<QueryKey>;
     /**
      * QueryClient instance
      */
@@ -20,4 +20,5 @@ interface UseQueryCallbacksProps<TQueryFnData, TError> extends QueryCallbacks<TQ
 }
 declare function useQueryCallbacks<TQueryFnData = unknown, TError = unknown>(props: UseQueryCallbacksProps<TQueryFnData, TError>): void;
 
-export { type UseQueryCallbacksProps, useQueryCallbacks };
+export { useQueryCallbacks };
+export type { UseQueryCallbacksProps };

package/dist/vue/index.mjs

@@ -1,6 +1,6 @@
-import { inject, watch, unref } from 'vue-demi';
 import { useQueryClient } from '@tanstack/vue-query';
-import { subscribeQueryCallbacks } from '../index.mjs';
+import { inject, watch, unref } from 'vue-demi';
+import { subscribeQueryCallbacks } from '../core/index.mjs';
 import '@tanstack/query-core';
 
 function useQueryCallbacks(props) {

package/package.json

@@ -1,10 +1,17 @@
 {
   "name": "tanstack-query-callbacks",
   "type": "module",
-  "version": "0.1.0",
-  "packageManager": "pnpm@8.10.0",
+  "version": "0.2.1",
   "author": "zhong666 <hi@zhong666.me>",
   "license": "MIT",
+  "homepage": "https://github.com/aa900031/tanstack-query-callbacks#readme",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/aa900031/tanstack-query-callbacks.git"
+  },
+  "bugs": {
+    "url": "https://github.com/aa900031/tanstack-query-callbacks/issues"
+  },
   "keywords": [
     "tanstack",
     "tanstack-query",
@@ -15,12 +22,12 @@
   "exports": {
     ".": {
       "import": {
-        "types": "./dist/index.d.mts",
-        "default": "./dist/index.mjs"
+        "types": "./dist/core/index.d.mts",
+        "default": "./dist/core/index.mjs"
       },
       "require": {
-        "types": "./dist/index.d.cts",
-        "default": "./dist/index.cjs"
+        "types": "./dist/core/index.d.cts",
+        "default": "./dist/core/index.cjs"
       }
     },
     "./vue": {
@@ -32,72 +39,92 @@
       "require": "./dist/react/index.cjs"
     }
   },
-  "main": "dist/index.cjs",
-  "module": "dist/index.mjs",
-  "types": "dist/index.d.ts",
+  "main": "dist/core/index.cjs",
+  "module": "dist/core/index.mjs",
+  "types": "dist/core/index.d.ts",
   "files": [
     "dist",
-    "vue.d.ts",
-    "react.d.ts"
+    "react.d.ts",
+    "vue.d.ts"
   ],
   "publishConfig": {
     "access": "public"
   },
   "peerDependencies": {
-    "@tanstack/query-core": "^5.*",
-    "@tanstack/react-query": "^5.*",
-    "@tanstack/vue-query": "^5.*",
+    "@tanstack/query-core": "^4.* || ^5.*",
+    "@tanstack/react-query": "^4.* || ^5.*",
+    "@tanstack/vue-query": "^4.* || ^5.*",
     "@vue/composition-api": "^1.1.0",
     "react": "^18.0.0",
     "vue": "^2.6.12 || ^3.2.0"
   },
   "peerDependenciesMeta": {
-    "@tanstack/vue-query": {
+    "@tanstack/react-query": {
       "optional": true
     },
-    "@tanstack/react-query": {
+    "@tanstack/vue-query": {
       "optional": true
     },
     "@vue/composition-api": {
       "optional": true
     },
-    "vue": {
+    "react": {
       "optional": true
     },
-    "react": {
+    "vue": {
       "optional": true
     }
   },
   "devDependencies": {
-    "@aa900031/eslint-config": "^1.0.1",
-    "@release-it/conventional-changelog": "^7.0.2",
-    "@tanstack/query-core": "^5.14.2",
-    "@tanstack/react-query": "^5.14.2",
-    "@tanstack/vue-query": "^5.14.2",
-    "@testing-library/react": "14.1.2",
-    "@testing-library/vue": "^8.0.1",
-    "@tsconfig/node18": "^18.2.2",
-    "@types/node": "^18.18.7",
-    "@types/react": "^18.2.45",
-    "@types/react-dom": "^18.2.18",
-    "@vitest/coverage-istanbul": "^1.1.0",
-    "@vitest/ui": "^1.1.0",
-    "conventional-changelog-unjs": "^0.1.0",
-    "eslint": "^8.52.0",
-    "happy-dom": "^12.10.3",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "release-it": "^16.2.1",
-    "typescript": "^5.2.2",
-    "unbuild": "^2.0.0",
-    "vitest": "^1.1.0",
-    "vue": "^3.3.13"
+    "@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",
+    "@testing-library/react": "14.3.1",
+    "@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",
+    "@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",
+    "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",
+    "vue-2.7": "npm:vue@~2.7.16"
+  },
+  "resolutions": {
+    "vue-demi": "latest"
   },
   "scripts": {
     "build": "unbuild",
     "test": "vitest run --coverage",
+    "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",
     "dev:test": "vitest",
+    "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",
-    "lint": "eslint . --cache --cache-location ./node_modules/.cache/eslint"
+    "lint": "eslint . --cache --cache-location ./node_modules/.cache/eslint",
+    "posttest:vue-2": "vue-demi-switch 3",
+    "posttest:vue-2.7": "vue-demi-switch 3",
+    "postdev:test-vue-2": "vue-demi-switch 3",
+    "postdev:test-vue-2.7": "vue-demi-switch 3"
   }
 }

package/react.d.ts

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

package/vue.d.ts

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