Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Merged
merged 16 commits into from
Jun 11, 2020
Merged
Show file tree
Hide file tree
Changes from 9 commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions examples/with-aws-amplify-typescript/.gitignore
Original file line number Diff line number Diff line change
@@ -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
4 changes: 2 additions & 2 deletions examples/with-aws-amplify-typescript/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand Down
16 changes: 8 additions & 8 deletions examples/with-aws-amplify-typescript/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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": "latest",
"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"
lfades marked this conversation as resolved.
Show resolved Hide resolved
"@types/node": "12.6.8"
}
}
38 changes: 26 additions & 12 deletions examples/with-aws-amplify-typescript/pages/index.tsx
Original file line number Diff line number Diff line change
@@ -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'
Expand Down Expand Up @@ -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) => {
Expand Down Expand Up @@ -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,
Expand All @@ -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({
Expand All @@ -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: '',
})
Expand Down Expand Up @@ -140,16 +140,25 @@ 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)
throw new Error(result.errors[0].message)
}
lfades marked this conversation as resolved.
Show resolved Hide resolved
if (result.errors) {
console.log('Failed to fetch todolist. ', result.errors)
todortotev marked this conversation as resolved.
Show resolved Hide resolved
return { todos: [] }
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 {
todortotev marked this conversation as resolved.
Show resolved Hide resolved
Expand All @@ -162,8 +171,13 @@ App.getInitialProps = async () => {
})
)
} catch (err) {
console.warn(err)
throw new Error(err)
}
return {
props: {
todos: [],
},
}
return { todos: [] }
}

export default App
40 changes: 29 additions & 11 deletions examples/with-aws-amplify-typescript/pages/todo/[id].tsx
Original file line number Diff line number Diff line change
@@ -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)
Expand All @@ -16,21 +15,40 @@ const TodoPage = (props: { todo: GetTodoQuery['getTodo'] }) => {
)
}

TodoPage.getInitialProps = async (context) => {
const { id } = context.query
export const getStaticPaths = 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)
todortotev marked this conversation as resolved.
Show resolved Hide resolved
throw new Error(result.errors[0].message)
}
if (result.data.getTodoList !== null) {
const paths = result.data.getTodoList.todos.items.map(({ id }) => ({
params: { id },
}))
return { paths, fallback: false }
}
todortotev marked this conversation as resolved.
Show resolved Hide resolved
}

export const getStaticProps = async ({ params: { id } }) => {
try {
const todo = (await API.graphql({
...graphqlOperation(getTodo),
variables: { id },
})) as { data: GetTodoQuery; errors: {}[] }
})) as { data: GetTodoQuery; errors: any[] }
if (todo.errors) {
console.log('Failed to fetch todo. ', todo.errors)
return { todo: {} }
console.error(todo.errors)
throw new Error(todo.errors[0].message)
}
return {
props: {
todo: todo.data.getTodo,
},
}
return { todo: todo.data.getTodo }
} catch (err) {
console.warn(err)
return { todo: {} }
console.log('Failed to fetch todo. ', err)
throw new Error(err)
todortotev marked this conversation as resolved.
Show resolved Hide resolved
}
}

Expand Down
35 changes: 0 additions & 35 deletions examples/with-aws-amplify/pages/todo/[id].js

This file was deleted.