feat: bump react-query (v3.23.2 - v3.30.0) (#90)

* chore: bump deps

* test: fix open handles

* refactor: change b to strong

* chore: prettier

* feat: bump react-query (v3.23.2 - v3.30.0), fix types

* fix: restore defaults for overloads

* fix: downgrade vue-demi

.prettierignore

@@ -0,0 +1 @@
+.gitignore

commitlint.config.js

@@ -1 +1 @@
-module.exports = {extends: ['@commitlint/config-conventional']}
+module.exports = { extends: ["@commitlint/config-conventional"] };

examples/multi-client/src/Todos.vue

@@ -31,7 +31,9 @@ export default defineComponent({
 </script>
 
 <template>
-  <p>Turn on <b>network throttling</b> in dev-tools and press Refetch</p>
+  <p>
+    Turn on <strong>network throttling</strong> in dev-tools and press Refetch
+  </p>
   <button @click="refetch" :disabled="isFetching">
     {{ isFetching ? "Refetching..." : "Refetch" }}
   </button>

jest.config.ts

@@ -3,12 +3,13 @@ import type { Config } from "@jest/types";
 const config: Config.InitialOptions = {
   preset: "ts-jest",
   transform: {
-    "^.+\\.vue$": "vue-jest",
+    "^.+\\.vue$": "@vue/vue3-jest",
   },
   moduleFileExtensions: ["js", "ts", "vue"],
   moduleNameMapper: {
     "^@/(.*)": "<rootDir>/src/$1",
   },
+  testPathIgnorePatterns: ["test-utils.ts"],
   collectCoverage: true,
   collectCoverageFrom: [
     "src/**/*.{ts,vue}",

package.json

@@ -19,6 +19,7 @@
     "test": "npm run test:2 && npm run test:3",
     "test:2": "vue-demi-switch 2 vue2 && jest",
     "test:3": "vue-demi-switch 3 && jest",
+    "prettier": "prettier . --write",
     "verify": "npm run lint && npm run test && npm run build"
   },
   "repository": {
@@ -39,13 +40,13 @@
   },
   "homepage": "https://github.com/DamianOsipiuk/vue-query#readme",
   "dependencies": {
-    "match-sorter": "^6.3.0",
-    "react-query": "^3.23.2",
+    "match-sorter": "^6.3.1",
+    "react-query": "^3.30.0",
     "vue-demi": "^0.10.1"
   },
   "peerDependencies": {
     "@nuxtjs/composition-api": "^0.24.4",
-    "@vue/composition-api": "^1.0.0-rc.1",
+    "@vue/composition-api": "^1.0.0",
     "vue": "^2.0.0 || >=3.0.0"
   },
   "peerDependenciesMeta": {
@@ -57,34 +58,34 @@
     }
   },
   "devDependencies": {
-    "@commitlint/cli": "^13.1.0",
-    "@commitlint/config-conventional": "^13.1.0",
-    "@nuxtjs/composition-api": "^0.26.0",
-    "@rollup/plugin-node-resolve": "^13.0.4",
-    "@types/jest": "^26.0.21",
-    "@typescript-eslint/eslint-plugin": "^4.29.2",
-    "@typescript-eslint/parser": "^4.29.2",
-    "@vue/compiler-sfc": "^3.2.4",
-    "@vue/composition-api": "^1.1.1",
+    "@commitlint/cli": "^13.2.1",
+    "@commitlint/config-conventional": "^13.2.0",
+    "@nuxtjs/composition-api": "^0.29.3",
+    "@rollup/plugin-node-resolve": "^13.0.6",
+    "@types/jest": "^27.0.2",
+    "@typescript-eslint/eslint-plugin": "^5.1.0",
+    "@typescript-eslint/parser": "^5.1.0",
+    "@vue/compiler-sfc": "^3.2.20",
+    "@vue/composition-api": "^1.2.4",
     "@vue/eslint-config-prettier": "^6.0.0",
-    "@vue/eslint-config-typescript": "^7.0.0",
-    "eslint": "^7.32.0",
+    "@vue/eslint-config-typescript": "^8.0.0",
+    "eslint": "^8.1.0",
     "eslint-config-prettier": "^8.3.0",
-    "eslint-plugin-prettier": "^3.4.0",
-    "eslint-plugin-vue": "^7.16.0",
-    "husky": "^7.0.1",
-    "jest": "^26.6.3",
-    "prettier": "^2.3.2",
-    "rollup": "^2.56.2",
+    "eslint-plugin-prettier": "^4.0.0",
+    "eslint-plugin-vue": "^7.20.0",
+    "husky": "^7.0.4",
+    "jest": "^27.3.1",
+    "prettier": "^2.4.1",
+    "rollup": "^2.58.0",
     "rollup-plugin-auto-external": "^2.0.0",
     "rollup-plugin-postcss": "^4.0.1",
     "rollup-plugin-typescript2": "^0.30.0",
     "rollup-plugin-vue": "^6.0.0",
-    "ts-jest": "^26.5.4",
-    "ts-node": "^10.2.1",
-    "typescript": "^4.3.5",
-    "vue": "^3.2.4",
-    "vue-jest": "^5.0.0-alpha.10",
+    "ts-jest": "^27.0.7",
+    "ts-node": "^10.4.0",
+    "typescript": "^4.4.4",
+    "vue": "^3.2.20",
+    "@vue/vue3-jest": "27.0.0-alpha.1",
     "vue2": "npm:vue@2"
   }
 }

src/vue/__mocks__/useQueryClient.ts

@@ -1,5 +1,9 @@
 import { QueryClient } from "react-query/core";
 
-const queryClient = new QueryClient();
+const queryClient = new QueryClient({
+  defaultOptions: {
+    queries: { retry: 0, cacheTime: 10 },
+  },
+});
 
 export const useQueryClient = jest.fn(() => queryClient);

src/vue/__tests__/useInfiniteQuery.test.ts

@@ -1,6 +1,6 @@
 import { setLogger } from "react-query/core";
 
-import { noop, infiniteFetcher, flushPromises } from "@/test-utils";
+import { noop, infiniteFetcher, flushPromises } from "./test-utils";
 import { useInfiniteQuery } from "../useInfiniteQuery";
 
 jest.mock("../useQueryClient");

src/vue/__tests__/useIsFetching.test.ts

@@ -1,7 +1,7 @@
 import { onUnmounted } from "vue-demi";
 import { setLogger } from "react-query/core";
 
-import { flushPromises, simpleFetcher, noop } from "@/test-utils";
+import { flushPromises, simpleFetcher, noop } from "./test-utils";
 import { useQuery } from "../useQuery";
 import { useIsFetching } from "../useIsFetching";
 

src/vue/__tests__/useIsMutating.test.ts

@@ -1,7 +1,7 @@
 import { onUnmounted } from "vue-demi";
 import { setLogger } from "react-query/core";
 
-import { flushPromises, noop, successMutator } from "@/test-utils";
+import { flushPromises, noop, successMutator } from "./test-utils";
 import { useMutation } from "../useMutation";
 import { useIsMutating } from "../useIsMutating";
 import { useQueryClient } from "../useQueryClient";

src/vue/__tests__/useMutation.test.ts

@@ -5,7 +5,7 @@ import {
   flushPromises,
   noop,
   successMutator,
-} from "@/test-utils";
+} from "./test-utils";
 import { useMutation } from "../useMutation";
 
 jest.mock("../useQueryClient");

src/vue/__tests__/useQueries.test.ts

@@ -6,7 +6,7 @@ import {
   rejectFetcher,
   simpleFetcher,
   noop,
-} from "@/test-utils";
+} from "./test-utils";
 import { useQueries } from "../useQueries";
 
 jest.mock("../useQueryClient");
