Retrieving data from database between client and server

I have 2 files, App.js, which just contains a button, that should write to the console, after calling a function, that connects to the Database. The other file is Database.jsx, which makes the database connection.

As a beginner with React, I'm having a really hard time getting data from the database. If Database.jsx was a file that should run in client side, I could just import it into App.js, but since it should run on server, importing it throws a lot of exceptions. So I've found out that I can use Axios to communicate with backend.

Clicking on the <Button onClick={() => getData()}>Show</Button>, I just want to write the data to the console.

So how do I let axios.get(http://localhost:3000/getData) in my App.js know that the getData, is in the Database.jsx, and how do I make the Database.jsx to actually listen on income on the given URL?

In my App.js I have

import { Button } from "react-bootstrap";
import axios from "axios";

function App() {  
    const getData = async () => {
        console.log('Clicked');

        axios.get(`http://localhost:3000/getData`)
            .then((res) => {
                setData(res.data)
                console.log(data);
            })
            .catch((err) => console.log(err));
    }

    return (
        <div className='contentDiv'>
            <Button onClick={() => getData()}>Show</Button>
        </div>
    )
}

In my Database.jsx, I have

const { Client } = require('pg');
const { default: axios } = require('axios');

const client = new Client({
  user: 'postgres',
  host: 'localhost',
  database: 'testDB',
  password: 'password',
  port: 5432,
});

axios.get('/getData', async (req, res) => {
  client.connect();

  client.query('SELECT * FROM movies', (err, res) => {
    if (err) {
      console.error(err);
      return;
    }
    const rows = res.rows;
    client.end();

    return rows;
  })
})

I found this: Fetch data from PostgreSQL into React react

which seems similar to what I want, but the guy who explains, uses express. What confuses me, is that he's creating another server with express, that is listening. But doesn't reach have its on sever built in? As you can see in my: axios.get(http://localhost:3000/getAdmins), React is already listening, so I'm confused why I should make another server with express?

I don't mind if I must use axios, fetch or any other tool to achieve this, just what you can help with. Thanks

Answer 3/3

which seems similar to what I want, but the guy who explains, uses express. What confuses me, is that he's creating another server with express, that is listening. But doesn't reach have its on sever built in? As you can see in my: axios.get(http://localhost:3000/getAdmins), React is already listening, so I'm confused why I should make another server with express?

Re: React does not have this capability. It is just a frontend application library. Do not worry. Now with the same server we created above, your same React app will work and fetch data. Please see the same code below.

server.js

const express = require('express');
const { Client } = require('pg');
const cors = require('cors');

const app = express();
app.use(cors());

let client;

app.get('/getData', (req, res) => {

  client.query('SELECT * FROM movie', (err, result) => {
    if (err) {
      res.sendStatus(500).send(err);
      return;
    }
    const rows = result.rows;
    res.send(rows);
  });
});

app.listen(4000, () => {

  console.log('l@4000');
  client = new Client({
    user: 'postgres',
    host: 'localhost',
    database: 'postgres',
    password: 'test',
    port: 5432,
  });
  client.connect();
});

App.js

import { Button } from 'react-bootstrap';
import axios from 'axios';

export default function App() {
  const getData = async () => {
    console.log('Clicked');

    axios
      .get(`http://localhost:4000/getData`)
      .then((res) => {
        console.log(res.data);
      })
      .catch((err) => console.log(err));
  };

  return (
    <div className="contentDiv">
      <Button onClick={() => getData()}>Show</Button>
    </div>
  );
}

Test run:

node server.js // this will start the backend server
node start // this will start the React app

Clicking on show button: The data accessed from the database, and shown in the console as below.

I don't mind if I must use axios, fetch or any other tool to achieve this, just what you can help with. Thanks

Re: axios or the built-in fetch function can be used.

Notes:

1. You may face some issues with creating the appropriate directories to host the frontend app and the backend server as it has not been clarified in this post. You may please post your comment in this regard, shall help based on it.
2. Please note the change in port number. The reference to the port 3000 has been changed to 4000.