Convert XHR to fetch in examples (graphql#455)

Author: caub

site/graphql-js/Tutorial-GraphQLClients.md

@@ -28,15 +28,16 @@ If you prefer to use a graphical user interface to send a test query, you can us
 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:
@@ -60,21 +61,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.

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/).

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.