Fetch data from PostgreSQL into React

Question

I am trying to do a test task and I am prohibited from using libraries and plugins to work with DB, ORM.

I need to get data from a PostgreSQL table and display it in the React component, but I don't know how to fetch data from the node to react.

Here is how I get the data from the database:

const { Client } = require("pg");

const client = new Client({
  host: "localhost",
  user: "postgres",
  port: 5432,
  password: "postgres",
  database: "welbex-test",
});

client.connect();

client.query(`SELECT * from products`, (err, res) => {
  if (err) {
    console.log(err.message);
  } else {
    console.log(res.rows);
  }
  client.end;
});

Here is how I am trying to fetch data:

  useEffect(() => {
    const fetchProducts = async () => {
      setLoading(true);
      const res = await axios.get(
        "http://localhost:3000/src/Components/API/connect"
      );
      setProducts(res.data);
      setLoading(false);
    };
    fetchProducts();
  }, []);

Chris Nguyen · Accepted Answer · 2022-06-19 07:17:01Z

3

You will need to setup server. Express is a popular server to export an api. Then change the endpoint to your server to fetch data. For example:

Your server:

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

const app = express()
const port = 3000

const client = new Client({
  host: "localhost",
  user: "postgres",
  port: 5432,
  password: "postgres",
  database: "welbex-test",
});


client.connect();

app.get('/products', async (req, res) => {
  const { rows } = await client.query(`SELECT * from products`, 
  res.send(rows)
})

app.listen(port, () => {
  console.log(`Example app listening on port ${port}`)
})

Your component:

 useEffect(() => {
    const fetchProducts = async () => {
      setLoading(true);
      const res = await axios.get(
        "http://localhost:3000/products"
      );
      setProducts(res.data);
      setLoading(false);
    };
    fetchProducts();
  }, []);

edited Jun 19, 2022 at 7:17

answered Jun 19, 2022 at 6:27

Chris Nguyen

2,9101 gold badge19 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Fetch data from PostgreSQL into React

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related