在Vue中使用GraphQL

本文帮助你在 Vue 中使用 GraphQL，也许你尝试使用过axios，不得不说 axios 并不适合用来发送 GraphQL API 请求，本文介绍一种更简单的方式并且带你上手。如果你对 GraphQL 后端感兴趣可以阅读我的上一篇文章《Apollo-GraphQL快速上手-服务端》。

官方维护的 Apollo Client 是 React 编写的，我使用的是 Vue，虽然说是由社区维护，但 API 基本是按照 React 版本的来写的，用起来障碍也不大。

安装

社区维护的 Vue 版本的 Apollo Client 叫vue-apollo，安装也相当简单，首先使用 Vue Cli 创建一个项目，然后在项目文件夹运行命令：vue add apollo。

由于有中文文档，我就取其精要，带大家简单上手，更高级的操作，大家可以去网站上看一看。本文的逻辑和文档大不相同，如果你理解本文的思路，你将可以更灵活的操作 GraphQL 请求

apollo 对象

apollo对象是 apollo-vue 的核心，无论是查询还是变更，只要向可接受apollo对象的地方传入它就可以完成 GraphQL 的查询与变更。常用的属性和方法有四个：query、variables、mutation、update()，看起来应该是这样的：

template.vue

apolloObj: {
    query: gql`
        query{}
    `,
    mutation: gql`
        mutation{}
    `,
    variables: {
        var1: this.data.name
    },
    update(){}
}

• query：GraphQL 查询代码
• mutation：GraphQL 变更代码
• variables：GraphQL 代码中不能使用 js 的变量，variables相当于转换器，将 js 代码转换为 GraphQL 代码并使用，在 GraphQL 中，使用$标识符引用变量。
• update()：一个回调函数，当 GraphQL 请求有了返回值之后的下一步操作

请求发送时机

前面说了只要向可接受apollo对象的地方传入它就可以完成 GraphQL 的查询与变更，所以我们讨论以下两种请求发送的时机。

组件实例化时

这个方案是将apollo对象传入组件中名为apollo的对象中，然后在组件实例化的过程中自动完成 GraphQL 请求，这种方案常用于 query，而且示例也是这样做的，其实你也可以进行 mutation，下面这个例子中有两个apollo对象：books和delBooks，分别进行了 query 和 mutation：

template.vue

import gql from "graphql-tag";

export default {
    data: function () {
        return {
            books: [],
        };
    },
    apollo: {
        books: gql`
            query {
                books {
                    title
                    author
                }
            }
        `,
        delBooks: {
            mutation: gql`
                mutation {
                    id: 1
                }
            `,
            update(res) {
                console.log(res);
            },
        },
    },
};

在apollo对象中创建一个与data对象属性同名的属性，apollo会自动将获得的数据挂载到data对象。如上面这段代码apollo对象中的books属性，只需要在data中注册就能自动拿到请求的结果。

如果你的apollo对象中只有query或者只需要mutation，就可以像上面books对象中那样写，只需要将 gql 构造出的代码作为属性的值就行了。

TIPS：除了在 js 使用 gql 构造 GraphQL 查询代码，也可以将 GraphQL 查询代码写入.gql文件，在 js 中引用。

手动发送请求

你可以使用this.$apollo.mutate()方法来发送 GraphQL 请求，它不会自动调用，所以更加灵活，你可以将它放在方法甚至是生命周期中，完全由你控制，它接受 apollo 对象作为参数，使用起来大概是这样的：

template.vue

import gql from "graphql-tag";

export default {
    methods: {
        check() {
            this.$apollo.mutate({
                query: gql`
                    query {
                        books {
                            title
                        }
                    }
                `,
            });
        },
    },
};

以上就是我对 vue-apollo 的使用小结，使用和文档完全不同的思路完全是我的个人理解，如果有不同的见解希望大家留言评论。

本文作者：KylinLee

本文链接：https://kylin.dev/2020/07/10/在Vue中使用GraphQL

版权声明：本作品采用知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议进行许可。