tanstack-query-callbacks 0.1.0 → 0.2.0

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/react/index.cjs

@@ -2,13 +2,16 @@
 
 const react = require('react');
 const reactQuery = require('@tanstack/react-query');
-const index = require('../index.cjs');
+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 { Context } from 'react';
 import { QueryKey, QueryClient } from '@tanstack/react-query';
-import { QueryCallbacks } from '../index.cjs';
+import { QueryCallbacks } from '../core/index.cjs';
 import '@tanstack/query-core';
 
 interface UseQueryCallbacksProps<TQueryFnData, TError> extends QueryCallbacks<TQueryFnData, TError> {
@@ -8,6 +9,10 @@ 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;
 

package/dist/react/index.d.mts

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

package/dist/react/index.d.ts

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

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 { 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

@@ -2,7 +2,7 @@
 
 const vueDemi = require('vue-demi');
 const vueQuery = require('@tanstack/vue-query');
-const index = require('../index.cjs');
+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,6 +1,6 @@
 import { MaybeRef } from 'vue-demi';
 import { QueryKey, QueryClient } from '@tanstack/vue-query';
-import { QueryCallbacks } from '../index.cjs';
+import { QueryCallbacks } from '../core/index.cjs';
 import '@tanstack/query-core';
 
 interface UseQueryCallbacksProps<TQueryFnData, TError> extends QueryCallbacks<TQueryFnData, TError> {

package/dist/vue/index.d.mts

@@ -1,6 +1,6 @@
 import { MaybeRef } from 'vue-demi';
 import { QueryKey, QueryClient } from '@tanstack/vue-query';
-import { QueryCallbacks } from '../index.mjs';
+import { QueryCallbacks } from '../core/index.mjs';
 import '@tanstack/query-core';
 
 interface UseQueryCallbacksProps<TQueryFnData, TError> extends QueryCallbacks<TQueryFnData, TError> {

package/dist/vue/index.d.ts

@@ -1,6 +1,6 @@
 import { MaybeRef } from 'vue-demi';
 import { QueryKey, QueryClient } from '@tanstack/vue-query';
-import { QueryCallbacks } from '../index.js';
+import { QueryCallbacks } from '../core/index.js';
 import '@tanstack/query-core';
 
 interface UseQueryCallbacksProps<TQueryFnData, TError> extends QueryCallbacks<TQueryFnData, TError> {

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 { subscribeQueryCallbacks } from '../core/index.mjs';
 import '@tanstack/query-core';
 
 function useQueryCallbacks(props) {

package/package.json

@@ -1,8 +1,8 @@
 {
   "name": "tanstack-query-callbacks",
   "type": "module",
-  "version": "0.1.0",
-  "packageManager": "pnpm@8.10.0",
+  "version": "0.2.0",
+  "packageManager": "pnpm@8.15.1",
   "author": "zhong666 <hi@zhong666.me>",
   "license": "MIT",
   "keywords": [
@@ -15,12 +15,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 +32,84 @@
       "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",
+    "@aa900031/eslint-config": "^1.3.0",
     "@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",
+    "@tanstack/query-core": "^5.18.1",
+    "@tanstack/query-core-v4": "npm:@tanstack/query-core@^4.36.1",
+    "@tanstack/react-query": "^5.18.1",
+    "@tanstack/react-query-v4": "npm:@tanstack/react-query@^4.36.1",
+    "@tanstack/vue-query": "^5.18.1",
+    "@tanstack/vue-query-v4": "npm:@tanstack/vue-query@^4.37.1",
+    "@testing-library/react": "14.2.1",
     "@testing-library/vue": "^8.0.1",
     "@tsconfig/node18": "^18.2.2",
-    "@types/node": "^18.18.7",
-    "@types/react": "^18.2.45",
+    "@types/node": "^18.19.14",
+    "@types/react": "^18.2.51",
     "@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",
+    "@vitest/coverage-istanbul": "^1.2.2",
+    "@vitest/ui": "^1.2.2",
+    "@vue/composition-api": "^1.7.2",
+    "conventional-changelog-unjs": "^0.1.1",
+    "eslint": "^8.56.0",
     "happy-dom": "^12.10.3",
+    "npm-run-all2": "^6.1.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "release-it": "^16.2.1",
-    "typescript": "^5.2.2",
+    "release-it": "^16.3.0",
+    "typescript": "^5.3.3",
     "unbuild": "^2.0.0",
-    "vitest": "^1.1.0",
-    "vue": "^3.3.13"
+    "vitest": "^1.2.2",
+    "vue": "^3.4.15",
+    "vue-2": "npm:vue@2.7",
+    "vue-2.7": "npm:vue@2.7"
   },
   "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",
     "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"
   }
 }