Gateway 與 前端接通

最後我們來測試，由前端接 gateway 取得後端資料

我的 gateway port 是設定 4000 ，讀者們在實作時要注意一下前端的 port 連接是否正確，如果要修改前端連接的 port 就到 vue-apollo.js 更改，預設是 4000

const httpEndpoint = process.env.VUE_APP_GRAPHQL_HTTP || 'http://localhost:4000/graphql'

接著來修改 Query Tasks 的 Schema
在 todoTasks 跟 doneTasks 都加上 user 的欄位

query todoTasks ($start: Int, $pageSize: Int){
    todoTasks(start: $start, pageSize: $pageSize) {
        taskCount
        tasks {
            _id
            title
            content
            status
            user {
                _id
                name
            }
        }
    }
}

query doneTasks ($start: Int, $pageSize: Int){
    doneTasks(start: $start, pageSize: $pageSize) {
        taskCount
        tasks {
            _id
            title
            content
            status
            user {
                _id
                name
            }
        }
    }
}

在 template 加上 user name 的欄位

<template>
    <v-list two-line>
        <v-subheader>DONE</v-subheader>
        <v-divider></v-divider>
        <v-list-item-group v-if="doneTasks">
            <template v-for="(task, index) in doneTasks.tasks" >
                <v-list-item v-if="doneTasks.tasks.length - 1 > index" :key="task.id" >
                    <v-list-item-content>
                        <v-list-item-title>{{task.user.name}} : {{task.title}} </v-list-item-title>
                        <v-list-item-subtitle>{{task.content}}</v-list-item-subtitle>
                    </v-list-item-content>
                </v-list-item>
            </template>
        </v-list-item-group>
    </v-list>
</template>

最後 UI 呈現的畫面
要注意的是，新增 Task 也必須加上 UserId 才能送出
這邊就給讀者們一個小練習，該如何取得所有 User ，並在送出 Task 時加上 UserId

這樣就完成前後端的串接，對於前端來說不需要知道獲取的資料是位在哪個 Service ，他只要跟 gateway 接通便能取得所有服務的資料，真是可喜可賀