diff --git a/examples/with-aws-amplify-typescript/.gitignore b/examples/with-aws-amplify-typescript/.gitignore index 093ece18b0ed8..155d354c6507b 100644 --- a/examples/with-aws-amplify-typescript/.gitignore +++ b/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 \ No newline at end of file diff --git a/examples/with-aws-amplify-typescript/README.md b/examples/with-aws-amplify-typescript/README.md index 0d12557088957..a4a109159a7fe 100644 --- a/examples/with-aws-amplify-typescript/README.md +++ b/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 diff --git a/examples/with-aws-amplify-typescript/package.json b/examples/with-aws-amplify-typescript/package.json index 23b55237991da..b8a326c6610ed 100644 --- a/examples/with-aws-amplify-typescript/package.json +++ b/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" } } diff --git a/examples/with-aws-amplify-typescript/pages/index.tsx b/examples/with-aws-amplify-typescript/pages/index.tsx index b09c26b34a18a..d2aeb25c590f1 100644 --- a/examples/with-aws-amplify-typescript/pages/index.tsx +++ b/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) => { +const reducer: Reducer = (state, action) => { switch (action.type) { case 'add-todo': { return produce(state, (draft) => { @@ -73,7 +73,7 @@ const reducer: React.Reducer = (state, action) => { } } -const createToDo = async (dispatch: React.Dispatch, currentToDo) => { +const createToDo = async (dispatch: Dispatch, currentToDo) => { const todo = { id: nanoid(), name: currentToDo, @@ -91,7 +91,7 @@ const createToDo = async (dispatch: React.Dispatch, currentToDo) => { console.warn('Error adding to do ', err) } } -const deleteToDo = async (dispatch: React.Dispatch, id: string) => { +const deleteToDo = async (dispatch: Dispatch, id: string) => { dispatch({ type: 'delete-todo', payload: id }) try { await API.graphql({ @@ -103,7 +103,7 @@ const deleteToDo = async (dispatch: React.Dispatch, 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) => { ) } -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 diff --git a/examples/with-aws-amplify-typescript/pages/todo/[id].tsx b/examples/with-aws-amplify-typescript/pages/todo/[id].tsx index 1e7b58bb88df2..9990e49ad1827 100644 --- a/examples/with-aws-amplify-typescript/pages/todo/[id].tsx +++ b/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, + }, } }