Processing a Response From a Request using Node.js and Firestore

Question

I have built the server and the client and I am having trouble processing a response on the client that the server sends over. I've used res.send(data) and res.json(data), but the response that the client processes doesn't contain any of the information the server has sent back.

Here is my server code. I am deleting an item and just want to send some random data back to see if I can receive it on the client.

app.delete('/deleteReward/:id', (req, res) => {
  console.log('\n\n\n\nInside delete\n\n\n\n')
  console.log(req.params.id)

  var rewardId = req.params.id

  const sessionCookie = req.cookies.session || "";

  var idToken = ""
  var type = ""
  if (sessionCookie) {
    idToken = sessionCookie['idToken']
    type = sessionCookie['type']
  }

  console.log("Printing session cookie")
  console.log(sessionCookie)
  admin
    .auth()
    .verifySessionCookie(idToken, true /** checkRevoked */)
    .then((decodedClaims) => {
      console.log(decodedClaims.user_id)
      deleteReward(decodedClaims.user_id, rewardId)
      // res.send("new data being sent")
    })
    .catch((error) => {
      console.log(error)
    });

    res.json({'key': 'value'})
})

Here is my code on the client-side

for(var i = 0; i < rewardDeleteButtons.length; i++) {
        var deleteButton = rewardDeleteButtons[i]
        deleteButton.addEventListener('click', function(e) {
            console.log(document.cookie)
            console.log(this.value)
            var response = fetch("/deleteReward/" + this.value, {
                method: "DELETE",
                headers: {
                Accept: "application/json",
                "Content-Type": "application/json",
                "CSRF-Token": Cookies.get("XSRF-TOKEN"),
                },
            });

            response.then((data) => {
                console.log(data)
            })
        })
    }

The data I'm getting back looks like this when I console.log it

Response {type: "basic", url: "http://localhost:5000/deleteReward/1", redirected: false, status: 200, ok: true, …}body: (...)bodyUsed: falseheaders: Headers {}ok: trueredirected: falsestatus: 200statusText: "OK"type: "basic"url: "http://localhost:5000/deleteReward/1"[[Prototype]]: Response

I should see something like "{'key': 'value'}" or something like that in the returned JSON but it's not there. Not sure what I'm doing. Couldn't find any examples online of handling a response and extracting data within on the client from Node.

Answer 1

The first then() block of fetch doesn't directly resolve the response body. It resolves the response object. You should return the JSON response from the first resolver and use second then() to use it.

More Info: https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch

The code should be like

response
  .then(res => res.json())
  .then(data => console.log(data));