update readme for query merging

Author: f

README.md

@@ -173,88 +173,6 @@ login({
 })
 ```
 
-### Query Merging: Merge Multiple Queries into One Request
-
-`graphql.js` supports **query merging** that allows you to collect all the requests into one request.
-
-Assume we've these queries on server, define them just like before we do:
-```js
-var fetchPost = graph.query(`{
-  post(id: $id) {
-    id
-    title
-    text
-  }
-}`)
-
-var fetchComments = graph.query(`{
-  commentsOfPost: comments(postId: $postId) {
-    comment
-    owner {
-      name
-    }
-  }
-}`)
-```
-
-Use **`.merge(mergeName, variables)`** command to put them into a merge buffer:
-
-```js
-var postId = 123
-
-// This won't send a request.
-fetchPost.merge('buildPage', { id: postId }).then(function (response) {
-  console.log(response.post)
-})
-
-// This also won't send a request.
-fetchComments.merge('buildPage', { postId: postId }).then(function (response) {
-  console.log(response.commentsOfPost)
-})
-
-// This will send a merged request:
-graph.commit('buildPage').then(function (response) {
-  // All base fields will be in response return.
-  console.log(response.post)
-  console.log(response.commentsOfPost)
-})
-```
-
-This will create the following merged query generated by **graphql.js**:
-
-```graphql
-query ($merge024533__id: ID!, $merge141499__postId: ID!) {
-  merge024533_post: {
-    post(id: $merge024533__id) {
-      id
-      title
-      text
-    }
-  }
-  merge141499_commentsOfPost: {
-    comments(postId: $merge141499__postId) {
-      comment
-      owner {
-        name
-      }
-    }
-  }
-}
-```
-
-And variables will be generated, too:
-
-```js
-{
-  "merge024533__id": 123,
-  "merge141499__postId": 123
-}
-```
-
-> The `merge{number}` aliases won't be passed into your responses, since they will be used for initial seperation.
-
-> ⚠️ **Important Restriction**: You cannot use multiple root fields using query merging.
-
 #### Direct Execution with `.run` and ES6 Template Tag
 
 If your query doesn't need any variables, it will generate a lazy execution query by default.
@@ -636,6 +554,116 @@ fragment username_admin on AdminUser {
 }
 ```
 
+### Query Merging: Merge Multiple Queries into One Request
+
+`graphql.js` supports **query merging** that allows you to collect all the requests into one request.
+
+Assume we've these queries on server, define them just like before we do:
+```js
+var fetchPost = graph.query(`{
+  post(id: $id) {
+    id
+    title
+    text
+  }
+}`)
+
+var fetchComments = graph.query(`{
+  commentsOfPost: comments(postId: $postId) {
+    comment
+    owner {
+      name
+    }
+  }
+}`)
+```
+
+Normally, we make requests as following:
+
+```js
+var postId = 123
+
+// This will send a request.
+fetchPost({ id: postId }).then(function (response) {
+  console.log(response.post)
+})
+
+// This also will send a request.
+fetchComments({ postId: postId }).then(function (response) {
+  console.log(response.commentsOfPost)
+})
+```
+
+This will make two requests:
+
+![ss1](./resources/ss1.png)
+
+Use **`.merge(mergeName, variables)`** command to put them into a merge buffer:
+
+```js
+var postId = 123
+
+// This won't send a request.
+fetchPost.merge('buildPage', { id: postId }).then(function (response) {
+  console.log(response.post)
+})
+
+// This also won't send a request.
+fetchComments.merge('buildPage', { postId: postId }).then(function (response) {
+  console.log(response.commentsOfPost)
+})
+```
+
+These will create a buffer with *buildPage* name, and append the queries to that buffer. You need to use **`commit(mergeName)`** to merge the buffer and send to the server, the response will be consolidated:
+
+```js
+// This will send a merged request:
+graph.commit('buildPage').then(function (response) {
+  // All base fields will be in response return.
+  console.log(response.post)
+  console.log(response.commentsOfPost)
+})
+```
+
+And this will create only one request:
+
+![ss2](./resources/ss2.png)
+
+This will create the following merged query generated by **graphql.js**:
+
+```graphql
+query ($merge024533__id: ID!, $merge141499__postId: ID!) {
+  merge024533_post: {
+    post(id: $merge024533__id) {
+      id
+      title
+      text
+    }
+  }
+  merge141499_commentsOfPost: {
+    comments(postId: $merge141499__postId) {
+      comment
+      owner {
+        name
+      }
+    }
+  }
+}
+```
+
+And variables will be generated, too:
+
+```js
+{
+  "merge024533__id": 123,
+  "merge141499__postId": 123
+}
+```
+
+> The `merge{number}` aliases won't be passed into your responses, since they will be used for initial seperation.
+
+> ⚠️ **Important Restriction**: You cannot use multiple root fields using query merging.
+
 ## Debugging
 
 You can pass `debug: true` to options parameter to get a console output looks like following: