[Examples] Add SWR to api-routes and api-routes-middleware (#11385)

* Updated the api-routes-middleware example

* Updated the api-routes example

examples/api-routes-middleware/package.json

@@ -8,10 +8,10 @@
   },
   "dependencies": {
     "cookie": "0.4.0",
-    "isomorphic-unfetch": "3.0.0",
     "next": "latest",
     "react": "^16.8.6",
-    "react-dom": "^16.8.6"
+    "react-dom": "^16.8.6",
+    "swr": "0.1.18"
   },
   "license": "ISC"
 }

examples/api-routes-middleware/pages/api/cookies.js

@@ -1,8 +1,10 @@
 import cookies from '../../utils/cookies'
 
 const handler = (req, res) => {
+  // The cookie middleware will add the `set-cookie` header
   res.cookie('Next.js', 'api-middleware!')
-  res.end('Hello Next.js middleware!')
+  // Return the `set-cookie` header so we can display it in the browser and show that it works!
+  res.end(res.getHeader('Set-Cookie'))
 }
 
 export default cookies(handler)

examples/api-routes-middleware/pages/index.js

@@ -1,12 +1,12 @@
-import fetch from 'isomorphic-unfetch'
+import useSWR from 'swr'
 
-const Index = ({ cookie }) => <div>{`Cookie from response: ${cookie}`}</div>
+const fetcher = url => fetch(url).then(res => res.text())
 
-export async function getServerSideProps() {
-  const response = await fetch('http://localhost:3000/api/cookies')
-  const cookie = response.headers.get('set-cookie')
+export default function Index() {
+  const { data, error } = useSWR('/api/cookies', fetcher)
 
-  return { props: { cookie } }
-}
+  if (error) return <div>Failed to load</div>
+  if (!data) return <div>Loading...</div>
 
-export default Index
+  return <div>{`Cookie from response: "${data}"`}</div>
+}

examples/api-routes/package.json

@@ -8,9 +8,9 @@
   },
   "dependencies": {
     "next": "latest",
-    "node-fetch": "2.6.0",
     "react": "^16.8.6",
-    "react-dom": "^16.8.6"
+    "react-dom": "^16.8.6",
+    "swr": "0.1.18"
   },
   "license": "ISC"
 }

examples/api-routes/pages/index.js

@@ -1,19 +1,19 @@
+import useSWR from 'swr'
 import Person from '../components/Person'
-import fetch from 'node-fetch'
 
-const Index = ({ people }) => (
-  <ul>
-    {people.map((p, i) => (
-      <Person key={i} person={p} />
-    ))}
-  </ul>
-)
+const fetcher = url => fetch(url).then(res => res.json())
 
-export async function getServerSideProps() {
-  const response = await fetch('http://localhost:3000/api/people')
-  const people = await response.json()
+export default function Index() {
+  const { data, error } = useSWR('/api/people', fetcher)
 
-  return { props: { people } }
-}
+  if (error) return <div>Failed to load</div>
+  if (!data) return <div>Loading...</div>
 
-export default Index
+  return (
+    <ul>
+      {data.map((p, i) => (
+        <Person key={i} person={p} />
+      ))}
+    </ul>
+  )
+}

examples/api-routes/pages/person/[id].js

@@ -1,7 +1,27 @@
-import fetch from 'node-fetch'
+import { useRouter } from 'next/router'
+import useSWR from 'swr'
 
-const Person = ({ data, status }) =>
-  status === 200 ? (
+const fetcher = async url => {
+  const res = await fetch(url)
+  const data = await res.json()
+
+  if (res.status !== 200) {
+    throw new Error(data.message)
+  }
+  return data
+}
+
+export default function Person() {
+  const { query } = useRouter()
+  const { data, error } = useSWR(
+    () => query.id && `/api/people/${query.id}`,
+    fetcher
+  )
+
+  if (error) return <div>{error.message}</div>
+  if (!data) return <div>Loading...</div>
+
+  return (
     <table>
       <thead>
         <tr>
@@ -26,20 +46,5 @@ const Person = ({ data, status }) =>
         </tr>
       </tbody>
     </table>
-  ) : (
-    <p>{data.message}</p>
   )
-
-export async function getServerSideProps({ params }) {
-  const response = await fetch(`http://localhost:3000/api/people/${params.id}`)
-  const data = await response.json()
-
-  return {
-    props: {
-      data,
-      status: response.status,
-    },
-  }
 }
-
-export default Person