Attempting to send graphql calls from a React component to a PHP server using the fetch method for the first time.
The setup involves React JS on the client-side and Symfony 4 on the server-side. Despite indications that data is being sent in the browser dev tools, all calls result in an empty body on the server side.
Surprisingly, when utilizing graphiql, the requests are successful. I've been trying to replicate the graphiql request structure in React, but the body consistently remains empty.
This is the code snippet showcasing the fetch call:
fetch('/api', {
'method': 'post',
'credentials': 'include',
'headers': {
'Content-Type': 'application/json',
},
'body': JSON.stringify({
"query": "mutation {UpdateActionStatus(input: {actionId: 61, status: TO_DO}) { id }}",
"variables": null
}),
}).then(r => {
console.log(r.json());
return r.json();
}).catch(error => {
console.log('There has been a problem with your fetch operation: ', error.message);
});
Various experiments have been conducted by setting the 'mode' parameter to values like 'cors', 'no-cors', 'same-origin', 'navigate', yet none of these configurations seem to work as expected.
Testing has been done on both Firefox and Chrome browsers, however, without any success.
Even changing the content type to 'application/graphql' did not yield positive results.
Despite reviewing several solutions proposed on platforms like stackoverflow, the issue of empty response bodies persists with no resolution in sight.
An alternative approach involving a more simplistic fetch call was also attempted, unfortunately with similar futile outcomes. It appears there might be an underlying reason preventing the use of fetch altogether, which currently remains unidentified.
fetch('/api', {
'method': 'post',
'credentials': 'include',
'headers': {
'Content-Type': 'application/x-www-form-urlencoded',
},
'body': 'test=test',
});
What steps can be taken next? Is there something obvious that is being overlooked in this scenario?