vue中使用GraphQL的实例代码

上篇给大家介绍了Java使用Graphql搭建查询服务详解。这里我们讲讲如何在Vue中使用GraphQL。1.

上篇给大家介绍了Java 使用 Graphql 搭建查询服务详解。这里我们讲讲如何在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 可以帮助你在应用中使用GraphQL的一套工具。

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

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

Apollo Boost 是一种零配置开始使用 Apollo Client 的方式。它包含一些实用的默认值，例如我们推荐的 InMemoryCache 和 HttpLink ，它非常适合用于快速启动开发。

将它与 vue-apollo 和 graphql 一起安装：

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

3. 创建ApolloClient实例

在你的应用中创建一个 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. 调试

/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>

效果如下:

 

总结

以上所述是小编给大家介绍的vue中使用GraphQL的实例代码，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！ 如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！

vue 使用graphql vue graphql