How to handle deletions in Vue Apollo with deeply nested queries?

Question

I have a query that returns multiple nested objects to display a screen full of information. I want to delete one of the deeply nested objects and optimize the screen (i.e., without making a complete request).

To explain the request and the user interface, I use Trello's tip-like query as an example:

query everything {
  getBoard(id: "foo") {
    name
    cardLists {        
      edges {
        node {
          id
          name
          cards {
            edges {
              node {
                id
                name
              }
            }
          }
        }
      }
    }
  }
}

The result of this query is used to create the user interface as follows: https://d3uepj124s5rcx.cloudfront.net/items/170a0V1j0u0S2p1l290I/Board.png

I am creating an application using:

• Vuejs
• Vue apollo
• Scaphold.io as my GraphQL store

When I want to delete one of the cards, I call:

deleteCard: function () {
  this.$apollo.mutate({
    mutation: gql`
      mutation deleteCard($card: DeleteCardInput!) {
        deleteCard(input: $card) {
          changedCard {
            id
          }
        }
      }
    `,
    variables: {
      'card': {
        id: this.id
      }
    },
  })
  .then(data => {
    // Success
  })
}

, , . refetchQueries: ['everything'] - .

, Vue Apollo , - .

/ ?

Answer 1

apollo, , "" .

, updateQueries . , optimisticResponse, apollo :

:

this.$apollo.mutate({
  mutation: gql `
      mutation deleteCard($card: DeleteCardInput!) {
        deleteCard(input: $card) {
          changedCard {
            id
          }
        }
      }
    `,
  variables: {
    'card': {
      id: this.id
    }
  },
  updateQueries: {
    // .... update Board
  },
  optimisticResponse: {
    __typename: 'Mutation',
    deleteCard: {
      __typename: 'Card', // graphQL type of the card
      id: this.id,
    },
  },
})

Hide result