[Example] remove getInitialProps from aws-amplify-typescript (#13898)

Related to [11014](#11014)

examples/with-aws-amplify-typescript/.gitignore

@@ -1,14 +1,14 @@
 node_modules
 .next
 out
+.vercel
 
-#amplify
+# Amplify
 amplify/\#current-cloud-backend
 amplify/.config/local-*
 amplify/backend/amplify-meta.json
 amplify/backend/awscloudformation
 build/
 dist/
-node_modules/
 aws-exports.js
 awsconfiguration.json

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 `getStaticProps` 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",
+    "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": "latest",
+    "react": "16.13.1",
+    "react-dom": "16.13.1"
   },
   "devDependencies": {
     "@types/node": "12.6.8",
-    "@types/react": "16.8.23",
-    "@types/react-dom": "16.8.4",
-    "typescript": "3.5.3"
+    "@types/react": "16.9.36",
+    "@types/react-dom": "16.9.8",
+    "typescript": "3.9.5"
   }
 }

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

@@ -1,4 +1,4 @@
-import * as React from 'react'
+import { Reducer, useReducer, Dispatch } from 'react'
 import { API, graphqlOperation } from 'aws-amplify'
 import nanoid from 'nanoid'
 import produce from 'immer'
@@ -43,7 +43,7 @@ type Action =
     }
   | { type: 'set-current'; payload: string }
 
-const reducer: React.Reducer<State, Action> = (state, action) => {
+const reducer: Reducer<State, Action> = (state, action) => {
   switch (action.type) {
     case 'add-todo': {
       return produce(state, (draft) => {
@@ -73,7 +73,7 @@ const reducer: React.Reducer<State, Action> = (state, action) => {
   }
 }
 
-const createToDo = async (dispatch: React.Dispatch<Action>, currentToDo) => {
+const createToDo = async (dispatch: Dispatch<Action>, currentToDo) => {
   const todo = {
     id: nanoid(),
     name: currentToDo,
@@ -91,7 +91,7 @@ const createToDo = async (dispatch: React.Dispatch<Action>, currentToDo) => {
     console.warn('Error adding to do ', err)
   }
 }
-const deleteToDo = async (dispatch: React.Dispatch<Action>, id: string) => {
+const deleteToDo = async (dispatch: Dispatch<Action>, id: string) => {
   dispatch({ type: 'delete-todo', payload: id })
   try {
     await API.graphql({
@@ -103,7 +103,7 @@ const deleteToDo = async (dispatch: React.Dispatch<Action>, id: string) => {
   }
 }
 const App = (props: Props) => {
-  const [state, dispatch] = React.useReducer(reducer, {
+  const [state, dispatch] = useReducer(reducer, {
     todos: props.todos,
     currentName: '',
   })
@@ -140,30 +140,38 @@ const App = (props: Props) => {
     </div>
   )
 }
-App.getInitialProps = async () => {
-  let result: { data: GetTodoListQuery; errors: {}[] } = await API.graphql(
+
+export const getStaticProps = async () => {
+  let result = (await API.graphql(
     graphqlOperation(getTodoList, { id: 'global' })
-  )
+  )) as { data: GetTodoListQuery; errors: any[] }
+
   if (result.errors) {
-    console.log('Failed to fetch todolist. ', result.errors)
-    return { todos: [] }
+    console.error('Failed to fetch todolist.', result.errors)
+    throw new Error(result.errors[0].message)
   }
   if (result.data.getTodoList !== null) {
-    return { todos: result.data.getTodoList.todos.items }
+    return {
+      props: {
+        todos: result.data.getTodoList.todos.items,
+      },
+    }
   }
 
-  try {
-    await API.graphql(
-      graphqlOperation(createTodoList, {
-        input: {
-          id: 'global',
-          createdAt: `${Date.now()}`,
-        },
-      })
-    )
-  } catch (err) {
-    console.warn(err)
+  await API.graphql(
+    graphqlOperation(createTodoList, {
+      input: {
+        id: 'global',
+        createdAt: `${Date.now()}`,
+      },
+    })
+  )
+
+  return {
+    props: {
+      todos: [],
+    },
   }
-  return { todos: [] }
 }
+
 export default App

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

@@ -1,8 +1,7 @@
-import * as React from 'react'
 import { API, graphqlOperation } from 'aws-amplify'
 
-import { GetTodoQuery } from '../../src/API'
-import { getTodo } from '../../src/graphql/queries'
+import { GetTodoQuery, GetTodoListQuery } from '../../src/API'
+import { getTodo, getTodoList } from '../../src/graphql/queries'
 import config from '../../src/aws-exports'
 
 API.configure(config)
@@ -16,21 +15,33 @@ const TodoPage = (props: { todo: GetTodoQuery['getTodo'] }) => {
   )
 }
 
-TodoPage.getInitialProps = async (context) => {
-  const { id } = context.query
-  try {
-    const todo = (await API.graphql({
-      ...graphqlOperation(getTodo),
-      variables: { id },
-    })) as { data: GetTodoQuery; errors: {}[] }
-    if (todo.errors) {
-      console.log('Failed to fetch todo. ', todo.errors)
-      return { todo: {} }
-    }
-    return { todo: todo.data.getTodo }
-  } catch (err) {
-    console.warn(err)
-    return { todo: {} }
+export const getStaticPaths = async () => {
+  let result = (await API.graphql(
+    graphqlOperation(getTodoList, { id: 'global' })
+  )) as { data: GetTodoListQuery; errors: any[] }
+  if (result.errors) {
+    console.error('Failed to fetch todo.', result.errors)
+    throw new Error(result.errors[0].message)
+  }
+  const paths = result.data.getTodoList.todos.items.map(({ id }) => ({
+    params: { id },
+  }))
+  return { paths, fallback: false }
+}
+
+export const getStaticProps = async ({ params: { id } }) => {
+  const todo = (await API.graphql({
+    ...graphqlOperation(getTodo),
+    variables: { id },
+  })) as { data: GetTodoQuery; errors: any[] }
+  if (todo.errors) {
+    console.error(todo.errors)
+    throw new Error(todo.errors[0].message)
+  }
+  return {
+    props: {
+      todo: todo.data.getTodo,
+    },
   }
 }