Mobile app tutorial: Interact with data

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

Open the code list and create a new resource query. Name it createUser.

Then, set the Action type to POST and fill out the JSON body to pull values from the components on the peopleDetailsScreen.

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 or duplicate an existing one. Name the new query updateUser. Set the Action type to PATCH, and 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.

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

Demo