# Set up an API PATCH request - Xano {% hint style="info" %} [Upgrade your free account](/get-started/unlock-power-features-to-create-interactive-apps.md) to the **Bravo Solo plan** to use this feature. {% endhint %} 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. {% hint style="info" %} 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. {% endhint %} #### :point\_right: **Example** **Figma file** If you don't have a design yet, import it to Bravo. You can also duplicate this [Figma file](https://www.figma.com/design/mNyTDu2CK9wsVLRGUCmecH/Edit-your-profile?node-id=0-1\&t=LOqUc58FSodnzyIz-0). #### :point\_right: **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.

User CRUD endpoints autogenerated in Xano

To set up the PATCH request in the backend, follow [Xano's API documentation.](https://docs.xano.com/api/the-basics/crud-operations) 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. {% hint style="success" %} You can also import your API collection using the Xano Wizard, Open API, Postman or Swagger. {% endhint %} {% hint style="info" %} A **Collection** is a group of API requests, usually for the same data source. {% endhint %}

2. Enter a name and description. If already done, skip this step. 3. 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](https://www.oauth.com/oauth2-servers/differences-between-oauth-1-2/bearer-tokens/) to authenticate the request. In **Collection settings**, set the **Authentication type** to **Bearer** and leave the **Token** field empty.

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

The typical Xano endpoint structure is: ```plaintext https://api.xano.com/your-endpoint/{user_id} ``` 6. Select the request type as **PATCH** and add the endpoint URL, replacing the `{user_id}` with `${user.id}`. [Built-in variables](/connect-api/request-url-variables/built-in-variables.md), like `${user.id}`, auto-fill dynamic content in the app. 7. In Xano, navigate to "**Run & Debug**", and copy the existing **JSON body**.

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

9. 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**](/connect-api/request-url-variables.md), 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](https://www.figma.com/community/file/981976861747536392) 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}" } ``` {% hint style="warning" %} For **text** input, include the quotation marks, like `"``${input}``".` For **number** input, do not include the quotations, like `${input}` {% endhint %} {% hint style="info" %} You can use a [JSON validator](http://json-validator.com/) to make sure the JSON snippet you copied is syntactically correct, and avoid getting errors later on. {% endhint %} 10. 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. {% hint style="info" %} The key name for the **Test Value** must match the defined Variable Name exactly, including case sensitivity. {% endhint %}

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.

12. 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. 13. 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.

Selected data in the Received data tab of an API request

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](/good-to-know/troubleshoot/errors-in-api-requests.md) as a response. In this case, r**eview and double check your JSON body and URL to be correct**. 15. 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](/connect-api/request-url-variables.md).

After setting up the API request, bind the form using the guide below: {% embed url="" %} --- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://docs.bravostudio.app/connect-api/set-up-api-requests/creating-an-api-collection/xano/data-library-connect-to-any-api-patch-request-xano.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.