如何优雅的在Vue Project中使用vue-apollo

Noodles 发布于2019-08-20 18:37 / 1521人阅读

摘要：首先我们来熟悉下的工作机制一个查询可以包含一个或者多个操作，类似于一个。操作可以使两种类型查询或者修改。以后就又可以愉快的装逼了本文章只适于初学者作者考拉阅读前端工程师

首先我们来熟悉下graphql的工作机制

一个GraphQL查询可以包含一个或者多个操作（operation），类似于一个RESTful API。操作（operation）可以使两种类型：查询（Query）或者修改（mutation）。我们看一个例子：

`query {
  client(id: 1) {
    id 
    name
  }
}`

那么问题来了，我们已经用熟了axios或者fetch 再或者ajax来进行数据的交互，如：

getRecommdBook (type) {
      this.axios.get(`/books/web/recommendation-api/recommendation/official?type=${type}`)
        .then(res => {
          if (res.data) {
            this.recommdBookfun(res.data)
            console.log(this.recommdBook)
          }
        })
        .catch(err => {
          console.log(err)
        })
    },

怎样以我们熟悉的形式来运用apollo，使查询更加简便呢

首先我们先在vue项目中引用apollo-vue（apollo非亲生儿子）作者是Guillaume Chau（vue的开发团队人员）

git：https://github.com/Akryum/vue...

npm install --save vue-apollo apollo-client

main.js引用

// apollo配置

    import { ApolloClient, createNetworkInterface } from "apollo-client"
    import VueApollo from "vue-apollo"

构建客户端
可以构建多个适应不同接口

    const networkInterfaceTask = createNetworkInterface({
      uri: "/api/tasks/graphql",
      transportBatching: true,
      opts: {
        credentials: "include"
      }
    })
    
    const apolloClientTask = new ApolloClient({
      networkInterface: networkInterfaceTask,
      connectToDevTools: true
    })
    
    const apolloProvider = new VueApollo({
      clients: {
        task: apolloClientTask
      },
      defaultClient: apolloClientTask
    })

使用apollo

Vue.use(VueApollo)

根目录引用

new Vue({
  el: "#app",
  router,
  axios,
  store,
  apolloProvider,
  template: "",
  components: { App }
})

好到此为止，基础配置就已经ok了
接下来就是实际的请求了
在vue 的组件中，比如 test.vue

我们的例子是带参数的查询
首先在组件里构建查询的变量

import gql from "graphql-tag"

const getErSeasons = gql`query erSeasons($classId: Long!) {
                            erSeasons{
                              id
                              name
                              startTime
                              endTime
                              classTask(class:$classId){
                                id
                                classId
                                startTime
                                endTime
                                status
                              }
                            }
                          }`

不懂的话先去查下教程api
然后在methods里面

 changeClass (id) {
      this.ClassSeasons = []
      this.Select = id
      console.log(this.$apollo.query)
      this.$apollo.query({
        query: getErSeasons,
        variables: {
          classId: this.Select
        }
      })
        .then(res => {
          this.Parse(res.data.erSeasons)
          console.log(res)
        })
        .catch(err => {
          console.log(err)
        })
    }
    
这个形式是不是有点熟悉了。哈哈哈
可以了。以后就又可以愉快的装逼了
本文章只适于初学者

作者：考拉阅读前端工程师

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/84786.html

Vue-apollo — 在Vue-cli项目中使用Graphql

摘要：在项目中使用当然我们可以通过直接在中携带参数直接请求，这样太过麻烦。为我们提供了一整套解决方案，可以解决大部分问题。本篇文章将介绍如何在你的项目中简单使用和一些目前遇到的小坑。 Vue-apollo — 在Vue-cli项目中使用Graphql Vue-apollo — Integrates apollo in your Vue components with declarative...

TIGERB 2019-08-22 15:36 评论0 收藏0
在vue项目中集成graphql 即vue-ApolloClient

摘要：什么是是一个用于的查询语言，是一个使用基于类型系统来执行查询的服务端运行时下图展示所处的位置优点有强类型是强类型的，可使用来定义。 1.什么是graphqlGraphQL 是一个用于 API 的查询语言，是一个使用基于类型系统来执行查询的服务端运行时下图展示graphql所处的位置showImg(https://segmentfault.com/img/bVbgDGe?w=905&h=...

princekin 2019-08-23 11:51 评论0 收藏0
GraphQL 科普前端向

摘要：样例前端传入字段和结构。后台按照前端的需求返回数据。则将前后台通信直接分为两大类和。顾名思义，是默认的操作符，代表查询，是不会给服务端带来副作用的请求。文档文档部分文档就是前端向后台描述所需的字段。降低前后端沟通成本。简介 showImg(https://segmentfault.com/img/bVbmKX5?w=150&h=150); GraphQL是基于「类型系统」来执行查询的...

Bmob 2019-08-23 14:31 评论0 收藏0
前端每周清单：Node.js 微服务实践，Vue.js 与 GraphQL，Angular 组件技巧

摘要：前端每周清单第期微服务实践，与，组件技巧，攻防作者王下邀月熊编辑徐川前端每周清单专注前端领域内容，以对外文资料的搜集为主，帮助开发者了解一周前端热点分为新闻热点开发教程工程实践深度阅读开源项目巅峰人生等栏目。前端每周清单第 26 期：Node.js 微服务实践，Vue.js 与 GraphQL，Angular 组件技巧，HeadlessChrome 攻防作者：王下邀月熊编辑：徐川...

wall2flower 2019-08-21 11:55 评论0 收藏0
如何在github上创建个人项目的在线演示demo

摘要：在上搜索相关项目时会发现，有的项目不光写了一手好文档并且还给出了项目的在线运行。如何在维护源代码的同时并同时生成项目主页以下以的单页应用为例，给出完整的项目维护以及生成项目主页的步骤。后期可在该基础上进行自己项目的开发。前言 Github作为目前优秀的同性交友平台，其上维护了众多优秀的开源项目。目前Github上关于前端的项目也是数不胜数，Vue、React、Angular等等。自己...

kid143 2019-08-20 14:26 评论0 收藏0