fix: ensure subscription queries are normalized closes #188

logaretm · Feb 8, 2023 · 7a50249 · 7a50249
1 parent 5da0919
commit 7a50249
Show file tree

Hide file tree

Showing 2 changed files with 63 additions and 3 deletions.
diff --git a/packages/villus/src/handleSubscriptions.ts b/packages/villus/src/handleSubscriptions.ts
@@ -1,7 +1,8 @@
+import { normalizeQuery } from '../../shared/src/utils';
 import { ClientPlugin, ClientPluginOperation, ObservableLike, StandardOperationResult } from './types';
 
 export type SubscriptionForwarder<TData = any> = (
-  operation: ClientPluginOperation
+  operation: ClientPluginOperation & { query: string }
 ) => ObservableLike<StandardOperationResult<TData>>;
 
 export function handleSubscriptions(forwarder: SubscriptionForwarder): ClientPlugin {
@@ -16,6 +17,11 @@ export function handleSubscriptions(forwarder: SubscriptionForwarder): ClientPlu
       throw new Error('No subscription forwarder was set.');
     }
 
-    useResult(forward(operation) as any, true);
+    const normalizedQuery = normalizeQuery(operation.query);
+    if (!normalizedQuery) {
+      throw new Error('A query must be provided.');
+    }
+
+    useResult(forward({ ...operation, query: normalizedQuery }) as any, true);
   };
 }
diff --git a/packages/villus/test/useSubscription.spec.ts b/packages/villus/test/useSubscription.spec.ts
@@ -1,10 +1,12 @@
 /* eslint-disable jest/no-conditional-expect */
 /* eslint-disable no-unused-expressions */
 import flushPromises from 'flush-promises';
+import gql from 'graphql-tag';
 import { mount } from './helpers/mount';
 import { makeObservable, tick } from './helpers/observer';
 import { defaultPlugins, handleSubscriptions, useClient, useSubscription } from '../src/index';
 import { computed, ref } from 'vue';
+import { print } from 'graphql';
 
 jest.useFakeTimers();
 
@@ -350,7 +352,7 @@ test('handles subscription errors', async () => {
         <div v-if="messages && !error">
           <span>{{ messages.id }}</span>
         </div>
-        <span id="error" v-if="error">{{ error }}</span> 
+        <span id="error" v-if="error">{{ error }}</span>
       </div>
     `,
   });
@@ -360,3 +362,55 @@ test('handles subscription errors', async () => {
   await flushPromises();
   expect(document.querySelector('#error')?.textContent).toBeTruthy();
 });
+
+test('normalizes subscription queries', async () => {
+  const spy = jest.fn();
+  mount({
+    setup() {
+      useClient({
+        url: 'https://test.com/graphql',
+        use: [
+          handleSubscriptions(op => {
+            spy(op.query);
+
+            return makeObservable();
+          }),
+          ...defaultPlugins(),
+        ],
+      });
+
+      const { data, error } = useSubscription<Message>({
+        query: gql`
+          subscription {
+            newMessages
+          }
+        `,
+        variables: { id: 2 },
+      });
+
+      return { messages: data.value, error };
+    },
+    template: `
+      <div>
+        <div v-if="messages && !error">
+          <span>{{ messages.id }}</span>
+        </div>
+        <span id="error" v-if="error">{{ error }}</span>
+      </div>
+    `,
+  });
+
+  await flushPromises();
+  await tick(1);
+  await flushPromises();
+  expect(spy).toHaveBeenCalledTimes(1);
+  expect(spy).toHaveBeenLastCalledWith(
+    print(
+      gql`
+        subscription {
+          newMessages
+        }
+      `
+    )
+  );
+});