精华内容
下载资源
问答
  • 为了获取服务端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')
    

     

    展开全文
  • Vue-Apollo-Todos 带有VueApollo的TODOs演示应用 这个程序有很多缓存更新的变异示例。 构建设置 # install dependencies yarn # serve with hot reload at localhost:8080 yarn run dev # build for production ...
  • <div><p>WARNING: npm peer requirements (for apollo) not installed: - apollo-client.5.26 installed, apollo-client@^1.0.0-rc.6 needed <p>Read more about installing npm ...vuejs/vue-apollo</p></div>
  • 到目前为止,我们知道Prisma是一个后端框架,那如何与vue项目结合起来呢❓嗯,没错,是Apollovue-apollo虽然没有react-apollo出名,但是也是很好用的,我们一起来看看vue-apollo???????????? vue-apollo 安装 ...

    到目前为止,我们知道Prisma是一个后端框架,那如何与vue项目结合起来呢❓嗯,没错,是Apollo

    vue-apollo虽然没有react-apollo出名,但是也是很好用的,我们一起来看看vue-apollo👇👇👇

    vue-apollo

    • 安装

      npm install vue-apollo graphql apollo-client apollo-link-http
      
    • 创建ApolloClient实例

      //导入安装的插件
      import VueApollo from 'vue-apollo'
      import { ApolloClient } from 'apollo-client'
      import { createHttpLink } from 'apollo-link-http'
      
      //连接API的地址
      const httpLink = createHttpLink({
        // 你需要在这里使用绝对路径(后端框架中的prisma.yml文件中endpoint地址)
        uri: 'http://localhost:4466',
      })
      
      // 创建ApolloClient实例
      const apolloClient = new ApolloClient({
        link: httpLink
      })
      
    • 创建 VueApollo 实例

      // Apollo provider 保存了可以在接下来被所有子组件使用的 Apollo 客户端实例
      const apolloProvider = new VueApollo({
        defaultClient: apolloClient,
      })
      
    • 添加到应用程序中

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

    以上内容在main.js中。

    vue中的使用

    vue文件内容

    <template>
      <div>
        <el-table :data="dataUser" style="width: 100%" max-height="250">
          <el-table-column fixed prop="name" label="书籍" align="center">
          </el-table-column>
          <el-table-column prop="author.name" label="作者" align="center">
          </el-table-column>
          <el-table-column prop="author.age" label="年龄" align="center">
          </el-table-column>
          <el-table-column prop="author.email" label="邮箱" align="center">
          </el-table-column>
          <el-table-column label="是否使用" align="center">
            <template slot-scope="props">
              <p> {{props.row.author.isUse===true?'是':'否'}} </p>
            </template>
          </el-table-column>
          <el-table-column align="center" label="操作">
            <template slot-scope="scope">
              <el-button size="mini" type="primary" @click="handleSave">增加</el-button>
              <el-button size="mini" type="primary" @click="handleEdit( scope.row,scope.$index)">编辑</el-button>
              <el-button size="mini" type="danger" @click="handleDelete(scope.row,scope.$index)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- 弹框 -->
        <el-dialog :title="dialogType==='add'?'增加':'编辑'" :visible.sync="dialog">
          <el-form :model="form">
            <el-form-item label="书籍:">
              <el-input v-model="form.name" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="作者:">
              <el-input v-model="form.author.name" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="年龄:">
              <el-input v-model="form.author.age" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="邮箱:">
              <el-input v-model="form.author.email" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="是否使用:">
              <el-input v-model="form.author.isUse==true?'':''" autocomplete="off"></el-input>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="close">取 消</el-button>
            <el-button type="primary" @click="savePost" v-if="dialogType==='add'">确 定</el-button>
             <el-button type="primary" @click="saveEditPost" v-else>确 定</el-button>
          </div>
        </el-dialog>
      </div>
    </template>
    

    Query(查询)

    • 使用this.$apollo.query发送查询语句。

    • vue项目中src目录下新建文件夹(graphql),此文件夹下新建文件(query.js)。

    • query.js文件内容

      import gql from "graphql-tag";
      const apollo = {
        posts: gql `
            query {
              posts{
                _id,
                author{
                  _id,
                  name,
                  age,
                  email,
                  isUse
                }
                name
              }
            }
          `
      }
      export default apollo
      
      
    • vue文件

      // 引入查询文件
      import queryPost from "../graphql/query";
      
      methods: {
          async getPosts() {
            let { data } = await this.$apollo.query({ query: queryPost.posts });
            this.dataUser = data.posts;   //表格中渲染的数据
          }
      }
      

    Mutation(变更)

    • 使用 this.$apollo.mutate发送查询语句。
    • vue项目中src目录下新建文件夹(graphql),此文件夹下新建文件(mutation.js)。
      • C

        • mutation.js文件内容

          import gql from "graphql-tag";
          const apollo =  gql `
            mutation createPost($data:PostCreateInput!) {
              createPost(data:$data){
                name,
                author{
                  name,
                  age,
                  email,
                  isUse
                }
              }
          }
          `
          export default apollo
          
          
        • vue文件中的使用

          • 写法一

            //引入增加数据的文件
            import mutationPost from "../graphql/mutation";
            
            async savePost() {
              let {data}=await this.$apollo.mutate({
                mutation: mutationPost,
                variables: {
                  data: {
                    name: this.postName,
                    author: {
                      create: {
                        name:this.name,
                        age: Number(this.age),
                        email: this.email,
                        isUse: this.isUse === "是" ? true : false
                      }
                    }
                  }
                }
              });
              console.log(data.createPost);
            }
            
          • 写法二

            this.$apollo.mutate({
                mutation: mutationPost,
                variables: {
                  data: {
                    name: this.postName,
                    author: {
                      create: {
                        name:this.name,
                        age: Number(this.age),
                        email: this.email,
                        isUse: this.isUse === "是" ? true : false
                      }
                    }
                  }
                },
                update: (store, { data: { createPost } }) => {
                  console.log(createPost);   //注意:此处直接打印createPost,若打印data是undefined
                }
              });
            
      • U

        • mutation.js文件内容

          import gql from "graphql-tag";
          const updatePostApollo = gql `
             mutation updatePost($data:PostUpdateInput!,$where: PostWhereUniqueInput!) {
                updatePost(data:$data,where:$where){
                    name,
                    author{
                      name,
                      age,
                      email,
                      isUse
                    }
                  }
              }
          `
          export default updatePostApollo
          
          
        • vue文件中的使用

          //引入文件
          import  updatePostApollo  from "../graphql/mutation";
          
          async saveEditPost() {
            let { data } = await this.$apollo.mutate({
              mutation: updatePostApollo,
              variables: {
                where: {_id:this.form._id},    //修改的条件
                data: {    //修改的内容
                  name: this.form.name,
                  author: {
                    update: {
                      name: this.form.author.name,
                      age: Number(this.form.author.age),
                      email: this.form.author.email,
                      isUse: this.form.author.isUse === "是" ? true : false
                    }
                  }
                }
              }
            });
          },
          
        • 效果图

          在这里插入图片描述

      • D

        • mutation.js文件内容

          import gql from "graphql-tag";
          const deletePostApollo = gql `
             mutation deletePost($where: PostWhereUniqueInput!) {
              deletePost(where:$where){
                    name,
                    author{
                      name,
                      age,
                      email,
                      isUse
                    }
                  }
              }
          `
          export default deletePostApollo
          
          
        • vue文件中的使用

          //引入文件
          import  deletePostApollo  from "../graphql/mutation";
          
          async handleDelete(item, index) {
            if (confirm("你确定要删除吗?")) {
              let { data } = await this.$apollo.mutate({
                mutation: deletePostApollo,
                variables: { where: { _id: item._id } }
              });
            }
            this.dataUser.splice(index, 1);
          }
          
    展开全文
  • GraphQL & Apollo & Vue

    2018-11-26 15:59:00
    GraphQL & Apollo &...https://www.howtographql.com/vue-apollo/0-introduction/ https://github.com/prisma/graphcool-framework https://www.graph.cool/ https://www.youtube.com/watch?v=20zGe...
    展开全文
  • <div><p>As far as I add apollo to my project, re-compile time on code updates in development mode via <code>vue-cli-service serve</code> gets significantly slower - from sth. about 2 seconds to about ...
  • GraphQL + Apollo + Vue 的demo GraphQL 一些关键概念包含 Type,Schema, Query, Mutation等,下面会分别做一下简单的说明,具体还是要结合实际代码进行分析。 查询 (Query) 所谓的查询就是向服务端获取你要想的...

    GraphQL + Apollo + Vue 的demo

    GraphQL 一些关键概念包含 Type,Schema, Query, Mutation等,下面会分别做一下简单的说明,具体还是要结合实际代码进行分析。

    查询 (Query)

    所谓的查询就是向服务端获取你要想的数据,比如我要查所有的用户列表

    // 先定义 User 数据结构
    type User {
      id: Int!
      name: String!
      age: Int!
    }
    // query 查询
    query {
      // 返回一个User类型的集合
      userList() : [User!]
      orderUser(id: Int!) : User// 可以传参查询 // 根据id查询用户信息
    }
    
    • 在 REST 风格接口应该是这样子的
    GET /api/v1/userList
    GET /api/V1/userList/:id/
    

    变更 (Mutation)

    • GraphQL 中的 Mutation 是用来改变服务器上的数据的。
    • 对应着 REST 风格中的 PUT,DELETE,POST
    • Mutation的语法风格和Query很类似。关键在解析Mutation过程中会有所不同。

    ❄️ 值得注意的是,查询字段时,是并行执行,而变更字段时,是线性执行,一个接着一个。

    比如说,我要变更title 和 author

    type Mutation {
      MutationTitleAuthor(title: String, author: String): Book
    }
    

    解析 MutationTitleAuthor

     Mutation:{
       MutationTitleAuthor(root, args){  
         console.log(args)
         return { 
           title:args.title ,
           author:{
             name:args.author
           }
         }
       }, 
     }
    

    Schema

    在 GraphQL 中,Schema 主要是用来描述数据的形态,哪些数据能被查询到,所以在 Schema 中主要定义可用数据的数据类型。总之:要查到的数据都必须要在 Schema 中进行定义,所以这里是需要写很多 type 的,这里还需要统一定义 Query 和 Mutation,也就是要把上面那些定位全部放到这里来

    type User {
      id: Int!
      name: String!
      age: Int!
    }
    type Query {
      userList() : [User]
      orderUser(id: Int!) : User
    }
    type Mutation {
      MutationTitleAuthor(title: String, author: String): Book
    }
    

    ⬇️基础的内容大概就是酱紫,下面开始来一波实战操作

    Apollo-GraphQL

    Apollo-GraphQL 是基于 GraphQL 封装的一种实现,它可以在服务上进行分层,包括 REST api 和 数据库,它包含客户端和服务端,还有 GUI 开发工具,让开发人员可以快速上手进行开发。

    在这里插入图片描述

    ?具体想法

    • 以搭建网站为例,有列表、分类、信息 (query)
    • 点击某个博客,跳转到具体文章内容,返回时有已读标注 (mutation)
    • 服务端使用 apollo-server-express
    • 客户端使用 vue-apollo
    • 数据为模拟的静态 json

    搭建服务端

    这边采用apollo-server-express快速搭建服务端

    首先安装依赖,这个例子只需安装以下三个工具

    yarn add apollo-server-express express graphql

    对于apollo-server,比较基本的就是要搞清楚 schemaresolvers 应该如何定义。

    ?最重要的其实就是

    const server = new ApolloServer({
      typeDefs,
      resolvers
    });
    

    定义好 typeDefs(schema)resolvers,便可快速启动

    • 1、自定义json数据
    • 2、开始定义 Schema 中的 type
    type Article {
      id: Int!
      title: String!
      date: String!
      introduction: String!
      category: String
      isRead: Boolean!
    }
    type ArticleContent {
      id: Int!
      html: String!
    }
    type Category {
      num: Int!,
      name: String!
    }
    type Query {
      fetchArticles: [Article]
      getAllCategories: [Category]
      getArticleContent(id: Int!): ArticleContent
    }
    type Mutation {
      articleIsRead(id: Int!): Article
    }
    

    把 这些 schema 转换为 typeDefs, 需要用到

    const { gql } = require("apollo-server-express");

    module.exports = gql (code...);

    • 3、定义 resolvers
      resolvers 其实是 query 和 mutation 的实现过程。也就是说这里会进行数据库的查询或者是 api 的调用等等,最终放回的结果在这里出来。
    //部分代码:
    const resolvers = {
      Mutation: {
        // 标记已读
        articleIsRead(pre, { id }) {
          const article = articles.find(val => val.id === id);
          if (!article) {
            throw new Error(`找不到id为 ${id} 的文章`);
          }
          if (article.isRead) {
            return article;
          }
          article.isRead = true;
          return article;
        }
      }
    };
    
    • 4、服务器文件
    • 5、启动 node server 运行进行查询

    客户端搭建

    用 vue 来搭建项目

    • 安装?

    yarn add vue-apollo graphql apollo-boost

    • 引入?

    import ApolloClient from "apollo-boost";

    import VueApollo from "vue-apollo";

    Vue.use(VueApollo);

    • 配置支持 .gql || .graphql 文件后缀的 webpack loader
    vue.config.js
    module.exports = {
      // 支持 gql 文件
      chainWebpack: config => {
        config.module
          .rule("graphql")
          .test(/\.(graphql|gql)$/)
          .use("graphql-tag/loader")
          .loader("graphql-tag/loader")
          .end();
      }
    };
    
    • 使用?(在自己新建的.vue页面中使用)
    import gql from "graphql-tag";
    const fetchDataGql = gql`
      {
        fetchArticles {
          id
          title
          date
          introduction
          category
          isRead
        }
        getAllCategories {
          num
          name
        }
      }
    `;
    export default {
      data() {
        return {
          articles: [],
          categories: []
        };
      },
      apollo: {
        fetchData() {
          const _this = this;
          return {
            query: fetchDataGql,
            update(data) {
              _this.articles = data.fetchArticles;
              _this.categories = data.getAllCategories;
            }
          };
        }
      }
    };
    
    • 打开浏览器控制台查看
      在这里插入图片描述
      确实是只有一次请求就能获取到一个页面上所有的资源!在做项目的时候,遇到一个页面要请求多个REST接口,有些接口经常返回了很多页面上用不到的,简单来说就是多余的数据,这样不仅浪费了服务器资源,前后端对接起来也不方便,所以 GraphQL 可以很好地解决这个点。
    展开全文
  • Vue-apollo — 在Vue-cli项目中使用Graphql Vue-apollo — Integrates apollo in your Vue components with declarative queries. 当然我们可以通过直接在url中携带参数直接请求,这样太过麻烦。vue-apollo为我们...
  • Intellisense does not work correctly in .vue files if using custom properties, like vue-apollo. <a href="https://github.com/vuejs/vetur/issues/481">This issue</a> is still a problem for javascript ...
  • apolloVue中的应用

    2018-09-05 16:35:01
    5.在home.vue中调用Apollo import StartQL from '@/api/graphql/Start.gql' import MolistQl from '@/api/graphql/Molist.gql'   export default { components: {},   // filters: {}, ...
  • <div><p>The current vue-apollo tutorial uses Vue stable version 2.x. Now that Vue has reached beta v3, we can update the tutorial to support necessary changes like using Composition API (if required) ...
  • Add a Vue Apollo example

    2020-12-27 18:49:20
    <p>I had some freedom the pick some kind of a mocking client for apollo since <code>vue-apollo</code> doesn't provide one. I also used <code>screen, is that alright or should i redo it using the ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 537
精华内容 214
关键字:

apollovue

vue 订阅