[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,21 @@ 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: [] }
+    throw new Error(result.errors)
   }
   if (result.data.getTodoList !== null) {
-    return { todos: result.data.getTodoList.todos.items }
+    return {
+      props: {
+        todos: result.data.getTodoList.todos.items,
+      },
+    }
   }
 
   try {
@@ -133,8 +138,8 @@ App.getInitialProps = async () => {
       })
     )
   } catch (err) {
-    console.warn(err)
+    throw new Error(err)
   }
-  return { todos: [] }
 }
+
 export default App

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

@@ -1,6 +1,5 @@
 import { API, graphqlOperation } from 'aws-amplify'
-
-import { getTodo } from '../../src/graphql/queries'
+import { getTodo, getTodoList } from '../../src/graphql/queries'
 import config from '../../src/aws-exports'
 
 API.configure(config)
@@ -14,21 +13,40 @@ const TodoPage = (props) => {
   )
 }
 
-TodoPage.getInitialProps = async (context) => {
-  const { id } = context.query
+export const getStaticPaths = async () => {
+  let result = await API.graphql(
+    graphqlOperation(getTodoList, { id: 'global' })
+  )
+  if (result.errors) {
+    console.log('Failed to fetch todolist. ', result.errors)
+    throw new Error(result.errors)
+  }
+  if (result.data.getTodoList !== null) {
+    const paths = result.data.getTodoList.todos.items.map(({ id }) => ({
+      params: { id },
+    }))
+    return { paths, fallback: false }
+  }
+}
+
+export const getStaticProps = async ({ params: { id } }) => {
   try {
     const todo = await API.graphql({
       ...graphqlOperation(getTodo),
       variables: { id },
     })
     if (todo.errors) {
       console.log('Failed to fetch todo. ', todo.errors)
-      return { todo: {} }
+      throw new Error(todo.errors)
+    }
+    return {
+      props: {
+        todo: todo.data.getTodo,
+      },
     }
-    return { todo: todo.data.getTodo }
   } catch (err) {
     console.log('Failed to fetch todo. ', err)
-    return { todo: {} }
+    throw new Error(err)
   }
 }