精华内容
下载资源
问答
  • vue3-棒球 项目设置 npm install 编译和热重装以进行开发 npm run serve 编译并最小化生产 npm run build 运行单元测试 npm run test:unit 自定义配置 请参阅。
  • 主要介绍了在vue项目中集成graphql(vue-ApolloClient),小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • 代码如下:npm install –save vue-apollo graphql apollo-client apollo-link apollo-link-http apollo-cache-inmemory graphql-tag 2、在我们的项目的根目录下创建一个vueApollo.js文件具体配置如下: import { ...
  • NuxtJS 中的 Apollo Nuxt.js 模块使用 在内部使用与相同的方法 警告 此版本需要具有 serverPrefetch 支持的 Vue 2.6+。 例如: npm install --save vue@2.6.6 vue-template-compiler@2.6.6 vue-server-renderer@...
  • Vue-Apollo-Todos 带有Vue和Apollo的TODOs演示应用 这个程序有很多缓存更新的变异示例。 构建设置 # install dependencies yarn # serve with hot reload at localhost:8080 yarn run dev # build for production ...
  • vue-cli-plugin-阿波罗 :rocket: 在2分钟内开始使用Apollo和GraphQL构建Vue应用程序! 这是一个vue-cli 3.x插件,可在您的Vue项目中添加Apollo和GraphQL。 赞助商 :star: 特征 自动将集成到您的Vue应用中 嵌入...
  • 为了获取服务端GraphQl接口的数据,客户端需要使用apollo这个插件,三大前端框架均可以将apollo集成,下面以vue为例来说明在客户端如何集成vue-apollo这个插件。 1. 参考文档 Vue-apollo项目地址:...

    为了获取服务端GraphQl接口的数据,客户端需要使用apollo这个插件,三大前端框架均可以将apollo集成,下面以vue为例来说明在客户端如何集成vue-apollo这个插件。

    1. 参考文档

    Vue-apollo项目地址:https://github.com/Akryum/vue-apollo

    Vue-apollo官方文档:https://vue-apollo.netlify.com/

    2.安装模块

    npm install vue-apollo graphql apollo-boost --save
    或者
     
    yarn add vue-apollo graphql apollo-boost

    3. src/main.js 中引入 apollo-boost 模块并实例化

    import ApolloClient from 'apollo-boost'
    const apolloClient = new ApolloClient({
        // 服务器的地址,注意后台添加graphql这个路由
        uri: 'http://118.123.14.36:3002/graphql'
    })

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

    import VueApollo from 'vue-apollo'
    Vue.use(VueApollo);

    5. 在src/main.js中创建 Apollo provider

    Provider 保存了可以在接下来被所有子组件使用的 Apollo 客户端实例。
     
    const apolloProvider = new VueApollo({
        defaultClient: apolloClient
    })
    6.  在src/main.js中将 apolloProvider 挂载到vue
     
    new Vue({
        router,
        apolloProvider,
        render: h => h(App),
    }).$mount('#app')

    以上是vue中集成vue-apollo的基本步骤,下面是代码实例。

    import Vue from 'vue'
    import App from './App.vue'
    import router from './router/router.js';
    
    
    // 1.安装模块  npm install vue-apollo graphql apollo-boost --save
    
    
    // 2.引入 apollo-boost 模块,并实例化 ApolloClient
    import ApolloClient from 'apollo-boost'
    const apolloClient = new ApolloClient({
        // 服务器的地址,注意在后台要配置graphql路由
        uri: 'http://118.123.14.36:3002/graphql'
    })
    
    
    // 3.配置vue-apollo插件
    import VueApollo from 'vue-apollo'
    Vue.use(VueApollo);
    
    
    // 4.配置apolloProvider
    const apolloProvider = new VueApollo({
        defaultClient: apolloClient,
    })
    
    Vue.config.productionTip = false;
    
    // 5.apolloProvider挂载到vue实例里
    new Vue({
        router,
        apolloProvider,
        render: h => h(App),
    }).$mount('#app')
    

     

    展开全文
  • NS Vue阿波罗 使用NativeScript-Vue构建的本机应用程序 用法 # Install dependencies npm install # Build for production npm run build npm run build: # Build, watch for changes and debug the application ...
  • vue项目使用vue-apollo实现前后端联调

    千次阅读 2019-12-26 16:52:31
    配置vue-apollo和graphql 将今天搜集的资料了解到的写在这里供以后自己参考 这是参考价值最大的原文连接,大家可以...npm install --save vue-apollo graphql apollo-client apollo-link apollo-link-http apollo-...

    配置vue-apollo和graphql

    将今天搜集的资料了解到的写在这里供以后自己参考
    这是参考价值最大的原文连接,大家可以直接看这个

    在vue-cli3项目中使用vue-apllo实现前端调用后端接口

    1)安装相关服务

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

    2)创建一个vue-apollo.js文件进行配置

    import Vue from 'vue'
    import VueApollo from 'vue-apollo'
    import { ApolloClient } from 'apollo-client'
    import { HttpLink } from 'apollo-link-http'
    import { InMemoryCache } from 'apollo-cache-inmemory'
    
    Vue.use(VueApollo);
    
    
    // 这里的地址写后端所在电脑的IP和端口号
    const httpLink = new HttpLink({
      uri: 'http://localhost:10010/graphql',
    });
    
    //创建Apollo客户端
    const apolloClient = new ApolloClient({
      link: httpLink,
      cache: new InMemoryCache(),
      connectToDevTools: true,
    });
    
    export default new VueApollo({
      defaultClient: apolloClient,
    })
    

    3)在main.js文件中引用

    import babelPolyfill from 'babel-polyfill';
    
    
    new Vue({
      router,
      store,
      apolloProvider,
      ...App,
    }).$mount('#app');
    
    展开全文
  • vue-apollo 使用

    千次阅读 2018-02-11 10:28:03
    实际上vue-apollo/react-apollo 都给我们提供了相同的一套机制,(但是vue-apollo起步较晚,直到前几天的几次更新才让它相对更加完善一些), 让我们摆脱了RESTFul给我们的schema限制。还有一个额外的好处是由于graphql...

    当我们使用RESTFul的风格进行编码的时候有没有注意过一个问题,我们的请求是与依赖息息相关的。例如我有一个通讯录,点击某个人的时候显示某个人的基本信息,那么这时候我们的请求就是与userid相关的。实际的一个请求可能更加复杂,例如依赖条件不止一个,但是我们传统写的时候都是当这里的userid发生变化或者是某一组条件发生变化的时候再去发起新的请求。那么这组逻辑可否抽象出来呢 ?例如当某一个状态或一组状态发生改变的时候我就请求新的数据,而不用在手动调用一遍请求函数了。当然有,上面这组功能实际上就是本次要介绍的apolloclient框架提供的机制。

    vue-apollo是给vue封装的一个apolloclient插件,不过没有react-apollo那么出名, 但使用原理很相似,我觉得要想使用好apolloclient就要首先理解它的工作原理,以及与传统RESTful有什么区别。 ApolloClient是一个高度封装的graphql框架, 将网络+存储都封装到了一起,也正是这种高度集中带给我们的好处是可以将网络与state去耦合到前端框架中,我们只需在组件中建立一种数据依赖就可以让apollo自动工作起来。

    我们组件的更新是依赖状态的更新,我们的query也是依赖variables的更新, 我们不需要手动去执行何时去query数据从服务器上,而是预先设定好依赖,当component中状态更新时apolloclient会自动检查依赖是否发生变更,如果变更了则去重新请求数据源。看一下传统的写法

    <template>
      <div>
        <h3> ``</h3>
        <input v-model="myInput" type="number" placeholder="input some number"/>
      </div>
    </template>
    
    <script>
      improt myAction from './action.js'
      export default {
        data () {
          return {
            myInput: ''
          }
        },
        watch: {
          myInput (input) {
            myAction(input).then((result) => {
              this.data = result
            })
          }
        }
      }
    </script>
    

    当用户输入的数字后去请求数字对应的结果,不要追究为什么这样做,假设我们有这个需求就好。这时候就是传统的写法,后端提供一个RESTFul的API,前端去手动根据条件发起请求。一切都是那么的合乎常理。 不过下面看一下使用vue-apollo的写法

    <template>
      <div>
        <h3> ` `</h3>
        <input v-model="myInput" type="number" placeholder="input some number"/>
      </div>
    </template>
    
    <script>
      import myQuery from './querys.js'
      export default {
        data () {
          return {
            myInput: '',
            myQyert: {
              data: ''
            }
          }
        },
        apollo: {
          myQyery: {
            query: myQuery,
            variables () {
              return {
                number: this.myInput
              }
            },
            skip () {
              return !this.myInput
            }
          }
        }
      }
    </script>
    

    ok , 完事。 看上去似乎我们的代码变得更长了,更复杂了,实际上确实,因为要建立一个依赖模型需要写一些额外的代码,但是好处就是我们的组件是自动工作的!这里第一个demo没有加上缓存机制,实际上如果加上缓存第一个代码也会变得更加复杂,但是在apolloclient里缓存也是自动完成的。例如如果我们输入了相同的数字,那么apolloclient将直接从state里去拿数据,而不会发起请求,因为依赖没有发生变化! 而且我们甚至不用去使用第三方的ajax库,vue-apollo里自带了一个fetch的polyfill来享受新版本浏览器带来的便利。当然vue-apollo还有其他的一些选项来完成更加复杂的场景,不过上面的代码让我们看到了一丝希望,就是网络与状态全部都是自动化完成! great

    实际上vue-apollo/react-apollo 都给我们提供了相同的一套机制,(但是vue-apollo起步较晚,直到前几天的几次更新才让它相对更加完善一些), 让我们摆脱了RESTFul给我们的schema限制。还有一个额外的好处是由于graphql是自文档的,所以也减少了人工沟通的成本,人工沟通的成本又往往是巨大的~

    展开全文
  • vue-cli中使用graphql即vue-apollo的用法

    千次阅读 热门讨论 2018-07-20 16:16:51
    npm install –save vue-apollo graphql apollo-client apollo-link apollo-link-http apollo-cache-inmemory graphql-tag 2、在我们的项目的根目录下创建一个vueApollo.js文件具体配置如下: import { ...

    1、首先我们需要安装一下vue-apollo 具体执行命令如下:
    npm install –save vue-apollo graphql apollo-client apollo-link apollo-link-http apollo-cache-inmemory graphql-tag
    2、在我们的项目的根目录下创建一个vueApollo.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({
      uri: './v1/assess/api',
      /* 其中./v1是我在vue的config中配置时解决跨域时起的代理一个名字,后面的是后端
     暴露接口方法的地址 */
      credentials: 'same-origin',
      /* 这个属性的意思是在同源的情况下携带cookie,因为vue-apollo本身发送的是一个fetch请求,所以在发送请求时不会自动携带cookie,所以我们需要加上此属性 */
    });
    const apolloClient = new ApolloClient({
      link: httpLink,
      cache: new InMemoryCache(),
      connectToDevTools: true,
    });
    export default new VueApollo({
      defaultClient: apolloClient,
      clients: { default: apolloClient },
    });

    3,接着我们将配置好的js文件引入到man.js中,具体如下:

    import Vue from 'vue';
    import ElementUI from 'element-ui';
    import VueApollo from 'vue-apollo';
    import apolloProvider from './apollo';
    
    // Install the vue plugin
    
    // Vue.component('full-calendar', fullCalendar);
    Vue.config.productionTip = false;
    Vue.use(ElementUI);
    Vue.use(VueApollo);
    
    /* eslint-disable no-new */
    new Vue({
      el: '#app',
      provide: apolloProvider.provide(),
      //这句代码是我们要和vuex一样,将apolloProvider添加为根组件
      router,
      store,
      template: '<App/>',
      components: { App },
    });

    准备好这些,我们就可以开始使用了,另外如果有谷歌账号,可以在谷歌的应用商店去下载“Apollo Client Developer Tools”插件,来模拟vue-apollo调用接口,当然你也可以直接看后端的代码,然后看接口的定义
    4,然后在项目的根目录下创建一个graphql文件夹,这个文件里面去封装每一个模块所对应的方法,为了代码的简洁,可以每一个模块建立一个js文件,实现接口方法的统一管理,比如说我创建了一个交atemplate.graphql文件,注意这个文件夹下所有的文件后缀名都是.graphql。
    首先我们说一下query方式的调用:具体代码如下:

    query getAssessTemplateListings($query: String, $state: Int,  $page: Int, $pageSize: Int) {
      assessTemplateListings(query: $query, state: $state, page: $page, pageSize: $pageSize) {
        assessTemplates {
          id
          groupId
          name
          description
          state
          createdAt
          updatedAt
        }
        page
        pageSize
        total
      }
    }

    5,然后将该方法引入到所需要调用的vue文件中引入方式如下:

    import { getAssessTemplateListings, stopAssessTemplate } from '@/services/graphql/assessTemplate.graphql';
    
    然后在vue的methods中定义一个方法,最后调用
    lodAtemplate() {
         this.$apollo.query({
                  query: getAssessTemplateListings,
                  variables: {
                    state: 1,
                    page: this.currentPage,
                    pageSize: this.pageSize,
                  },
                  fetchPolicy: 'network-only',
                  /* 如果一个获取数据的列表,在参数没有变化的时候,那我们希望用后台数据的缓存,则需要在请求下方加上  fetchPolicy: 'network-only'来做缓存 */
                }).then(({ data }) => {
                  const assessTempalteListings = data.assessTemplateListings;
                  consloe.log(assessTempalteListings);
                });
    }
    
     根据我们的需求因为是获取列表的,所以在created方法里面去调用这个方法即
     created () {
      this.lodAtemplate();
     }

    然后再看一下mutation的用法,封装如下:

    mutation stopAssessTemplate($input: StopAssessTemplateInput!) {
      stopAssessTemplate(input: $input) {
        clientMutationId
      }
    }
    在vue中的使用
    stop () {
     this.$apollo.mutate({
         mutation: stopAssessTemplate,
         variables: {
           input: {
             clientMutationId: uuidv1(),
             id: obj.id,
           },
         },
         }).then(() => {
         }).catch((error) => {
           this.$message.error(Util.Comm.graphqlError(error.message));
         });
    }

    用法我们就说完了,接下来总结一下
    1、因为前端采用vue-apollo客户端发送fetch方式的graphql的请求,而fetch请求也有的缺点:fetch只对网络请求报错,对400,500都当做成功的请求,需要封装去处理,所以说对于vue-axios的try,catch是获取不到错误的,Apollo请求超时的问题无法解决,httpLink没有提供timeout的接口,导致无法中断或重连当前请求
    2、通过Apollo查询返回的数据是freeze状态,无法修改,可以通过对象浅拷贝或者序列化的方式解冻。这个坑我自己趟过。
    因为我要做一个对于某一个模板增加适用模板区域的功能,那么要求是先调用模板详情接口,如果有区域就显示出来,对已有的区域可以做增删改的功能,获取到数据后存在vuex中,当我添加完成后更改vuex的数据报错,意思是不允许更改,解决办法就是在初始化vuex的数据时先深拷贝一份数据存入到vuex中,而不是直接存入,另外建议可以使用lodash.js,因为这个js库集成了很多方法,不用写那么多繁琐的代码
    3、再说一下query和mutaionl两种方式解释,按照官方的意思是
    query:仅获取数据(fetch)的只读请求
    mutaion:获取数据后还有写操作的请求
    我个人认为,vue-apollo中的query方式就类似于Ajax中的get请求,而mutaion就类似于post请求

    展开全文
  • 样板Vue + Vuex + Vuetify + Apollo客户端+ GraphQL + Express + MongoDB + HTTP / 2 这是使用这些出色技术启动项目的简单方法! 正在安装 下载或克隆存储库并访问服务器文件夹。 - cd server - npm install 然后...
  • Vue中集中Vue-apollo以后(如何集成请查看本专栏第六篇),就可以使用它进行编辑数据了。 <template> <div class="news"> <div class="navForm"> 导航名称: <input v-model="navJson....
  • Vue中集中Vue-apollo以后,就可以使用它进行新增数据了。 <template> <div class="news"> <div class="navForm"> 导航名称: <input v-model="navJson.title" type="text" />...
  • 场景:对某项数据进行增加/删除之后,重新调用...原因(猜测):vue-apollo是有数据缓存机制的,对于请求相同的接口,不会向后台直接发起请求,二是通过从缓存那里拿数据。 解决:加上fetchPolicy: ‘no-cache’ ...
  • vue-apollo的使用--vue项目中使用graphql(详细版)

    万次阅读 热门讨论 2018-06-06 17:28:53
    在前段时间使用graphql获取数据,感觉获取数据来说是方便了一些,但是也爆出了一系列的...npm install -S apollo-cache-inmemory apollo-client apollo-link apollo-link-context apollo-link-http 配置 (1)...
  • 文章目录简介与RESTful区别优缺点Schema 类型对象类型和字段查询和变更类型系统标量列表和非空查询/变更语句参数[vue-apollo ](https://vue-apollo.netlify.app/zh-cn/guide/#%E4%BB%80%E4%B9%88%E6%98%AF-apollo)...
  • Vue.js的Apollo和GraphQL 赞助商
  • Mongo Apollo GraphQL Vue 文章: : 这是具有以下功能的简单样板: MongoDB的 阿波罗服务器 带有ES6导入的Node.js Vue作为前端框架 Vue路由器 维阿波罗Vue Apollo) 如何使用 首先,克隆项目。 然后,在cd...
  • 打字稿Graphql Vue Apollo模板 这是什么? 这是使用以下技术的GrapQL全栈应用程序的入门模板: 带有 (在之上) 数据库 该项目依赖于的开发环境。 它提供了一个自签名的反向代理,以便于开发。 只需运行命令...
  • Apollo 简介 通过这个项目将自己所会的技术以及自己的架构思想尽可能的体现出来 技术栈 python flask vue-element-admin element-ui mysql redis celery 架构 前后端分离的方式,前端通过http请求调用后端接口,目前...
  • ###### #### ###### #### ### # vue-apollo的多客户端的用法以及apollo.js的配置 关于如何安装和如何使用,这篇文章就先暂时不介绍了,如果不清楚就看我另一篇关于vue-apollo的用法 在做项目中,有时候后端的接口是...
  • 如何在Vue Project中使用vue-apollo

    千次阅读 2017-10-31 14:38:11
    首先我们先在vue项目中引用apollo-vue(apollo非亲生儿子) 作者是Guillaume Chau(vue的开发团队人员) git : https://github.com/Akryum/vue... npm install --save vue-apollo apollo-client main.js...
  • 首先我们先在vue项目中引用apollo-vue(apollo非亲生儿子) 作者是Guillaume Chau(vue的开发团队人员) git : https://github.com/Akryum/vue... npm install --save vue-apollo apollo-client main.js引用 ...
  • 回顾 graphql(一) 在graphql(一)中提到resolver时提出一个问题:如果...搭建客户端之前先了解下Apollo : Apollo 是通过社区力量帮助你在应用中使用 GraphQL 的一套工具。它的 客户端 和 服务端 都非常有名。Apollo ...
  • Vue-apollo — 在Vue-cli项目中使用Graphql Vue-apollo — Integrates apollo in your Vue components with declarative queries. 当然我们可以通过直接在url中携带参数直接请求,这样太过麻烦。vue-apollo为我们...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 1,423
精华内容 569
关键字:

vue-apollo

vue 订阅