From bb6554fb801cb0a3a90702d8dca91bf082f69c7e Mon Sep 17 00:00:00 2001 From: Silvano Stralla Date: Tue, 22 Nov 2022 11:12:43 +0100 Subject: [PATCH] Start accepting refs beside simple arguments --- src/composables/useQuerySubscription/index.ts | 67 +++++++------------ 1 file changed, 24 insertions(+), 43 deletions(-) diff --git a/src/composables/useQuerySubscription/index.ts b/src/composables/useQuerySubscription/index.ts index 31e349d..0775c47 100644 --- a/src/composables/useQuerySubscription/index.ts +++ b/src/composables/useQuerySubscription/index.ts @@ -1,4 +1,4 @@ -import { Ref, ref, watchEffect } from 'vue-demi'; +import { Ref, ref, unref, watchEffect } from 'vue-demi'; import { subscribeToQuery, @@ -15,14 +15,14 @@ export type SubscribeToQueryOptions = Omit< export type EnabledQueryListenerOptions = { /** Whether the subscription has to be performed or not */ - enabled?: true; + enabled?: true | Ref; /** The initial data to use while the initial request is being performed */ initialData?: QueryResult; } & SubscribeToQueryOptions; export type DisabledQueryListenerOptions = { /** Whether the subscription has to be performed or not */ - enabled: false; + enabled: false | Ref; /** The initial data to use while the initial request is being performed */ initialData?: QueryResult; } & Partial>; @@ -31,59 +31,40 @@ export type QueryListenerOptions = | EnabledQueryListenerOptions | DisabledQueryListenerOptions; -export function useQuerySubscription< +export const useQuerySubscription = < QueryResult = any, QueryVariables = Record, ->(options: QueryListenerOptions) { - const { enabled, initialData, ...other } = options; - +>( + { enabled = true, initialData, query, token, ...other }: QueryListenerOptions +) => { const error = ref(null); - const data = ref(null) as Ref; - const status = ref( - enabled ? 'connecting' : 'closed', - ); - - const subscribeToQueryOptions = other as EnabledQueryListenerOptions< - QueryResult, - QueryVariables - >; - - watchEffect((onCleanup) => { - if (enabled === false) { - status.value = 'closed'; - - return () => { - // we don't have to perform any uninstall - }; - } + const data = ref(unref(initialData) || null); + const status = ref(unref(enabled) ? "connecting" : "closed"); - let unsubscribe: UnsubscribeFn | null; + const subscribeToQueryOptions = other; - async function subscribe() { - unsubscribe = await subscribeToQuery({ + watchEffect(async (onCleanup) => { + if (query && token && unref(enabled)) { + const unsubscribe = await subscribeToQuery({ ...subscribeToQueryOptions, + query, + token, onStatusChange: (connectionStatus) => { status.value = connectionStatus; }, - onUpdate: (updateData) => { + onUpdate: ({ response }) => { error.value = null; - data.value = updateData.response.data; + data.value = response.data; }, onChannelError: (errorData) => { data.value = null; error.value = errorData; }, - }); + }) + + onCleanup(unsubscribe) } - - subscribe(); - - onCleanup(() => { - if (unsubscribe) { - unsubscribe(); - } - }) - }); - - return { error, status, data: data || initialData }; -} \ No newline at end of file + }) + + return { data, status, error } +}