Added compress query functionality. Closes #197.

package.json

@@ -69,6 +69,7 @@
     "electron-updater": "^2.16.1",
     "express": "^4.15.2",
     "graphql": "^0.10.5",
+    "graphql-query-compress": "^0.9.6",
     "marked": "^0.3.6",
     "ng2-codemirror": "^1.1.2",
     "ng2-completer": "^1.6.3",

src/app/actions/query/query.ts

@@ -13,6 +13,7 @@ export const SET_QUERY_FROM_DB = 'SET_QUERY_FROM_DB';
 
 export const SET_QUERY_RESULT = 'SET_QUERY_RESULT';
 export const PRETTIFY_QUERY = 'PRETTIFY_QUERY';
+export const COMPRESS_QUERY = 'COMPRESS_QUERY';
 
 export const SEND_QUERY_REQUEST = 'SEND_QUERY_REQUEST';
 export const CANCEL_QUERY_REQUEST = 'CANCEL_QUERY_REQUEST';
@@ -85,6 +86,12 @@ export class PrettifyQueryAction implements Action {
   constructor(public windowId: string, public payload?) {}
 }
 
+export class CompressQueryAction implements Action {
+  readonly type = COMPRESS_QUERY;
+
+  constructor(public windowId: string, public payload?) {}
+}
+
 export class SendQueryRequestAction implements Action {
   readonly type = SEND_QUERY_REQUEST;
 
@@ -172,6 +179,7 @@ SetQueryAction |
 SetQueryFromDbAction |
 SetQueryResultAction |
 PrettifyQueryAction |
+CompressQueryAction |
 SendQueryRequestAction |
 StartSubscriptionAction |
 StopSubscriptionAction |

src/app/containers/window/window.component.html

@@ -117,7 +117,21 @@ <h3 class="modal-title">
   <!-- <nav class="sidenav">
     ...
   </nav> -->
+
   <clr-vertical-nav [(clrVerticalNavCollapsed)]="collapsed" [clrVerticalNavCollapsible]="true">
+    <a clrVerticalNavLink (click)="prettifyCode()" title="{{ 'PRETTIFY_BUTTON' | translate }}">
+      <clr-icon clrVerticalNavIcon shape="wand"></clr-icon>
+      {{ 'PRETTIFY_BUTTON' | translate }}
+    </a>
+    <a clrVerticalNavLink (click)="compressQuery()" title="{{ 'COMPRESS_QUERY_BUTTON' | translate }}">
+      <clr-icon clrVerticalNavIcon shape="shrink"></clr-icon>
+      {{ 'COMPRESS_QUERY_BUTTON' | translate }}
+    </a>
+    <a clrVerticalNavLink (click)="clearEditor()" title="{{ 'CLEAR_BUTTON' | translate }}">
+      <clr-icon clrVerticalNavIcon shape="trash"></clr-icon>
+      {{ 'CLEAR_BUTTON' | translate }}
+    </a>
+    <div class="nav-divider"></div>
     <a clrVerticalNavLink (click)="toggleHeader()" title="{{ 'SET_HEADERS_BUTTON' | translate }}">
       <clr-icon clrVerticalNavIcon shape="asterisk"></clr-icon>
       {{ 'SET_HEADERS_BUTTON' | translate }}
@@ -130,14 +144,6 @@ <h3 class="modal-title">
       <clr-icon clrVerticalNavIcon shape="switch"></clr-icon>
       {{ 'SUBSCRIPTION_URL_TEXT' | translate }}
     </a>
-    <a clrVerticalNavLink (click)="prettifyCode()" title="{{ 'PRETTIFY_BUTTON' | translate }}">
-      <clr-icon clrVerticalNavIcon shape="wand"></clr-icon>
-      {{ 'PRETTIFY_BUTTON' | translate }}
-    </a>
-    <a clrVerticalNavLink (click)="clearEditor()" title="{{ 'CLEAR_BUTTON' | translate }}">
-      <clr-icon clrVerticalNavIcon shape="trash"></clr-icon>
-      {{ 'CLEAR_BUTTON' | translate }}
-    </a>
     <a clrVerticalNavLink (click)="toggleHistoryDialog()" title="{{ 'HISTORY_TEXT' | translate }}">
       <clr-icon clrVerticalNavIcon shape="history"></clr-icon>
       {{ 'HISTORY_TEXT' | translate }}

src/app/containers/window/window.component.ts

@@ -73,7 +73,7 @@ export class WindowComponent implements OnInit {
 
   historyList: fromHistory.HistoryList = [];
 
-  collapsed = true;
+  collapsed = false;
 
   constructor(
     private queryService: QueryService,
@@ -255,6 +255,10 @@ export class WindowComponent implements OnInit {
     this.store.dispatch(new queryActions.PrettifyQueryAction(this.windowId));
   }
 
+  compressQuery() {
+    this.store.dispatch(new queryActions.CompressQueryAction(this.windowId));
+  }
+
   addQueryToEditor(queryData: { query: String, meta: any }) {
     // Add the query to what is already in the editor
     this.store.dispatch(new queryActions.SetQueryAction(`${this.query}\n${queryData.query}`, this.windowId));

src/app/effects/query.ts

@@ -188,8 +188,7 @@ export class QueryEffects {
             } else {
               this.notifyService.warning('Seems like something is broken. Please check that the URL is valid.');
             }
-            this.store.dispatch(new docsAction.StopLoadingDocsAction(res.windowId));
-            return Observable.empty();
+            return Observable.of(new docsAction.StopLoadingDocsAction(res.windowId));
           })
           .map(introspectionData => {
             if (!introspectionData) {
@@ -275,6 +274,7 @@ export class QueryEffects {
                 responseTime: (new Date()).getTime() // store responseTime in ms
               }));
 
+              // TODO: Consider moving this functionality into the notify service
               // Send notification in electron app
               const myNotification = new Notification(res.data.layout.title, {
                 body: strData
@@ -294,7 +294,7 @@ export class QueryEffects {
               console.log('Subscription complete.');
             }
           });
-          this.store.dispatch(new queryActions.SetSubscriptionClientAction(res.windowId, { subscriptionClient }));
+          return Observable.of(new queryActions.SetSubscriptionClientAction(res.windowId, { subscriptionClient }));
         } catch (err) {
           console.error('An error occurred starting the subscription.', err);
         }
@@ -309,8 +309,7 @@ export class QueryEffects {
       })
       .switchMap(res => {
         this.gqlService.closeSubscriptionClient(res.data.query.subscriptionClient);
-        this.store.dispatch(new queryActions.SetSubscriptionClientAction(res.windowId, { subscriptionClient: null }));
-        return Observable.empty();
+        return Observable.of(new queryActions.SetSubscriptionClientAction(res.windowId, { subscriptionClient: null }));
       });
 
     @Effect()
@@ -328,7 +327,28 @@ export class QueryEffects {
         }
 
         if (prettified) {
-          this.store.dispatch(new queryActions.SetQueryAction(prettified, res.windowId));
+          return Observable.of(new queryActions.SetQueryAction(prettified, res.windowId));
+        }
+        return Observable.empty();
+      });
+
+    @Effect()
+    compressQuery$: Observable<queryActions.Action> = this.actions$
+      .ofType(queryActions.COMPRESS_QUERY)
+      .withLatestFrom(this.store, (action: queryActions.Action, state) => {
+        return { data: state.windows[action.windowId], windowId: action.windowId, action };
+      })
+      .switchMap(res => {
+        let compressed = '';
+        try {
+          compressed = this.gqlService.compress(res.data.query.query);
+        } catch (err) {
+          console.log(err);
+          this.notifyService.error('Your query does not appear to be valid. Please check it.');
+        }
+
+        if (compressed) {
+          return Observable.of(new queryActions.SetQueryAction(compressed, res.windowId));
         }
         return Observable.empty();
       });

