Skip to main content

Web app tutorial: Interact with data

Learn how to use queries to read and write data.

Queries are how apps interact with data and they're often triggered by components. Your app already has a query that pulls in data from your API, but you need to create a few more queries so you can fully interact with your data.

1. Create a query that updates names and email addresses​

In the previous lesson, you made the name and email columns editable. This lets you double-click on a cell and edit it, but it doesn't save the changes back to your API. It does, however, temporarily save changes to the changesetArray property of the table. You can use this property to dynamically populate a PATCH query to update the user.

Create a new resource query, name it patchUser, and set the Action type to PATCH.

Fill out the rest of the endpoint URL and JSON body like this.

You can also copy the values below and paste them into your query. Make sure to click Save after filling out the query.

FieldValue
Endpoint slug{{table1.changesetArray['0'].id}}
name{{table1.changesetArray['0'].name}}
email{{table1.changesetArray['0'].email}}

If your table doesn't have a changesetArray property, make sure the table has a primary key set.

You might notice that these three values are currently null. This is expected because there haven't been any changes to the table yet, so there aren't any entries in changesetArray.

2. Create queries that block and unblock users​

In the previous lesson, you added a Split Button component that'll allow you to block and unblock users. This requires adding a few queries that the button can trigger when clicked.

To block individual users, create another PATCH query or duplicate the existing one. Rename the query to blockUser, and use {{ table1.selectedRow.id }} at the end of the endpoint URL to pass in the user ID. Then, edit the JSON body to set blocked to true.

Don't forget to click Save after filling out the query. Repeat this process for the unblock action, but make sure to:

  • Name the query unblockUser
  • Set blocked to false

You'll add functionality for blocking and unblocking all users in a subsequent lesson.

Wrap up​

Now that you have queries that edit data, it's time to connect them to components. This way when you make changes with the UI, the updates are automatically written to your API and the table is refreshed.

You can test your knowledge below or move on to the next lesson.

Demo