From bc81d7593f8a98c5cea42540607ad806699eebbd Mon Sep 17 00:00:00 2001
From: caub <cyril.auburtin@gmail.com>
Date: Thu, 18 Jan 2018 17:42:44 +0100
Subject: [PATCH] Convert XHR to fetch in examples

---
 site/graphql-js/Tutorial-GraphQLClients.md   | 45 +++++++++++---------
 site/graphql-js/Tutorial-Mutations.md        | 34 ++++++++-------
 site/graphql-js/Tutorial-PassingArguments.md | 26 +++++------
 3 files changed, 56 insertions(+), 49 deletions(-)

diff --git a/site/graphql-js/Tutorial-GraphQLClients.md b/site/graphql-js/Tutorial-GraphQLClients.md
index f13dab9634..0f66b86803 100644
--- a/site/graphql-js/Tutorial-GraphQLClients.md
+++ b/site/graphql-js/Tutorial-GraphQLClients.md
@@ -26,15 +26,16 @@ You should see the output returned as JSON:
 It's also simple to send GraphQL from the browser. Open up http://localhost:4000, open a developer console, and paste in:
 
 ```javascript
-var xhr = new XMLHttpRequest();
-xhr.responseType = 'json';
-xhr.open("POST", "/graphql");
-xhr.setRequestHeader("Content-Type", "application/json");
-xhr.setRequestHeader("Accept", "application/json");
-xhr.onload = function () {
-  console.log('data returned:', xhr.response);
-}
-xhr.send(JSON.stringify({query: "{ hello }"}));
+fetch('/graphql', {
+  method: 'POST',
+  headers: {
+    'Content-Type': 'application/json',
+    'Accept': 'application/json',
+  },
+  body: JSON.stringify({query: "{ hello }"})
+})
+  .then(r => r.json())
+  .then(data => console.log('data returned:', data));
 ```
 
 You should see the data returned, logged in the console:
@@ -58,21 +59,23 @@ You could access this from JavaScript with the code:
 ```javascript
 var dice = 3;
 var sides = 6;
-var xhr = new XMLHttpRequest();
-xhr.responseType = 'json';
-xhr.open("POST", "/graphql");
-xhr.setRequestHeader("Content-Type", "application/json");
-xhr.setRequestHeader("Accept", "application/json");
-xhr.onload = function () {
-  console.log('data returned:', xhr.response);
-}
 var query = `query RollDice($dice: Int!, $sides: Int) {
   rollDice(numDice: $dice, numSides: $sides)
 }`;
-xhr.send(JSON.stringify({
-  query: query,
-  variables: { dice: dice, sides: sides },
-}));
+
+fetch('/graphql', {
+  method: 'POST',
+  headers: {
+    'Content-Type': 'application/json',
+    'Accept': 'application/json',
+  },
+  body: JSON.stringify({
+    query,
+    variables: { dice, sides },
+  })
+})
+  .then(r => r.json())
+  .then(data => console.log('data returned:', data));
 ```
 
 Using this syntax for variables is a good idea because it automatically prevents bugs due to escaping, and it makes it easier to monitor your server.
diff --git a/site/graphql-js/Tutorial-Mutations.md b/site/graphql-js/Tutorial-Mutations.md
index e6bc53781d..2ccde6ae68 100644
--- a/site/graphql-js/Tutorial-Mutations.md
+++ b/site/graphql-js/Tutorial-Mutations.md
@@ -165,28 +165,30 @@ You can use variables to simplify mutation client logic just like you can with q
 ```javascript
 var author = 'andy';
 var content = 'hope is a good thing';
-var xhr = new XMLHttpRequest();
-xhr.responseType = 'json';
-xhr.open("POST", "/graphql");
-xhr.setRequestHeader("Content-Type", "application/json");
-xhr.setRequestHeader("Accept", "application/json");
-xhr.onload = function () {
-  console.log('data returned:', xhr.response);
-}
 var query = `mutation CreateMessage($input: MessageInput) {
   createMessage(input: $input) {
     id
   }
 }`;
-xhr.send(JSON.stringify({
-  query: query,
-  variables: {
-    input: {
-      author: author,
-      content: content,
+
+fetch('/graphql', {
+  method: 'POST',
+  headers: {
+    'Content-Type': 'application/json',
+    'Accept': 'application/json',
+  },
+  body: JSON.stringify({
+    query,
+    variables: {
+      input: {
+        author,
+        content,
+      }
     }
-  }
-}));
+  })
+})
+  .then(r => r.json())
+  .then(data => console.log('data returned:', data));
 ```
 
 One particular type of mutation is operations that change users, like signing up a new user. While you can implement this using GraphQL mutations, you can reuse many existing libraries if you learn about [GraphQL with authentication and Express middleware](/graphql-js/authentication-and-express-middleware/).
diff --git a/site/graphql-js/Tutorial-PassingArguments.md b/site/graphql-js/Tutorial-PassingArguments.md
index e7470e7147..47154b488b 100644
--- a/site/graphql-js/Tutorial-PassingArguments.md
+++ b/site/graphql-js/Tutorial-PassingArguments.md
@@ -106,21 +106,23 @@ For example, some JavaScript code that calls our server above is:
 ```javascript
 var dice = 3;
 var sides = 6;
-var xhr = new XMLHttpRequest();
-xhr.responseType = 'json';
-xhr.open("POST", "/graphql");
-xhr.setRequestHeader("Content-Type", "application/json");
-xhr.setRequestHeader("Accept", "application/json");
-xhr.onload = function () {
-  console.log('data returned:', xhr.response);
-}
 var query = `query RollDice($dice: Int!, $sides: Int) {
   rollDice(numDice: $dice, numSides: $sides)
 }`;
-xhr.send(JSON.stringify({
-  query: query,
-  variables: { dice: dice, sides: sides },
-}));
+
+fetch('/graphql', {
+  method: 'POST',
+  headers: {
+    'Content-Type': 'application/json',
+    'Accept': 'application/json',
+  },
+  body: JSON.stringify({
+    query,
+    variables: { dice, sides },
+  })
+})
+  .then(r => r.json())
+  .then(data => console.log('data returned:', data));
 ```
 
 Using `$dice` and `$sides` as variables in GraphQL means we don't have to worry about escaping on the client side.