Vue客户端集成GraphQl

Vue客户端集成GraphQl

Vue 中集成 GraphQl

1. 找到 Vue 中集成 GraphQl 的文档

https://github.com/Akryum/vue-apollo

https://vue-apollo.netlify.com/

https://www.apollographql.com/

2. 安装相应的模块
   Apollo Boost 是一种零配置开始使用 Apollo Client 的方式。它包含一些实用的默认值，推荐InMemoryCache 和 HttpLink，它非常适合用于快速启动开发。将它与 vue-apollo 和 graphql 一起安装：

npm install vue-apollo graphql apollo-boost --save

3. 在 src/main.js 中引入 apollo-boost 模块 并实例化 ApolloClient

import ApolloClient from 'apollo-boost' 
const apolloClient = new ApolloClient({
    // 你需要在这里使用绝对路径
    uri: 'http://localhost:3000/graphql'
})

4. 在 src/main.js 配置 vue-apollo 插件

import VueApollo from 'vue-apollo'
Vue.use(VueApollo);

5. 创建 Apollo provider
   Provider 保存了可以在接下来被所有子组件使用的 Apollo 客户端实例

const apolloProvider = new VueApollo({
    defaultClient: apolloClient,
})

6. 使用 apolloProvider 选项将它添加到你的应用程序

new Vue({
    el: '#app', // 像 vue-router 或 vuex 一样注入 apolloProvider
    apolloProvider, render: h => h(App),
})

Vue 中使用 GraphQl 查询 Server Api

1. 简单查询
   组件加载的时候就会去服务器请求数据，请求的数据会放在 navList 这个属性上面，在模板中可以直接使用当前属性

import gql from 'graphql-tag';
export default {
    data() {
        return {
            msg: '我是一个 home 组件'
        }
    }, apollo: {
        // 简单的查询，将更新 'hello' 这个 vue 属性
        navList: gql`query {
            navList{
            title
        }
    }` },
}

另一种写法：

import gql from 'graphql-tag';
export default {
    data() {
        return {
            msg: '我是一个 home 组件'
        }
    }, apollo: {
        // 注意方法名称 和 查询的名称对应
        navList() {
            return {
                query: gql`query {
                        navList{
                        title
                    }
                }` }
        }
    }
}
}

2. 高级查询
   模板

获取数据

    

        

        {{item.title}}
        
    

业务逻辑

import gql from 'graphql-tag';
var navListGql = gql`{
    navList {
        title
        url
        }
        }`;
export default {
    data() {
        return {
            navList: []
        }
    }, methods: {
        getData() {
            this.$apollo.addSmartQuery('navList', {
                query: navListGql, result({ data, loading, networkStatus }) {
                    console.log({ data, loading, networkStatus })
                },// 错误处理
                error(error) {
                    console.error('We\'ve got an error!', error)
                }
            });
        }
    }
}

3. Vue GraphQl 传参查询

import gql from 'graphql-tag';
export default {
    data() {
        return {
            articleList: []
        }
    }, apollo: {
        articleList() {
            return {
                query: gql`query($page:Int!){
articleList(page:$page){
title
}
}`, variables: {
                    page: 1
                }
            }
        }
    }
}

4. 高级查询 传参

import gql from 'graphql-tag';
var articleListGql = gql`query($page:Int!){
articleList(page:$page){
title
}
}`;
export default {
    data() {
        return {
            articleList: []
        }
    }, methods: {
        getData() {
            this.$apollo.addSmartQuery('articleList', {
                query: articleListGql, variables: {
                    page: 2
                }, result({ data, loading, networkStatus }) {
                    console.log({ data, loading, networkStatus })
                },// 错误处理
                error(error) {
                    console.error('We\'ve got an error!', error)
                }
            });
        }
    }
}

5. 更新数据

变更是在你的 apollo 服务端更改你的数据状态的查询。使用this.$apollo.mutate() 来发送一个 GraphQL 变更。

methods: {
    addData(){
        // alert('addData');
        this.$apollo.mutate({
            // 查询语句
            mutation: gql`mutation ($title: String!,$description: String!) {
    addNav(title:$title,description:$description){
    title
    }
    }`, // 参数
            variables: {
                title: '测试导航 22', description: 'vue 测试导航 22'
            }, refetchQueries: [{ //更新完成执行的操作
                query: navListQuery
                // variables: { repoFullName: 'apollographql/apollo-client' }, }]
            }).then((data) => {
                // 结果
                console.log(data)
            }).catch((error) => {
                // 错误
                console.error(error);
            })
    }
}

6. vue-infinite-scroll 结合 Vue Apollo fetchMore 实现分
   页

• 下载安装 vue-infinite-scroll

npm i vue-infinite-scroll --save

• 配置上拉分页插件

var infiniteScroll = require('vue-infinite-scroll');
Vue.use(infiniteScroll);

• 模板中使用上拉分页

    

        

        {{item.title}}--{{item.author}}
        
    

• 实现上拉分页业务逻辑

apollo: {
    // 简单的查询，将更新 'hello' 这个 vue 属性
    articleList(){
        return {
            // gql 查询
            query: gql`query getArticleList($page: Int!){
    articleList(page:$page) { _id, title
    }
    }`, // 静态参数
            variables: {
                page: this.page
            },
        }
    }
}, methods: {
    loadMore(){
        console.log(this.page);
        this.page++;
        this.$apollo.queries.articleList.fetchMore({
            // 新的变量
            variables: {
                page: this.page
            },// 用新数据转换之前的结果
            updateQuery: (previousResult, { fetchMoreResult }) => {
                // console.log(previousResult..articleList);
                // console.log(fetchMoreResult.articleList);
                if (fetchMoreResult.articleList.length < 5) {
                    this.busy = true;
                }
                // const newResult = fetchMoreResult;
                // // // this.showMoreEnabled = hasMore
                return {
                    articleList: [...previousResult.articleList, ...fetchMoreResult.articleList]
                }
            }
        })
    }
}