I’m experiencing a problem in serverless function, when I log out request/event body which is a stringify form data it log out the value as request.body/event.body with body having the following property (1) stream with the value of false, length with the bytes length as it should be and source which is the data and it’s a string of key values pair but when I log out body.source it become a readable stream.
When I read it with a stream reader and iterate over it it’s a unitArray of bytes which is normal with readable stream but when I parse the whole body/body.source I get an error.
First I don’t know why a value of steam=false turn to readable stream , when I tried to log out the value of the body.source or body it become a readable stream but when the whole event/request is logged out it log out the whole body with each property being what it suppose to be and then cherry picking a property like the source which is the actual data throw when it’s parsed or become a stream when it’s log.
I need the to parse the body else this is useless as I can’t do anything with it and reading it as a readable stream is overhead and more codes than I wish for. Any help will be appreciated.
Front End Code:
function processContactData() {
const contactForm = document.querySelector('#contact')
const contactFormCta = document.querySelector('.contact--cta')
const url = contactForm.action
async function handleContact(formData) {
const res = await (await fetch(url, formData)).json()
console.log(res)
const feedBack = document.createElement('p')
if (res.status == '200' || res.status == '201') {
feedBack.style = 'text-text-fluid--2 text-text-1 bg-surface-2'
feedBack.textContent(
'Thank you for contacing me. Looking forward to working with you!'
)
contactFormCta.insertAdjacentElement('afterend', feedBack)
contactForm.reset()
} else {
feedBack.style = 'text-text-fluid--2 text-text-1 bg-surface-2'
feedBack.textContent(
'Sorry something went wrong, please submit the form again'
)
contactFormCta.insertAdjacentElement('afterend', feedBack)
}
}
contactForm.addEventListener('submit', async (e) => {
e.preventDefault()
const contactData = new FormData(e.target)
const contactPayload = {
body: JSON.stringify({
fullname: contactData.get('fullname'),
email: contactData.get('email'),
company: contactData.get('company'),
purpose:
(contactData.get('fulltime') && 'fulltime') ||
(contactData.get('parttime') && 'parttime') ||
(contactData.get('contract') && 'contract') ||
(contactData.get('other') && 'other'),
message: contactData.get('message'),
}),
//headers: { 'Content-Type': 'application/json' },
method: 'POST',
}
handleContact(contactPayload)
})
}
document.addEventListener('DOMContentLoaded', processContactData)
Serverless Function Code:
export default async (request) => {
let parsedBody;
console.log(request) // Log out the whole request obj
parsedBody = JSON.parse(request) // Suppose to parse the body obj
//parsedBody = JSON.parse(request.body.source) // source hold the actual data This also throw Error
console.log(parsedBody) // Throw Error by JSON.parse()
for await (const chunk of reqBody) {
console.log(chunk)
} // Log out readable steam of UnitArray in bytes
return new Promise('worked', {
status: 200,
header: { 'content-type': 'application/json' },
body: 'WIP',
}) // 500 is returned as response to the front end because of the aforementioned issue
export const config = {
path: '/contact-form',
}