Improved examples.

- Examples match those of https://github.com/jaydenseric/apollo-upload-examples.
- Added example cURL requests, fixing jaydenseric#6.
- Added example request payloads.

Author: jaydenseric

readme.md

@@ -6,8 +6,8 @@ An interoperable [multipart form](https://tools.ietf.org/html/rfc7578) field str
 
 It’s possible to implement:
 
-* Files nested anywhere within operations (typically in `variables`).
-* Batched operations.
+* Nesting files anywhere within operations (usually in `variables`).
+* Operation batching.
 * File deduplication.
 * File upload streams in resolvers.
 * Aborting file uploads in resolvers.
@@ -26,82 +26,190 @@ So operations can be resolved while the files are still uploading, the fields ar
 
 ## Examples
 
-### Avatar mutation
+### Single file
 
 #### Operations
 
 ```js
 {
-  query: '…',
-  operationName: 'updateAvatar',
+  query: `
+    mutation($file: Upload!) {
+      uploadFile(file: $file) {
+        id
+      }
+    }
+  `,
   variables: {
-    userId: '…',
-    image: File
+    file: File // a.txt
   }
 }
 ```
 
-#### Multipart form fields
+#### cURL request
+
+```shell
+curl localhost:3001/graphql \
+  -F operations='{ "query": "mutation ($file: Upload!) { singleUpload(file: $file) { id } }", "variables": { "file": null } }' \
+  -F map='{ "0": ["variables.file"] }' \
+  -F 0=@a.txt
+```
+
+#### Request payload
+
+```
+--------------------------cec8e8123c05ba25
+Content-Disposition: form-data; name="operations"
+
+{ "query": "mutation ($file: Upload!) { singleUpload(file: $file) { id } }", "variables": { "file": null } }
+--------------------------cec8e8123c05ba25
+Content-Disposition: form-data; name="map"
+
+{ "0": ["variables.file"] }
+--------------------------cec8e8123c05ba25
+Content-Disposition: form-data; name="0"; filename="a.txt"
+Content-Type: text/plain
+
+Alpha file content.
 
-1. `operations`: `{"query": "…", "operationName": "updateAvatar", "variables": {"userId": "…", image: null}}`
-2. `map`: `{"1": ["variables.image"]}`
-3. `1`: File
+--------------------------cec8e8123c05ba25--
+```
 
-### Gallery mutation
+### File list
 
 #### Operations
 
 ```js
 {
-  query: '…',
-  operationName: 'addToGallery',
+  query: `
+    mutation($files: [Upload!]!) {
+      multipleUpload(files: $files) {
+        id
+      }
+    }
+  `,
   variables: {
-    galleryId: '…',
-    images: [File, File, File]
+    files: [
+      File, // b.txt
+      File // c.txt
+    ]
   }
 }
 ```
 
-#### Multipart form fields
+#### cURL request
+
+```shell
+curl localhost:3001/graphql \
+  -F operations='{ "query": "mutation($files: [Upload!]!) { multipleUpload(files: $files) { id } }", "variables": { "files": [null, null] } }' \
+  -F map='{ "0": ["variables.files.0"], "1": ["variables.files.1"] }' \
+  -F 0=@b.txt \
+  -F 1=@c.txt
+```
+
+#### Request payload
+
+```
+--------------------------ec62457de6331cad
+Content-Disposition: form-data; name="operations"
+
+{ "query": "mutation($files: [Upload!]!) { multipleUpload(files: $files) { id } }", "variables": { "files": [null, null] } }
+--------------------------ec62457de6331cad
+Content-Disposition: form-data; name="map"
+
+{ "0": ["variables.files.0"], "1": ["variables.files.1"] }
+--------------------------ec62457de6331cad
+Content-Disposition: form-data; name="0"; filename="b.txt"
+Content-Type: text/plain
 
-1. `operations`: `{"query": "…", "operationName": "addToGallery", "variables": {"galleryId": "…", images: [null, null, null]}}`
-2. `map`: `{"1": ["variables.images.0"], "2": ["variables.images.1"], "3": ["variables.images.2"]}`
-3. `1`: File
-4. `2`: File
-5. `3`: File
+Bravo file content.
 
-### Batched mutations
+--------------------------ec62457de6331cad
+Content-Disposition: form-data; name="1"; filename="c.txt"
+Content-Type: text/plain
+
+Charlie file content.
+
+--------------------------ec62457de6331cad--
+```
+
+### Batching
 
 #### Operations
 
 ```js
 [
   {
-    query: '…',
-    operationName: 'updateAvatar',
+    query: `
+      mutation($file: Upload!) {
+        uploadFile(file: $file) {
+          id
+        }
+      }
+    `,
     variables: {
-      userId: '…',
-      image: File
+      file: File // a.txt
     }
   },
   {
-    query: '…',
-    operationName: 'addToGallery',
+    query: `
+      mutation($files: [Upload!]!) {
+        multipleUpload(files: $files) {
+          id
+        }
+      }
+    `,
     variables: {
-      galleryId: '…',
-      images: [File, File, File]
+      files: [
+        File, // b.txt
+        File // c.txt
+      ]
     }
   }
 ]
 ```
 
-#### Multipart form fields
+#### cURL request
+
+```shell
+curl localhost:3001/graphql \
+  -F operations='[{ "query": "mutation ($file: Upload!) { singleUpload(file: $file) { id } }", "variables": { "file": null } }, { "query": "mutation($files: [Upload!]!) { multipleUpload(files: $files) { id } }", "variables": { "files": [null, null] } }]' \
+  -F map='{ "0": ["0.variables.file"], "1": ["1.variables.files.0"], "2": ["1.variables.files.1"] }' \
+  -F 0=@a.txt \
+  -F 1=@b.txt \
+  -F 2=@c.txt
+```
+
+#### Request payload
+
+```
+--------------------------627436eaefdbc285
+Content-Disposition: form-data; name="operations"
 
-1. `operations`: `[{"query": "…", "operationName": "updateAvatar", "variables": {"userId": "…", image: null}}, {"query": "…", "operationName": "addToGallery", "variables": {"galleryId": "…", images: [null, null, null]}}]`
-2. `map`: `{"1": ["0.variables.image", "1.variables.images.0"], "2": ["1.variables.images.1"], "3": ["1.variables.images.2"]}`
-3. `1`: File
-4. `2`: File
-5. `3`: File
+[{ "query": "mutation ($file: Upload!) { singleUpload(file: $file) { id } }", "variables": { "file": null } }, { "query": "mutation($files: [Upload!]!) { multipleUpload(files: $files) { id } }", "variables": { "files": [null, null] } }]
+--------------------------627436eaefdbc285
+Content-Disposition: form-data; name="map"
+
+{ "0": ["0.variables.file"], "1": ["1.variables.files.0"], "2": ["1.variables.files.1"] }
+--------------------------627436eaefdbc285
+Content-Disposition: form-data; name="0"; filename="a.txt"
+Content-Type: text/plain
+
+Alpha file content.
+
+--------------------------627436eaefdbc285
+Content-Disposition: form-data; name="1"; filename="b.txt"
+Content-Type: text/plain
+
+Bravo file content.
+
+--------------------------627436eaefdbc285
+Content-Disposition: form-data; name="2"; filename="c.txt"
+Content-Type: text/plain
+
+Charlie file content.
+
+--------------------------627436eaefdbc285--
+```
 
 ## Implementations