Connect to Custom API Endpoints from React Studio

Example of Save data interaction with React Studio’s Xano plugin

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

Example API call under Save data interaction

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 endpoint in Xano’s endpoint designer

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 POST
Body
In 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.

Save response to Data slot

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/

React Studio + Xano No-code Backend Builder = ❤️