zod example

Author: bradwestfall

lessons/03-request-response/lecture/NOTES.md

@@ -30,3 +30,29 @@ If the response contains JSON data, you can resolve that from the response objec
 ```js
 fetch().then((res) => res.json())
 ```
+
+## Typesafe Network Response
+
+```ts
+const personSchema = z.object({
+  name: z.string(),
+  height: z.string().transform((val) => Number(val)),
+})
+
+type Person = z.infer<typeof personSchema>
+
+function getPerson(id: number) {
+  return fetch(`https://swapi.dev/api/people/${id}`)
+    .then((res) => res.json())
+    .then((data) => {
+      const parseResults = personSchema.safeParse(data)
+      if (parseResults.success) {
+        return parseResults.data
+      }
+    })
+}
+
+getPerson(1).then((person) => {
+  console.log(person)
+})
+```

lessons/03-request-response/lecture/index.ts

@@ -1,38 +1,67 @@
+import z from 'zod'
 // import { fakeFetch } from './utils'
 
 /****************************************
-  Part One: Request
+  Part 1: Request
 *****************************************/
 
-function getPersonVehicles(id: number) {
-  fetch(`https://swapi.dev/api/people/${id}`).then(() => {
-    console.log('Promise is resolved')
-  })
-}
+// function getPerson(id: number) {
+//   fetch(`https://swapi.dev/api/people/${id}`).then(() => {
+//     console.log('Promise is resolved')
+//   })
+// }
 
-getPersonVehicles(1)
+// getPerson(1)
 
 /****************************************
-  Part Two: Response
+  Part 2: Response
 *****************************************/
 
 // Docs: "[fetch] resolves to the Response object representing the response to your request."
 // https://developer.mozilla.org/en-US/docs/Web/API/fetch#return_value
 
-// function getPersonVehicles(id: number) {
-//   fetch(`https://swapi.dev/api/people/${id}`).then((stuff) => {
-//     console.log('What is this', stuff)
+// function getPerson(id: number) {
+//   fetch(`https://swapi.dev/api/people/${id}`).then((res) => {
+//     console.log('What is in the response', res)
 //   })
 // }
 
-// getPersonVehicles(1)
+// getPerson(1)
 
 /****************************************
-  Custom Fetch
+  Part 3: Custom Fetch
 *****************************************/
 
 // fakeFetch('fake-api')
 //   .then((res) => res.json())
 //   .then((data) => {
 //     console.log(data)
 //   })
+
+/****************************************
+  Part 4: Typesafe Network Response
+*****************************************/
+
+// const personSchema = z.object({
+//   name: z.string(),
+//   height: z.string().transform((val) => Number(val)),
+// })
+
+// type Person = z.infer<typeof personSchema>
+
+type Person = {
+  name: string
+  height: number
+}
+
+function getPerson(id: number) {
+  return fetch(`https://swapi.dev/api/people/${id}`)
+    .then((res) => res.json())
+    .then((data) => {
+      return data as Person
+    })
+}
+
+getPerson(1).then((person) => {
+  console.log(person)
+})

package-lock.json

@@ -33,7 +33,8 @@
     "morgan": "^1.10.0",
     "node-fetch": "^3.3.2",
     "readline-sync": "^1.4.10",
-    "sqlite3": "^5.1.7"
+    "sqlite3": "^5.1.7",
+    "zod": "^3.23.8"
   },
   "devDependencies": {
     "@types/express": "^4.17.21",