JavaScript Everywhere

Chapter 16. Create, Read, Update, and Delete Operations

I love paper notebooks and keep one with me at nearly all times. Usually they are relatively inexpensive and I quickly fill them with half-formed thoughts. Not long ago I purchased a pricier hardback notebook, with a lovely cover and fancy paper stock. At the time of purchase, I had grand ambitions of the types of sketches and planning that would happen within that notebook, but it sat completely empty on my desk for months. Eventually, I put it on a shelf and went back to my standard notebook brand.

Much like my fancy notebook, our app is useful only if our users are able to interact with it. You may recall from our API development that the Notedly application is a “CRUD” (create, read, update, and delete) application. An authenticated user can create new notes, read notes, update the content of a note or a note’s status as a favorite, and delete a note. In this chapter, we’ll implement all of this functionality within our web user interface. To accomplish these tasks, we’ll be writing GraphQL mutations and queries.

Creating New Notes

Currently we have the means to view notes, but not a way to create them. This is akin to having a notebook without a pen. Let’s add the ability for users to create new notes. We’ll do this by creating a textarea form in which users can write the note. When the user submits the form, we’ll perform a GraphQL mutation to create the note in our database.

To begin, let’s create the NewNote component ...