GraphQL Nested Data in Mutation

Question

I am having some difficulty getting a mutation working in GraphQL where the type in the schema includes a nested type. So say I have a data type for a booking:

const BookingType = new GraphQLObjectType({
    name: 'Booking',
    fields: () => ({
        id: { type: GraphQLInt },
        Date: { type: GraphQLString },
        Venue: { type: GraphQLString }
    })
});

In the schema file I also have a root mutation which looks like this:

createBooking: {
  type: BookingType,
  args: {
    Date: { type: new GraphQLNonNull(GraphQLString) },
    Venue: { type: new GraphQLNonNull(GraphQLString) }
  },
  resolve(parentValue, args){
    return axios.post('http://localhost:3000/booking', args)
      .then(resp => resp.data);             
  }
}

I can write a mutation in GraphiQL to create data for the booking no problem:

mutation {
  createBooking(
    Date: "2018-03-12",
    Venue: "Some place",
  ) {
    id
    Date
    Venue
  }
}

So far so good. Now, I need to add a nested type to the original booking object to record staff members assigned to the booking. So I added types for the staff member (both input and output types) and added those to the Booking type and the mutation:

// output type
const AssignedStaffType = new GraphQLObjectType({
    name: 'AssignedStaff',
    fields: () => ({
        id: { type: GraphQLInt },
        Name: { type: GraphQLString }
    })
});

// input type
const AssignedStaffInputType = new GraphQLInputObjectType({
    name: 'AssignedStaffInput',
    fields: () => ({
        id: { type: GraphQLInt },
        Name: { type: GraphQLString }
    })
});

The booking type becomes:

const BookingType = new GraphQLObjectType({
    name: 'Booking',
    fields: () => ({
        id: { type: GraphQLInt },
        Date: { type: GraphQLString },
        Venue: { type: GraphQLString },
        Staff: { type: new GraphQLList(AssignedStaffType) }
    })
});

And the root mutation becomes:

createBooking: {
  type: BookingType,
  args: {
    Date: { type: new GraphQLNonNull(GraphQLString) },
    Venue: { type: new GraphQLNonNull(GraphQLString) },
    Staff: { type: new GraphQLList(AssignedStaffInputType) }
  },
  resolve(parentValue, args){
    return axios.post('http://localhost:3000/booking', args)
      .then(resp => resp.data);             
  }
}

What I don't know is how to now formulate the mutation in GraphiQL, specifically what to use as a value for Staff:

mutation {
  createBooking(
    Date: "2018-03-14",
    Venue: "Some place",
    Staff: // ??? <--- What goes here??
  ) {
    id
    Venue
    Date
    Staff
  }
}

I have tried giving it an object, or an array of objects which have the same structure as AssignedStaffInputType, but I just get an error ('expecting AssignedStaffInputType'). The client (GraphiQL in this instance) doesn't know anything about the AssignedStaffInputType as defined in the schema, so I don't understand a) how to use this input type in the client, or b) how I would then populate such a type with the required data.

Help please!

Drum Drum · Accepted Answer · 2018-03-14T11:01:32

Never mind, I figured it out. I can, in fact, pass an object (or array of objects) in the correct format (specified in the input type in the schema) and it works fine. The reason I was having problems is that I had the wrong scalar type for one of the fields in the input type and this was throwing the error. The client doesn't need to know about the types specified in the schema it seems. So, the above problematic mutation should, in fact, be written like this:

mutation {
  createBooking(
    Date: "2018-03-14",
    Venue: "Some place",
    Staff: [{staffId: 1}]
  ) {
    id
    Venue
    Date
    Staff{
       Name
    }
  }
}

GraphQL Nested Data in Mutation

1 Answers