API inserting "undefined" into path in my React App

Viewed 16

I'm sure I probably have something simple to fix, but have tried and tried and cannot find it. I have several API calls that are working just fine. But I have made a new one, which I made by copy and pasting ones that worked, and just changing values and names. But this new one, gives me a 500 error.

The API path should be:

"http://localhost:3000/billingcalculator/create"

Instead, it is:

"http://localhost:3000/undefined/billingcalculator/create" <-- where is the undefined coming from?

It gives this error:

PUT http://localhost:3000/undefined/billingcalculator/create 500 (Internal Server Error)

It references the line in the call that says throw new Error() ; but I don't see what's wrong with that. I use that exact same code all over the place and it works fine everywhere else.

Call that works perfectly:

createHCA() {
      fetch(API_URL + `/hca/create`, {
        method: "PUT",
        body: JSON.stringify({
          client: this.state.client,
          short: this.state.short,
        }),
        headers: { "Content-Type": "application/json" },
      })
        .then((res) => {
          if (!res.ok) {
            throw new Error();
          }
          return res.json();
        })
        .then((data) => console.log(data))
        .catch((err) => console.log(err))
        .then(() => this.getHCAid())
        .then(() => this.getAllHCAs());
        this.setState({ showHide: false});
  }

And this is the call that creates the error and cannot reach my API routes:

createBillProject() {
        fetch(API_URL + `/billingcalculator/create`, {
            method: "PUT",
            body: JSON.stringify({
                client: this.state.client,
                source: this.state.source,
                projectName: this.state.projectName
            }),
            headers: { "Content-Type": "application/json" },
        })
            .then((res) => {
                if (!res.ok) {
                    throw new Error();
                }
                return res.json();
            })
            .then((data) => console.log(data))
            .catch((err) => console.log(err))
            .then(() => this.getBillProjLastId());
        
    }

The API route I'm trying to reach is this:

app.put("/billingcalculator/create", function (req, res) {
  console.log("It is getting to the billing route");
  const client = req.body.client;
  const source = req.body.source;
  const projectName = req.body.projectName;
  console.log(`client: ${client}`);
  console.log(`source: ${source}`);
  console.log(`project name: ${projectName}`);
  connection.getConnection(function (err, connection) {
    connection.query(
      `INSERT INTO billcalc_projects (client, source, project_name)
        VALUES (?, ?, ?)`,
      [client, source, projectName],
      function (error, results, fields) {
        connection.release();
        if (error) throw error;
        res.json(results);
        console.log(`Billing Project has been created`);
      }
    );
  });
});

Thanks in advance for your help. It must be something simple that I'm just missing. But I haven't been able to figure it out.

0 Answers
Related