Vue Apollo Queries

目標:

1. 熟練的使用 Vue Apollo 查詢資料

在安裝完 vue-apollo 後，所有的 components 都能透過 apollo 來使用 Apollo (好饒舌)

上一篇章中，有一個 Query Authors 的範例，透過 apollo 將 API 的 Schema 寫入就能讓後端將資料回傳回來

Query with parameters

接著我們呼叫一個有帶參數的 API author

1. 定義 API 的 Schema ，這邊我們多了一個參數 ID

export const AUTHOR = gql`
    query author ($id: ID!) {
        author (id: $id){
            id
            firstName
            lastName
        }
    }
`

2. 回到 Author.vue ，我們在 apollo 加入 author 的查詢
   先宣告一個 authorId 變數，讓要查詢的 id 指向給 authorId，再將變數回傳給 author
   因為 author 的 id 參數是必填，所以我們多了一個判斷條件，當 authorId 是空值就不會執行查詢

import { AUTHORS, AUTHOR } from '../schemas/Author.js';
export default {
    data () {
        return {
            authorId: null
        }
    },
    methods: {
        getAuthor(id) {
            this.authorId = id;
        }
    },
    apollo: {
        authors: {
            query: AUTHORS
        },
        author: {
            query: AUTHOR,
            variables() {
                return {
                    id: this.authorId
                }
            },
            skip() {
                return !this.authorId
            }
        }
    }
}

3. 撰寫 template，可自行修改樣式，主要目的就是取得 author id ，並將選擇的 author 顯示在 UI 上
   apollo 接收到參數改變時就會發起 Request 向後端取得資料

<div>
    <v-alert
        border="left"
        color="orange"
        dense
        outlined
    >
        {{author}}
    </v-alert>
    <v-list>
        <v-list-item v-for="author in authors" :key="author.id">
            {{author.firstName}}
            {{author.lastName}}
            <v-btn @click="getAuthor(author.id)"></v-btn>
        </v-list-item>
    </v-list>
</div>

我們也可以使用 apollo 提供的 update 來整理回傳的資料格式，result 取得 loading 以及 networkStatus 參數，決定頁面是否要渲染，或是用來判斷其他邏輯

要注意的是 update 接收到的參數是 Object

apollo: {
    author: {
        query: AUTHOR,
        variables() {
            return {
                id: this.authorId
            }
        },
        skip() {
            return !this.authorId
        },
        update({ author }) {
            return author.lastName
        },
        result ({ data, loading, networkStatus }) {
          
        }
    }
}

此外我們也能透過 Dollar Apollo ($apollo) 使用 Apollo
該如何使用我們用範例說明
先將 apollo 中的 author 註解，改由 this. $apollo.query 來呼叫 API
在 methods getAuthor 中實作，跟 apollo 一樣定式方法 query ，寫入 Schema 以及參數

async getAuthor(id) {
    this.authorId = id;

    const response = await this.$apollo.query({
        query: AUTHOR,
        variables: { id: this.authorId }
    });

    this.author = response.data.author;
}

回傳的格式
data: 查詢的資料結果
loading: 是否還在載入資料，可以由此參數決定頁面是否要渲染

回傳結果會跟上面的方式一樣，讀者可以多方嘗試在決定用哪種方法

以上是針對 Vue Apollo 比較常使用 Query 的一些用法，如果讀者在使用過程中有遇到問題都可以來討論討論！