fix: document node querying

README.md

@@ -27,11 +27,11 @@ You can find the full [documentation here](https://baianat.github.io/vue-gql)
 First install `vue-gql`:
 
 ```bash
-yarn add vue-gql
+yarn add vue-gql graphql
 
 # or npm
 
-npm install vue-gql --save
+npm install vue-gql graphql --save
 ```
 
 Setup the GraphQL client/endpoint:

docs/README.md

@@ -28,11 +28,11 @@ meta:
 ## install
 
 ```bash
-# install with npm
-npm install vee-validate
-
 # install with yarn
-yarn add vee-validate
+yarn add vue-gql graphql
+
+# install with npm
+npm install vue-gql graphql
 ```
 
 ## Use

package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue-gql",
-  "version": "0.2.1",
+  "version": "0.2.2",
   "description": "A small and fast GraphQL client for Vue.js",
   "module": "dist/vql.esm.js",
   "unpkg": "dist/vql.js",
@@ -103,6 +103,7 @@
     "fast-json-stable-stringify": "^2.0.0"
   },
   "peerDependencies": {
-    "vue": "^2.5.18"
+    "vue": "^2.5.18",
+    "graphql": "^0.11.0 || ^0.12.0 || ^0.13.0 || ^14.0.0"
   }
 }

scripts/config.js

@@ -77,7 +77,7 @@ function genConfig(options) {
   const config = {
     input: {
       input: options.input,
-      external: ['vue', 'fast-json-stable-stringify'],
+      external: ['vue', 'fast-json-stable-stringify', 'graphql'],
       plugins: [
         typescript({ useTsconfigDeclarationDir: true }),
         replace({ __VERSION__: version }),

src/utils.ts

@@ -1,7 +1,7 @@
-import { DocumentNode } from 'graphql';
-import { Operation } from './types';
+import { DocumentNode, print } from 'graphql';
 import stringify from 'fast-json-stable-stringify';
 import Vue from 'vue';
+import { Operation } from './types';
 
 /**
  * Normalizes a list of variable objects.
@@ -29,7 +29,7 @@ export function normalizeQuery(query: string | DocumentNode): string | null {
   }
 
   if (query.loc) {
-    return query.loc.source.body;
+    return print(query);
   }
 
   return null;
@@ -46,8 +46,9 @@ export function hash(x: string) {
 
 export function getQueryKey(operation: Operation) {
   const variables = operation.variables ? stringify(operation.variables) : '';
+  const query = normalizeQuery(operation.query);
 
-  return hash(`${operation.query}${variables}`);
+  return hash(`${query}${variables}`);
 }
 
 export function normalizeChildren(context: Vue, slotProps: any) {