Retool Fundamentals: Lesson 3

Learn about queries and use them 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 recordUpdates property of the table. You can access this property using dot notation to dynamically populate a PATCH query to update the user.

Create a new query or click β€’β€’β€’ next to the first query to duplicate it. Rename the query to 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 addressesCreating 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.

FieldValue
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's going to do a few things:

  • Block a user
  • Unblock a user
  • Download user data in JSON format (you'll add this in the next lesson)

To add blocking functionality, create another PATCH query or duplicate the existing one. Rename the query to blockUser and use {{table1.selectedRow.data.id}} to pass in the user ID. Then edit the JSON body to set blocked to true.

Creating a query that blocks a userCreating 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

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.


What’s Next

Continue to the next lession to connect queries and components.