[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 <luis@vercel.com>
This commit is contained in:
parent
27f653bb3d
commit
e4f0848c81
5 changed files with 61 additions and 46 deletions
|
@ -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 {
|
||||
|
|
|
@ -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
|
||||
|
||||
|
|
|
@ -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"
|
||||
}
|
||||
}
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -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,
|
||||
},
|
||||
}
|
||||
}
|
||||
|
||||
|
|
Loading…
Reference in a new issue