From 799b488e09138c192106429ac369855bf0f05a7f Mon Sep 17 00:00:00 2001 From: Todor Totev <51530311+todortotev@users.noreply.github.com> Date: Mon, 15 Jun 2020 02:50:54 +0300 Subject: [PATCH] [Example] remove getInitialProps from aws-amplify (#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 --- .../pages/todo/[id].tsx | 4 +- examples/with-aws-amplify/README.md | 4 +- examples/with-aws-amplify/package.json | 14 +++--- examples/with-aws-amplify/pages/index.js | 40 ++++++++++------- examples/with-aws-amplify/pages/todo/[id].js | 45 ++++++++++++------- 5 files changed, 61 insertions(+), 46 deletions(-) diff --git a/examples/with-aws-amplify-typescript/pages/todo/[id].tsx b/examples/with-aws-amplify-typescript/pages/todo/[id].tsx index 9990e49ad182..c68c8768635f 100644 --- 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 index 6967dde9e2b6..1cfc7dd70b2b 100644 --- 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 index 31d001edf3ef..ae1b7b42dc57 100644 --- 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 index bf3eaddefa05..2e87b19ffea1 100644 --- a/examples/with-aws-amplify/pages/index.js +++ b/examples/with-aws-amplify/pages/index.js @@ -111,30 +111,38 @@ const App = (props) => { ) } -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 index dc0918f84766..e79940312fbf 100644 --- 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, + }, } }