Retool Fundamentals: Lesson 3

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 recordUpdates property of the table. You can use this property to dynamically populate a PATCH query to update the user.

Create a new resource query and name it patchUser. Set the Action type to PATCH, and fill out the rest of the endpoint URL and JSON body like this.

Creating a patch query to update names and email addresses

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

Field	Value
Endpoint slug	`{{table1.recordUpdates['0'].id}}`
Name	`{{table1.recordUpdates['0'].name}}`
Email	`{{table1.recordUpdates['0'].email}}`

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 recordUpdates.

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.data.id }} at the end of the endpoint URL to pass in the user ID. Then edit the JSON body to set blocked to true.

Creating a query that blocks a user

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.