GrowingIO 前端团队对于 GraphQL 的实践总结

前言

社区里已有很多有关 GraphQL 入门和原理的文章，GraphQL 和 Apollo Client 的官方网站也有较为详细的介绍。相对于 RESTful API（简称 REST)，社区也从各个方面分析了 GraphQL 的优劣利弊。本文主要是从前端角度出发，在如今前后端开发分离盛行的前提下，分享一些我们如何利用社区中热门的工具提高开发效率和工程质量的经验，希望对已经决心入坑 GraphQL 的朋友们有一些帮助。

GraphQL Playground

第一次接触 GraphQL 的时候一定会从官方文档里了解到 GraphQL Server 所提供的 Playground。
Playground 是一个完整的浏览器端 GraphQL IDE， 包括 Documentation， Schema 和一个可以编写和测试 GraphQL 请求的编辑器。

对于使用 GraphQL 的开发团队， Playground 基本可以代替如 Swagger 之类的的 API 文档和如 Postman 之类的的请求模拟工具。是一个较完备的开发手册，并且优点是零成本使用， 并且有团队在维护和迭代。GraphQL 社区绝大多数对于GraphQL Server的实现都会内置 Playground。

Apollo Client Devtool

Apollo Client Devtool 是 Apollo Client 提供的一款 Chrome 插件，可以在浏览器的 Console 中捕捉页面发送的 Query 和 Mutation，并且提供了编辑，修改和重试这些请求，还有最重要的查看 GraphQL Client 缓存的功能。
因为所有的 GraphQL 都是发送给统一的路径，Query Body 也是以字符串的形式发送，使得请求的可读性很差， Apollo Client Devtool 相较于通过传统 Network 的方式做了优化。
以上两个工具可以说是入门必备，类似我们前后端对接 Restful Api 时我们会用到的工具。GraphQL 依赖 Schema 提供了更多的提效工具。

GrahpQL VS Code Plugin

Visual Studio Code&#