在Vue中集中Vue-apollo以后(如何集成请查看本专栏第六篇),就可以使用它进行查询数据了。
1. 简单查询
<template>
<div class="news">
<ul>
<li v-for="(item,index) of navList" :key="index">{{item.title}}</li>
</ul>
</div>
</template>
<script>
// 引入模块
import gql from "graphql-tag";
export default {
name: "app",
data() {
return {};
},
// apollo为默认选项
apollo: {
// 接口名称,需要与服务端对应
navList: gql`
{
navList {
title
}
}
`
}
};
</script>
<style scoped>
</style>
apollo选项里还可以这样写
apollo: {
// 接口名称,需要与服务端对应
navList(){
return{
query:gql`
query {
navList{
title
}
}
`
}
}
}
2. 带参查询
<template>
<div class="article">
<button @click="getData()">
获取文章数据
</button>
<ul>
<li v-for="(item,key) of articleList" :key="key">
{{item.title}}
</li>
</ul>
</div>
</template>
<script>
// 引入模块
import gql from "graphql-tag";
// 定义查询语句
var articleListGql = gql`
query articleList($page: Int!, $pageSize: Int!) {
articleList(page: $page, pageSize: $pageSize) {
title
}
}
`;
export default {
name: "app",
data() {
return {
articleList: []
};
},
methods: {
// 获取数据
getData() {
// $apollo.addSmartQuery为默认方法
this.$apollo.addSmartQuery("articleList", {
// 查询语句
query: articleListGql,
// 实参列表
variables: {
page: 1,
pageSize: 10
},
// 响应结果
result(response) {
console.log(response);
},
// 错误处理
error(err) {
console.log(err);
}
});
}
}
};
</script>
<style scoped>
</style>