Apr 28, 2021
Connect to Custom API Endpoints from React Studio
Do you want to trigger functions on your server? Need to update data on your database? Here’s how you can do it in React Studio.
React Studio makes it easy to load data from API to app (Data sheets) easy but calling certain API endpoint with a button interaction has been a bit tricky to do. We’ve released an update to our Xano and Generic JSON plugin interactions plugin which clears the complexity of calling any API endpoints you might have.
Xano-React Studio plugin
Xano is an awesome NOCODE backend builder which makes API creation fun and easy. React Studio has a prebuild integration to Xano which means you can easily connect your React Studio project to Xano’s backend.
React Studio’s new Xano plugin offers new interaction under Save data -> Plugin -tab. The plugin UI simple; you can set the endpoint path (the base url is already set in your Xano plugin settings) and the method (GET,POST,DELETE) and body of the call. Finally if you want you can save the API response into Data slot.
You can “inject” variables and code into API path url and also into body which makes the interaction really flexible. Adding Data slots is dead easy; just click the “Add Data slot” button and choose the data slot to be injected into string.
In the Endpoint field you may also add properties and collect form field values into API call with the following syntax:
${this.props.propname}
${this.state.fieldname}Example API call
In the example interaction above we’ve set the button’s onclick interaction to make a API request to endpoint in Xano’s backend. The interaction simply sends the forms textarea text into endpoint which then updates the description text in the database.
The Xano's API endpoint shown above updates the description text for my Project management app's ToDo item.API call Settings:Endpoint/edittodoitemdescription/$slot(‘ds_SlotSelectedToDoItemId’)The path contains the fixed part and the Data slot value which is dynamically set in the UI when user clicks certain ToDo item.Method of the request is POSTBodyIn this case the body contains just one value which is the text area text in the UI.{
'description': ${this.state.descriptionTextArea}
}
Finally in the generated app the request looks like this
The same interaction is also available for the Generic JSON plugin so you can call any API endpoints out there.
In case you want to show or work with the API response on your app you can save it to Data slot by choosing the data slot from the Plugin’s “Save response to data slot” section.
Saving form into Database
Download React Studio from www.reactstudio.com
React Studio forum: https://discuss.reactstudio.com/
