[Example] remove getInitialProps from aws-amplify (vercel#13896)

* Remove getInitialProps * update package * Applied requested changes. * thats essential so im bringing it back * make sure getstaticprops doesnt throw * proper versioning * requested changes * Updated readme and package.json * Updated pages Co-authored-by: Luis Alvarez D <luis@vercel.com>
rokinsky · Jul 11, 2020 · 799b488 · 799b488
1 parent b3b5166
commit 799b488
Show file tree

Hide file tree

Showing 5 changed files with 61 additions and 46 deletions.
diff --git a/examples/with-aws-amplify-typescript/pages/todo/[id].tsx b/examples/with-aws-amplify-typescript/pages/todo/[id].tsx
@@ -20,7 +20,7 @@ export const getStaticPaths = async () => {
     graphqlOperation(getTodoList, { id: 'global' })
   )) as { data: GetTodoListQuery; errors: any[] }
   if (result.errors) {
-    console.error('Failed to fetch todo.', result.errors)
+    console.error('Failed to fetch todos paths.', result.errors)
     throw new Error(result.errors[0].message)
   }
   const paths = result.data.getTodoList.todos.items.map(({ id }) => ({
@@ -35,7 +35,7 @@ export const getStaticProps = async ({ params: { id } }) => {
     variables: { id },
   })) as { data: GetTodoQuery; errors: any[] }
   if (todo.errors) {
-    console.error(todo.errors)
+    console.error('Failed to fetch todo.', todo.errors)
     throw new Error(todo.errors[0].message)
   }
   return {

diff --git a/examples/with-aws-amplify/README.md b/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
 

diff --git a/examples/with-aws-amplify/package.json b/examples/with-aws-amplify/package.json
@@ -1,22 +1,18 @@
 {
   "name": "with-aws-amplify",
   "version": "1.0.0",
-  "description": "",
   "scripts": {
     "dev": "next",
     "build": "next build",
     "start": "next start"
   },
-  "keywords": [],
-  "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"
-  },
-  "devDependencies": {}
+    "next": "^latest",
+    "react": "16.13.1",
+    "react-dom": "16.13.1"
+  }
 }
diff --git a/examples/with-aws-amplify/pages/index.js b/examples/with-aws-amplify/pages/index.js
@@ -111,30 +111,38 @@ 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: [] }
+    console.log('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
diff --git a/examples/with-aws-amplify/pages/todo/[id].js b/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,33 @@ const TodoPage = (props) => {
   )
 }
 
-TodoPage.getInitialProps = async (context) => {
-  const { id } = context.query
-  try {
-    const todo = await API.graphql({
-      ...graphqlOperation(getTodo),
-      variables: { id },
-    })
-    if (todo.errors) {
-      console.log('Failed to fetch todo. ', todo.errors)
-      return { todo: {} }
-    }
-    return { todo: todo.data.getTodo }
-  } catch (err) {
-    console.log('Failed to fetch todo. ', err)
-    return { todo: {} }
+export const getStaticPaths = async () => {
+  let result = await API.graphql(
+    graphqlOperation(getTodoList, { id: 'global' })
+  )
+  if (result.errors) {
+    console.log('Failed to fetch todos paths.', 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 },
+  })
+  if (todo.errors) {
+    console.log('Failed to fetch todo.', todo.errors)
+    throw new Error(todo.errors[0].message)
+  }
+  return {
+    props: {
+      todo: todo.data.getTodo,
+    },
   }
 }