Trying to pass data into a webhook's _req variable

Solved

Trying to pass data into a webhook's _req variable

Filip-S
Shopify Partner
5 1 0

I'm trying to pass data from the frontend to a webhook using fetch's body payload. (If there is a better or more consistent way of doing this pleas let me know.) But whenever I check the requests body, it lacks any sort of body. The fetch is called on click in the following method:

 

 

let TEST = async() => {
        const payload = JSON.stringify({text:"THIS IS THE PAYLOAD"});
        try{
            const response = await fetch("/api/return/TEST",{
                method:"PUT",
                header:{
                    "Content-Type": "application/json",
                },
                body:payload
            });

            console.log("PUT RESPONSE: " + JSON.stringify(response));
        }catch(err){
            console.error("ERROR:",err);
        }
    }

 

 

but when I log the request on the corresponding webhook the body is nowhere to be found.

 

 

app.put("/api/return/TEST", async (_req,res) => {
  let status = 200;
  let error = null;
  
  try {
    console.log(JSON.stringify(_req.body));//req.body always is empty/null
  } catch(e){
    console.log(`Failed to process return/create: ${e.message}`);
    status = 500;
    error = e.message;
  }
  res.status(status).send({success: status === 200, error});
}
);

 

 

I've tested this both on chrome and firefox, both of which have the same result. Is there something I'm doing wrong, or is there a better way of passing data from the frontend to a webhook.

Accepted Solution (1)

Liam
Shopify Staff
2807 310 805

This is an accepted solution.

HI Filip-S,

 

Your code seems to be correct except for a small typo in the fetch headers. You have used "header" instead of "headers". Try making that change and seeing if it works as expected. 

 

Also, ensure that you have body-parser middleware setup in your express app to parse incoming request bodies in a middleware before you handle them, eg:

const express = require('express');
const app = express();
const bodyParser = require('body-parser');

app.use(bodyParser.json()); // for parsing application/json

app.put("/api/return/TEST", async (_req,res) => {
  let status = 200;
  let error = null;

  try {
    console.log(JSON.stringify(_req.body)); // Now, req.body should have the data
  } catch(e){
    console.log(`Failed to process return/create: ${e.message}`);
    status = 500;
    error = e.message;
  }
  res.status(status).send({success: status === 200, error});
});

This should solve your problem. The body-parser middleware is used to parse the incoming request bodies in a middleware before your handlers, available under the `req.body` property.

 

Hope this helps!

Liam | Developer Advocate @ Shopify 
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit Shopify.dev or the Shopify Web Design and Development Blog

View solution in original post

Replies 2 (2)

Filip-S
Shopify Partner
5 1 0

I should also add that the payload does show up correctly in the page inspect's console, on both firefox and chrome

Liam
Shopify Staff
2807 310 805

This is an accepted solution.

HI Filip-S,

 

Your code seems to be correct except for a small typo in the fetch headers. You have used "header" instead of "headers". Try making that change and seeing if it works as expected. 

 

Also, ensure that you have body-parser middleware setup in your express app to parse incoming request bodies in a middleware before you handle them, eg:

const express = require('express');
const app = express();
const bodyParser = require('body-parser');

app.use(bodyParser.json()); // for parsing application/json

app.put("/api/return/TEST", async (_req,res) => {
  let status = 200;
  let error = null;

  try {
    console.log(JSON.stringify(_req.body)); // Now, req.body should have the data
  } catch(e){
    console.log(`Failed to process return/create: ${e.message}`);
    status = 500;
    error = e.message;
  }
  res.status(status).send({success: status === 200, error});
});

This should solve your problem. The body-parser middleware is used to parse the incoming request bodies in a middleware before your handlers, available under the `req.body` property.

 

Hope this helps!

Liam | Developer Advocate @ Shopify 
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit Shopify.dev or the Shopify Web Design and Development Blog