[Example] remove getInitialProps from aws-amplify

examples/with-aws-amplify/README.md

@@ -6,8 +6,8 @@ This example shows how to build a server rendered web application with NextJS an
 
 Two routes are implemented :
 
-- `/` : A static route that uses getInitialProps to load data from AppSync and renders it on the server (Code in [pages/index.js](/pages/index.js))
-- `/todo/[id]` : A dynamic route that uses getInitialProps and the id from the provided context to load a single todo from AppSync and render it on the server. (Code in [pages/todo/:[id].js](/pages/todo/[id].js))
+- `/` : A static route that uses getStaticProps to load data from AppSync and renders it on the server (Code in [pages/index.js](/pages/index.js))
+- `/todo/[id]` : A dynamic route that uses getServerSideProps and the id from the provided context to load a single todo from AppSync and render it on the server. (Code in [pages/todo/:[id].js](/pages/todo/[id].js))
 
 ## How to use
 

examples/with-aws-amplify/package.json

@@ -11,7 +11,7 @@
   "author": "",
   "license": "ISC",
   "dependencies": {
-    "aws-amplify": "1.1.32",
+    "aws-amplify": "2.1.0",
     "immer": "3.1.3",
     "nanoid": "2.0.3",
     "next": "^9.0.2",

examples/with-aws-amplify/pages/index.js

@@ -111,16 +111,25 @@ const App = (props) => {
     </div>
   )
 }
-App.getInitialProps = async () => {
+
+export const getStaticProps = async () => {
   let result = await API.graphql(
     graphqlOperation(getTodoList, { id: 'global' })
   )
   if (result.errors) {
     console.log('Failed to fetch todolist. ', result.errors)
-    return { todos: [] }
+    return {
+      props: {
+        todos: [],
+      },
+    }
   }
   if (result.data.getTodoList !== null) {
-    return { todos: result.data.getTodoList.todos.items }
+    return {
+      props: {
+        todos: result.data.getTodoList.todos.items,
+      },
+    }
   }
 
   try {
@@ -135,6 +144,11 @@ App.getInitialProps = async () => {
   } catch (err) {
     console.warn(err)
   }
-  return { todos: [] }
+  return {
+    props: {
+      todos: [],
+    },
+  }
 }
+
 export default App

examples/with-aws-amplify/pages/todo/[id].js

@@ -14,7 +14,7 @@ const TodoPage = (props) => {
   )
 }
 
-TodoPage.getInitialProps = async (context) => {
+export const getServerSideProps = async (context) => {
   const { id } = context.query
   try {
     const todo = await API.graphql({
@@ -23,12 +23,24 @@ TodoPage.getInitialProps = async (context) => {
     })
     if (todo.errors) {
       console.log('Failed to fetch todo. ', todo.errors)
-      return { todo: {} }
+      return {
+        props: {
+          todo: {},
+        },
+      }
+    }
+    return {
+      props: {
+        todo: todo.data.getTodo,
+      },
     }
-    return { todo: todo.data.getTodo }
   } catch (err) {
     console.log('Failed to fetch todo. ', err)
-    return { todo: {} }
+    return {
+      props: {
+        todo: {},
+      },
+    }
   }
 }