GraphQl 客户端查询/变异不起作用（vanilla js）

Question

So I just started using GraphQl yesterday and I'm a little bit confused about how to pass my queries from the client.

What I want:

I just want to query/mutate with a simple fetch :

const mutation = `
  // even better would be: UserRegister( firstName: ${firsName}, lastName: ${lastName}, email: ${email}, password: ${password} )
  UserRegister( firstName: "John", lastName: "Doe", email: "john_doe@outlook.com", password: "123" ) {
    _id,
    firstName,
    lastName,
    email
  }
`

const options = {
  'method': 'POST',
  'headers': { 'Content-Type': 'application/json' },
  'body': JSON.stringify( { mutation } )
}

const res = await fetch( 'http://localhost:3000/graphql', options )

Now when running this from the client I get an http://localhost:3000/graphql 400 (Bad Request) error.

But when I run the same query with the playground it works just fine:

What am I doing wrong here?

---

Working query (not answer to my question):

I managed to get my query working with Apollo client, but I have the feeling that this is a lot of code just for a query. When using Apollo client is there a way to write the query with less code? Why do I need to define the variable types here when they're already defined in the schema on the server (couldn't the server do the validation)?

const client = new ApolloClient( {
  'uri': 'http://localhost:3000/graphql',
  'cache': new InMemoryCache()
} )

const mutation = gql`
  // why this?
  mutation UserRegister( $firstName: String!, $lastName: String!, $email: String!, $password: String! ) {
    UserRegister( firstName: $firstName, lastName: $lastName, email: $email, password: $password ) {
      _id,
      firstName,
      lastName,
      email
    }
  }
`

const res = await client.mutate( {
  mutation,
  // also why defining the variables here?
  'variables': {
    'firstName': 'John',
    'lastName': 'Doe',
    'email': 'john_doe@outlook.com',
    'password': '123'
  }
} )

Answer 1

@xadm pointed me to the solution:

const query = `
  mutation {
    UserRegister( firstName: "John", lastName: "Doe", email: "john_doe@outlook.com", password: "123" ) {
      _id,
      firstName,
      lastName,
      email
    }
  }
`

const options = {
  'method': 'POST',
  'headers': { 'Content-Type': 'application/json' },
  'body': JSON.stringify( { query } )
}

const res = await fetch( 'http://localhost:3000/graphql', options )