graphQL(四)——GraphQL案例（二）

如何在Vue中使用Apollo ？

准备工作：

• 配置安装

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

• 创建apollo.js 文件

  import Vue from 'vue'
  import VueApollo from 'vue-apollo'
  import ApolloClient from 'apollo-boost'
  Vue.use(VueApollo);
  const apolloClient = new ApolloClient({
    // 你需要在这里使用绝对路径
    uri: 'http://localhost:4000/graphql'
  });
  //Provider 保存了可以在接下来被所有子组件使用的 Apollo 客户端实例。
  const apolloProvider = new VueApollo({
    defaultClient: apolloClient,
  })
  export default apolloProvider;
  

• 在main.js中进行引入

  import apollo from './apollo'

  	new Vue({
  	  router,
  	  apolloProvider: apollo,
  	  render: h => h(App)
  	}).$mount('#app')
  

在vue组件中使用 apollo

在你的应用程序中安装了vue-apollo 之后，所有的组件都可以通过apollo 这特殊选项来使用。

• 在一个 .vue 文件中：

<template>
  <div>My component</div>
</template>
<script>
export default {
  apollo: {
    // Vue-Apollo 选项放在这里
  }
}
</script>

查询（Queries）

为每个你需要通过 Apollo 的查询结果提供数据的 Vue 属性，在 apollo 对象中添加一个对应属性。

简单查询

❄️服务端

• step1:首先定义schema

type Query {
    hello:String
 }

• step2:定义解析器

 Query: {
    hello(root,args,context){
      return "标题 ： hello world !"
    }
  },

❄️客户端

• 使用 gql 编写你的 GraphQL 查询：

  import gql from 'graphql-tag'

<script>
import gql from 'graphql-tag'
const helloQueryGql = gql`
{
  hello
}
`
export default {
  apollo: {
    hello(){
      return {
        query:helloQueryGql,
        update(data){
          console.log(data);
        }
      }
    }
  },
}
</script>

再比如我要将 数据库 中的数据获取到并且将其显示在页面，应该怎么做呢？

修改的地方就是在 解析函数 中将 数据库 中的值拿到，并且 return 。(详细代码通过代码进行展示)

变更（Mutations）

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

例子：

?️描述：在vue项目中，通过点击事件，发送更改的请求，

❄️ 客户端：

<router-link
  :class="{isRead: item.isRead}"
  @click.native="mutationIsRead(item.id)" 
  :to="{ 
    name: 'content', 
    params: { id: item.id } 
  }"
>{{ item.title }}</router-link>

❄️注意：

vue中@click.native

• 作用：[给组件绑定原生事件]
• 例子：如果使用router-link标签，加上@click事件，绑定的事件会无效
• 因为：router-link的作用是单纯的路由跳转，会阻止click事件，你可以试试只用click不用native,事件是不会触发的。此时加上.native，才会触发事件。

<script>
  methods: {
    mutationIsRead(id) {           //当前点击的title 的ID
      const isRead = true;         //默认传递的参数为true
      this.$apollo.mutate({ 	   //变更方法
        mutation: mArticleISRead,  //查询语句
        variables: { id,isRead },  //参数
        update: (store, { data: { articleIsRead } }) => {
          console.log(999,articleIsRead);
        }
      });
    }
  }
</script>

上面的查询语句是外部引入 mArticleISRead.gql 文件

❄️注意：

• $id 是指定义了变量id ,值必须是String。
• 相对应的 articleIsRead(id:$id) 中的id 对应的就是我传入的可变的量。

mutation articleIsRead($id: String,$isRead:Boolean) {
  articleIsRead(id: $id,isRead:$isRead) {
    id
    title
    date
    introduction
    category
    isRead
  }
}

❄️服务端

• schema

const typeDefs = gql`
  type Mutation {
    articleIsRead(id: Int!): Article
  }
`

• resolvers

articleIsRead(_, { id,isRead }) {
      console.log(id,999,isRead);
      Test.findOneAndUpdate({_id:id},{$set:{isRead:isRead}},function(err,data){
        console.log(data); //直接修改数据库中的参数
      })

• 最后在数据库可以进行查看验证，看其有没有被修改成功。