How do you format your body in a fetch request for a GraphQL mutation?

Question

I'm trying out GraphQL for the first time and I'm trying to POST some data and create a new document in a MongoDB database.

I've defined an "Office" model. Here is what a document looks like:

{
  fax: 4161234567,
  image: {
    full: 'http://placehold.it/1400x800',
    large: 'http://placehold.it/1000x600',
    medium: 'http://placehold.it/700x400',
    small: 'http://placehold.it/400x200'
  },
  location: {
    address: '123 Street Name',
    city: 'Toronto',
    country: 'Canada',
    countryCode: 'CA',
    state: 'ON',
    suite: null,
    zip: 'H6L 1C8'
  },
  phone: 4161234567,
  slug: 'office-name',
  title: 'Office Name' 
}

I'm using Node and Express on the server. Here is my mutation:

const schema = buildSchema(`
  type Image {
    full: String
    large: String
    medium: String
    small: String
  }

  type Location {
    address: String
    city: String
    country: String
    countryCode: String
    state: String
    suite: String
    zip: String
  }

  input ImageInput {
    full: String
    large: String
    medium: String
    small: String
  }

  input LocationInput {
    address: String
    city: String
    country: String
    countryCode: String
    state: String
    suite: String
    zip: String
  }

  type Office {
    _id: String
    fax: Float
    image: Image
    location: Location
    phone: Float
    slug: String
    title: String
  }

  type Mutation {
    createOffice(fax: Float, image: ImageInput, location: LocationInput, phone: Float, slug: String, title: String): Office
  }
`);

Client side, I have this:

fetch('http://localhost:4300/graphql', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({
    query: 'mutation { createOffice(fax: 5041234567, image: {full: "http://placehold.it/1400x800", large: "http://placehold.it/1000x600", medium: "http://placehold.it/700x400", small: "http://placehold.it/400x200"}, location: {address: "456 Wilcox Ave.", city: "Montreal", country: "Canada", countryCode: "CA", state: "QC", suite: 2300, zip: "H3A 0A8"}, phone: 5047654321, slug: "my-office", title: "My Office" { phone }  }'
  }),
})
.then((res) => {
  return res.json();
})
.then((res) => {
  console.log(res.data);
});

I get these errors:

Syntax Error: Expected Name, found {"

I assume it is an issue with my syntax here:

body: JSON.stringify({
  query: 'mutation { createOffice(fax: 5041234567, image: {full: "http://placehold.it/1400x800", large: "http://placehold.it/1000x600", medium: "http://placehold.it/700x400", small: "http://placehold.it/400x200"}, location: {address: "456 Wilcox Ave.", city: "Montreal", country: "Canada", countryCode: "CA", state: "QC", suite: 2300, zip: "H3A 0A8"}, phone: 5047654321, slug: "my-office", title: "My Office" { phone }  }'
})

What am I doing wrong?

Since you're just starting out, please be aware that you should also generally avoid using `buildSchema` even though the official docs use it in their examples. Details [here](https://stackoverflow.com/questions/53984094/notable-differences-between-buildschema-and-graphqlschema/53987189#53987189). — Daniel Rearden, Mar 31 '20 at 17:55
@DanielRearden I understand using `graphql.GraphQLObjectType` in place of `buildSchema` but what is the equivalent for inputs? I don't see any documentation on `graphql.GraphQLObjectInput`. — Michael Lynch, Apr 02 '20 at 18:37
Never mind. I found `GraphQLInputObjectType`. The naming convention isn't super intuitive but I get it now. — Michael Lynch, Apr 02 '20 at 18:40

score 0 · Accepted Answer · answered Mar 31 '20 at 17:53

0

You're missing a closing parenthesis after "My Office" to indicate the end of your argument list.

Assuming you're using apollo-server, express-graphql or a similar library for your HTTP server, you should have a GraphiQL or GraphQL Playground interface exposed that you can use to test your queries. If not, you can also use a standalone client. In either case, you'll have a way to write and test your queries inside an editor that has autocompletion and syntax highlighting, making it easier to catch syntax errors like that.

You may also find it helpful to use template literals when writing your queries on the front end in order to avoid having to put everything on one line.

answered Mar 31 '20 at 17:53

Daniel Rearden

80,636
11
185
183

Wow, what a silly mistake. Sometimes all you need is a second pair of eyes, so thank you! I'm very new to GraphQL so I wasn't sure if it was my syntax. All the parentheses and brackets can get a little tricky. Also thanks for the tip. I am using `express-graphql` but I'm writing my queries in a React app to simulate a real world example as close as possible. It was hard to spot any syntax issues because the query was getting so long. – Michael Lynch Mar 31 '20 at 18:14
I would still write the query in Graph*i*QL's editor first and then copy and paste it into your front end code. It will make your life easier on a number of levels. The only time you don't need to do that is if you have an editor plugin that provides the same features. – Daniel Rearden Mar 31 '20 at 18:21

How do you format your body in a fetch request for a GraphQL mutation?

1 Answers1