Refactor example code in the readme.

jaydenseric · Oct 23, 2023 · 37dbf10 · 37dbf10
1 parent 4a60069
commit 37dbf10
Show file tree

Hide file tree

Showing 2 changed files with 55 additions and 27 deletions.
diff --git a/changelog.md b/changelog.md
@@ -79,6 +79,7 @@
 - In tests, for objects with the property `headers` that as of [`@apollo/client`](https://npm.im/@apollo/client) [v3.7.0](https://github.com/apollographql/apollo-client/releases/tag/v3.7.0) is a null-prototype object, use the assertion `deepEqual` instead of `deepStrictEqual`.
 - Tweaked code for type safety.
 - Updated documentation, including link URLs.
+- Refactored example code in the readme.
 - Removed the readme badges.
 
 ## 17.0.0

diff --git a/readme.md b/readme.md
@@ -49,11 +49,21 @@ const MUTATION = gql`
 function UploadFiles() {
   const [mutate] = useMutation(MUTATION);
 
-  function onChange({ target: { validity, files } }) {
-    if (validity.valid) mutate({ variables: { files } });
-  }
-
-  return <input type="file" multiple required onChange={onChange} />;
+  return (
+    <input
+      type="file"
+      multiple
+      required
+      onChange={({ target: { validity, files } }) => {
+        if (validity.valid)
+          mutate({
+            variables: {
+              files,
+            },
+          });
+      }}
+    />
+  );
 }
 ```
 
@@ -73,16 +83,25 @@ const MUTATION = gql`
 function UploadFile() {
   const [mutate] = useMutation(MUTATION);
 
-  function onChange({
-    target: {
-      validity,
-      files: [file],
-    },
-  }) {
-    if (validity.valid) mutate({ variables: { file } });
-  }
-
-  return <input type="file" required onChange={onChange} />;
+  return (
+    <input
+      type="file"
+      required
+      onChange={({
+        target: {
+          validity,
+          files: [file],
+        },
+      }) => {
+        if (validity.valid)
+          mutate({
+            variables: {
+              file,
+            },
+          });
+      }}
+    />
+  );
 }
 ```
 
@@ -102,18 +121,26 @@ const MUTATION = gql`
 function UploadFile() {
   const [mutate] = useMutation(MUTATION);
 
-  function onChange({ target: { validity, value } }) {
-    if (validity.valid) {
-      const file = new Blob([value], { type: "text/plain" });
-
-      // Optional, defaults to `blob`.
-      file.name = "text.txt";
-
-      mutate({ variables: { file } });
-    }
-  }
-
-  return <input type="text" required onChange={onChange} />;
+  return (
+    <input
+      type="text"
+      required
+      onChange={({ target: { validity, value } }) => {
+        if (validity.valid) {
+          const file = new Blob([value], { type: "text/plain" });
+
+          // Optional, defaults to `blob`.
+          file.name = "text.txt";
+
+          mutate({
+            variables: {
+              file,
+            },
+          });
+        }
+      }}
+    />
+  );
 }
 ```