Better logging

Author: phortx

src/logger.ts

@@ -6,6 +6,13 @@ import { FetchPolicy } from 'apollo-client';
 export default class Logger {
   private readonly enabled: boolean;
 
+  private PREFIX = process.env.NODE_ENV === 'test' ? ['[Vuex-ORM-Apollo]'] :
+    [
+      '%c Vuex-ORM: Apollo Plugin %c',
+      'background: #35495e; padding: 1px 0; border-radius: 3px; color: #eee;',
+      'background: transparent;'
+    ];
+
   public constructor (enabled: boolean) {
     this.enabled = enabled;
     this.log('Logging is enabled.');
@@ -14,9 +21,9 @@ export default class Logger {
   public group (...messages: Array<any>): void {
     if (this.enabled) {
       if (process.env.NODE_ENV === 'test') {
-        console.group('[Vuex-ORM-Apollo]', ...messages);
+        console.group(...this.PREFIX, ...messages);
       } else {
-        console.groupCollapsed('[Vuex-ORM-Apollo]', ...messages);
+        console.groupCollapsed(...this.PREFIX, ...messages);
       }
     }
   }
@@ -27,21 +34,23 @@ export default class Logger {
 
   public log (...messages: Array<any>): void {
     if (this.enabled) {
-      console.log('[Vuex-ORM-Apollo]', ...messages);
+      console.log(...this.PREFIX, ...messages);
     }
   }
 
   public logQuery (query: string | DocumentNode, variables?: Arguments, fetchPolicy?: FetchPolicy) {
     if (this.enabled) {
       try {
-        this.group('Sending query:');
-
+        let prettified = '';
         if (typeof query === 'object' && query.loc) {
-          console.log(QueryBuilder.prettify(query.loc.source.body));
+          prettified = QueryBuilder.prettify(query.loc.source.body);
         } else {
-          console.log(QueryBuilder.prettify(query as string));
+          prettified = QueryBuilder.prettify(query as string);
         }
 
+        this.group('Sending query:', prettified.split('\n')[1].replace('{', '').trim());
+        console.log(prettified);
+
         if (variables) console.log('VARIABLES:', variables);
         if (fetchPolicy) console.log('FETCH POLICY:', fetchPolicy);