Set up an API PATCH request - Xano

Upgrade your free account to the Bravo Solo plan to use this feature.

The Data Collections feature enables you to create API requests to any database or tool with an available REST API. In this guide, we'll show you how to set up a PATCH request to edit data in an external database from your app.

You can use other API verbs (i.e. PUT or POST) to create data if your API specifies otherwise. Simply change the verb type of the request URL.

👉 Example Figma file

If you don't have a design yet, import it to Bravo. You can also duplicate this Figma file.

👉 Database

In this guide, we're using Xano database to manage our app's backend. The Xano platform offers a powerful and flexible solution to handle data efficiently. Our focus will be in the user table, which is a critical component in most apps as it stores user related information.

To facilitate various operations on this table, Xano has auto-generated CRUD (Create, Read, Update, Delete) operations. These operations are essential for managing the data lifecycle in our application.

The CRUD operations provided by Xano enable us to:

Create: Add new user entries to the database.
Read: Retrieve user information stored in the database.
Update: Modify existing user data.
Delete: Remove user entries from the database.

If you are using a different backend tool, refer to its API documentation to understand how to construct the request, including both the URL and the body.

To set up the PATCH request in the backend, follow Xano's API documentation. This example also demonstrates how to use the required JSON body to edit a record in the table.

How to set up a PATCH request

1. In Data Library, click Create a New Collection and select Start from scratch. If you already have a collection, select your desired API Collection.

You can also import your API collection using the Xano Wizard, Open API, Postman or Swagger.

A Collection is a group of API requests, usually for the same data source.

Enter a name and description. If already done, skip this step.
The API documentation specifies any Headers, Parameters, and/or Body value needed in order to make the PATCH request. In this example, Xano uses the bearer token method to authenticate the request. In Collection settings, set the Authentication type to Bearer and leave the Token field empty.

To create a new request, click the + button in your collection and enter a name. We'll call this example "Edit my profile".
To update user information use a PATCH API request. Copy the endpoint URL autogenerated in Xano.

The typical Xano endpoint structure is:

https://api.xano.com/your-endpoint/{user_id}

Select the request type as PATCH and add the endpoint URL, replacing the {user_id} with ${user.id}. Built-in variables, like ${user.id}, auto-fill dynamic content in the app.
In Xano, navigate to "Run & Debug", and copy the existing JSON body.

In Bravo, navigate to the API request Body section, choose JSON, and paste the copied JSON from Xano.

We will replace the values in the example request body with variables while keeping the same key names ("user_id", "name", "email", "phone", etc.), as these match the Xano column names. To define a variable, we'll use this notation: ${input}. In our case, we'll define the variables ${name} ,${email} ${phone}, etc. but you can use any variable name you prefer. Permitted characters: lowercase a-z, uppercase A-Z, 0 to 9, underscore (_) and dash (-). No spacing. Later on, when binding the UI elements of our app to the API requests, we'll specify which elements are bound to which variables. For instance, if we have a form connected to this post request, we'll bind each input field to one of the variables we defined in the JSON body.

{
  "user_id": ${user.id},
  "name": "${name}",
  "email": "${email}",
  "phone": ${phone},
  "bio": "${bio}",
  "plan": "${plan}",
  "privacy": "${privacy}"
}

For text input, include the quotation marks, like "${input}". For number input, do not include the quotations, like ${input}

You can use a JSON validator to make sure the JSON snippet you copied is syntactically correct, and avoid getting errors later on.

Let's send a test request to our database to verify that the request is correctly constructed. Navigate to the Input Variables & Test Values tab within the API request and provide sample data for the previously defined variables in the JSON body. In this example: 1 for ${user.id}, Robin for ${name}, etc.

The key name for the Test Value must match the defined Variable Name exactly, including case sensitivity.

If the PATCH request is configured correctly, the example content will be stored in your database. 11. In step 2, we set the Authentication type to Bearer and left the Token field empty. To authenticate the request, go to the "Input Variables & Test Values" tab, add "_authorization" as variable and enter the token in the value field.

After setting the values and authenticating the request, click Send. The specified record in the table will then be updated with the provided test data.
If the request is successful, you'll receive a response message containing data from the API endpoint. This data will depend on the backend configuration. In this example, you'll get data corresponding to the row you just updated.

To verify the HTTP response body, go to the Debug & Inspect Response tab. A Status Code: 200 - OK indicates successful data retrieval.

On the other hand, if the request was not successful, you will get an HTTP error as a response. In this case, review and double check your JSON body and URL to be correct.

Finally, rename the variables in the Output Variables section to align with the user table API request names for proper data binding. More about Variables.

After setting up the API request, bind the form using the guide below: