Add form cli

.changeset/moody-melons-cheer.md

@@ -0,0 +1,5 @@
+---
+'@aws-amplify/backend-cli': minor
+---
+
+Add form generation interface

examples/simple_react/.gitignore

@@ -24,3 +24,6 @@ yarn-error.log*
 
 cdk.out
 src/amplifyconfiguration.js
+src/ui-components/
+src/graphql/
+

examples/simple_react/package.json

@@ -22,7 +22,8 @@
     "@aws-amplify/backend": "file:../../packages/backend",
     "@aws-amplify/backend-auth": "file:../../packages/backend-auth",
     "@aws-amplify/backend-graphql": "file:../../packages/backend-graphql",
-    "@aws-amplify/cli": "file:../../packages/cli"
+    "@aws-amplify/cli": "file:../../packages/cli",
+    "@aws-amplify/api": "^5.4.5"
   },
   "scripts": {
     "start": "react-scripts start",

examples/simple_react/src/components/todos/index.tsx

@@ -11,9 +11,14 @@ import {
   Divider,
   TextField,
 } from '@aws-amplify/ui-react';
+import { GraphQLQuery } from '@aws-amplify/api';
 import { BiTrash } from 'react-icons/bi';
 import { Todo } from '../../models';
 import style from './style';
+import { listTodos } from '../../graphql/queries';
+import { API } from 'aws-amplify';
+import { deleteTodo } from '../../graphql/mutations';
+import { TodoCreateForm } from '../../ui-components';
 
 const initialState = { name: '', description: '' };
 
@@ -26,8 +31,14 @@ function TodoView() {
 
   const fetchTodos = async () => {
     try {
-      const todos = await DataStore.query(Todo);
-      setTodos(todos);
+      const {
+        data: {
+          listTodos: { items },
+        },
+      } = await API.graphql<GraphQLQuery<any>>({
+        query: listTodos,
+      });
+      setTodos(items);
     } catch (error) {
       console.log('error fetching todos:', error);
     }
@@ -51,10 +62,7 @@ function TodoView() {
 
   const removeTodo = async (id: string) => {
     try {
-      const toDelete = await DataStore.query(Todo, id);
-      if (toDelete) {
-        await DataStore.delete(toDelete);
-      }
+      await API.graphql({ query: deleteTodo, variables: { input: { id } } });
       fetchTodos();
     } catch (error) {
       console.log('error removing todo:', error);
@@ -87,27 +95,7 @@ function TodoView() {
           </Card>
         )}
       </Collection>
-      <View style={style.form}>
-        <TextField
-          labelHidden
-          label="Name"
-          placeholder="Name"
-          style={style.form.textInput}
-          value={formState.name}
-          onChange={(event) => setInput('name', event.target.value)}
-        />
-        <TextField
-          labelHidden
-          label="Description"
-          placeholder="Description"
-          style={style.form.textInput}
-          value={formState.description}
-          onChange={(event) => setInput('description', event.target.value)}
-        />
-      </View>
-      <Button variation="primary" onClick={addTodo}>
-        Create Todo
-      </Button>
+      <TodoCreateForm onSuccess={() => fetchTodos()} />
     </Card>
   );
 }