[Example] remove getInitialProps from aws-amplify-typescript

examples/with-aws-amplify-typescript/README.md

@@ -6,9 +6,9 @@ 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.tsx](/pages/index.tsx))
+- `/` : A static route that uses getStaticProps to load data from AppSync and renders it on the server (Code in [pages/index.tsx](/pages/index.tsx))
 
-- `/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].tsx](/pages/todo/[id].tsx))
+- `/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].tsx](/pages/todo/[id].tsx))
 
 ## How to use
 

examples/with-aws-amplify-typescript/package.json

@@ -11,17 +11,17 @@
   "author": "",
   "license": "ISC",
   "dependencies": {
-    "aws-amplify": "1.1.32",
+    "@types/react": "16.9.35",
+    "@types/react-dom": "16.9.8",
+    "aws-amplify": "2.1.0",
     "immer": "3.1.3",
     "nanoid": "2.0.3",
-    "next": "^9.0.2",
-    "react": "^16.8.6",
-    "react-dom": "^16.8.6"
+    "next": "9.4.4",
+    "react": "16.13.1",
+    "react-dom": "16.13.1",
+    "typescript": "3.9.5"
   },
   "devDependencies": {
-    "@types/node": "12.6.8",
-    "@types/react": "16.8.23",
-    "@types/react-dom": "16.8.4",
-    "typescript": "3.5.3"
+    "@types/node": "12.6.8"
   }
 }

examples/with-aws-amplify-typescript/pages/index.tsx

@@ -140,16 +140,21 @@ const App = (props: Props) => {
     </div>
   )
 }
-App.getInitialProps = async () => {
-  let result: { data: GetTodoListQuery; errors: {}[] } = await API.graphql(
+
+export const getStaticProps = async () => {
+  let result: { data: GetTodoListQuery; error: string } = await API.graphql(
     graphqlOperation(getTodoList, { id: 'global' })
   )
-  if (result.errors) {
-    console.log('Failed to fetch todolist. ', result.errors)
-    return { todos: [] }
+  if (result.error) {
+    console.log('Failed to fetch todolist. ', result.error)
+    throw new Error(result.error)
   }
   if (result.data.getTodoList !== null) {
-    return { todos: result.data.getTodoList.todos.items }
+    return {
+      props: {
+        todos: result.data.getTodoList.todos.items,
+      },
+    }
   }
 
   try {
@@ -162,8 +167,8 @@ App.getInitialProps = async () => {
       })
     )
   } catch (err) {
-    console.warn(err)
+    throw new Error(err)
   }
-  return { todos: [] }
 }
+
 export default App

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

@@ -16,7 +16,7 @@ const TodoPage = (props: { todo: GetTodoQuery['getTodo'] }) => {
   )
 }
 
-TodoPage.getInitialProps = async (context) => {
+export const getServerSideProps = async (context) => {
   const { id } = context.query
   try {
     const todo = (await API.graphql({
@@ -25,12 +25,24 @@ TodoPage.getInitialProps = async (context) => {
     })) as { data: GetTodoQuery; errors: {}[] }
     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.warn(err)
-    return { todo: {} }
+    return {
+      props: {
+        todo: {},
+      },
+    }
   }
 }
 

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

@@ -1,6 +1,6 @@
 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 +14,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)
   }
 }