vue中使用GraphQL的实例代码


Posted in Javascript onNovember 04, 2019

上篇给大家介绍了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的实例代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
Javascript 代码也可以变得优美的实现方法
Jun 22 Javascript
JQuery团队打造的javascript单元测试工具QUnit介绍
Feb 26 Javascript
javascript中字符串替换函数replace()方法与c# 、vb 替换有一点不同
Jun 25 Javascript
ext前台接收action传过来的json数据示例
Jun 17 Javascript
javascript实现支持移动设备画廊
Aug 24 Javascript
JavaScript实现获取某个元素相邻兄弟节点的prev与next方法
Jan 25 Javascript
Jquery跨域获得Json的简单实例
May 18 Javascript
浅谈react前后端同构渲染
Sep 20 Javascript
利用Javascript实现一套自定义事件机制
Dec 14 Javascript
JavaScript剩余操作符Rest Operator详解
Jul 20 Javascript
vue内置组件keep-alive事件动态缓存实例
Oct 30 Javascript
vue-cli 3如何使用vue-bootstrap-datetimepicker日期插件
Feb 20 Vue.js
Vue项目中Api的组织和返回数据处理的操作
Nov 04 #Javascript
JS+CSS实现随机点名(实例代码)
Nov 04 #Javascript
Vue.js页面中有多个input搜索框如何实现防抖操作
Nov 04 #Javascript
详解利用eventemitter2实现Vue组件通信
Nov 04 #Javascript
jQuery实现form表单基于ajax无刷新提交方法实例代码
Nov 04 #jQuery
JS立即执行的匿名函数用法分析
Nov 04 #Javascript
小程序如何自主实现拦截器的示例代码
Nov 04 #Javascript
You might like
destoon安全设置中需要设置可写权限的目录及文件
2014/06/21 PHP
PHP中使用循环实现的金字塔图形
2014/11/08 PHP
yii2中使用Active Record模式的方法
2016/01/09 PHP
深入解析PHP的Laravel框架中的event事件操作
2016/03/21 PHP
PHP实现移除数组中为空或为某值元素的方法
2017/01/07 PHP
解决php extension 加载顺序问题
2019/08/16 PHP
超级酷和最实用的jQuery实例收集(20个)
2010/04/21 Javascript
Kibo 用于处理键盘事件的Javascript工具库
2011/10/28 Javascript
ie下jquery.getJSON的缓存问题的处理方法
2013/03/29 Javascript
关于JavaScript中的关联数组分析
2013/04/09 Javascript
JS实现图片无间断滚动代码汇总
2014/07/30 Javascript
node.js中的fs.readdirSync方法使用说明
2014/12/17 Javascript
JS打开新窗口防止被浏览器阻止的方法
2015/01/03 Javascript
jQuery zTree树插件动态加载实例代码
2017/05/11 jQuery
three.js实现3D影院的原理的代码分析
2017/12/18 Javascript
Vue.js 2.0和Cordova开发webApp环境搭建方法
2018/02/26 Javascript
微信小程序WebSocket实现聊天对话功能
2018/07/06 Javascript
qrcode生成二维码微信长按无法识别问题的解决
2019/04/04 Javascript
python条件和循环的使用方法
2013/11/01 Python
Python实现把xml或xsl转换为html格式
2015/04/08 Python
Python类的定义、继承及类对象使用方法简明教程
2015/05/08 Python
RC4文件加密的python实现方法
2015/06/30 Python
Python解惑之整数比较详解
2017/04/24 Python
python实现微信机器人: 登录微信、消息接收、自动回复功能
2019/04/29 Python
Python3网络爬虫开发实战之极验滑动验证码的识别
2019/08/02 Python
Python list与NumPy array 区分详解
2019/11/06 Python
Python autoescape标签用法解析
2020/01/17 Python
Python守护进程实现过程详解
2020/02/10 Python
python读写文件write和flush的实现方式
2020/02/21 Python
Python 如何对文件目录操作
2020/07/10 Python
解决Django响应JsonResponse返回json格式数据报错问题
2020/08/09 Python
Myprotein中国网站:欧洲畅销运动营养品牌
2021/02/11 全球购物
党员三严三实对照检查材料
2014/10/13 职场文书
检讨书格式
2015/05/07 职场文书
工会经费申请报告
2015/05/15 职场文书
5分钟教你docker安装启动redis全教程(全新方式)
2021/05/29 Redis