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: