Managing Database Items using AJAX (CRUD Operations)

This guide demonstrates how you can create, list, update, and delete database items (Records) using JavaScript and GraphQL.

Prerequisites

To follow the steps in this tutorial, you must understand how to use GraphQL as well as interact with the Fetch API.

• GraphQL
• Fetch API

Steps

Managing Records using AJAX by implementing the full CRUD cycle is a five-step process:

• Step 1: Define prerequisites: Table, Form, Page, and javascript functions used in multiple places
• Step 2: Implement the 'Create' operation
• Step 3: Implement the 'Read' operation
• Step 4: Implement the 'Update' operation
• Step 5: Implement the 'Delete' operation

Step 1: Define prerequisites: Table, Form, Page, and javascript functions used in multiple places

First, create the necessary database table, form, page, and javascript functions.

Create the table:

app/schema/feedback.yml

Then create the form object:

app/forms/feedback.liquid

Lastly, create the javascript file:

app/assets/Feedback.js

Step 2: Implement the 'Create' operation

To implement a 'Create' operation, start by creating a simple form that works without JavaScript:

app/views/partials/create.liquid

Then, add JavaScript to make it work in the background:

app/assets/Feedback.js

Step 3: Implement the 'Read' operation

To implement a 'Read' operation, first create a GraphQL query to pull out the data:

app/graphql/feedback.graphql

Then you need to create a page that returns JSON with the data:

app/views/pages/feedback_list.json.liquid

You also need some HTML that will contain the data and a button that will trigger data download:

app/views/partials/read.liquid

You also need JavaScript to get the data from the server and render it into the HTML:

app/assets/Feedback.js

Step 4: Implement the 'Update' operation

Implementing an 'Update' operation is similar to the 'Create' operation, with a couple of differences:

1. Add a hidden input with the set to PUT
2. Send the ID of the Database Item you want to edit

app/views/partials/update.liquid

JavaScript is also very similar, but it takes ID from the input defined above and puts it into the URL.

app/assets/Feedback.js

Step 5: Implement the 'Delete' operation

To implement a 'Delete' operation, start by creating a and an . After all, it is roughly analogous to an 'Update' operation

app/views/partials/delete.liquid

app/assets/Feedback.js

Next Steps

Congratulations! You now know how to implement CRUD operations for database items. Next, visit the documentation on persisting data with database items for further learning: Persisting Data with Database Items