上篇给大家介绍了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> <div> <h1>文章列表</h1> <ul> <li v-for="(v, k) of list" :key="k"> 文章名称: {{ v.title }}----------------({{ v.author.name }}) </li> </ul> </div> <div> <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" 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的实例代码，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！
您可能感兴趣的文章: