变更

变更是在你的 apollo 服务端更改你的数据状态的查询。

使用 this.$apollo.mutate() 来发送一个 GraphQL 变更。

有一个以变更为重点的 示例应用 (opens new window)，你可以看看。

WARNING

你不应当在 variables 中发送 __typename 字段，因此不建议直接发送 Apollo 结果对象。

methods: {
  addTag() {
    // 保存用户输入以防止错误
    const newTag = this.newTag
    // 将其清除以尽早更新用户页面
    this.newTag = ''
    // 调用 graphql 变更
    this.$apollo.mutate({
      // 查询语句
      mutation: gql`mutation ($label: String!) {
        addTag(label: $label) {
          id
          label
        }
      }`,
      // 参数
      variables: {
        label: newTag,
      },
      // 用结果更新缓存
      // 查询将先通过乐观响应、然后再通过真正的变更结果更新
      update: (store, { data: { addTag } }) => {
        // 从缓存中读取这个查询的数据
        const { tags } = store.readQuery({ query: TAGS_QUERY })
        // 将变更中的标签添加到最后
        const tagsCopy = tags.slice()
        tagsCopy.push(addTag)
        // 将数据写回缓存
        store.writeQuery({ query: TAGS_QUERY, { tags: tagsCopy }})
      },
      // 乐观 UI
      // 将在请求产生时作为“假”结果，使用户界面能够快速更新
      optimisticResponse: {
        __typename: 'Mutation',
        addTag: {
          __typename: 'Tag',
          id: -1,
          label: newTag,
        },
      },
    }).then((data) => {
      // 结果
      console.log(data)
    }).catch((error) => {
      // 错误
      console.error(error)
      // 恢复初始用户输入
      this.newTag = newTag
    })
  },
},

服务端示例

export const schema = `
type Tag {
  id: Int
  label: String
}

type Query {
  tags: [Tag]
}

type Mutation {
  addTag(label: String!): Tag
}

schema {
  query: Query
  mutation: Mutation
}
`

// 假数据生成器
import faker from 'faker'

// 生成一些标签
var id = 0
var tags = []
for (let i = 0; i < 42; i++) {
  addTag(faker.random.word())
}

function addTag (label) {
  let t = {
    id: id++,
    label,
  }
  tags.push(t)
  return t
}

export const resolvers = {
  Query: {
    tags (root, args, context) {
      return tags
    },
  },
  Mutation: {
    addTag (root, { label }, context) {
      console.log(`adding tag '${label}'`)
      return addTag(label)
    },
  },
}