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.

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.

For sure the mutation is not formatted correctly if that is exactly what you are sending. You need an opening bracket in the mutation

mutation createUser($email: String!, $password: String!, $username: String!) {  createUser (username: $name, password: $password, email: $email) {    user {      id      username      email      password    }  }}

With any of these queries when i run into bugs i paste it into either graphiql or graphql playground to identify what the formatting errors is in order to isolate what is wrong.