Apollo GraphQL Client formatting requests improperly - react-native

Question

I have an Apollo GraphQL client running in react native. It connects to a lambda instance running graphQL. My problem is that I am trying to send a mutate request to the server (have not setup queries yet), and the server is getting the following and declaring a syntax error(Expected Name, found String \"operationName\").
When I was testing the graphQL server, the requests looked like the ones specified below. Is Apollo Client not formatting the requests properly (if so why not) or is it functioning as intended?
Body sent from Apollo client to graphQL lambda:
{
"operationName": "createUser",
"variables": {
"firstName": "Jane",
"lastName": "Doe",
"email": "jane#doe.com",
"username": "jane_doe.com",
"provider": "none"
"jwt": "none"
},
"query": "mutation createUser($firstName: String!, $lastName: String!, $email: String!, $username: String!, $provider: String, $jwt: String!) {
createUser(firstName: $firstName, lastName: $lastName, email: $email, username: $username, provider: $provider, jwt: $jwt) {
createdAt
__typename
}
}"}
A Normal request that works from Postman.
mutation {
createUser(firstName: "Jane", lastName: "Doe", email: "jane#doe.com", username: "jane_doe.com", jwt: "none", provider: "none") {
firstName
}
}
Code from react-native app
// The mutation in the render function
<Mutation mutation={createUserMutation}>
{(createUser, error) => {
console.log('error-----------', error);
// If there is an error throw the error
if (error) {
console.log('error----------', error);
}
if (createUser) {
// If the response has data load the response data via the createPlayer property.
return (
<LoginButton
onPress={() => {
this.signIn(createUser);
}}
/>
);
}
// By default it is loading the result so just return loading...
return <Text>Loading...</Text>;
}}
</Mutation>
// The signin function called when the user presses the login button
async signIn(createUser) {
...
try {
Auth.signIn(un, password)
.then(data => {
...
this.createUserFunc(
createUser,
'Jane',
'Doe',
'jane#doe.com',
'jane_doe.com',
'none',
'none'
);
}
...
}
// The create user function called from the signin function
createUserFunc = (func, firstName, lastName, email, username, provider, jwt) => {
const newUser = {
firstName,
lastName,
email,
username,
provider,
jwt,
};
func({variables: newUser});
};
// The gql syntax mutation
const createUserMutation = gql`
mutation createUser(
$firstName: String!
$lastName: String!
$email: String!
$username: String!
$provider: String
$jwt: String!
) {
createUser(
firstName: $firstName
lastName: $lastName
email: $email
username: $username
provider: $provider
jwt: $jwt
) {
createdAt
}
}
`;

Answer 1

Most GraphQL servers that accept requests over HTTP are listening to two different types of content (indicated with the Content-Type header): application/graphql and application/json. You server seems to only listen to requests with a application/graphql body.
The problem with Content-Type: application/graphql is that GraphQL execution consist out of up to three parameters that can be supplied by the client:
The query (required)
The variable values of the query
The operation name
This enables query documents to be entirely static. But if the content of the request is only the GraphQL query, the other parameters need to go somewhere else. In theory they could be supplied as GET parameters but usually all clients use the JSON format to supply all three as outlined here.
As Daniel has pointed out you can use a GraphQL server implementation for your framework/technology of choice to handle that for you.
Alternatively you would have to react to the header of the request yourself (which could be a good exercise but you are probably going to miss an edge case that the library authors have thought of).