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 相关文章推荐
window.requestAnimationFrame是什么意思,怎么用
Jan 13 Javascript
jquery css 设置table的奇偶行背景色示例
Jun 03 Javascript
jquery实现点击label的同时触发文本框点击事件的方法
Jun 05 Javascript
Angularjs注入拦截器实现Loading效果
Dec 28 Javascript
jquery插件treegrid树状表格的使用方法详解(.Net平台)
Jan 03 Javascript
js清除浏览器缓存的几种方法
Mar 15 Javascript
微信小程序上传图片功能(附后端代码)
Jun 19 Javascript
vue数组对象排序的实现代码
Jun 20 Javascript
vue-router 手势滑动触发返回功能
Sep 30 Javascript
微信小程序非跳转式组件授权登录的方法示例
May 22 Javascript
使用Vue.set()方法实现响应式修改数组数据步骤
Nov 09 Javascript
JS变量提升及函数提升实例解析
Sep 03 Javascript
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
极典R601SW收音机
2021/03/02 无线电
mysql 性能的检查和优化方法
2009/06/21 PHP
php提示Call-time pass-by-reference has been deprecated in的解决方法[已测]
2012/05/06 PHP
PHP中设置时区,记录日志文件的实现代码
2013/01/07 PHP
PHP APC配置文件2套和参数详解
2014/06/11 PHP
javascript call方法使用说明
2010/01/11 Javascript
jquery ajax post提交数据乱码
2013/11/05 Javascript
节点的插入之append()和appendTo()的用法介绍
2014/01/13 Javascript
jQuery中prop()方法用法实例
2015/01/05 Javascript
jquery.validate使用时遇到的问题
2015/05/25 Javascript
JavaScript是如何实现继承的(六种方式)
2016/03/31 Javascript
Three.js学习之Lamber材质和Phong材质
2016/08/04 Javascript
dul无法加载bootstrap实现unload table/user恢复
2016/09/29 Javascript
easyui combogrid实现本地模糊搜索过滤多列
2017/05/13 Javascript
深入解析Vue源码实例挂载与编译流程实现思路详解
2019/05/05 Javascript
使用localStorage替代cookie做本地存储
2019/09/25 Javascript
vue项目中锚点定位替代方式
2019/11/13 Javascript
vue中实现点击变成全屏的多种方法
2020/09/27 Javascript
JavaScript动态生成表格的示例
2020/11/02 Javascript
[50:59]2018DOTA2亚洲邀请赛 4.7 总决赛 LGD vs Mineski第四场
2018/04/10 DOTA
python的id()函数解密过程
2012/12/25 Python
python 爬取微信文章
2016/01/30 Python
你所不知道的Python奇技淫巧13招【实用】
2016/12/14 Python
python+matplotlib绘制简单的海豚(顶点和节点的操作)
2018/01/02 Python
Python 12306抢火车票脚本
2018/02/07 Python
Django网络框架之创建虚拟开发环境操作示例
2019/06/06 Python
Python 函数绘图及函数图像微分与积分
2019/11/20 Python
专科毕业生求职简历的自我评价
2013/10/12 职场文书
幼儿园教研活动方案
2014/01/19 职场文书
爸爸的花儿落了教学反思
2014/02/20 职场文书
平面设计求职信
2014/03/10 职场文书
幼儿生日活动方案
2014/08/27 职场文书
法制教育演讲稿
2014/09/10 职场文书
公司离职证明标准样本
2014/10/05 职场文书
MYSQL(电话号码,身份证)数据脱敏的实现
2021/05/28 MySQL
win11无法登录onedrive错误代码0x8004def7怎么办 ?
2022/04/05 数码科技