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 接通便能取得所有服务的资料，真是可喜可贺