在vue项目中集成graphql 即vue-ApolloClient

princekin 发布于2019-08-23 11:51 / 2309人阅读

摘要：什么是是一个用于的查询语言，是一个使用基于类型系统来执行查询的服务端运行时下图展示所处的位置优点有强类型是强类型的，可使用来定义。

1.什么是graphql
GraphQL 是一个用于 API 的查询语言，是一个使用基于类型系统来执行查询的服务端运行时
下图展示graphql所处的位置

2.优点

1.GraphQL API 有强类型 schema
    GraphQL schema是强类型的，可使用SDL(GraphQL Schema Definition Language)来定义。比如，可以使用构建工具验证API请求，编译时检查API调用可能发生的错误
2.按需获取 
    在不添加后端接口的前提下减少不必要的字段，做到前端自主订阅字段

3.使用 vue集成graphql

1.安装vue脚手架 npm install -g vue-cli 
2.安装vue-apollo客户端 vue-apollo graphql apollo-client apollo-link apollo-link-http apollo-cache-inmemory graphql-tag 
3.webpack.base.conf.js 安装加载器加载graphql后缀文件
    {
        test: /.(graphql|gql)$/,
        exclude: /node_modules/,
        loader: "graphql-tag/loader"
     },

4.main.js 添加
    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
       //config.js 代理设置
       // "/graphql": {
       //         target: "http://eshipe.net:3000/graphql",
       //         changeOrigin: true,
       //         pathRewrite: {
       //            "^/graphql": "/graphql"
       //         }
       //     },
      uri: "/graphql",//访问地址,在这里使用代理
    })

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

    // Install the vue plugin
    Vue.use(VueApollo)
    const apolloProvider = new VueApollo({
        defaultClient: apolloClient,
    })

    new Vue({
        router,
        store,
        provide: apolloProvider.provide(),//注册全局组件
    }).$mount("#app")
    
5.添加search.graphql文件
    //定义查询
    query q_user($id: Int){
      User(id: $id){
        id
        address
        name
      }
    }
    
6.具体的vue组件中
    1.import gql from "graphql-tag";
    2.import {q_user} from"search.graphql"
    3. 具体方法中使用
      this.$apollo.query({
          query: q_user,
          variables: {
            id: 1,
          },
      }).then(res => {
          console.log(res)
      }).catch(err => {
          console.log(err)
      })

4.可能遇到的问题

1.npm版本问题
    解决思路:npm版本回退 npm install -g npm@4.6.1

云服务器 GPU云服务器云服务器搭建vue项目腾讯云服务器部署vue项目 vue项目放到云服务器上阿里云服务器搭建vue项目

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

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

前端每周清单：Node.js 微服务实践，Vue.js 与 GraphQL，Angular 组件技巧

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

wall2flower 2019-08-21 11:55 评论0 收藏0
前端清单第 27 期：React Patent License 回复，Shopify WebVR 购

摘要：新闻热点国内国外，前端最新动态就开源许可证风波进行回复数周前，基金会决定禁止旗下项目使用，因为其在标准的许可证之外添加了专利声明此举引发了社区的广泛讨论，希望能够更新其开源许可证。 showImg(https://segmentfault.com/img/remote/1460000010777089); 前端每周清单第 27 期：React Patent License 回复，Sho...

jeffrey_up 2019-08-21 12:03 评论0 收藏0
2017 年崛起的 JS 项目

摘要：通过对比各项目过去个月在上新增数量，来评估其在年度的受关注程度，进而选出年度领域崛起的明星项目。也许正因为上述最后一点，在中国拥有大量的拥趸。不仅被中国最大的电商平台阿里巴巴使用，也获得了与这些公司青睐。共 4741 字，读完需 8 分钟，速读 2 分钟。我有幸参与了该项目的部分中文版翻译、校对工作，感谢 Sacha Grief，Micheal Ramberu 的统计整理，以及 Fr...

gaara 2019-08-22 13:57 评论0 收藏0
weex踩坑之旅第二弹 ~ 在weex中集成vue-router

摘要：也就是说在中，我们的代码是要在环境中运行。而在中，是没有等以及的，即所有的框架都是不可以使用的。比如相关组件，相关组件，等都不能在中引用。是可以在中使用的。接着第一弹讲，我们已经搭建好一个属于自己的weex项目了，然后如何开发呢？由于之前项目中都是采用vue全家桶进行开发，路由使用vue-router插件，状态管理使用vuex，Ajax前后台交互使用axios，图标库使用font-a...

tyheist 2019-08-21 18:25 评论0 收藏0
“别更新了，学不动了” 之：全栈开发者 2019 应该学些什么？

摘要：但是，有一件事是肯定的年对全栈开发者的需求量很大。有一些方法可以解决这个问题，例如模式，或者你可以这么想，其实谷歌机器人在抓取单页应用程序时没有那么糟糕。谷歌正在这方面努力推进，但不要指望在年会看到任何突破。对于什么是全栈开发者并没有一个明确的定义。但是，有一件事是肯定的：2019 年对全栈开发者的需求量很大。在本文中，我将向你概述一些趋势，你可以尝试根据这些趋势来确定你可能要投入的...

NervosNetwork 2019-08-23 14:48 评论0 收藏0