[example] Add SWR to api-routes-graphql

examples/api-routes-graphql/package.json

@@ -7,12 +7,12 @@
     "start": "next start"
   },
   "dependencies": {
-    "apollo-server-micro": "2.6.7",
-    "graphql": "14.4.2",
-    "isomorphic-unfetch": "3.0.0",
+    "apollo-server-micro": "2.11.0",
+    "graphql": "14.6.0",
     "next": "latest",
-    "react": "^16.8.6",
-    "react-dom": "^16.8.6"
+    "react": "16.13.1",
+    "react-dom": "16.13.1",
+    "swr": "0.1.18"
   },
   "license": "ISC"
 }

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

@@ -1,27 +1,29 @@
-import fetch from 'isomorphic-unfetch'
+import useSWR from 'swr'
 
-const Index = ({ users }) => (
-  <div>
-    {users.map((user, i) => (
-      <div key={i}>{user.name}</div>
-    ))}
-  </div>
-)
-
-Index.getInitialProps = async () => {
-  const response = await fetch('http://localhost:3000/api/graphql', {
+const fetcher = query =>
+  fetch('/api/graphql', {
     method: 'POST',
     headers: {
       'Content-type': 'application/json',
     },
-    body: JSON.stringify({ query: '{ users { name } }' }),
+    body: JSON.stringify({ query }),
   })
+    .then(res => res.json())
+    .then(json => json.data)
 
-  const {
-    data: { users },
-  } = await response.json()
+export default function Index() {
+  const { data, error } = useSWR('{ users { name } }', fetcher)
 
-  return { users }
-}
+  if (error) return <div>Failed to load</div>
+  if (!data) return <div>Loading...</div>
 
-export default Index
+  const { users } = data
+
+  return (
+    <div>
+      {users.map((user, i) => (
+        <div key={i}>{user.name}</div>
+      ))}
+    </div>
+  )
+}