diff --git a/packages/villus/src/Subscription.ts b/packages/villus/src/Subscription.ts index d3adb63..d604e59 100644 --- a/packages/villus/src/Subscription.ts +++ b/packages/villus/src/Subscription.ts @@ -1,7 +1,6 @@ -import { defineComponent, SetupContext } from 'vue-demi'; +import { defineComponent, watchEffect } from 'vue-demi'; import { normalizeChildren } from './utils'; import { useSubscription, defaultReducer, Reducer } from './useSubscription'; -import { DocumentNode } from 'graphql'; export const Subscription = defineComponent({ name: 'Subscription', @@ -14,7 +13,7 @@ export const Subscription = defineComponent({ type: Object, default: null, }, - pause: { + paused: { type: Boolean, default: false, }, @@ -23,14 +22,26 @@ export const Subscription = defineComponent({ default: undefined, }, }, - setup(props: SubscriptionProps, ctx: SetupContext) { + setup(props, ctx) { const { data, error, pause, isPaused, resume } = useSubscription( { - ...props, + query: props.query as string, + variables: props.variables as Record | undefined, }, - props.reduce || defaultReducer + (props.reduce as Reducer) || defaultReducer ); + watchEffect(() => { + if (props.paused && !isPaused.value) { + pause(); + return; + } + + if (isPaused.value) { + resume(); + } + }); + return () => { return normalizeChildren(ctx, { data: data.value, diff --git a/packages/villus/test/subscription.spec.ts b/packages/villus/test/subscription.spec.ts index 8fff425..8390a61 100644 --- a/packages/villus/test/subscription.spec.ts +++ b/packages/villus/test/subscription.spec.ts @@ -1,6 +1,6 @@ import { mount } from './helpers/mount'; import flushPromises from 'flush-promises'; -import { Subscription, createClient, Provider } from '../src/index'; +import { Subscription, Provider } from '../src/index'; import { makeObservable, tick } from './helpers/observer'; beforeAll(() => {