GraphQL 结合Apollo 以及vue的例子

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，比较基本的就是要搞清楚 schema 和 resolvers 应该如何定义。

?最重要的其实就是

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 可以很好地解决这个点。