title: GraphQL: POST body missing, invalid Content-Type, or JSON object has no keys
body: <p>I am trying to create a mutation but I keep getting a POST body is missing. I can log the data before urql and codegen hooks are called and I can see the data in the variables on the error, but chrome keeps imploding with a &quot;POST body missing&quot; error and the server's resolver is never hit.</p>
  <p>I am using Urql with Codegen on a React Client and using Apollo-server on an Express API.</p>
  <p>Here is my code:</p>
  <p><strong>Mutation Definition</strong> (for codegen)</p>
  <pre><code>mutation UserLogin($email: String!, $password: String!) {
    login(email: $email, password: $password) {
      errors {
        email {
          error
          isValid
        }
        password {
          error
          isValid
        }
      }
      token
    }
  }
  </code></pre>
  <p>codegen outputs:</p>
  <pre class="lang-js prettyprint-override"><code>export const UserLoginDocument = gql`
      mutation UserLogin($email: String!, $password: String!) {
    login(email: $email, password: $password) {
      errors {
        email {
          isValid
          error
        }
        password {
          isValid
          error
        }
      }
      token
    }
  }
      `;
  
  export function useUserLoginMutation() {
    return Urql.useMutation&lt;UserLoginMutation, UserLoginMutationVariables&gt;(UserLoginDocument);
  };
  </code></pre>
  <p>Using this hook fails, so I tried using urql directly:
  <strong>useMutation Hook</strong> (same error)</p>
  <pre class="lang-js prettyprint-override"><code>  const [, executeMutation] = useMutation(`
        mutation($email: String!, $password: String!) {
          login(email: $email, password: $password) {
            errors {
              email {
                error
                isValid
              }
              password {
                error
                isValid
              }
            }
            token
          }
        }
    `);
  </code></pre>
  <p>I have confirmed that I can execute the query with a raw fetch:</p>
  <pre><code>async function fetchGraphQL(text: any, variables: any, token: string = '') {
    const response = await fetch('http://localhost:4000/graphql', {
      method: 'POST',
      headers: {
        Authorization: `bearer ${token}`,
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({
        query: text,
        variables,
      }),
    });
    return await response.json();
  }
  </code></pre>
  <p>However, attempts to generate a hook via codegen or just using urql's useMutation hook are resulting in:</p>
  <pre class="lang-json prettyprint-override"><code>{
  ...
    &quot;source&quot;: {
    &quot;body&quot;: &quot;mutation ($email: String! $password: String!) { login(email: $email password: $password) { errors { email { error isValid } password { error isValid } } token } }&quot;,
  ...
          },
          &quot;variables&quot;: {
              &quot;email&quot;: &quot;...&quot;,
              &quot;password&quot;: &quot;...&quot;
          },
          &quot;kind&quot;: &quot;mutation&quot;,
          &quot;context&quot;: {
              &quot;url&quot;: &quot;http://localhost:4000/graphql&quot;,
              &quot;preferGetMethod&quot;: false,
              &quot;suspense&quot;: false,
              &quot;requestPolicy&quot;: &quot;cache-first&quot;,
              &quot;meta&quot;: {
                  &quot;cacheOutcome&quot;: &quot;miss&quot;
              }
          }
      },
      &quot;error&quot;: {
          &quot;name&quot;: &quot;CombinedError&quot;,
          &quot;message&quot;: &quot;[Network] Bad Request&quot;,
          &quot;graphQLErrors&quot;: [],
          &quot;networkError&quot;: {},
          &quot;response&quot;: {}
      }
  }
  
  </code></pre>
  <p>I have another, very simple mutation that works fine:</p>
  <pre><code>mutation SetActiveChild($childId: String!) {
    setActiveChild(childId: $childId) 
  }
  </code></pre>
  <p>Here are my typeDefs and resolvers:</p>
  <p><strong>typeDefs</strong></p>
  <pre class="lang-js prettyprint-override"><code>export const typeDefs = gql`
    ...
    type Mutation {
      &quot;user login&quot;
      login(email: String!, password: String!): LoginResponse
    }
    ...
  `
  </code></pre>
  <p><strong>resolvers</strong></p>
  <pre class="lang-js prettyprint-override"><code>export const resolvers = {
    Query: {
      ...
    },
    Mutation: {
      login: ({}, user: UserRegister) =&gt; {
        return AuthGraph.login(user);
      },
      ...
    },
  };
  </code></pre>
  <p>I'm pretty new to GraphQL, many thanks in advance to help me understand what I've done wrong.</p>