src/app/services/gql.service.ts

@@ -4,6 +4,7 @@ import { Observable } from 'rxjs/Observable';
 
 import { SubscriptionClient } from 'subscriptions-transport-ws';
 import { buildClientSchema, parse, print } from 'graphql';
+import * as compress from 'graphql-query-compress'; // Somehow this is the way to use this
 import { GraphQLSchema } from 'graphql/type';
 import { introspectionQuery } from './instrospectionQuery';
 
@@ -187,4 +188,12 @@ export class GqlService {
   prettify(query) {
     return print(parse(query));
   }
+
+  /**
+   * Compresses a given query
+   * @param query
+   */
+  compress(query) {
+    return compress(this.prettify(query));
+  }
 }

src/assets/i18n/en.json

@@ -1,6 +1,7 @@
 {
   "SEND_REQUEST_BUTTON": "Send Request",
   "PRETTIFY_BUTTON": "Prettify",
+  "COMPRESS_QUERY_BUTTON": "Compress",
   "CLEAR_BUTTON": "Clear",
   "SET_HEADERS_BUTTON": "Set Headers",
   "SET_VARIABLES_BUTTON": "Set Variables",

src/scss/_layout.scss

@@ -38,6 +38,9 @@ app-window {
   .nav-trigger-icon {
     margin-right: 0.8rem;
   }
+  .nav-divider {
+    border-color: $light-grey;
+  }
 }
 // Due to the extremely high specificity of clarity UI, this is the only way to style this element :(
 .main-container:not([class*="open-overflow-menu"]):not([class*="open-hamburger-menu"]) .clr-vertical-nav.is-collapsed .nav-icon {

yarn.lock

@@ -4331,6 +4331,12 @@ graphql-language-service-utils@0.0.17:
     graphql "^0.10.1"
     graphql-language-service-types "0.0.21"
 
+graphql-query-compress@^0.9.6:
+  version "0.9.6"
+  resolved "https://registry.yarnpkg.com/graphql-query-compress/-/graphql-query-compress-0.9.6.tgz#182cbdc22cfb2006ac2f00ce6d2eafbe000c340d"
+  dependencies:
+    tokenizr "~1.1.7"
+
 graphql-tag@^2.0.0:
   version "2.5.0"
   resolved "https://registry.yarnpkg.com/graphql-tag/-/graphql-tag-2.5.0.tgz#b43bfd8b5babcd2c205ad680c03e98b238934e0f"
@@ -8781,6 +8787,10 @@ to-space-case@^1.0.0:
   dependencies:
     to-no-case "^1.0.0"
 
+tokenizr@~1.1.7:
+  version "1.1.7"
+  resolved "https://registry.yarnpkg.com/tokenizr/-/tokenizr-1.1.7.tgz#92163d1656b26e04b100a4cba8d33243970d4785"
+
 topo@1.x.x:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/topo/-/topo-1.1.0.tgz#e9d751615d1bb87dc865db182fa1ca0a5ef536d5"