How can I retrieve data from mysql upon clicking on a button by react-native

Question

I'm currently having an error on my code on retrieving MySQL data upon clicking a button.

Here is my 'route.js'.

  const express = require('express');
  const bodyParser = require('body-parser');
  const mysql = require('mysql');

  const connection = mysql.createPool({
    host: 'localhost',
    user: 'root',
    password: 'password!',
    database: 'mydb'
  });

// Starting our app.
const app = express();

// Creating a GET route that returns data from the 'users' table.
app.get('/user', function (req, res) {
    // Connecting to the database.
    connection.getConnection(function (err, connection) {

    // Executing the MySQL query (select all data from the 'users' table).
    connection.query('SELECT * FROM user', function (error, results, fields) {
      // If some error occurs, we throw an error.
      if (error) throw error;

      // Getting the 'response' from the database and sending it to our route. This is were the data is.
      res.send(results)
    });
  });
});

// Starting our server.
app.listen(3000, () => {
 console.log('Go to http://localhost:3000/user so you can see the data.');
});

async function test(){
  await fetch('http://mylocalpcIP:3000/user',{
  method: 'POST', // Here you're saying that you want to make a POST request. Could be any method, like a GET, for example.
  headers: '', // You can specify your requisition headers here. That line is optional.
  body: { // Here's the fun part. Put your data here.
    "name": this.state.name,
    "age": this.state.age,
    "phone_number": this.state.phone_number
  }
  })
    .then(response => response.json())
    .then(user => console.warn(user))
};

export {test};

Then, I've called test function as such:

import React from 'react';
import { View, Text, StyleSheet, TouchableOpacity } from 'react-native';
import {test} from "./db/routes.js";

const MyScreen = ( {navigation} ) => {

    return (
        <View style={styles.container2}>
          <TouchableOpacity
            style = {[styles.mid_box, styles.pbox]}
            onPress={() =>{
              test();
              navigation.navigate("Dating_to_Profiles")
            }}>
            <View>
               <Text style = {styles.textstyle}>1st Introduced Profile</Text>
            </View>
          </TouchableOpacity> 

And I'm getting this scary message when I reload the emulated Android.

Well.. It's very likely that I've messed up somewhere since I don't know much about anything yet.

I'd appreciate a lot if someone can teach me how to retrieve data via POST method.

Thanks a lot in advance!

Answer 1

Express is a NodeJS framework and thus obviously not compatible with react-native.

If you wanted to create an API where your data that was queried from MYSQL is served as JSON so it can be fetched by your app, I recommend this tutorial for you.