Merge remote-tracking branch 'origin/develop'

.eslintrc.js

@@ -10,6 +10,6 @@ module.exports = {
     jest: true,
     node: true,
   },
-  extends: ['prettier', 'prettier/vue'],
+  extends: ['prettier'],
   plugins: ['prettier', 'vue'],
 };

README.md

@@ -43,9 +43,25 @@ module.exports = {
 
   graphql: {
     /**
-     * Your GraphQL endpoint
+     * An Object of your GraphQL clients
      */
-    endpoint: 'https://swapi-graphql.netlify.com/.netlify/functions/index',
+    clients: {
+      default: {
+        /**
+         * The client endpoint url
+         */
+        endpoint: 'https://swapi-graphql.netlify.com/.netlify/functions/index',
+        /**
+         * Per-client options overrides
+         * See: https://github.com/prisma-labs/graphql-request#passing-more-options-to-fetch
+         */
+        options: {},
+      },
+      secondClient: {
+        // ...client config
+      },
+      // ...your other clients
+    },
 
     /**
      * Options
@@ -70,14 +86,24 @@ module.exports = {
 
 ### Runtime Config
 
-If you need to supply your endpoint at runtime, rather than build time, you can use the [Runtime Config](https://nuxtjs.org/docs/2.x/configuration-glossary/configuration-runtime-config) to provide this value:
+If you need to supply your endpoints at runtime, rather than build time, you can use the [Runtime Config](https://nuxtjs.org/docs/2.x/configuration-glossary/configuration-runtime-config) to provide your values:
 
 **nuxt.config.js**
 
 ```ts
 module.exports = {
   publicRuntimeConfig: {
-    GRAPHQL_ENDPOINT: '<your endpoint>',
+    graphql: {
+      clients: {
+        default: {
+          endpoint: '<client endpoint>',
+        },
+        secondClient: {
+          endpoint: '<client endpoint>',
+        },
+        // ...more clients
+      },
+    },
   },
 };
 ```
@@ -91,45 +117,49 @@ module.exports = {
 ```ts
 import { gql } from 'nuxt-graphql-request';
 
-async asyncData({ $graphql, params }) {
-  const query = gql`
-    query planets {
-      allPlanets {
-        planets {
-          id
-          name
+export default {
+  async asyncData({ $graphql, params }) {
+    const query = gql`
+      query planets {
+        allPlanets {
+          planets {
+            id
+            name
+          }
         }
       }
-    }
-  `;
+    `;
 
-  const planets = await $graphql.request(query);
-  return { planets };
-}
+    const planets = await $graphql.default.request(query);
+    return { planets };
+  },
+};
 ```
 
 **`methods`/`created`/`mounted`/etc**
 
 ```ts
 import { gql } from 'nuxt-graphql-request';
 
-methods: {
-  async fetchSomething() {
-    const query = gql`
-      query planets {
-        allPlanets {
-          planets {
-            id
-            name
+export default {
+  methods: {
+    async fetchSomething() {
+      const query = gql`
+        query planets {
+          allPlanets {
+            planets {
+              id
+              name
+            }
           }
         }
-      }
-    `;
+      `;
 
-    const planets = await $graphql.request(query);
-    this.$set(this, 'planets', planets);
-  }
-}
+      const planets = await this.$graphql.default.request(query);
+      this.$set(this, 'planets', planets);
+    },
+  },
+};
 ```
 
 ### Store actions (including `nuxtServerInit`)
@@ -138,9 +168,9 @@ methods: {
 import { gql } from 'nuxt-graphql-request';
 
 // In store
-{
+export default {
   actions: {
-    async fetchAllPlanets ({ commit }) {
+    async fetchAllPlanets({ commit }) {
       const query = gql`
         query planets {
           allPlanets {
@@ -152,11 +182,11 @@ import { gql } from 'nuxt-graphql-request';
         }
       `;
 
-      const planets = await this.$graphql.request(query);
-      commit('SET_PLANETS', planets)
-    }
-  }
-}
+      const planets = await this.$graphql.default.request(query);
+      commit('SET_PLANETS', planets);
+    },
+  },
+};
 ```
 
 ### GraphQL Request Client
@@ -172,10 +202,14 @@ In nuxt.config.ts
 
 module.exports = {
   graphql: {
-    endpoint: 'https://swapi-graphql.netlify.com/.netlify/functions/index',
-    options: {
-      headers: {
-        authorization: 'Bearer MY_TOKEN',
+    clients: {
+      default: {
+        endpoint: 'https://swapi-graphql.netlify.com/.netlify/functions/index',
+        options: {
+          headers: {
+            authorization: 'Bearer MY_TOKEN',
+          },
+        },
       },
     },
   },
@@ -188,10 +222,10 @@ If you want to set headers after the GraphQLClient has been initialised, you can
 
 ```ts
 // Set a single header
-this.$graphql.setHeaders({ authorization: 'Bearer MY_TOKEN' });
+this.$graphql.default.setHeaders({ authorization: 'Bearer MY_TOKEN' });
 
 // Override all existing headers
-this.$graphql.setHeader('authorization', 'Bearer MY_TOKEN');
+this.$graphql.default.setHeader('authorization', 'Bearer MY_TOKEN');
 ```
 
 ##### passing-headers-in-each-request
@@ -219,7 +253,7 @@ export default {
       `;
 
       // Overrides the clients headers with the passed values
-      const planets = await $graphql.request(query, {}, requestHeaders);
+      const planets = await this.$graphql.default.request(query, {}, requestHeaders);
       this.$set(this, 'planets', planets);
     },
   },
@@ -236,10 +270,14 @@ In nuxt.config.ts:
 
 module.exports = {
   graphql: {
-    endpoint: 'https://swapi-graphql.netlify.com/.netlify/functions/index',
-    options: {
-      credentials: 'include',
-      mode: 'cors',
+    clients: {
+      default: {
+        endpoint: 'https://swapi-graphql.netlify.com/.netlify/functions/index',
+        options: {
+          credentials: 'include',
+          mode: 'cors',
+        },
+      },
     },
   },
 };
@@ -249,11 +287,11 @@ Or using setHeaders / setHeader:
 
 ```ts
 // Set a single header
-this.$graphql.setHeader('credentials', 'include');
-this.$graphql.setHeader('mode', 'cors');
+this.$graphql.default.setHeader('credentials', 'include');
+this.$graphql.default.setHeader('mode', 'cors');
 
 // Override all existing headers
-this.$graphql.setHeaders({
+this.$graphql.default.setHeaders({
   credentials: 'include',
   mode: 'cors',
 });
@@ -281,7 +319,7 @@ export default {
 
       const variables = { first: 10 };
 
-      const planets = await this.$graphql.request(query, variables);
+      const planets = await this.$graphql.default.request(query, variables);
     },
   },
 };
@@ -309,7 +347,7 @@ export default {
       `;
 
       try {
-        const data = await this.$graphql.request(endpoint, query);
+        const data = await this.$graphql.default.request(endpoint, query);
         console.log(JSON.stringify(data, undefined, 2));
       } catch (error) {
         console.error(JSON.stringify(error, undefined, 2));
@@ -344,7 +382,7 @@ export default {
         releaseDate: 2010,
       };
 
-      const data = await this.$graphql.request(mutation, variables);
+      const data = await this.$graphql.default.request(mutation, variables);
     },
   },
 };
@@ -371,7 +409,7 @@ const query = gql`
 
 const variables = { first: 10 };
 
-const { data, errors, extensions, headers, status } = await this.$graphql.rawRequest(
+const { data, errors, extensions, headers, status } = await this.$graphql.default.rawRequest(
   endpoint,
   query,
   variables
@@ -384,6 +422,7 @@ console.log(JSON.stringify({ data, errors, extensions, headers, status }, undefi
 ```vue
 <script>
 import { gql } from 'nuxt-graphql-request';
+
 export default {
   methods: {
     handleFileUpload(file) {
@@ -395,7 +434,7 @@ export default {
 
       const variables = { userId: 1, file };
 
-      this.$graphql.request(mutation, variables);
+      this.$graphql.default.request(mutation, variables);
     },
   },
 };
@@ -440,7 +479,6 @@ Sure, you can perform any GraphQL queries & mutations as before 👍
 
 ## Roadmap
 
-- [ ] Support multiple clients
 - [ ] Support [WebSocket client](https://github.com/lunchboxer/graphql-subscriptions-client)?
 - [ ] Generate [Typed Graphql-request client](https://graphql-code-generator.com/docs/plugins/typescript-graphql-request)
 

docs/content/en/examples/authentication.md

@@ -10,10 +10,14 @@ category: 'Examples'
 
 module.exports = {
   graphql: {
-    endpoint: 'https://swapi-graphql.netlify.com/.netlify/functions/index',
-    options: {
-      headers: {
-        authorization: 'Bearer MY_TOKEN',
+    clients: {
+      default: {
+        endpoint: 'https://swapi-graphql.netlify.com/.netlify/functions/index',
+        options: {
+          headers: {
+            authorization: 'Bearer MY_TOKEN',
+          },
+        },
       },
     },
   },
@@ -26,10 +30,10 @@ If you want to set headers after the GraphQLClient has been initialised, you can
 
 ```ts
 // Set a single header
-this.$graphql.setHeaders({ authorization: 'Bearer MY_TOKEN' });
+this.$graphql.default.setHeaders({ authorization: 'Bearer MY_TOKEN' });
 
 // Override all existing headers
-this.$graphql.setHeader('authorization', 'Bearer MY_TOKEN');
+this.$graphql.default.setHeader('authorization', 'Bearer MY_TOKEN');
 ```
 
 ### passing-headers-in-each-request
@@ -57,7 +61,7 @@ export default {
       `;
 
       // Overrides the clients headers with the passed values
-      const planets = await $graphql.request(query, {}, requestHeaders);
+      const planets = await this.$graphql.default.request(query, {}, requestHeaders);
       this.$set(this, 'planets', planets);
     },
   },

docs/content/en/examples/error-handling.md

@@ -26,7 +26,7 @@ export default {
         releaseDate: 2010,
       };
 
-      const data = await this.$graphql.request(mutation, variables);
+      const data = await this.$graphql.default.request(mutation, variables);
     },
   },
 };

docs/content/en/examples/file-upload.md

@@ -20,7 +20,7 @@ export default {
 
       const variables = { userId: 1, file };
 
-      this.$graphql.request(mutation, variables);
+      this.$graphql.default.request(mutation, variables);
     },
   },
 };

docs/content/en/examples/graphql-mutations.md

@@ -24,7 +24,7 @@ export default {
       `;
 
       try {
-        const data = await this.$graphql.request(endpoint, query);
+        const data = await this.$graphql.default.request(endpoint, query);
         console.log(JSON.stringify(data, undefined, 2));
       } catch (error) {
         console.error(JSON.stringify(error, undefined, 2));