Retool Mobile 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 data from your API, but you need to create some more queries to fully interact with your data.

1. Add a query to create new users

In the bottom panel, click + -> Resource query to create a new query.

Creating a resource query

Name it createUser and set the Action type to POST. Then, fill out the JSON body like this to pull values from the components on the Details screen.

Adding a post query to create users

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
name	`{{ textInput1.value }}`
email	`{{ textInput2.value }}`
company	`{{ textInput3.value }}`
blocked	`{{ select1.value }}`
id	`{{ getUsers.data.length + 1}}`

2. Add a query update user data

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

Creating a query to update user data

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	`{{ collectionView1.selectedItem.id }}`
name	`{{ textInput1.value }}`
email	`{{ textInput2.value }}`
company	`{{ textInput3.value }}`
blocked	`{{ select1.value }}`

You might notice that {{ collectionView1.selectedItem.id }} is red and returns a null value. This is expected if you navigated to the Details screen using the left panel because no user was selected on the Users screen. If you go back to the Users screen and click on a user, {{ collectionView1.selectedItem.id }} will return the user's ID.

Wrap up

Now that you have queries to create and update users, 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 UI is refreshed.

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