Added operationName to subscription request.

Closes #778.
altair-graphql · May 26, 2019 · 2bd7ca5 · 2bd7ca5
1 parent 30973bc
commit 2bd7ca5
Show file tree

Hide file tree

Showing 3 changed files with 78 additions and 32 deletions.
diff --git a/src/app/components/url-box/url-box.component.html b/src/app/components/url-box/url-box.component.html
@@ -87,7 +87,7 @@
       <span *ngIf="selectedOperation">({{ selectedOperation }})</span>
       <clr-icon shape="caret down"></clr-icon>
     </button>
-    <clr-dropdown-menu *clrIfOpen>
+    <clr-dropdown-menu clrPosition="bottom-right" *clrIfOpen>
       <button type="button" clrDropdownItem *ngFor="let operation of queryOperations" (click)="selectedOperationChange.next(operation.name.value)">{{ operation.name.value }}</button>
     </clr-dropdown-menu>
   </clr-dropdown>

diff --git a/src/app/effects/query.ts b/src/app/effects/query.ts
@@ -83,37 +83,21 @@ export class QueryEffects {
               return observableEmpty();
             }
 
-            // Check if there are more than one operations in the query
-            // If check if there is already a selected operation
-            // Check if the selected operation matches any operation, else ask the user to select again
-            const operations = this.gqlService.getOperations(query);
-
-            this.store.dispatch(new queryActions.SetQueryOperationsAction(response.windowId, { operations }));
-
-            if (operations && operations.length > 1) {
-              const operationNameAtCursorIndex =
-                response.data.query.queryEditorState &&
-                response.data.query.queryEditorState.isFocused &&
-                this.gqlService.getOperationNameAtIndex(query, response.data.query.queryEditorState.cursorIndex);
-
-              debug.log(operationNameAtCursorIndex, response.data.query.queryEditorState);
-              if (
-                !(
-                  (selectedOperation && operations.map(def => def['name'] && def['name'].value).indexOf(selectedOperation) !== -1) ||
-                  (selectedOperation = operationNameAtCursorIndex)
-                )
-              ) {
-                // Ask the user to select operation
-                this.notifyService.warning(
-                  `You have more than one query operations.
-                  You need to select the one you want to run from the dropdown.`
-                );
-                this.store.dispatch(new queryActions.SetSelectedOperationAction(response.windowId, { selectedOperation: '' }));
-                return observableEmpty();
-              }
-            } else {
-              // Clear out the selected operation
+            try {
+              const operationData = this.gqlService.getSelectedOperationData({
+                query,
+                selectedOperation,
+                queryCursorIndex: response.data.query.queryEditorState &&
+                  response.data.query.queryEditorState.isFocused &&
+                  response.data.query.queryEditorState.cursorIndex,
+              });
+
+              this.store.dispatch(new queryActions.SetQueryOperationsAction(response.windowId, { operations: operationData.operations }));
+              selectedOperation = operationData.selectedOperation;
+            } catch (err) {
               this.store.dispatch(new queryActions.SetSelectedOperationAction(response.windowId, { selectedOperation: '' }));
+              this.notifyService.warning(err.message);
+              return observableEmpty();
             }
 
             this.store.dispatch(new layoutActions.StartLoadingAction(response.windowId));
@@ -400,6 +384,26 @@ export class QueryEffects {
           const subscriptionUrl = this.environmentService.hydrate(res.data.query.subscriptionUrl);
           const query = this.environmentService.hydrate(res.data.query.query);
           const variables = this.environmentService.hydrate(res.data.variables.variables);
+          let selectedOperation = res.data.query.selectedOperation;
+
+          try {
+            const operationData = this.gqlService.getSelectedOperationData({
+              query,
+              selectedOperation,
+              queryCursorIndex: res.data.query.queryEditorState &&
+                res.data.query.queryEditorState.isFocused &&
+                res.data.query.queryEditorState.cursorIndex,
+              selectIfOneOperation: true,
+            });
+
+            this.store.dispatch(new queryActions.SetQueryOperationsAction(res.windowId, { operations: operationData.operations }));
+            selectedOperation = operationData.selectedOperation;
+          } catch (err) {
+            this.store.dispatch(new queryActions.SetSelectedOperationAction(res.windowId, { selectedOperation: '' }));
+            this.notifyService.warning(err.message);
+            return observableEmpty();
+          }
+
           const subscriptionErrorHandler = (err, errMsg?) => {
             if (Array.isArray(err)) {
               err = err[0];
@@ -439,7 +443,8 @@ export class QueryEffects {
             });
             const subscriptionClientRequest = subscriptionClient.request({
               query: query,
-              variables: JSON.parse(variables)
+              variables: JSON.parse(variables),
+              operationName: selectedOperation || undefined,
             }).subscribe({
               next: data => {
                 let strData = '';

diff --git a/src/app/services/gql/gql.service.ts b/src/app/services/gql/gql.service.ts
@@ -374,6 +374,47 @@ export class GqlService {
     return '';
   }
 
+  // Check if there are more than one operations in the query
+  // If check if there is already a selected operation
+  // Check if the selected operation matches any operation, else ask the user to select again
+  getSelectedOperationData({ query = '', queryCursorIndex, selectedOperation = '', selectIfOneOperation = false }) {
+    const operations = this.getOperations(query);
+
+    // Need to choose an operation
+    if (operations) {
+      // def.name.Kind = 'Name' is not set when the name is anonymous (#0, #1, etc.. set by the graphql parse() method)
+      const availableOperationNames = operations.map(def => def.name && def.name.kind === 'Name' && def.name.value).filter(Boolean);
+
+      if (availableOperationNames.length > 1) {
+        let operationNameAtCursorIndex = '';
+        if (typeof queryCursorIndex !== 'undefined') {
+          operationNameAtCursorIndex = this.getOperationNameAtIndex(query, queryCursorIndex);
+        }
+
+        if (!availableOperationNames.includes(selectedOperation)) {
+          if (operationNameAtCursorIndex) {
+            selectedOperation = operationNameAtCursorIndex;
+          } else {
+            selectedOperation = '';
+            // Ask the user to select operation
+            throw new Error(
+              `You have more than one query operations.
+              You need to select the one you want to run from the dropdown.`
+            );
+          }
+        }
+      } else {
+        if (selectIfOneOperation) {
+          selectedOperation = availableOperationNames[0];
+        }
+      }
+    } else {
+      selectedOperation = '';
+    }
+
+    return { selectedOperation, operations };
+  }
+
   /**
    * Prettifies (formats) a given query
    * @param query