strapi / starters-and-templates

Monorepo for all official Strapi v4 templates
MIT License
327 stars 117 forks source link

next-corporate starter: Lead submission doesn't work (+ workaround) #71

Open webhype opened 1 year ago

webhype commented 1 year ago

Rant

Yet another easy-to-fix (?) bug in the corporate-starter template that has existed for months. Illustrates the complete abandonment of this repo, with open issues, as of this writing, dating back to December 2021. No triage, no assignment, just slow decay. Strapi, this is your street sign, your advertising banner, your welcome committee, your business card, your entry hall, the funnel to get new developers excited about Strapi, and mostly nothing works. Of the $31 MM venture funding, wouldn't it make sense to clip off $100K for a person to keep these simple starters and templates maintained? Or at least triage these issues here so developers feel like you're taking this seriously? Hard to spread the gospel about Strapi when the basic starter packages simply do not work.

Issue

After installing the next-corporate starter, which also doesn't work out of the box with version 4.5.x (see https://github.com/strapi/starters-and-templates/issues/67 ), email POST submissions to http://localhost:1337/api/lead-form-submissions fail with an error visible in the GUI as An error occured please try again.

Cause

Apparently the API now expects the body of the POST payload to be wrapped in to a data object, but the starter was never adapted to that, and apparently nobody ever tested it recently.

Apparently the frontend sends the following JSON payload to the API:

{"email": "myemail@example.com", "location": "Home Page Bottom"}

Which is not in line with what the API expects; it expects the payload to be wrapped into a data object like so:

{"data": {
    "email": "myemail@example.com", "location": "Home Page Bottom"
}}

Workaround

As a hacky quick-fix workaround, I inserted the following three lines into ./frontent/utils/api.js:

// Merge default and user options
const mergedOptions = {
    headers: {
        "Content-Type": "application/json",
    },
    ...options,
}
// @HACK begins here
if (mergedOptions.body && typeof mergedOptions.body === "string") {
    mergedOptions.body = `{\"data\": ${mergedOptions.body}}`
}
// @HACK ends here
// Build request URL
const queryString = qs.stringify(urlParamsObject)

I have no idea what the larger implications of this hack are and if it api.js will work as expected under all circumstances after this modification. But it got the email submission to work.