目標：

1. 成功獲取後端資料，將資料呈現在 UI 上

在上上一篇章中，我們已經將 Vue Apollo 整合到 Vue 專案中
這次會帶著讀者透過 API 接收資料，然後將資料呈現在 UI 上

啟動後台服務

首先先將我們搭建好的 NestJs 專案啟動，如果前面沒有跟著做的讀者，也可以到 github 把專案 clone 下來。
如果是有接資料庫的，在啟動之前要先 Run 資料庫的 Docker
先到專案的根目錄下

$ docker-compose up

成功後一樣再到跟根目錄下

$ yarn start:dev

最後到瀏覽器輸入 http://localhost:4000/graphql 就能看到 graphql 的 playground
輸入下面的 schema 做測試

mutation {
  createAuthor(lastName: "test", firstName: "firstName") {
    id
    firstName
    lastName
  }
}

沒問題的話就能看到回傳值，資料庫也能看到我們新增的資料

撰寫 Schema

接著開始前端的搭建
在 src 目錄下新增 schemas 資料夾，之後我們的 GraphQL 的 Schema 都會在這邊做分類

接著先新增一個 Author.js ，裡面會放 Author 的 Schema

src
 └── schemas
      └── Author.js

在 Author.js 寫入一個 Query authors，將資料庫的 author 回傳給前端做顯示

import gql from 'graphql-tag';

export const AUTHORS = gql`
    query authors {
        authors {
            id
            firstName
            lastName
        }
    }
`

新增 Component

在 components 下新增 Author.vue
API 部分使用 Vue Apollo 提供的方法來取得資料，引入剛剛撰寫的 Schema
UI 部分使用 vuetify 提供的元件 v-list 將 authors 做一個漂亮的顯示

<template>
    <div>
        <v-list>
            <v-list-item v-for="author in authors" :key="author.id">
                {{author.firstName}}
                {{author.lastName}}
            </v-list-item>
        </v-list>
    </div>
</template>
<script>
import { AUTHORS } from '../schemas/Author.js';
export default {
    data () {
        return {
        }
    },
    apollo: {
        authors: {
            query: AUTHORS
        }
    }
}
</script>

引入 Component

在想要呈現的頁面上將 component 引入，這邊為了方便，我直接在 App.vue 引入 ，讓 Author.vue 直接顯示在首頁上

<template>
    <div>
        <Author />
    </div>
</template>

<script>
import Author from './components/Author';

export default {
  name: 'App',

  components: {
    Author
  }
};
</script>

這樣我們就成功將前後端串接成功
接下來會對 Vue Apollo 做更詳細的介紹，如何使用 Query, Mutation 以及 Vue Apollo 提供的 Component