Integrating React-native apps with back-end code using fetch API.

Integrating React-native apps with back-end code using fetch API.

June 21, 2018

Many people tend to get confused, how to integrate their back-end code( Node-express, Python-flask etc).

To solve this best way is to create a URL on server which takes data as json from server and process it and reply with json data, using a post request.

The two common methods are GET and POST:

• GET  — Requests data from a specified resource
• POST  — Submits data to be processed to a specified resource

But there are some limitations to GET requests as follows:

• GET requests can be cached
• GET requests remain in the browser history
• GET requests can be bookmarked
• GET requests should never be used when dealing with sensitive data
• GET requests have length restrictions
• GET requests should be used only to retrieve data

Some + points on POST requests:

• POST requests are never cached
• POST requests do not remain in the browser history
• POST requests cannot be bookmarked
• POST requests have no restrictions on data length

(Source: https://www.w3schools.com/tags/ref_httpmethods.asp)

In GET request the parameters are sent as url, which sometimes you don’t want. Like you may have some sensitive data for e.g. user-name and password, which needs to be hidden while making a request, so POST request is better alternative.

Also if you want to send data other that ASCII characters GET requests are not that handy, however POST is better in such cases.

But we can use GET as well, here for sake for an example, I have used POST.

Basic structure of communication.

For this fetch API (https://facebook.github.io/react-native/docs/network.html)provided by react-native comes to rescue.

It is very easy to use and can be used to make all kinds of requests, GET, POST etc. The basic structure of the fetch request looks like following:

fetch('https://mywebsite.com/endpoint/', { method: 'POST', headers: { Accept: 'application/json', 'Content-Type': 'application/json', }, body: JSON.stringify({ firstParam: 'yourValue', secondParam: 'yourOtherValue', }), }).then((response) => response.json()) .then((responseJson) => { return responseJson.movies; }) .catch((error) => { console.error(error); });

The code goes as follows

Also do not forget to change cluster name from “advance88” to your cluster name in following code.

import React, { Component } from 'react'; import { TouchableOpacity, View, ActivityIndicator, Text, Alert} from 'react-native'; export default class App extends Component { handlePress = async () => { fetch('[https://data.advance88.hasura-app.io/v1/query'](https://data.advance88.hasura-app.io/v1/query%27), { method: 'POST', headers: { 'Content-Type': 'application/json', }, body: JSON.stringify({ "type": "select", "args": { "table": "author", "columns": ["name"], "limit": "1" } })

}) .then((response) => response.json()) .then((responseJson) => { Alert.alert("Author name at 0th index: " + responseJson[0].name); }) .catch((error) => { console.error(error); }); } render(){ return( <View style={{paddingTop: 50, paddingLeft: 50 }}> <Text> Some other text </Text> <Text> Some other text </Text> <TouchableOpacity onPress={this.handlePress.bind(this)}> <Text style={{paddingTop: 50, paddingLeft: 50, color: '#FF0000'}}> Click me to see the name </Text> </TouchableOpacity>

</View> ); } }

Here is the start screen:

When the text is clicked: