Connect API and database to the app

1✔ Are you sure you want to continue? (Y/n) · yes
2...
3? Do you want to generate code for your newly created GraphQL API: Yes
4? Choose the code generation language target: typescript
5? Enter the file name pattern of graphql queries, mutations and subscriptions: src/graphql/**/*.ts
6? Do you want to generate/update all possible GraphQL operations - queries, mutations and subscriptions: Yes
7? Enter maximum statement depth [increase from default if your schema is deeply nested]: 2
8? Enter the file name for the generated code: src/API.ts

1import { useEffect, useState } from 'react';
2
3import { generateClient } from 'aws-amplify/api';
4
5import { createTodo } from './graphql/mutations';
6import { listTodos } from './graphql/queries';
7import { type CreateTodoInput, type Todo } from './API';
8
9const initialState: CreateTodoInput = { name: '', description: '' };
10const client = generateClient();
11
12const App = () => {
13  const [formState, setFormState] = useState<CreateTodoInput>(initialState);
14  const [todos, setTodos] = useState<Todo[] | CreateTodoInput[]>([]);
15
16  useEffect(() => {
17    fetchTodos();
18  }, []);
19
20  async function fetchTodos() {
21    try {
22      const todoData = await client.graphql({
23        query: listTodos,
24      });
25      const todos = todoData.data.listTodos.items;
26      setTodos(todos);
27    } catch (err) {
28      console.log('error fetching todos');
29    }
30  }
31
32  async function addTodo() {
33    try {
34      if (!formState.name || !formState.description) return;
35      const todo = { ...formState };
36      setTodos([...todos, todo]);
37      setFormState(initialState);
38      await client.graphql({
39        query: createTodo,
40        variables: {
41          input: todo,
42        },
43      });
44    } catch (err) {
45      console.log('error creating todo:', err);
46    }
47  }
48
49  return (
50    <div style={styles.container}>
51      <h2>Amplify Todos</h2>
52      <input
53        onChange={(event) =>
54          setFormState({ ...formState, name: event.target.value })
55        }
56        style={styles.input}
57        value={formState.name}
58        placeholder="Name"
59      />
60      <input
61        onChange={(event) =>
62          setFormState({ ...formState, description: event.target.value })
63        }
64        style={styles.input}
65        value={formState.description as string}
66        placeholder="Description"
67      />
68      <button style={styles.button} onClick={addTodo}>
69        Create Todo
70      </button>
71      {todos.map((todo, index) => (
72        <div key={todo.id ? todo.id : index} style={styles.todo}>
73          <p style={styles.todoName}>{todo.name}</p>
74          <p style={styles.todoDescription}>{todo.description}</p>
75        </div>
76      ))}
77    </div>
78  );
79};
80
81const styles = {
82  container: {
83    width: 400,
84    margin: "0 auto",
85    display: "flex",
86    flexDirection: "column",
87    justifyContent: "center",
88    padding: 20,
89  },
90  todo: { marginBottom: 15 },
91  input: {
92    border: "none",
93    backgroundColor: "#ddd",
94    marginBottom: 10,
95    padding: 8,
96    fontSize: 18,
97  },
98  todoName: { fontSize: 20, fontWeight: "bold" },
99  todoDescription: { marginBottom: 0 },
100  button: {
101    backgroundColor: "black",
102    color: "white",
103    outline: "none",
104    fontSize: 18,
105    padding: "12px 0px",
106  },
107} as const;
108
109export default App;