From a153bf2e4cdf6b82da208eac51192155a184a186 Mon Sep 17 00:00:00 2001 From: Alexey Antipov Date: Tue, 4 Jan 2022 19:06:57 +0100 Subject: [PATCH 1/2] fix(use-queries): fix handling of queries update. Accept Ref as an argument --- src/vue/__tests__/test-utils.ts | 5 ++++ src/vue/__tests__/useQueries.test.ts | 38 +++++++++++++++++++--------- src/vue/useQueries.ts | 35 +++++++++++++++---------- 3 files changed, 53 insertions(+), 25 deletions(-) diff --git a/src/vue/__tests__/test-utils.ts b/src/vue/__tests__/test-utils.ts index e7e2274..7ce7265 100644 --- a/src/vue/__tests__/test-utils.ts +++ b/src/vue/__tests__/test-utils.ts @@ -16,6 +16,11 @@ export function simpleFetcher(): Promise { }); } +export function getSimpleFetcherWithReturnData(returnData: unknown) { + return () => + new Promise((resolve) => setTimeout(() => resolve(returnData), 0)); +} + export function infiniteFetcher({ pageParam = 0, }: { diff --git a/src/vue/__tests__/useQueries.test.ts b/src/vue/__tests__/useQueries.test.ts index 05fb601..d35c651 100644 --- a/src/vue/__tests__/useQueries.test.ts +++ b/src/vue/__tests__/useQueries.test.ts @@ -1,10 +1,11 @@ -import { onUnmounted, reactive, set } from "vue-demi"; +import { onUnmounted, reactive } from "vue-demi"; import { setLogger } from "react-query/core"; import { flushPromises, rejectFetcher, simpleFetcher, + getSimpleFetcherWithReturnData, noop, } from "./test-utils"; import { useQueries } from "../useQueries"; @@ -112,38 +113,51 @@ describe("useQueries", () => { }); test("should return state for new queries", async () => { - const initialQueries = reactive([]); - const queries = [ + const queries = reactive([ { queryKey: "key31", - queryFn: simpleFetcher, + queryFn: getSimpleFetcherWithReturnData("value31"), }, { queryKey: "key32", - queryFn: simpleFetcher, + queryFn: getSimpleFetcherWithReturnData("value32"), }, - ]; - const queriesState = useQueries(initialQueries); + { + queryKey: "key33", + queryFn: getSimpleFetcherWithReturnData("value33"), + }, + ]); + const queriesState = useQueries(queries); - expect(queriesState.length).toEqual(0); + await flushPromises(); - queries.forEach((query, index) => { - set(initialQueries, index, query); - }); + queries.splice( + 0, + queries.length, + { + queryKey: "key31", + queryFn: getSimpleFetcherWithReturnData("value31"), + }, + { + queryKey: "key34", + queryFn: getSimpleFetcherWithReturnData("value34"), + } + ); await flushPromises(); await flushPromises(); expect(queriesState.length).toEqual(2); - expect(queriesState).toMatchObject([ { + data: "value31", status: "success", isLoading: false, isFetching: false, isStale: true, }, { + data: "value34", status: "success", isLoading: false, isFetching: false, diff --git a/src/vue/useQueries.ts b/src/vue/useQueries.ts index 70f3fd3..d37ec0d 100644 --- a/src/vue/useQueries.ts +++ b/src/vue/useQueries.ts @@ -1,6 +1,15 @@ /* eslint-disable @typescript-eslint/no-explicit-any */ import { QueriesObserver } from "react-query/core"; -import { onUnmounted, reactive, readonly, set, watch } from "vue-demi"; +import { + onUnmounted, + reactive, + readonly, + watch, + unref, + Ref, + isRef, + isReactive, +} from "vue-demi"; import type { QueryFunction, @@ -114,33 +123,33 @@ export type UseQueriesResults< : // Fallback QueryObserverResult[]; +type UseQueriesOptions = + | readonly [...QueriesOptions] + | Ref<[...QueriesOptions]>; + export function useQueries( queries: readonly [...UseQueriesOptions] ): Readonly> { - const queryClientKey = queries[0]?.queryClientKey; + const queryClientKey = unref(queries)[0]?.queryClientKey; const queryClient = useQueryClient(queryClientKey); - const defaultedQueries = queries.map((options) => { + const defaultedQueries = unref(queries).map((options) => { return queryClient.defaultQueryObserverOptions(options); }); const observer = new QueriesObserver(queryClient, defaultedQueries); const state = reactive(observer.getCurrentResult()); const unsubscribe = observer.subscribe((result) => { - result.forEach((resultEntry, index) => { - set(state, index, resultEntry); - }); + state.splice(0, state.length, ...result); }); - watch( - () => queries, - () => { - const defaulted = queries.map((options) => { + if (isRef(queries) || isReactive(queries)) { + watch(queries, () => { + const defaulted = unref(queries).map((options) => { return queryClient.defaultQueryObserverOptions(options); }); observer.setQueries(defaulted); - }, - { deep: true } - ); + }); + } onUnmounted(() => { unsubscribe(); From 2215fa94f1eacaec26ea36de1e9e1ad9030ea784 Mon Sep 17 00:00:00 2001 From: Alexey Antipov Date: Mon, 10 Jan 2022 18:44:16 +0100 Subject: [PATCH 2/2] fix: type failure --- src/vue/useQueries.ts | 25 ++++++++++++++----------- 1 file changed, 14 insertions(+), 11 deletions(-) diff --git a/src/vue/useQueries.ts b/src/vue/useQueries.ts index d37ec0d..8ce51bf 100644 --- a/src/vue/useQueries.ts +++ b/src/vue/useQueries.ts @@ -123,18 +123,19 @@ export type UseQueriesResults< : // Fallback QueryObserverResult[]; -type UseQueriesOptions = - | readonly [...QueriesOptions] - | Ref<[...QueriesOptions]>; +type UseQueriesOptionsArg = readonly [...UseQueriesOptions]; export function useQueries( - queries: readonly [...UseQueriesOptions] + queries: Ref> | UseQueriesOptionsArg ): Readonly> { - const queryClientKey = unref(queries)[0]?.queryClientKey; + const queryClientKey = (unref(queries) as UseQueriesOptionsArg)[0] + ?.queryClientKey; const queryClient = useQueryClient(queryClientKey); - const defaultedQueries = unref(queries).map((options) => { - return queryClient.defaultQueryObserverOptions(options); - }); + const defaultedQueries = (unref(queries) as UseQueriesOptionsArg).map( + (options) => { + return queryClient.defaultQueryObserverOptions(options); + } + ); const observer = new QueriesObserver(queryClient, defaultedQueries); const state = reactive(observer.getCurrentResult()); @@ -144,9 +145,11 @@ export function useQueries( if (isRef(queries) || isReactive(queries)) { watch(queries, () => { - const defaulted = unref(queries).map((options) => { - return queryClient.defaultQueryObserverOptions(options); - }); + const defaulted = (unref(queries) as UseQueriesOptionsArg).map( + (options) => { + return queryClient.defaultQueryObserverOptions(options); + } + ); observer.setQueries(defaulted); }); }