edisdev/amplify-example.js

## amplify-example.js
import Head from 'next/head'
import { API } from 'aws-amplify'

import styles from '../styles/Home.module.css'
import { listTodos } from '../graphql/queries'
import { useEffect, useState } from 'react'

export default function Home() {

  let [todoList, setTodoList] = useState([])

  async function fetchTodos () {
    try {
      const data = await API.graphql({
        query: listTodos
      })

      await setTodoList(data.data.listTodos.items)
    } catch (err) { console.log('error fetching', err) }
  }

  useEffect(() => {
    fetchTodos()
  }, [])

  const TodoItems = () => {
    return <div className={styles.grid}>
      {
        todoList.map(t => {
          return <div
           className={styles.card}
           key={t.id}
          >{t.name}</div>
        })
      }
    </div>
  }

  return (
    <div className={styles.container}>
      <Head>
        <title>Todo App With Next And Amplify</title>
        <link rel="icon" href="/favicon.ico" />
      </Head>
      <main className={styles.main}>
        <h1 className={styles.title}>Todos</h1>
        <TodoItems/>
      </main>
    </div>
  )
}
	import Head from 'next/head'
	import { API } from 'aws-amplify'

	import styles from '../styles/Home.module.css'
	import { listTodos } from '../graphql/queries'
	import { useEffect, useState } from 'react'

	export default function Home() {

	let [todoList, setTodoList] = useState([])

	async function fetchTodos () {
	try {
	const data = await API.graphql({
	query: listTodos
	})

	await setTodoList(data.data.listTodos.items)
	} catch (err) { console.log('error fetching', err) }
	}

	useEffect(() => {
	fetchTodos()
	}, [])

	const TodoItems = () => {
	return <div className={styles.grid}>
	{
	todoList.map(t => {
	return <div
	className={styles.card}
	key={t.id}
	>{t.name}</div>
	})
	}
	</div>
	}

	return (
	<div className={styles.container}>
	<Head>
	<title>Todo App With Next And Amplify</title>
	<link rel="icon" href="/favicon.ico" />
	</Head>
	<main className={styles.main}>
	<h1 className={styles.title}>Todos</h1>
	<TodoItems/>
	</main>
	</div>
	)
	}