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

TIGERB 发布于2019-08-22 15:36 / 2544人阅读

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

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

Vue-apollo  — Integrates apollo in your Vue components with declarative queries.

当然我们可以通过直接在url中携带参数直接请求，这样太过麻烦。vue-apollo为我们提供了一整套解决方案，可以解决大部分问题。

本篇文章将介绍如何在你的vue-cli项目中简单使用vue-apollo和一些目前遇到的小坑。

安装

npm install --save vue-apollo graphql apollo-client apollo-link apollo-link-http apollo-cache-inmemory graphql-tag

创建ApolloClient实例, 安装VueApollo插件

import Vue from "vue"
import { ApolloClient } from "apollo-client"
import { HttpLink } from "apollo-link-http"
import { InMemoryCache } from "apollo-cache-inmemory"
import VueApollo from "vue-apollo"

const httpLink = new HttpLink({
  // You should use an absolute URL here
  uri: "http://localhost:3020/graphql",
})

// Create the apollo client
const apolloClient = new ApolloClient({
  link: httpLink,
  cache: new InMemoryCache(),
  connectToDevTools: true,
})

// Install the vue plugin
Vue.use(VueApollo)

如果你开启了vue-cli提供的代理, 这里同样适用.

创建PROVIDER

就像vue-router与vuex一样, 需要将apolloProvider添加为根组件.

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

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

quasar-cli 中安装

如果你不了解Quasar Framework并且不打算使用, 这段可以跳过.

在plugins目录中创建新的js文件, 并在 quasar.conf.js 中加入它.

打开创建好的文件:

import {ApolloClient} from "apollo-client"
import {HttpLink} from "apollo-link-http"
import {InMemoryCache} from "apollo-cache-inmemory"
import VueApollo from "vue-apollo"


// Create the apollo provider
const apolloProvider = new VueApollo({
  defaultClient: new ApolloClient({
    link: new HttpLink({
      // You should use an absolute URL here
      uri: "http://localhost:3020/graphql",
    }),
    cache: new InMemoryCache(),
    connectToDevTools: true
  })
})

// leave the export, even if you don"t use it
export default ({ app, Vue }) => {
  // something to do
  Vue.use(VueApollo)
  app.provide = apolloProvider.provide()
}

使用 query

需要提前在组件中定义graphql字符串.

data中必须提前创建apollo中相应字段且字段名必须相同.

通过gql创建graphql字符串, 特别注意:使用 query(){return gql` } 用来创建需要计算得到的字符串, 如字符串中携带${this.hello}等. 纯字符串可用query:gql` 直接创建.

loadingKey指定data中创建的字段, 用于表示状态, loadingKey应为初始值为0的整数. 处于加载状态时会执行loadingKey++操作, 加载结束会执行loadingKey—操作.

mutation

随时使用, 不需要提前声明或定义. 请求结果为一个promise.

this.$apollo.mutate({
      // Query
      mutation: gql`mutation ($label: String!) {
        addTag(label: $label) {
          id
          label
        }
      }`,
      // Parameters
      variables: {
        label: this.newTag,
      }
}).then(data=>{
    console.log(data)
}).catch(error=>{
    console.log(error)
})

并没有mutation(){return gql`} 这样的操作, 所以计算属性需要通过 variables`传入. 当然这种方法也适用于query.

数据更新

一般的, 在组件创建时会发起一次query请求. 如果需要重新请求数据:this.$apollo.queries.<$name>.refetch()

如 this.$apollo.queries.hello.refetch() 请求指定字段.

请求发起后loadingKey也将重新计算.

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

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

在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
如何优雅的在Vue Project中使用vue-apollo

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

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

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

wall2flower 2019-08-21 11:55 评论0 收藏0
vue-cli中chainWebpack的使用

摘要：这个库提供了一个原始配置的上层抽象，使其可以定义具名的规则和具名插件，并有机会在后期进入这些规则并对它们的选项进行修改。它允许我们更细粒度的控制其内部配置。接下来有一些常见的在中的修改的例子。前言在项目开发中我们难免碰到需要对webpack配置更改的情况，今天就主要来讲一下在vue.config.js中对一些配置的更改，简单介绍一下loader的使用；用configureWebpa...

tomlingtm 2019-08-02 15:40 评论0 收藏0