2023-10-10
2979
#postgresql#react
Nathan Sebhastian
15685
Oct 10, 2023 ⋅ 10 min read

Getting started with Postgres in your React app

Nathan Sebhastian A senior software developer with experience in building fullstack JavaScript app with React and Express. You can find me online at sebhastian.com.

Recent posts:

Automate Repetitive Tasks With The Pinion Code Generator

Automate repetitive tasks with the Pinion code generator

Discover how the Pinion code generator automates repetitive tasks and boosts productivity compared to tools like Yeoman, Plop, and Hygen.

Joseph Mawa
May 21, 2024 ⋅ 7 min read
Exploring Hurl An Alternative To Postman

Exploring Hurl, a command line alternative to Postman

Hurl is an excellent Postman alternative that improves the DX of working with APIs through the command line.

Nwani Victory
May 20, 2024 ⋅ 8 min read
How To Integrate WunderGraph With Your Frontend Application

How to integrate WunderGraph with your frontend application

Unify and simplify APIs using WunderGraph to integrate REST, GraphQL, and databases in a single endpoint.

Boemo Mmopelwa
May 17, 2024 ⋅ 5 min read
Understanding The Latest Webkit Features In Safari 17.4

Understanding the latest Webkit features in Safari 17.4

The Safari 17.4 update brought in many modern features and bug fixes. Explore the major development-specific updates you should be aware of.

Rahul Chhodde
May 16, 2024 ⋅ 10 min read
View all posts

31 Replies to "Getting started with Postgres in your React app"

  1. As a DBA I have to say that mentioning the wild card * in a select without mentioning the problems it can cause is a rookie mistake.

    Never select more than you need, especially if the given table contains indexes that might be used if you select only the required columns (which are also present in the index) and thus relying on an index that might make a difference from having your query running at 20 seconds to less than 200ms when an unnecessary key lookup occures.

    Never use * in production, especially when defining views, they tend to parse the * into the actual columns in that time the view got created, meaning – if you add another column to the underlying table the view won’t return it, and if you remove a column some RDBMS will not validate dependency and cause an error when the view is queried.

  2. I would like to suggest that you add a step to your tutorial. After `my_database` is created, you will want to change into the database before you create the table with the following command:
    `\c my_database`

  3. You have a mistake in:

    const deleteMerchant = () => {
    return new Promise(function(resolve, reject) {
    const id = parseInt(request.params.id)
    pool.query(‘DELETE FROM merchants WHERE id = $1’, [id], (error, results) => {
    if (error) {
    reject(error)
    }
    resolve(`Merchant deleted with ID: ${id}`)
    })
    })
    }

    it should be:

    const deleteMerchant = (id) => {
    return new Promise(function(resolve, reject) {
    pool.query(‘DELETE FROM merchants WHERE id = $1’, [id], (error, results) => {
    if (error) {
    reject(error)
    }
    resolve(`Merchant deleted with ID: ${id}`)
    })
    })
    }

    Thanks for the rest of the tutorial!

    Cheers,

    Nathan

  4. Excellent tutorial!! I learned a lot.
    I just had one small query.
    I think the delete method is not working. I tried as Nathan pointed out but that doesn’t seem to work either

  5. When I try to install react-postgres, I receibe this error:

    npm ERR! code E404
    npm ERR! 404 Not Found – GET https://registry.npmjs.org/react-postgres – Not found
    npm ERR! 404
    npm ERR! 404 ‘react-postgres@latest’ is not in the npm registry.
    npm ERR! 404 You should bug the author to publish it (or use the name yourself!)
    npm ERR! 404
    npm ERR! 404 Note that you can also install from a
    npm ERR! 404 tarball, folder, http url, or git url.

    npm ERR! A complete log of this run can be found in:
    npm ERR! /home/daniel/.npm/_logs/2020-11-09T23_53_15_619Z-debug.log
    Install for [ ‘react-postgres@latest’ ] failed with code 1

    Perphaps the code it’s bad written?

    1. Hey there, `react-postgres` isn’t a library. It’s the name the author gave to the CRA project he created with the `npx create-react-app` command.

  6. Hi there,

    I’ve been trying to follow along with this tutorial in a project I’m working on, but
    when I try to use the pg library, I receive the following error:

    ./node_modules/pg/lib/native/client.js
    Module not found: Can’t resolve ‘pg-native’

    I checked and it’s in the folder listed, but when I try to run “index.js” in that folder, it returns a syntax error. I haven’t made any changes to the library…so I’m not sure why it’s doing it.

    Here’s a link to my code:
    https://github.com/medemak/can-dash

    Any help would be greatly appreciated!

  7. hi – i am getting a ‘Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://localhost:3001/. (Reason: CORS request did not succeed).’ error. Please let me know how I can overcome the CORS issue?
    I am on a Ubuntu machine.

  8. Hi.. I followed the exact steps. but still could not access the pgsql. pgsql server is running and is able to insert data into it directly via console. could not insert data from application. there is no error! hence couldn’t find a way to make it working

  9. Hi I followed the same tutorial. But when I’m trying to insert the data or delete the data. I am not able to do that operations. Checked for errors didn’t find anything. Can you please help me out?

      1. Hi Nathan, still I am not able to insert the data. When I inspect on the app screen it shows me an error on console that App.js:18 POST http://localhost:3001/merchants net::ERR_CONNECTION_REFUSED and when I try to do on postman for post method it shows title error with code 404 Cannot POST /

        1. Did you run the Node server? Head to the node-postgres folder and execute `node index.js` command from the terminal to start the server on localhost:3001

          1. Thank you Nathan. It worked when I run the node server. But When I’m inserting the data which is post request it’s inserting the null values even though I gave the data.

              1. Hi Nathan, I figured it out. I was not running the node server. I’m just running the react app so, whatever values I’m inserting will be null. Then, I have installed the Nodemon which, keeps running the node server automatically even though we make any changes on the server-side.

                1. Hi Nik, glad to hear that!

                  Yeah, Nodemon is definitely nice to have when you’re developing a Node-based application because `node server` command doesn’t apply the code changes when you hit the save button.

  10. Hi Nathan, I have question, when I’m inserting the data for the first time it’s inserting the null values because I was not running the node server. But if my server is not running when it getting into the database?

  11. Can you help me I got this message “Unhandled Rejection (TypeError): Failed to fetch”

    10 | function getMerchant() {
    > 11 | fetch(“http://localhost:3001”)
    | ^ 12 | .then((response) => {
    13 | return response.text();
    14 | })

  12. Question, is it possible to upload a picture of what the file structure looks like for this project? We created two index.js files and I am unsure of what file is suppose to be where when resolving this project. Any information on this matter helps! Thank you.

  13. Hi there, when i wrote this codes on the pgAdmin 4 it’s works but how can i use it in the backend server

    INSERT INTO products (product_name,main_category, img_url, description, price)
    SELECT ‘Margarita Pizza’, categories.cat_name, ‘https://cdn.yemek.com/mnresize/1250/833/uploads/2022/03/pizza-margherita-tarifi-yemekcom.jpg’, ‘Monza Sos, Mozarella, Fesleğen’, ‘119.90’
    FROM categories WHERE cat_name = ‘pizza’

  14. Did anyone have an issue installing PostgreSQL? If so how did you resolve it? I’m getting two errors
    – Failed to load SQL modules into the database cluster.
    – Problem running post-install step. Installation may not complete correctly Error reading file C:/Program Files/PostgreSQL/16/data/postgresql.conf

Leave a Reply