Let's add another component in
app.js to for our Todo data and reference it from our App component so it displays once the user is signed in. We'll also move our signout function into the Todos component, now that it has a better home.
Now let's create a basic Todo object on our backend. We'll have two attributes,
text, a string which is the text of the Todo, and
done a boolean indicating whether it's done or not. We'll also add a relationship to a
user object—the owner of the Todo.
Switch back over to Aft, and navigate to the Schema section.
Click the Add Model button at the top of the screen.
Fill in the text field that says Model name.. with
Then click the add button under Attributes and fill in our first attribute.
For Attribute name.. type
text, and select
String from the dropdown on the right, indicating its type.
Click add again, and this time name the attribute
done, and select
Bool from the type dropdown.
Now let's add our relationship to
user by clicking the add button under Relationships.
Set the Relationship name.. to
user and select
User from the dropdown. That tells aft that this property points to a User object.
You can leave the multiple box unchecked, since this relationship will only be to a single user, rather than a list of users.
Once you've done that, click Save next to the model name at the top of the page, and you're all done!
Aft automatically adds our new Todo model to the API, so lets try and read some data from it.
First, navigate over to Terminal in Aft and run the following function to add a Todo.
And finally, let's update our Todos component to call the server!
Here we're making use the Aft API's
findMany method. You'll note we don't filter on the currently signed in user—we'll be doing that automatically later on when we look at access controls.
Hit refresh and you should see the Todo you created on the server!
In the next section, we'll look at how we can add some data from the client.