iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 1
0
Modern Web

30天精通Api (REST vs GraphQL)系列 第 10

Day10 - 如何打造GraphQL API (2) 客戶端

開始串接GraphQL Server!!

前一篇利用Express.js安裝完GraphQL Server,有了後端的API,現在讓我們開始打造前端吧!

我們使用 Vue 來當前端框架,安裝Vue CLI3來自動部屬我們客戶端環境。

安裝完Vue CLI3,接下來安裝vue-apollo

vue add apollo

接下來會問你一連串問題包括要不要幫你自動生成範例程式碼與建構graphql server
對,他也能使用apollo-server順便幫你部屬好後台

我們先來看範例程式碼前台部分,記得指令是 npm run apollo 才能開啟後台

前端預設port是8080,後台是4000/graphql
https://ithelp.ithome.com.tw/upload/images/20181103/20112576hBjTl3ZQDt.png

範例使用Apollo组件直接在模板上面操作GraphQL查詢

    <!-- Apollo watched Graphql query -->
    <ApolloQuery
      :query="require('../graphql/HelloWorld.gql')"
      :variables="{ name }"
    >
      <template slot-scope="{ result: { loading, error, data } }">
        <!-- Loading -->
        <div v-if="loading" class="loading apollo">Loading...</div>

        <!-- Error -->
        <div v-else-if="error" class="error apollo">An error occured</div>

        <!-- Result -->
        <div v-else-if="data" class="result apollo">{{ data.hello }}</div>

        <!-- No result -->
        <div v-else class="no-result apollo">No result :(</div>
      </template>
    </ApolloQuery>

查詢操作 HelloWorld.gql

query HelloWorld ($name: String) {
  hello (name: $name)
}

接下來進入後台查詢

{
hello(name:"cccc")
}

結果如下
https://ithelp.ithome.com.tw/upload/images/20181104/20112576mQHCdoDdHp.png

再去剛剛vue-apollo直接幫我們建好的 apollo-server 資料夾找到 resolver.js
看到解析程式碼

  Query: {
    hello: (root, { name }) => `Hello ${name || 'World'}!`,
    messages: (root, args, { db }) => db.get('messages').value(),
    uploads: (root, args, { db }) => db.get('uploads').value(),
  },

因此回傳 Hello ${name || 'World'}!

總結:利用Apollo GraphQL可以快速架設好前後端環境,或是選擇使用其他套件,看你習慣開發,後面也會使用Apollo來寫一個小專案


上一篇
Day09 - 如何打造GraphQL API (1) Server端與工具
下一篇
Day11 - 使用node.js 打造你的 Restful API
系列文
30天精通Api (REST vs GraphQL)12

尚未有邦友留言

立即登入留言