Add item to edge of node

[tabakd]

I'm trying to add a Slide to a Deck's array of Slides but I can't seem to find a mutation that works. Below is my Mongoose schema.

const DeckSchema = new mongoose.Schema({
  name: {
    type: String,
    description: 'the full name of the deck'
  },
  slides: [{
    type: mongoose.Schema.Types.ObjectId,
    ref: 'Slide'
  }]
});

const SlideSchema = new mongoose.Schema({
  name: {
    type: String,
    description: 'the full name of the slide'
  },
  component: {
    type: String,
    description: 'name of slide component'
  }
});

[tothandras]

Hi @tabakd!

The generated schema looks like this:

input addDeckInput {
  name: String
  slides: [ID]
  clientMutationId: String!
}

type addDeckPayload {
  viewer: Viewer
  changedDeckEdge: changedDeckEdge
  clientMutationId: String!
}

input addSlideInput {
  name: String
  component: String
  clientMutationId: String!
}

type addSlidePayload {
  viewer: Viewer
  changedSlideEdge: changedSlideEdge
  clientMutationId: String!
}

type changedDeck {
  name: String
  slides(after: String, first: Int, before: String, last: Int, name: String, _id: ID, component: String): slidesConnection
  _id: ID
  id: ID!
}

type changedDeckEdge {
  node: changedDeckNode
  cursor: String!
}

type changedDeckNode {
  name: String
  slides(after: String, first: Int, before: String, last: Int, name: String, _id: ID, component: String): slidesConnection
  _id: ID
  id: ID!
}

type changedSlide {
  name: String
  component: String
  _id: ID
  id: ID!
}

type changedSlideEdge {
  node: changedSlideNode
  cursor: String!
}

type changedSlideNode {
  name: String
  component: String
  _id: ID
  id: ID!
}

type Deck implements Node {
  name: String
  slides(after: String, first: Int, before: String, last: Int, name: String, _id: ID, component: String): slidesConnection
  _id: ID
  id: ID!
}

type DeckConnection {
  pageInfo: PageInfo!
  edges: [DeckEdge]
  count: Float
}

type DeckEdge {
  node: Deck
  cursor: String!
}

input deleteDeckInput {
  id: ID!
  clientMutationId: String!
}

type deleteDeckPayload {
  viewer: Viewer
  ok: Boolean
  id: ID!
  clientMutationId: String!
}

input deleteSlideInput {
  id: ID!
  clientMutationId: String!
}

type deleteSlidePayload {
  viewer: Viewer
  ok: Boolean
  id: ID!
  clientMutationId: String!
}

interface Node {
  id: ID!
}

type PageInfo {
  hasNextPage: Boolean!
  hasPreviousPage: Boolean!
  startCursor: String
  endCursor: String
}

type RootMutation {
  addDeck(input: addDeckInput!): addDeckPayload
  updateDeck(input: updateDeckInput!): updateDeckPayload
  deleteDeck(input: deleteDeckInput!): deleteDeckPayload
  addSlide(input: addSlideInput!): addSlidePayload
  updateSlide(input: updateSlideInput!): updateSlidePayload
  deleteSlide(input: deleteSlideInput!): deleteSlidePayload
}

type RootQuery {
  viewer: Viewer
  node(id: ID!): Node
  deck(id: ID!): Deck
  decks(id: [ID], ids: [ID], name: String, _id: ID): [Deck]
  slide(id: ID!): Slide
  slides(id: [ID], ids: [ID], name: String, component: String, _id: ID): [Slide]
}

type Slide implements Node {
  name: String
  component: String
  _id: ID
  id: ID!
}

type SlideConnection {
  pageInfo: PageInfo!
  edges: [SlideEdge]
  count: Float
}

type SlideEdge {
  node: Slide
  cursor: String!
}

type slidesConnection {
  pageInfo: PageInfo!
  edges: [slidesEdge]
  count: Float
}

type slidesEdge {
  node: Slide
  cursor: String!
}

input updateDeckInput {
  name: String
  slides: [ID]
  id: ID!
  clientMutationId: String!
}

type updateDeckPayload {
  changedDeck: changedDeck
  clientMutationId: String!
}

input updateSlideInput {
  name: String
  component: String
  id: ID!
  clientMutationId: String!
}

type updateSlidePayload {
  changedSlide: changedSlide
  clientMutationId: String!
}

type Viewer implements Node {
  id: ID!
  decks(after: String, first: Int, before: String, last: Int, name: String, _id: ID, component: String): DeckConnection
  deck(id: ID!): Deck
  slides(after: String, first: Int, before: String, last: Int, name: String, _id: ID, component: String): SlideConnection
  slide(id: ID!): Slide
}

You can also use the built in GraphiQL IDE to explore the schema.

_Add a new Deck:_

mutation AddDeck {
  addDeck(input: {clientMutationId: "1", name: "Deck"}) {
    changedDeckEdge {
      node {
        id
        name
        slides {
            edges {
            node {
              id
              name
              component
            }
          }
          count
        }
      }
    }
  }
}

The response is:

{
  "data": {
    "addDeck": {
      "changedDeckEdge": {
        "node": {
          "id": "RGVjazo1NjQxYWI3NGE1NjdjNjI2NWQ4OTljNDg=",
          "name": "Deck",
          "slides": {
            "edges": [],
            "count": 0
          }
        }
      }
    }
  }
}

_Add a slide:_

mutation AddSlide {
  addSlide(input: {clientMutationId: "2", name: "slide name", component: "slide component"}) {
    changedSlideEdge {
      node {
        id
        name
        component
      }
    }
  }
}

The response is:

{
  "data": {
    "addSlide": {
      "changedSlideEdge": {
        "node": {
          "id": "U2xpZGU6NTY0MWFjMzFhNTY3YzYyNjVkODk5YzRh",
          "name": "slide name",
          "component": "slide component"
        }
      }
    }
  }
}

_Using the slides id, we can change the slides of a deck to include it:_

mutation AddSlide {
  updateDeck(input: {clientMutationId: "3", id: "RGVjazo1NjQxYWI3NGE1NjdjNjI2NWQ4OTljNDg=", slides: ["U2xpZGU6NTY0MWFjMzFhNTY3YzYyNjVkODk5YzRh"]}) {
    changedDeck {
      name
      slides {
        count
        edges {
          node {
            id
            name
            component
          }
        }
      }
    }
  }
}

Response:

{
  "data": {
    "updateDeck": {
      "changedDeck": {
        "name": "Deck",
        "slides": {
          "count": 1,
          "edges": [
            {
              "node": {
                "id": "U2xpZGU6NTY0MWFjMzFhNTY3YzYyNjVkODk5YzRh",
                "name": "slide name",
                "component": "slide component"
              }
            }
          ]
        }
      }
    }
  }
}

There is no easier way currently to append an item to a list. We can add this feature request to our list, or you can send in a PR ;).

[tabakd]

Hm. When I try to update the deck with a slide array it replaces all the slides rather than adds it to the list. Pull Request it is :) What piece of code should I be looking at?

[tothandras]

Hi @tabakd! I've added support for appending elements to arrays, take a look at this PR: #73!

[Secretmapper]

@tothandras Forgive me, I've been banging my head for a while here, but how would you do this with one mutation? As in add a slide to the database and add it to the array of slides as well?

[tothandras]

@Secretmapper You can only do it using two mutations. First you create a slide, then for the other mutation you need to use the returned id of that newly included slide to add it to a collection.