From 37dbf1035d903b92db5c42d943aada44b845c45f Mon Sep 17 00:00:00 2001
From: Jayden Seric <me@jaydenseric.com>
Date: Mon, 23 Oct 2023 21:27:12 +1100
Subject: [PATCH] Refactor example code in the readme.

---
 changelog.md |  1 +
 readme.md    | 81 ++++++++++++++++++++++++++++++++++------------------
 2 files changed, 55 insertions(+), 27 deletions(-)

diff --git a/changelog.md b/changelog.md
index d5626a7..61e3f54 100644
--- 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
index 322585b..638371c 100644
--- 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,
+            },
+          });
+        }
+      }}
+    />
+  );
 }
 ```