Set up an API POST request - Xano
Last updated
Last updated
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 POST request to create new 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.
If you don't have a design yet, import it to Bravo. You can also duplicate this Figma file.
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 POST 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.
1. In Data Library, click Create a New Collection and choose Start from scratch. If you already have a collection, select the desired API collection.
You can also import your API collection using the Xano Wizard, Open API, Postman or Swagger.
Provide a name and description for the new collection. If this step is already completed, you can skip it.
The API documentation specifies any Headers, Parameters, and/or Body value needed in order to make the POST 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. If this step is already completed, you can skip it.
To create a new request, click the + button in your collection and enter a name, such as "Add new item".
To add a new item to the table in Xano, use a POST API request and copy the autogenerated endpoint URL.
The typical Xano endpoint structure is:
Return to Bravo, choose POST as the request type, and paste the endpoint URL.
As this is a POST request, we need a JSON body. Go back to Xano, click on the Run & Debug button, and copy the existing JSON body.
Paste the JSON copied from Xano into the JSON section of the API request body in Bravo.
We will replace the values in the example request body with variables while keeping the same key names ("name", "score"), 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} ,${score} 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.
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.
Send a test request to the database to ensure it 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: Mary for ${name} and 42 for ${score}.
The key name for the Test Value must match the defined Variable Name exactly, including case sensitivity.
If the POST 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.
Once the values are set and the request is authenticated, click Send.
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 new record created.
Also a new record will be created with the provided test data in your database.
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:
