Add support for gql tag

Author: phortx

docs/guide/custom-queries/README.md

@@ -117,6 +117,10 @@ Following fields are allowed:
 - `variables`: Variables to pass
 - `bypassCache`: Whether to bypass the caching.
 
+::: tip
+As `query` you can also pass a GraphQL AST DocumentNode like it's returned by the `gql` function or
+the `*.graphql` webpack loader of [graphql-tag](https://github.com/apollographql/graphql-tag). 
+:::
 
 ## Model related custom mutation
 
@@ -216,6 +220,11 @@ Following fields are allowed:
 - `query`: Required. The GraphQL mutation query.
 - `variables`: Hash map with variables to pass.
 
+::: tip
+As `query` you can also pass a GraphQL AST DocumentNode like it's returned by the `gql` function or
+the `*.graphql` webpack loader of [graphql-tag](https://github.com/apollographql/graphql-tag). 
+:::
+
 
 ## Multiple or single record
 

src/actions/simple-mutation.ts

@@ -1,8 +1,7 @@
 import { ActionParams } from "../support/interfaces";
 import Action from "./action";
 import Context from "../common/context";
-import { parse } from "graphql/language/parser";
-import { clone } from "../support/utils";
+import { clone, graphQlDocumentToString, parseQuery } from "../support/utils";
 
 /**
  * SimpleMutation action for sending a model unrelated simple mutation.
@@ -21,7 +20,8 @@ export default class SimpleMutation extends Action {
     const context: Context = Context.getInstance();
 
     if (query) {
-      const parsedQuery = parse(query);
+      const parsedQuery = parseQuery(query);
+
       const mockReturnValue = context.globalMockHook("simpleMutation", {
         name: parsedQuery.definitions[0]["name"].value,
         variables
@@ -32,7 +32,10 @@ export default class SimpleMutation extends Action {
       }
 
       variables = this.prepareArgs(variables);
-      const result = await context.apollo.simpleMutation(query, variables);
+      const result = await context.apollo.simpleMutation(
+        graphQlDocumentToString(parsedQuery),
+        variables
+      );
 
       // remove the symbols
       return clone(result.data);

src/actions/simple-query.ts

@@ -1,8 +1,7 @@
 import { ActionParams } from "../support/interfaces";
 import Action from "./action";
 import Context from "../common/context";
-import { parse } from "graphql/language/parser";
-import { clone, removeSymbols } from "../support/utils";
+import { clone, graphQlDocumentToString, parseQuery, removeSymbols } from "../support/utils";
 
 /**
  * SimpleQuery action for sending a model unrelated simple query.
@@ -22,7 +21,8 @@ export default class SimpleQuery extends Action {
     const context: Context = Context.getInstance();
 
     if (query) {
-      const parsedQuery = parse(query);
+      const parsedQuery = parseQuery(query);
+
       const mockReturnValue = context.globalMockHook("simpleQuery", {
         name: parsedQuery.definitions[0]["name"].value,
         variables
@@ -34,7 +34,11 @@ export default class SimpleQuery extends Action {
 
       variables = this.prepareArgs(variables);
 
-      const result = await context.apollo.simpleQuery(query, variables, bypassCache);
+      const result = await context.apollo.simpleQuery(
+        graphQlDocumentToString(parsedQuery),
+        variables,
+        bypassCache
+      );
 
       // remove the symbols
       return removeSymbols(clone(result.data));

src/graphql/schema.ts

@@ -56,8 +56,9 @@ export default class Schema {
     name = upcaseFirstLetter(name);
     const type = this.types.get(name);
 
-    if (!allowNull && !type)
+    if (!allowNull && !type) {
       throw new Error(`Couldn't find Type of name ${name} in the GraphQL Schema.`);
+    }
 
     return type || null;
   }
@@ -66,8 +67,9 @@ export default class Schema {
     const mutation = this.mutations.get(name);
 
     /* istanbul ignore next */
-    if (!allowNull && !mutation)
+    if (!allowNull && !mutation) {
       throw new Error(`Couldn't find Mutation of name ${name} in the GraphQL Schema.`);
+    }
 
     return mutation || null;
   }
@@ -76,8 +78,9 @@ export default class Schema {
     const query = this.queries.get(name);
 
     /* istanbul ignore next */
-    if (!allowNull && !query)
+    if (!allowNull && !query) {
       throw new Error(`Couldn't find Query of name ${name} in the GraphQL Schema.`);
+    }
 
     return query || null;
   }

src/support/interfaces.ts

@@ -2,6 +2,7 @@
 import { Database, Model as ORMModel } from "@vuex-orm/core";
 import RootState from "@vuex-orm/core/lib/modules/contracts/RootState";
 import { ApolloLink } from "apollo-link";
+import { DocumentNode } from "graphql/language/ast";
 
 export type DispatchFunction = (action: string, data: Data) => Promise<any>;
 
@@ -29,7 +30,7 @@ export interface ActionParams {
   args?: Arguments;
   variables?: Arguments;
   bypassCache?: boolean;
-  query?: string;
+  query?: string | DocumentNode;
   multiple?: boolean;
   name?: string;
 }

src/support/utils.ts

@@ -1,5 +1,6 @@
 import { parse } from "graphql/language/parser";
 import { print } from "graphql/language/printer";
+import { DocumentNode } from "graphql/language/ast";
 
 // @ts-ignore
 import lodashIsEqual from "lodash.isequal";
@@ -37,14 +38,34 @@ export function downcaseFirstLetter(input: string) {
  * @param {string} query
  * @returns {string}
  */
-export function prettify(query: string): string {
-  return print(parse(query));
+export function prettify(query: string | DocumentNode): string {
+  return print(parseQuery(query));
+}
+
+/**
+ * Returns a parsed query as GraphQL AST DocumentNode.
+ *
+ * @param {string | DocumentNode} query - Query as string or GraphQL AST DocumentNode.
+ *
+ * @returns {DocumentNode} Query as GraphQL AST DocumentNode.
+ */
+export function parseQuery(query: string | DocumentNode): DocumentNode {
+  return typeof query === "string" ? parse(query) : query;
+}
+
+/**
+ * @param {DocumentNode} query - The GraphQL AST DocumentNode.
+ *
+ * @returns {string} the GraphQL query within a DocumentNode as a plain string.
+ */
+export function graphQlDocumentToString(query: DocumentNode): string {
+  return query.loc!.source.body;
 }
 
 /**
  * Tells if a object is just a simple object.
  *
- * @param {any} value - Value to check.
+ * @param {any} obj - Value to check.
  */
 export function isPlainObject(obj: any): boolean {
   // Basic check for Type object that's not null

test/integration/plugin.spec.ts

@@ -1,6 +1,7 @@
 import { setupMockData, User, Profile, Post, Tariff, Category, Tag } from "../support/mock-data";
 import Context from "../../src/common/context";
 import { recordGraphQLRequest } from "../support/helpers";
+import gql from "graphql-tag";
 
 let store: any;
 let vuexOrmGraphQL;
@@ -815,6 +816,42 @@ mutation SendSms($to: String!, $text: String!) {
   sendSms(to: $to, text: $text) {
     delivered
   }
+}
+      `.trim() + "\n"
+      );
+    });
+
+    test("also accepts GraphQL AST DocumentNode", async () => {
+      let result;
+
+      const query = gql`
+        mutation SendSms($to: String!, $text: String!) {
+          sendSms(to: $to, text: $text) {
+            delivered
+          }
+        }
+      `;
+
+      const request = await recordGraphQLRequest(async () => {
+        result = await store.dispatch("entities/simpleMutation", {
+          query,
+          variables: { to: "+4912345678", text: "GraphQL is awesome!" }
+        });
+      });
+
+      expect(request!.variables).toEqual({ to: "+4912345678", text: "GraphQL is awesome!" });
+      expect(result).toEqual({
+        sendSms: {
+          __typename: "SmsStatus", // TODO: this could removed by Vuex-ORM-GraphQL IMHO
+          delivered: true
+        }
+      });
+      expect(request!.query).toEqual(
+        `
+mutation SendSms($to: String!, $text: String!) {
+  sendSms(to: $to, text: $text) {
+    delivered
+  }
 }
       `.trim() + "\n"
       );
@@ -855,6 +892,44 @@ query Status {
     smsGateway
     paypalIntegration
   }
+}
+      `.trim() + "\n"
+      );
+    });
+    test("also accepts GraphQL AST DocumentNode", async () => {
+      let result;
+
+      const query = gql`
+        query Status {
+          status {
+            backend
+            smsGateway
+            paypalIntegration
+          }
+        }
+      `;
+
+      const request = await recordGraphQLRequest(async () => {
+        result = await store.dispatch("entities/simpleQuery", { query, variables: {} });
+      });
+
+      expect(result).toEqual({
+        status: {
+          __typename: "Status",
+          backend: true,
+          paypalIntegration: true,
+          smsGateway: false
+        }
+      });
+
+      expect(request!.query).toEqual(
+        `
+query Status {
+  status {
+    backend
+    smsGateway
+    paypalIntegration
+  }
 }
       `.trim() + "\n"
       );