快捷導(dǎo)航

vue中使用GraphQL的實例代碼

更新時間：2019年11月04日 10:09:14 作者：楊卓

這篇文章主要介紹了vue中使用GraphQL的實例代碼,本文通過實例代碼給大家介紹的非常詳細，具有一定的參考借鑒價值，需要的朋友可以參考下

上篇給大家介紹了Java 使用 Graphql 搭建查詢服務(wù)詳解。這里我們講講如何在Vue中使用GraphQL。

1. 初始化vue項目

npm install -g @vue/cli
vue create vue-apollo-demo

選擇默認cli的默認模板就可以了

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

├── 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 可以幫助你在應(yīng)用中使用GraphQL的一套工具。

你可以使用Apollo Boost或直接使用 Apollo Client(需要更多配置工作)。

name這里用 Apollo Boost 就可以了，如果你想要更細粒度的控制，可以去看 Vue Apollo 的文檔。

Apollo Boost 是一種零配置開始使用 Apollo Client 的方式。它包含一些實用的默認值，例如我們推薦的 InMemoryCache 和 HttpLink ，它非常適合用于快速啟動開發(fā)。

將它與 vue-apollo 和 graphql 一起安裝：

npm install --save vue-apollo graphql apollo-boost

3. 創(chuàng)建ApolloClient實例

在你的應(yīng)用中創(chuàng)建一個 ApolloClient 實例：

/src/utils/graphql.js
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. 調(diào)試

/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>
  文章內(nèi)容: <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>

效果如下: