Question

5.1 使用 graphQl 简单查询

安装

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

• https://github.com/vuejs/apollo
• https://vue-apollo.netlify.app/

2. 安装相应的模块

ApolloBoost 是一种零配置开始使用 ApolloClient 的方式。它包含一些实用的默认值，例如我们推荐的 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 = newApolloClient({
  //你需要在这里使用绝对路径
  uri:'http://118.123.14.36:3002/graphql'
})

可以打开 http://118.123.14.36:3002/graphql 在控制台查看查询结果

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

import VueApollofrom'vue-apollo'

Vue.use(VueApollo);

5. 创建 Apollo provider

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

const apolloProvider = newVueApollo({
  defaultClient:apolloClient
})

使用 apollo Provider 选项将它添加到你的应用程序

new Vue({
  el:'#app',
  apolloProvider,
  render:h=>h(App)
})

简单查询

组件加载的时候就会去服务器请求数据，请求的数据会放在 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 具体选项
  apollo: {
    // // 带参数的查询
    // ping: {
    //   // gql 查询
    //   query: gql`query PingMessage($message: String!) {
    //   ping(message: $message)
    //   }`,
    //   // 静态参数
    //   variables: {
    //   message: 'Meow',
    //   },
    // },
  },
  apollo: { 
    // 注意方法名称 和 查询的名称对应 
    navList(){ 
      return { 
        query:gql`query { 
          navList { 
            title
           } 
        }` 
      } 
    } 
  } 
}

完整例子

<template>
  <div class="news">
  <h1>{{ msg }}</h1> 
  <ul>
    <li v-for="(item,index) of navList" :key="index">
      {{item.title}}
    </li>    
  </ul>
  <br>
  <hr>
  <br>
  <ul>
    <li v-for="(item, index) of articleList" :key="index">
      {{item.title}}---{{item.status}}--{{item._id}}
    </li>    
  </ul>
  </div>
</template>

<script>
  import gql from 'graphql-tag';
  export default {
  name: 'app',
  data(){
    return{

    msg:'我是一个首页页面'

    }
  },
  apollo: {
    // 简单的查询，将更新 'hello' 这个 vue 属性
    navList: gql`{
     navList{
      title
      }
    }`,
    articleList:gql`{
     articleList{
      title,
      status,
      _id
      }
    }`
  }
 
  }
</script>

高级查询

高级查询文档

<div class="news">
  <h1>{{ msg }}</h1>  


  <ul>

  <li v-for="(item,key) of articleList" v-bind:key="key">
    {{item.title}}---{{item.status}}
  </li>    
  </ul>

  <button @click="getData()">
  点击按钮触发事件请求 graphQl 接口
  </button>

  {{navList}}

</div>

逻辑

import gql from 'graphql-tag';

  var navListGql=gql`{
    navList{
      title       
    }
   }`;

  export default {
  name: 'app',
  data(){
    return{
    msg:'我是一个新闻页面',
    navList:[]

    }
  },
  apollo:{
    // articleList:gql`{
    //    articleList{
    //     title,
    //     status
    //     }

    // }`
    // 把请求的数据赋值给 articleList
    articleList:{
      query:gql`query articleList($page:Int!,$pageSize:Int!){
        articleList(page:$page,pageSize:$pageSize){
          title,
          status
        }
      }`,
      variables:{
      page:2,
      pageSize:10
      }
    }
  },
  methods:{
    getData(){
    this.$apollo.addSmartQuery('navList',{      
      query:navListGql,
      result(response){
        console.log(response);
      },error(err){
        console.log(err);
      }
    })
    }
  }
  }

Vue GraphQl 传参查询

<template>
  <div class="article">
  <h1>{{ msg }}</h1>   
  <button @click="getData()">获取文章数据</button>
   <ul>
    <li v-for="(item,key) of articleList" v-bind: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{
    msg:'article 页面',
    articleList:[]

    }
  },
  methods:{
    getData(){
    this.$apollo.addSmartQuery('articleList',{
      query:articleListGql,
      variables:{
      page:2,
      pageSize:8
      },
      result(response){
      console.log(response)
      },error(err){
      console.log(err)
      }
    })
    }
  }
  }
</script>

5.2 使用 graphQl 增加修改删除

详情文档参考

服务器端接口

<template>
  <div class="news">
  <h1>导航的增加修改删除</h1> 
  <div class="navForm">

    导航名称：<input v-model="navJson.title" type="text" /> <br><br>
    导航链接： <input v-model="navJson.url" type="text" /><br><br>

    <button @click="doAdd()">提交数据</button>
    <button @click="doEdit()">修改数据</button>
    <button @click="doDele()">删除数据</button>
  </div>


  </div>
</template>

<script>
  import gql from 'graphql-tag';

  var navMutationAddGql=gql`mutation($title:String!,$url:String!){
  addNav(title:$title,url:$url){
    title
  }
  }`;

  var navMutationEditGql=gql`mutation($id:String!,$title:String!,$url:String!){
  editNav(_id:$id,title:$title,url:$url){
    title
  }
  }`;

  var navMutationDelGql=gql`mutation($id:String!){
  deleteNav(_id:$id){
    title
  }
  }`;

  export default {
  name: 'app',
  data(){
    return{
    navJson:{
      title:"",
      url:""
    }
    }
  },
  methods:{
    // 提交表单
    doAdd(){
      // eslint-disable-next-line no-console
      console.log(this.navJson.title);

    this.$apollo.mutate({
      mutation:navMutationAddGql,
      variables: {
      title: this.navJson.title,
      url:this.navJson.url,
      }
    }).then((response)=>{
      console.log(response);
    }).catch((err)=>{
      console.log(err);
    })
    },
    // 修改数据
    doEdit(){
    this.$apollo.mutate({
      mutation:navMutationEditGql,
      variables: {
      id:"62beaf16323cb708d06580ce",
      title: this.navJson.title,
      url:this.navJson.url,
      }
    }).then((response)=>{
      console.log(response);
    }).catch((err)=>{
      console.log(err);
    })
    },
    doDele(){
    this.$apollo.mutate({
      mutation:navMutationDelGql,
      variables: {
      id:"62beaf50323cb708d06580d0",
      }
    }).then((response)=>{
      console.log(response);
    }).catch((err)=>{
      console.log(err);
    })
    }
  }
 
  }
</script>

可以看到新增成功效果

5.3 上拉分页加载更多

npm i vue-infinite-scroll -S

// main.js 配置 

//配置上拉分页加载更多
var infiniteScroll =  require('vue-infinite-scroll');
Vue.use(infiniteScroll);

方法 1：数据拼接

<template>
  <div class="article">
  <h1>{{ msg }}</h1>

  <div v-infinite-scroll="loadMore" infinite-scroll-disabled="busy" infinite-scroll-distance="10">
    <ul>
    <li v-for="(item,key) of articleListData" v-bind:key="key">{{item.title}}</li>
    </ul>
  </div>
  </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 {
    msg: "上拉分页加载更多",
    articleList: [],
    articleListData: [] /*实际要循环的数据*/,

    page: 1,
    busy: false
  };
  },
  methods: {
  loadMore() {
    this.$apollo.addSmartQuery("articleList", {
    query: articleListGql,

    variables: {
      page: this.page,
      pageSize: 8
    },

    result(response) {
      console.log(response);

      this.articleListData = this.articleListData.concat(
      response.data.articleList
      );

      this.page++;

      if (response.data.articleList < 8) {
      this.busy = true; //没有数据禁用上拉分页加载更多
      }
    },
    error(err) {
      console.log(err);
    }
    });
  }
  }
};
</script>

<style scoped>
  li {
  line-height: 4;
  }
</style>

方法 2：使用 fetchMore 实现分页（推荐）

https://vue-apollo.netlify.app/zh-cn/guide/apollo/pagination.html

<template>
  <div class="article">
  <h1>{{ msg }}</h1>

  <div v-infinite-scroll="loadMore" infinite-scroll-disabled="busy" infinite-scroll-distance="10">
    <ul>
    <li v-for="(item,key) of articleList" v-bind:key="key">{{item.title}}</li>
    </ul>
  </div>
  </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 {
    msg: "上拉分页加载更多",
    articleList: [],
    page: 1,
    busy: false
  };
  },
  apollo: {
  articleList() {
    return {
    // GraphQL 查询
    query: articleListGql,
    // 初始变量
    variables: {
      page: this.page,
      pageSize: 5
    }
    };
  }
  },
  methods: {
  loadMore() {
    this.page++;

    this.$apollo.queries.articleList.fetchMore({
    // 新的变量
    variables: {
      page: this.page,
      pageSize: 5
    },
    // 用新数据转换之前的结果
    updateQuery: (previousResult, { fetchMoreResult }) => {
      // eslint-disable-next-line no-console
      console.log(fetchMoreResult);
      return {
      articleList: [
        ...previousResult.articleList,
        ...fetchMoreResult.articleList
      ]
      };
    }
    });
  }
  }
};
</script>

<style scoped>
li {
  line-height: 4;
}
</style>

分页效果

项目例子完整代码下载地址 https://blog.poetries.top/assets/graphql-code.zip