Vue Apollo Mutations

當我們要改變後端資料時，就要使用 Mutation
使用 this.$apollo.mutate() 發送給 GraphQL mutation

1. 在 Author.js 定義 create author 的 Schema，寫入 API 名稱以及所需要的參數

export const CREATE_AUTHOR = gql`
    mutation createAuthor ( $lastName: String, $firstName: String) {
        createAuthor (lastName: $lastName, firstName: $firstName){
            id
            firstName
            lastName
        }
    }
`

補充：如果讀者不清楚參數有哪些，可以到 GraphQL Playground 提供的 DOCS 查看，就能看到所有 API 的參數以及回傳欄位有哪些

2. 回到 Author.vue
   建立兩個 Input 以及一個 button

<v-text-field label="First Name" v-model="newAuthor.firstName"></v-text-field>
<v-text-field label="Last Name" v-model="newAuthor.lastName"></v-text-field>
<v-btn @click="createAuthor"></v-btn>

3. 目標是輸入完後由按鈕觸發 API 發送
   所以我們將實作的方法寫在 createAuthor 中
   最簡單的方式，將 Schema 定義的參數傳給後端，接著將成功回傳的資料 Push 的列表中

async createAuthor() {
    const response = await this.$apollo.mutate({
        mutation: CREATE_AUTHOR,
        variables: { ...this.newAuthor }
    })
    
    this.authors.push(response.data.createAuthor)
}

下面就是結合 Query 以及 Mutation 的結果

到目前為止， CRUD 都已經能夠使用了
讀者容易有問題的部分應該是在 Schema 撰寫時手誤或眼稍微殘了一下而已，仔細對照 Schema 就能解決問題，如果有其他問題歡迎在下面留言一起討論。

下一篇我們來介紹 Vue Apollo Subscriptions ！