1

I'm new to react, and I want to set up an API server to get SQL Server data, and I want to send multiple fetch requests to the API server.

I've tried the promise.all method, but it's always failing on the second fetch request. The only way I could make it work is by nesting the requests through.then, but I prefer not to, since the number of fetch requests are varied.

Here's my code:

Promise.all([
//the number of requests varied
    fetch('http://localhost:8080/api/report/favorite/check/1/1').then(value => value.json()),
    fetch('http://localhost:8080/api/report/favorite/check/1/4').then(value => value.json())
    ])
    .then((value) => {
        //I always get EALREADYCONNECTING error here from 2nd request and on
        console.log(value)
    })
    .catch((err) => {
        console.log(err);
    });

Does the problem lie in the API server configuration?

//Initializing node modules
var express = require("express");
var bodyParser = require("body-parser");
var sql = require("mssql");
var app = express(); 

// Body Parser Middleware
app.use(bodyParser.json()); 

//CORS Middleware
app.use(function (req, res, next) {
//Enabling CORS 
res.header("Access-Control-Allow-Origin", "*");
res.header("Access-Control-Allow-Methods", "GET,HEAD,OPTIONS,POST,PUT");
res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, contentType,Content-Type, Accept, Authorization");
next();
});

//Setting up server
var server = app.listen(process.env.PORT || 8080, function () {
var port = server.address().port;
console.log("App now running on port", port);
});

var connPool = new sql.ConnectionPool({
    user: 'someuser',
    password: 'somepassword',
    server: 'some\\thing',
    database: 'somedb',
    port: 12345
});

//Function to connect to database and execute query
var executeQuery = function(res, query){
connPool.connect().then(function () {
    // create request object
    var request = new sql.Request(connPool);
    // query to the database
    request.query(query).then(function (recordset) {
        res.send(recordset)
        connPool.close();
    })
    .catch(function (err) {
        console.log("Error while querying database :- " + err);
        res.send(err)
        connPool.close();
    });
})
.catch(function (err) {
    console.log("Error while connecting database :- " + err);
    res.send(err);
});
}

//GET API
app.get("/api/report/favorite/check/:userid/:reportid", function(req, res){
    var query = "EXEC rpt.proc_ReportFavoriteCheck " + req.params.userid + ", " + req.params.reportid;
    executeQuery (res, query);
});

I tried several methods, as described here, but I can't make it work:

Fetch API requesting multiple get requests

Multiple fetch requests with setState in React

How to finish Fetch data completely and assign it to component state before proceeding further in componentDidMount React?

marc_s
  • 732,580
  • 175
  • 1,330
  • 1,459
Deny
  • 11
  • 1
  • 4

1 Answers1

0

Solved this by changing my API server configuration:

var executeQuery = async function(res, query){
    const pool = new sql.ConnectionPool(dbConfig);
    pool.on('error', err => {
        console.log('sql errors ', err);
    });

    try {
        await pool.connect();
        let result = await pool.request().query(query);
        console.log('success')
        res.send(result);
        return {success: result};
    } catch (err) {
        console.log('error')
        console.log(err)
        res.send(err);
        return {err: err};
    } finally {
        pool.close();
    }
}
Deny
  • 11
  • 1
  • 4