GraphQL 和 Apollo 是什么

GraphQL

GraphQL 是一种针对 Graph（图状数据）进行查询特别有优势的 Query Language（查询语言），所以叫做 GraphQL。

它跟 SQL 的关系是共用 QL 后缀，就好像「汉语」和「英语」共用后缀一样，但他们本质上是不同的语言。GraphQL 跟用作存储的 NoSQL 没有必然联系，虽然 GraphQL 背后的实际存储可以选择 NoSQL 类型的数据库，但也可以用 SQL 类型的数据库，或者任意其它存储方式（例如文本文件、存内存里等等）。

Apollo

场景

技术：React + Redux

如果我有这么一个评论列表，我们要怎么渲染呢？

第一步：Mount 阶段执行 dispatch 通知 Redux
第二步：Redux 执行 action 并更新 state
第三步：组件收到 props 进行渲染
第四步：当用户修改或者删除评论时，重复一 ~ 三步

产品要求

如果产品要求你：当鼠标 hover 到头像时，显示一下此用户的详细信息。

我们肯定会想，请求接口时，后端能不能把用户的详细信息放在每一个对象中。

缺点思考

但是这样肯定不行，因为评论列表中有很多评论都是同一个用户，这么返回数据的话，重复率过高，数据量太大，浪费资源。

我们可以当鼠标 hover 上去的时候，再根据用户 id 去请求对应的用户信息，并把这些请求到的用户信息，通过一个 Map ，并以 id -> detail 键值对的形式去做缓存。

Declarative（声明式） vs Imperative（命令式）

但是在这样的场景下，我们为了达到产品的要求，我们写了太多命令式的代码了，我们还要去考虑缓存，而这些都是 redux 做不到的事情。我们需要把注意力集中在 获取数据 上~

import { graphql } from 'react-apollo';

const CommentsQuery = gql`
    query Comments() {
        comments {
            id
            content
            creator {
                id
                name
            }
        }
    }
`;

export default graphql(CommentsQuery)(Comments);

而是委托 Apollo 帮我们处理这些所有事情，它会称职的帮我们在需要的时候发送请求获取数据，然后将 data 映射到 Comments 的 props 中交给我们。

我们可以使用 GraphQL，他就类似于 Redux 中的 connect，它可以作为高阶组件来用，并把查询语句绑定到评论组件上。就是这么简单，这就是委托 Apollo 来帮我们处理数据，然后将获取到的 data 传递到 props 上给我们

不止获取哦我们也可以修改数据

const updateComment = gql`
    mutation UpdateComment($id: Int!, $content: String!) {
      UpdateComment(id: $id, content: $content) {
        id
        content
        gmtModified
      }
    }
`;

class Comments extends React.Component {
    // ...
    onUpdateComment(id, content) {
        this.props.updateComment(id, content);
    }

    // ...
}

export default graphql(updateComment)(graphql(CommentsQuery)(Comments));

当我们数据更新时，apollo-client 内部会做数据的修改，涉及到性能优化~

GraphQL 在后端的应用

应用

GraphQL 近几年在后端的运用也非常多~

后端实践了下，GraphQL 主要在协议层，具体数据查询还要重新写，还要结合 dataloader 避免低效查询，对后端要求还是比较高的，也需要造不少轮子。

不过也反过来约束了后端开发的模式，对后端数据构造我觉得也是个提升。

Apifox 调试 GraphQL 接口

我们可以使用 API 调试工具 Apifox 调试一下 GraphQL 接口，非常方便~

Apifox

官网：https://apifox.com/

Apifox 是 API 文档、API 调试、API Mock、API 自动化测试 API 一体化协作平台。

它是更先进的 API 设计/开发/测试工具。

Apifox = Postman + Swagger + Mock + JMeter 。

个人体验感是非常不错的，推荐给大家。

GraphQL 和 Apollo 是什么