feat: rename pause prop to paused and watch its effect

logaretm · Oct 5, 2020 · fca32d4 · fca32d4
1 parent ef7c16a
commit fca32d4
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 7 deletions.
diff --git 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<string, any> | 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
@@ -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(() => {