Post action using REST to Hasura database

[PhilipOyelegbin]

I'm currently having issues posting my form data to my database from the frontend, please help

[meetzaveri]

Hello Philip,

Can you send us the message that error shows? Generally, 400 error code is thrown when there is invalid syntax(JSON payload) or malformed request body.

In the case of a REST API with a JSON payload, 400's are typically, and correctly I would say, used to indicate that the JSON is invalid in some way according to the API specification for the service.

Related Solution

You need to use mode:"cors" when you are passing Content-type:"application/json"

The no-cors mode only works with some constraint. Covering from mdn docs regarding fetch

Note that mode: "no-cors" only allows a limited set of headers in the request:

I check that you've set request mode to no-cors in fetch options. You can only use mode:no-cors when you pass specific limited set of headers in request as mentioned in that mdn docs.

here's the common options object for fetch API

 method: "post", // *GET, POST, PUT, DELETE, etc.
 mode: "cors", // no-cors, *cors, same-origin
 headers: {
    "Content-Type": "application/json"
 },
 body: JSON.stringify(data) // body data type must match "Content-Type" header

Example

I created a simple app via codesandbox with react client. Created a REST endpoint from my hasura API explorer and used it to insert a sample data. That REST endpoint contains mutation to insert data into db.

Here's the codesandbox link you can test - https://codesandbox.io/s/mystifying-platform-97wdks?file=/src/App.js . You can also access the preview app for that codesandbox here - https://97wdks.csb.app/

Do let us know further if you are experiencing any problems, thanks!

[PhilipOyelegbin]

Below is the error code I'm getting, I think it might be from how I set up the database on the Hasura cloud. I'm currently searching for a video to verify my configuration for the post request, if you know of any video that can help please kindly recommend it.

[meetzaveri]

Got it. Did you try changing your API options as suggested in the answer above ?

[PhilipOyelegbin]

Yes I did, I even tested my code with a demo API "webhook" and it worked but the Hasura API did not work. I noticed the error message is referring me back to the url in my fetch which is why I need a video that explains the concept of setting up a REST url for post action on Hasura. I might have set it up wrongly.