feat: add paused for subscriptions init object (logaretm#143)

Author: logaretm

packages/villus/src/Subscription.ts

@@ -1,7 +1,6 @@
 import { defineComponent, toRef, VNode, watch } from 'vue';
-import { normalizeChildren } from './utils';
+import { normalizeChildren, CombinedError } from './utils';
 import { useSubscription, defaultReducer, Reducer } from './useSubscription';
-import { CombinedError } from '../dist/villus';
 
 interface SubscriptionSlotProps {
   data: unknown;
@@ -36,6 +35,7 @@ const SubscriptionImpl = defineComponent({
       {
         query: props.query as string,
         variables: props.variables as Record<string, any> | undefined,
+        paused: props.paused,
       },
       (props.reduce as Reducer) || defaultReducer
     );

packages/villus/src/useSubscription.ts

@@ -7,14 +7,15 @@ import { Operation } from '../../shared/src';
 interface SubscriptionCompositeOptions<TData, TVars> {
   query: MaybeRef<Operation<TData, TVars>['query']>;
   variables?: MaybeRef<TVars>;
+  paused?: boolean;
 }
 
 export type Reducer<TData = any, TResult = TData> = (prev: TResult | null, value: OperationResult<TData>) => TResult;
 
 export const defaultReducer: Reducer = (_, val) => val.data;
 
 export function useSubscription<TData = any, TResult = TData, TVars = QueryVariables>(
-  { query, variables }: SubscriptionCompositeOptions<TData, TVars>,
+  { query, variables, paused }: SubscriptionCompositeOptions<TData, TVars>,
   reduce: Reducer<TData, TResult> = defaultReducer
 ) {
   const client = injectWithSelf(VILLUS_CLIENT, () => {
@@ -23,7 +24,7 @@ export function useSubscription<TData = any, TResult = TData, TVars = QueryVaria
 
   const data = ref<TResult | null>(reduce(null, { data: null, error: null }));
   const error: Ref<CombinedError | null> = ref(null);
-  const isPaused = ref(false);
+  const isPaused = ref(paused || false);
 
   function handleResponse(result: OperationResult<TData>) {
     data.value = reduce(data.value as TResult, result) as any;
@@ -63,9 +64,11 @@ export function useSubscription<TData = any, TResult = TData, TVars = QueryVaria
   }
 
   let observer: Unsubscribable;
-  onMounted(async () => {
-    observer = await initObserver();
-  });
+  if (!paused) {
+    onMounted(async () => {
+      observer = await initObserver();
+    });
+  }
 
   onBeforeUnmount(() => {
     if (observer) {
@@ -78,6 +81,10 @@ export function useSubscription<TData = any, TResult = TData, TVars = QueryVaria
   }
 
   async function resume() {
+    if (!observer) {
+      reInit();
+    }
+
     isPaused.value = false;
   }
 

packages/villus/test/useSubscription.spec.ts

@@ -240,6 +240,54 @@ test('Pauses and resumes subscriptions', async () => {
   expect(document.querySelector('#status')?.textContent).toBe('false');
 });
 
+test('Can pause subscriptions initially', async () => {
+  mount({
+    setup() {
+      useClient({
+        url: 'https://test.com/graphql',
+        use: [handleSubscriptions(() => makeObservable()), ...defaultPlugins()],
+      });
+
+      function reduce(oldMessages: string[] | null, response: any) {
+        if (!response.data || !oldMessages) {
+          return oldMessages || [];
+        }
+
+        return [...oldMessages, response.data.message];
+      }
+
+      const { data, resume, isPaused } = useSubscription(
+        { query: `subscription { newMessages }`, paused: true },
+        reduce
+      );
+
+      return { messages: data, resume, isPaused };
+    },
+    template: `
+      <div>
+        <ul v-for="message in messages">
+          <li>{{ message.id }}</li>
+        </ul>
+        <button @click="resume"></button>
+        <span id="status">{{ isPaused }}</span>
+      </div>
+    `,
+  });
+
+  await flushPromises();
+  jest.advanceTimersByTime(201);
+  // pauses subscription
+  expect(document.querySelector('#status')?.textContent).toBe('true');
+  jest.advanceTimersByTime(201);
+  expect(document.querySelectorAll('li')).toHaveLength(0);
+  document.querySelector('button')?.dispatchEvent(new Event('click'));
+  await flushPromises();
+  expect(document.querySelector('#status')?.textContent).toBe('false');
+  jest.advanceTimersByTime(201);
+  await flushPromises();
+  expect(document.querySelectorAll('li')).toHaveLength(2);
+});
+
 test('Fails if provider was not resolved', () => {
   try {
     mount({