GraphQL学习第七篇 －Vue中使用Vue-apollo进行查询操作

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