使用 GraphQL 查询
讲师：Vue Msatery Team
口袋资源独家Vue Mastery付费课程，独家中英文字幕，配套资料齐全！
用不到1/10的价格，即可享受同样的高品质课程，且可以完全拥有，随时随地都可以任意观看和分享。
GraphQL 简介
使用传统 REST API 存在一个问题：对于给定的端点，我们总是会得到相同的服务器响应。
这种缺乏灵活性会导致两个同样恼人的问题：
- 过度获取数据——当我们得到大量响应但只需要其中的一小部分时。
- Under-fetching——当我们执行第一次调用只是为了接收我们需要的一小部分时。这可能会导致链接 API 调用并获取更多不必要的数据以试图获得我们需要的数据。
如果我们可以根据我们提出的请求来调整我们得到的响应，并在我们需要的时候只获取我们需要的东西，那不是很好吗？幸运的是，这可以通过 GraphQL 实现，这是一种构建和查询 API 的现代方法。
在 Vue Mastery 的 GraphQL 课程中，我们将一起创建一个 Vue + GraphQL 应用程序，以获得使用这个强大的现代工具的信心。
了解其独特优势
简单来说，GraphQL 是一种描述如何请求数据的语法，一般用于从服务器加载数据。
GraphQL 的核心特性和最大优势之一是您只获得您请求的数据。与REST API不同，API 调用响应的形状是在服务器上定义的，对于 GraphQL，这是在客户端完成的。这使我们可以发出单个请求来获取所有必需的信息，而不是进行后续的 REST API 调用。
为了更好地理解这种差异，让我们看一个示例，我们将比较使用 REST 和 GraphQL API 从 GitHub 获取数据。
使用 REST 获取
想象一下，我们想要获取某个用户的存储库列表，并检查这些存储库中使用了哪些编程语言。
使用 REST API，首先我们将调用 for /users/:username/repos，这将为我们提供一个存储库列表：
// fetch with ==> /users/NataliaTepluhina/repos
// and get this response:
[
{
"id": 328931302,
"name": "api-wheel-demo",
"full_name": "NataliaTepluhina/api-wheel-demo",
"languages_url": "https://api.github.com/repos/NataliaTepluhina/api-wheel-demo/languages",,
...
},
{
"id": 243311967,
"name": "apollo-presentation",
"full_name": "NataliaTepluhina/apollo-presentation",
"languages_url": "https://api.github.com/repos/NataliaTepluhina/apollo-presentation/languages",
...
}
]
（请注意，我没有显示整个 repo 对象，因为它们是具有 60 多个字段的巨大对象，其中一些是嵌套的。）
但是，如果我们想知道每个 repo 中使用的编程语言怎么办？查看数据，我们只有用于languages_url检索语言的链接。这意味着我们需要采取另一个步骤并遍历存储库列表，为每个存储库获取语言，使用languages_url.
// fetch with ==> /repos/NataliaTepluhina/api-wheel-demo/languages
// and get this response:
{
"Vue": 1339,
"JavaScript": 1167,
"HTML": 611
}
// fetch with ==> /repos/NataliaTepluhina/apollo-presentation/languages
// and get this response:
{
"Vue": 3925,
"JavaScript": 2887,
"HTML": 605
}
使用GraphQL获取
那么这与 GraphQL 有何不同？使用它，我们发送一个查询字符串，指定我们要获取的字段。该字符串在服务器上进行解释，将 JSON 返回给客户端。
（我们在图片中看到的是GraphiQL— 一个可以让您检查 GraphQL API 的浏览器。）
如您所见，仅通过一个请求，我们就获取了所需的一切，而没有任何额外的、过度获取的数据！
GraphQL 的另一个好处是它使用强类型系统来描述您可以从 GraphQL 服务器获取的所有可能数据。这组类型称为GraphQL 模式，可以在 GraphiQL 之类的 UI 中进行检查。强类型使 GraphQL 不易出错，可以在编译时进行验证，并且可以使用 IDE 工具进行验证和自动完成。
对课程有什么期望
既然我们开始了解 GraphQL 如何提供查询数据的独特能力，那么我们如何在前端使用它呢？我们可以使用 POST 请求，但使用 GraphQL 客户端之一更方便。
在本课程中，我们将专注于Apollo Client及其 Vue 集成：VueApollo。我们将学习如何在服务器上获取和更改数据，如何使用实时订阅，甚至学习如何用内置的 Apollo Client 缓存替换 Vuex 等本地状态管理工具。
要充分利用本课程，您需要对 Vue 本身和 Vue CLI 有扎实的了解，并对 Composition API 有基本的了解。因此，如果您准备好开始自信地将 GraphQL 插入您的 Vue 应用程序，我们将在下一课见。
