Backend in heroku duplicate inserts/ frontend in heroku duplicate request (I dont know)-CodePudding

I have running an app in heroku, separate in back and front
back: node express mysql
front: vue
the app works fine, but I have an error random: sometimes i have duplicates records inserted from frontend. (I guess the error comes from the front)
from the frontend I use fetch to add the records

const requestOptions = {
  method: "POST",
  headers: { 
    "Accept": "application/json", 
    "Content-Type": "application/json" 
  },
  body: JSON.stringify({
    data: data,
    ...: ...,
  }),
};

const response = await fetch(`url_backend_heroku/api/add`, requestOptions);

the records are inserted correctly , but sometimes are inserted duplicated with correct next id

Could it be that fetch is sending 2 requests in some cases?
before deploying in heroku on my local machine I never duplicate records
I've been going around for days and I can't find why this happens

CodePudding user response：

Yeah it is possible you are sending 2 requests somewhere. Put logs in heroku BACK on the specific endpoint to see whats exactly happening. Also while requesting from Front end check your network tab in developer tools to see if you are actually firing the request twice. Because as you said duplicate records but they have correct ID's , could only mean what you said.

Also, this might or might not be true, but heroku server sleeps on inactivity, so it is possible that might cause an issue but I am not entirely sure on that, will have to check the code and environment for that.

CodePudding user response：

looking at the heroku (back) log it looks like 2 records were inserted normally
looking at the network tab in the browser, only 1 request appears: OPTIONS (204) and POST (200)
the table has an id that is the primary key nothing complicated
on the other hand I am on a Dynos Hobby plan that does not have sleep times (if the free)

put here part or my backend

database.js

const mysql = require('mysql')
const { promisify } = require('util')

const config = {  database keys }

const pool = mysql.createPool(config);

pool.getConnection((err: any, connection: any) => {

    if (err) {
        if (err.code === 'PROTOCOL_CONNECTION_LOST') {
            console.error('DATABASE CONNECTION WAS CLOSED')
        }
        if (err.code === 'ER_CON_COUNT_ERROR') {
            console.error('DATABASE HAS TO MANY CONNECTIONS')
        }
        if (err.code === 'ECONNREFUSED') {
            console.error('DATABASE CONNECTION WAS REFUSED')
        }
    }

    if (connection) connection.release()
    console.log('DB is Connected')
    return

})

pool.query = promisify(pool.query) 
export default pool

controller.js

import pool from '../database';

public async insert(req: Request, res: Response) {

    let body = req.body

    try {

        const response = await pool.query('SELECT MAX(id)   1 as idNew FROM table')
            
        let data = {Id: response[0].idNew, ...body}
        
        //before it had an auto_increment id and it also failed

        const result = await pool.query('INSERT INTO table set ?', [data])

        res.json({
            insertId: response[0].idNew,
            message: "Saved OK"
        })

    } catch (error) {
        console.log("error", error)
        return res.status(500).send("error")
    }

}

can it be a fetch problem? don't try yet to use axios for example