@@ -85,7 +85,6 @@ describe("useQueries", () => {
       {
         queryKey: "key21",
         queryFn: rejectFetcher,
-        retry: false,
       },
       {
         queryKey: "key22",
@@ -170,7 +169,6 @@ describe("useQueries", () => {
       },
     ];
     const queriesState = useQueries(queries);
-
     await flushPromises();
 
     expect(queriesState).toMatchObject([

src/vue/__tests__/useQuery.test.ts

@@ -12,7 +12,7 @@ import {
   rejectFetcher,
   simpleFetcher,
   noop,
-} from "@/test-utils";
+} from "./test-utils";
 import { useQuery } from "../useQuery";
 import { useBaseQuery } from "../useBaseQuery";
 
@@ -68,9 +68,7 @@ describe("useQuery", () => {
   });
 
   test("should reject and update reactive state", async () => {
-    const query = useQuery("key3", rejectFetcher, {
-      retry: false,
-    });
+    const query = useQuery("key3", rejectFetcher);
 
     await flushPromises();
 

src/vue/__tests__/utils.test.ts

@@ -1,4 +1,4 @@
-import { successMutator, simpleFetcher } from "@/test-utils";
+import { successMutator, simpleFetcher } from "./test-utils";
 import {
   isQueryKey,
   parseFilterArgs,

src/vue/useBaseQuery.ts

@@ -7,7 +7,7 @@ import {
   watchEffect,
 } from "vue-demi";
 
-import type { QueryObserver } from "react-query/core";
+import type { QueryObserver, QueryKey } from "react-query/core";
 import type {
   UseBaseQueryOptions as UBQO,
   UseQueryResult,
@@ -21,8 +21,11 @@ export type UseBaseQueryOptions<
   TQueryFnData = unknown,
   TError = unknown,
   TData = TQueryFnData,
-  TQueryData = unknown
-> = WithQueryClientKey<UBQO<TQueryFnData, TError, TData, TQueryData>>;
+  TQueryData = unknown,
+  TQueryKey extends QueryKey = QueryKey
+> = WithQueryClientKey<
+  UBQO<TQueryFnData, TError, TData, TQueryData, TQueryKey>
+>;
 
 export type UseQueryReturnType<
   TData,
@@ -32,8 +35,20 @@ export type UseQueryReturnType<
   suspense: () => Promise<Result>;
 };
 
-export function useBaseQuery<TQueryFnData, TError, TData, TQueryData>(
-  options: UseBaseQueryOptions<TQueryFnData, TError, TData, TQueryData>,
+export function useBaseQuery<
+  TQueryFnData,
+  TError,
+  TData,
+  TQueryData,
+  TQueryKey extends QueryKey
+>(
+  options: UseBaseQueryOptions<
+    TQueryFnData,
+    TError,
+    TData,
+    TQueryData,
+    TQueryKey
+  >,
   Observer: typeof QueryObserver
 ): UseQueryReturnType<TData, TError> {
   const queryClient = useQueryClient(options.queryClientKey);

src/vue/useInfiniteQuery.ts

@@ -8,6 +8,7 @@ import type {
 import type {
   UseInfiniteQueryOptions as UIQO,
   UseInfiniteQueryResult,
+  UseBaseQueryOptions,
 } from "react-query/types/react/types";
 
 import { useBaseQuery, UseQueryReturnType } from "./useBaseQuery";
@@ -18,41 +19,65 @@ import type { WithQueryClientKey } from "./types";
 export type UseInfiniteQueryOptions<
   TQueryFnData = unknown,
   TError = unknown,
-  TData = TQueryFnData
-> = WithQueryClientKey<UIQO<TQueryFnData, TError, TData>>;
+  TData = TQueryFnData,
+  TQueryKey extends QueryKey = QueryKey
+> = WithQueryClientKey<
+  UIQO<TQueryFnData, TError, TData, TQueryFnData, TQueryKey>
+>;
 
 export function useInfiniteQuery<
   TQueryFnData = unknown,
   TError = unknown,
-  TData = TQueryFnData
+  TData = TQueryFnData,
+  TQueryKey extends QueryKey = QueryKey
 >(
-  options: UseInfiniteQueryOptions<TQueryFnData, TError, TData>
+  options: UseInfiniteQueryOptions<TQueryFnData, TError, TData, TQueryKey>
 ): UseQueryReturnType<TData, TError, UseInfiniteQueryResult<TData, TError>>;
 export function useInfiniteQuery<
   TQueryFnData = unknown,
   TError = unknown,
-  TData = TQueryFnData
+  TData = TQueryFnData,
+  TQueryKey extends QueryKey = QueryKey
 >(
   queryKey: QueryKey,
-  options?: UseInfiniteQueryOptions<TQueryFnData, TError, TData>
+  options?: Omit<
+    UseInfiniteQueryOptions<TQueryFnData, TError, TData, TQueryKey>,
+    "queryKey"
+  >
 ): UseQueryReturnType<TData, TError, UseInfiniteQueryResult<TData, TError>>;
 export function useInfiniteQuery<
   TQueryFnData = unknown,
   TError = unknown,
-  TData = TQueryFnData
+  TData = TQueryFnData,
+  TQueryKey extends QueryKey = QueryKey
 >(
   queryKey: QueryKey,
-  queryFn: QueryFunction<TQueryFnData>,
-  options?: UseInfiniteQueryOptions<TQueryFnData, TError, TData>
+  queryFn: QueryFunction<TQueryFnData, TQueryKey>,
+  options?: Omit<
+    UseInfiniteQueryOptions<TQueryFnData, TError, TData, TQueryKey>,
+    "queryKey" | "queryFn"
+  >
 ): UseQueryReturnType<TData, TError, UseInfiniteQueryResult<TData, TError>>;
-export function useInfiniteQuery<TQueryFnData, TError, TData = TQueryFnData>(
-  arg1: QueryKey | UseInfiniteQueryOptions<TQueryFnData, TError, TData>,
+export function useInfiniteQuery<
+  TQueryFnData,
+  TError,
+  TData = TQueryFnData,
+  TQueryKey extends QueryKey = QueryKey
+>(
+  arg1:
+    | TQueryKey
+    | UseInfiniteQueryOptions<TQueryFnData, TError, TData, TQueryKey>,
   arg2?:
-    | QueryFunction<TQueryFnData>
-    | UseInfiniteQueryOptions<TQueryFnData, TError, TData>,
-  arg3?: UseInfiniteQueryOptions<TQueryFnData, TError, TData>
+    | QueryFunction<TQueryFnData, TQueryKey>
+    | UseInfiniteQueryOptions<TQueryFnData, TError, TData, TQueryKey>,
+  arg3?: UseInfiniteQueryOptions<TQueryFnData, TError, TData, TQueryKey>
 ): UseQueryReturnType<TData, TError, UseInfiniteQueryResult<TData, TError>> {
-  const parsedOptions = parseQueryArgs(arg1, arg2, arg3);
+  const parsedOptions = parseQueryArgs(arg1, arg2, arg3) as UseBaseQueryOptions<
+    TQueryFnData,
+    TError,
+    TData,
+    TQueryKey
+  >;
   return useBaseQuery(
     parsedOptions,
     InfiniteQueryObserver as typeof QueryObserver

src/vue/useMutation.ts

@@ -55,7 +55,10 @@ export function useMutation<
   TContext = unknown
 >(
   mutationFn: MutationFunction<TData, TVariables>,
-  options?: UseMutationOptions<TData, TError, TVariables, TContext>
+  options?: Omit<
+    UseMutationOptions<TData, TError, TVariables, TContext>,
+    "mutationFn"
+  >
 ): UseMutationReturnType<TData, TError, TVariables, TContext>;
 export function useMutation<
   TData = unknown,
@@ -64,7 +67,10 @@ export function useMutation<
   TContext = unknown
 >(
   mutationKey: MutationKey,
-  options?: UseMutationOptions<TData, TError, TVariables, TContext>
+  options?: Omit<
+    UseMutationOptions<TData, TError, TVariables, TContext>,
+    "mutationKey"
+  >
 ): UseMutationReturnType<TData, TError, TVariables, TContext>;
 export function useMutation<
   TData = unknown,
@@ -74,7 +80,10 @@ export function useMutation<
 >(
   mutationKey: MutationKey,
   mutationFn?: MutationFunction<TData, TVariables>,
-  options?: UseMutationOptions<TData, TError, TVariables, TContext>
+  options?: Omit<
+    UseMutationOptions<TData, TError, TVariables, TContext>,
+    "mutationKey" | "mutationFn"
+  >
 ): UseMutationReturnType<TData, TError, TVariables, TContext>;
 export function useMutation<
   TData = unknown,