iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 17
0
Modern Web

NestJs 讀書筆記系列 第 17

VueJs - Vue Apollo Mutations

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 的參數以及回傳欄位有哪些

  1. 回到 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>
  1. 目標是輸入完後由按鈕觸發 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 !


上一篇
VueJs - Vue Apollo Queries
下一篇
VueJs - Vue Apollo Subscriptions
系列文
NestJs 讀書筆記31
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言