在vue中如何使用GraphQL

在Egg.js中使用GraphQL-簡單實戰中咱們在Graphql的服務端，這裏咱們講講如何在Vue中使用GraphQL。html

1. 初始化vue項目

npm install -g @vue/cli
vue create vue-apollo-demo
複製代碼

選擇默認cli的默認模板就能夠了vue

添加/src/graphql/article.js、/src/utils/graphql.js兩個文件。node

├── node_modules
└── public
│   ├── favicon.ico
│   └── index.html
├── src
│   ├── assets
│   │   └── home.js
│   ├── components
│   │   └── HelloWorld.js
│   ├── graphql
│   │   ├── article.js
│   ├── utils
│   │   ├── graphql.js
│   ├── App.vue
│   └── main.js
├── package.json
└── package-lock.json
複製代碼

2. 安裝Apollo客戶端

vue-apollo能夠幫助你在應用中使用GraphQL的一套工具。npm

你能夠使用Apollo Boost或 直接使用 Apollo Client(須要更多配置工做)。json

name這裏用Apollo Boost就能夠了，若是你想要更細粒度的控制，能夠去看Vue Apollo的文檔。bash

Apollo Boost 是一種零配置開始使用 Apollo Client 的方式。它包含一些實用的默認值，例如咱們推薦的 InMemoryCache 和 HttpLink，它很是適合用於快速啓動開發。app

將它與 vue-apollo 和 graphql 一塊兒安裝：工具

npm install --save vue-apollo graphql apollo-boost
複製代碼

3. 建立ApolloClient實例

在你的應用中建立一個 ApolloClient 實例：post

/src/utils/graphql.jsui

import ApolloClient from 'apollo-boost';

const apolloClient = new ApolloClient({
  // 你須要在這裏使用絕對路徑
  uri: 'http://127.0.0.1:7001/graphql'
})

export default apolloClient;
複製代碼

4. 添加GraphQL的操做實例

/src/utils/article.js

import gql from 'graphql-tag'
import apolloClient from '../utils/graphql'

export function getArticleList(params) {
    return apolloClient.query({
        query: gql`query ($first: ID) {
            articleList(first: $first){
                id
                title
                content
                author {
                    name
                    age
                }
            }
        }`,
        variables: params
    })
}

export function createArticle(params) {
    return apolloClient.mutate({
        mutation: gql`mutation ($title: String, $content: String, $author: AddAuthor) {
            addArticle(title: $title, content: $content, author: $author){
                id
                title
                content
                author {
                    age
                    name
                }
            }
        }`,
        variables: params
    })
}
複製代碼

5. 調試

/src/App.vue

<template>
  <div id="app">
    <div class="list">
      <h1>文章列表</h1>
      <ul>
        <li v-for="(v, k) of list" :key="k">
          文章名稱: {{ v.title }}----------------({{ v.author.name }})
        </li>
      </ul>
    </div>
    <div class="form">
      <h1>添加文章</h1>
      標題：<input v-model="formData.title" type="text"><br>
      做者名稱: <input v-model="formData.author.name" type="text"><br>
      做者年齡: <input v-model.number="formData.author.age" type="text"><br>
      文章內容: <textarea v-model="formData.content" name="" id="" cols="30" rows="10"></textarea>
      <button @click="createArticle">添加</button>
    </div>
  </div>
</template>

<script>
import { getArticleList, createArticle } from './graphql/article'
export default {
  name: 'app',
  data() {
    return {
      list: [],
      formData: {
        title: '',
        content: '',
        author: {
          name: '',
          age: ''
        }
      }
    }
  },
  mounted() {
    this.initData()
  },
  methods: {
    initData() {
      getArticleList({first: 0})
        .then(res=>{
          console.log('request success')
          console.log(res.data.articleList.length)
          this.list = res.data.articleList
        })
        .catch(err=>{
          console.log(err)
        })
    },
    createArticle() {
      createArticle(this.formData)
        .then(()=>{
          this.initData()
        })
        .catch(err=>{
          console.log(err)
        })
    }
  }
}
</script>
複製代碼

效果以下: