Update app dependencies.

Also includes TypeScript and Prettier fixes.

app/components/Page.mjs

@@ -14,6 +14,6 @@ export default function Page({ title, children }) {
     Fragment,
     null,
     h(nextHead.default, null, h("title", null, title)),
-    children
+    children,
   );
 }

app/components/UploadBlob.mjs

@@ -22,7 +22,7 @@ export default function UploadBlob() {
   const [name, setName] = useState("");
   const [content, setContent] = useState("");
   const [singleUploadMutation, { loading }] = useMutation(
-    SINGLE_UPLOAD_MUTATION
+    SINGLE_UPLOAD_MUTATION,
   );
   const apolloClient = useApolloClient();
 
@@ -68,7 +68,7 @@ export default function UploadBlob() {
           null,
           "File name (without ",
           h(Code, null, ".txt"),
-          ")"
+          ")",
         ),
       },
       h(Textbox, {
@@ -76,7 +76,7 @@ export default function UploadBlob() {
         required: true,
         value: name,
         onChange: onNameChange,
-      })
+      }),
     ),
     h(
       Fieldset,
@@ -87,8 +87,8 @@ export default function UploadBlob() {
         required: true,
         value: content,
         onChange: onContentChange,
-      })
+      }),
     ),
-    h(ButtonSubmit, { loading }, "Upload")
+    h(ButtonSubmit, { loading }, "Upload"),
   );
 }

app/components/Uploads.mjs

@@ -44,8 +44,8 @@ export default function Uploads() {
       h(
         "tbody",
         null,
-        uploads.map(({ id, url }) => h("tr", { key: id }, h("td", null, url)))
+        uploads.map(({ id, url }) => h("tr", { key: id }, h("td", null, url))),
-      )
+      ),
-    )
+    ),
   );
 }

app/package.json

@@ -21,31 +21,31 @@
   },
   "browserslist": "Node 18.15 - 19 and Node < 19, Node >= 20.4, > 0.5%, not OperaMini all, not IE > 0, not dead",
   "dependencies": {
-    "@apollo/client": "^3.7.4",
+    "@apollo/client": "^3.8.6",
     "apollo-upload-client": "^17.0.0",
     "device-agnostic-ui": "~10.0.0",
-    "graphql": "^16.6.0",
+    "graphql": "^16.8.1",
-    "next": "^13.1.2",
+    "next": "^13.5.6",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },
   "devDependencies": {
-    "@babel/eslint-parser": "^7.19.1",
+    "@babel/eslint-parser": "^7.22.15",
-    "@types/eslint": "^8.4.10",
+    "@types/eslint": "^8.44.6",
-    "@types/node": "^18.11.18",
+    "@types/node": "^20.8.7",
-    "@types/react": "^18.0.26",
+    "@types/react": "^18.2.31",
-    "@types/react-dom": "^18.0.10",
+    "@types/react-dom": "^18.2.14",
     "babel-plugin-graphql-tag": "^3.3.0",
-    "eslint": "^8.31.0",
+    "eslint": "^8.52.0",
     "eslint-plugin-react-hooks": "^4.6.0",
-    "eslint-plugin-simple-import-sort": "^8.0.0",
+    "eslint-plugin-simple-import-sort": "^10.0.0",
-    "prettier": "^2.8.2",
+    "prettier": "^3.0.3",
-    "stylelint": "^14.16.1",
+    "stylelint": "^15.11.0",
-    "stylelint-config-recommended": "^9.0.0",
+    "stylelint-config-recommended": "^13.0.0",
-    "typescript": "^4.9.4"
+    "typescript": "^5.2.2"
   },
   "overrides": {
-    "next": "^13.1.2",
+    "next": "^13.5.6",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },

app/pages/_app.mjs

@@ -23,7 +23,9 @@ import { createElement as h, Fragment } from "react";
 
 /**
  * Creates an Apollo Client instance.
- * @param {{ [key: string]: unknown }} [cache] Apollo Client initial cache.
+ * @param {import(
+ *   "@apollo/client/cache/inmemory/types.js"
+ * ).NormalizedCacheObject} [cache] Apollo Client initial cache.
  */
 const createApolloClient = (cache = {}) =>
   new ApolloClient({
@@ -61,9 +63,9 @@ function App({
         }),
         h("meta", { name: "color-scheme", content: "light dark" }),
         h("meta", { name: "theme-color", content: "white" }),
-        h("link", { rel: "manifest", href: "/manifest.webmanifest" })
+        h("link", { rel: "manifest", href: "/manifest.webmanifest" }),
       ),
-      h(Component, pageProps)
+      h(Component, pageProps),
     ),
   });
 }
@@ -106,6 +108,8 @@ export default App;
 /**
  * Next.js app custom props.
  * @typedef {object} AppCustomProps
- * @prop {{ [key: string]: unknown }} [apolloCache] Apollo Client initial cache.
+ * @prop {import(
+ *   "@apollo/client/cache/inmemory/types.js"
+ * ).NormalizedCacheObject} [apolloCache] Apollo Client initial cache.
  * @prop {ApolloClient<any>} apolloClient Apollo Client.
  */

app/pages/index.mjs

@@ -20,7 +20,7 @@ export default function IndexPage() {
     h(
       Header,
       null,
-      h(Heading, { level: 1, size: 1 }, "Apollo upload examples")
+      h(Heading, { level: 1, size: 1 }, "Apollo upload examples"),
     ),
     h(
       Section,
@@ -28,9 +28,9 @@ export default function IndexPage() {
       h(
         Header,
         null,
-        h(Heading, { level: 2, size: 2 }, "Upload ", h(Code, null, "FileList"))
+        h(Heading, { level: 2, size: 2 }, "Upload ", h(Code, null, "FileList")),
       ),
-      h(Margin, null, h(UploadFileList))
+      h(Margin, null, h(UploadFileList)),
     ),
     h(
       Section,
@@ -38,9 +38,9 @@ export default function IndexPage() {
       h(
         Header,
         null,
-        h(Heading, { level: 2, size: 2 }, "Upload ", h(Code, null, "File"))
+        h(Heading, { level: 2, size: 2 }, "Upload ", h(Code, null, "File")),
       ),
-      h(Margin, null, h(UploadFile))
+      h(Margin, null, h(UploadFile)),
     ),
     h(
       Section,
@@ -48,10 +48,10 @@ export default function IndexPage() {
       h(
         Header,
         null,
-        h(Heading, { level: 2, size: 2 }, "Upload ", h(Code, null, "Blob"))
+        h(Heading, { level: 2, size: 2 }, "Upload ", h(Code, null, "Blob")),
       ),
-      h(Margin, null, h(UploadBlob))
+      h(Margin, null, h(UploadBlob)),
     ),
-    h(Section, null, h(Header, null, h(Heading, null, "Uploads")), h(Uploads))
+    h(Section, null, h(Header, null, h(Heading, null, "Uploads")), h(Uploads)),
   );
 }