Apollo-client returns "400 (Bad Request) Error" on sending mutation to server

400 errors generally mean there's something off with the query itself. In this instance, you've defined (and you're passing in) a variable called $username -- however, your query references it as $name on line 2.

For me, it was the fact that I was using a field not defined in the GraphQL schema. Always be careful!

In addition to graphiQL, I would like to add that apollo-link-error package would also had been of great help. By importing its error handler { onError }, you can obtain great detail through the console about errors produced at network and application(graphql) level :

import { onError } from 'apollo-link-error';
import { ApolloLink } from 'apollo-link';

const errorLink = onError(({ graphQLErrors, networkError }) => {
  if (graphQLErrors) {
    console.log('graphQLErrors', graphQLErrors);
  }
  if (networkError) {
    console.log('networkError', networkError);
  }
});

const httpLink = ...

const link = ApolloLink.from([errorLink, httpLink]);

const client = new ApolloClient({
  ...,
  link,
  ...
});

By adding this configuration where you instantiate your Apollo Client, you would have obtained an error similar to this one:

GraphQLError{message: "Syntax Error: Expected {, found Name "createUser""}

Further information can be found in Apollo Doc - Error handling: https://www.apollographql.com/docs/react/features/error-handling. Hope it helps in the future.