VueMastery – Querying with GraphQL

使用 GraphQL 现代化 Vue 应用程序查询、操作和存储数据的方式。

GraphQL 简介
使用传统 REST API 存在一个问题：对于给定端点，我们总是得到相同的服务器响应。

缺乏灵活性会导致两个同样令人烦恼的问题

过度获取数据——当我们得到巨大的响应但只需要其中的一小部分时。
获取不足——当我们执行第一次调用时仅收到一小部分我们需要的内容。这可能会导致链接 API 调用并获取更多不必要的数据以尝试获取我们需要的数据。
如果我们能够根据我们发出的请求来调整我们得到的响应，并在需要时只获取我们需要的内容，那不是很棒吗？幸运的是，GraphQL 可以实现这一点，这是一种构建和查询 API 的现代方法。

在 Vue Mastery 的 GraphQL 课程中，我们将一起创建一个 Vue + GraphQL 应用程序，以获得使用这个强大的现代工具的信心。

了解其独特优势
简而言之，GraphQL 是一种描述如何请求数据的语法，通常用于从服务器加载数据。

GraphQL 的核心功能之一和最大的好处是您只能获得所需的数据。与 REST API 不同，在 REST API 中，API 调用响应的形状是在服务器上定义的，而 GraphQL 则是在客户端完成的。这使我们能够发出单个请求来获取所有必需的信息，而不是进行后续的 REST API 调用。

为了更好地理解这种差异，让我们看一个示例，在该示例中我们将比较使用 REST 和 GraphQL API 从 GitHub 获取数据。

使用 REST 获取
想象一下，我们想要获取某个用户的存储库列表，并检查这些存储库中使用了哪些编程语言。

使用 REST API，首先我们将执行对 /users/:username/repos 的调用，这将为我们提供存储库列表

使用 GraphQL 获取
那么这与 GraphQL 有什么不同呢？使用它，我们发送一个查询字符串，指定我们想要获取的字段。该字符串在服务器上解释，并将 JSON 返回给客户端。

（我们在图中看到的是 GraphQL – 一个可让您检查 GraphQL API 的浏览器。）

正如您所看到的，仅通过一个请求，我们就获取了所需的所有内容，而没有任何额外的过度获取的数据！

GraphQL 的另一个好处是它使用强类型系统来描述您可以从 GraphQL 服务器获取的所有可能的数据。这组类型称为 GraphQL 架构，可以在 GraphQL 等 UI 中进行检查。强类型使 GraphQL 不易出错，可以在编译时进行验证，并且可以使用 IDE 工具进行验证和自动完成。

对课程的期望
既然我们开始了解 GraphQL 如何提供查询数据的独特能力，那么我们如何在前端使用它呢？我们可以使用 POST 请求，但使用 GraphQL 客户端之一更方便。

在本课程中，我们将重点关注 Apollo 客户端及其 Vue 集成：VueApollo。我们将学习如何在服务器上获取和更改数据，如何使用实时订阅，甚至学习如何使用内置的 Apollo 客户端缓存替换 Vuex 等本地状态管理工具。

为了充分利用本课程，您需要对 Vue 本身和 Vue CLI 有深入的了解，并对 Composition API 有基本的了解。因此，如果您准备好开始自信地将 GraphQL 插入您的 Vue 应用程序，我们将在下一课中见到您。

Last updated 6/2023
MP4 | Video: h264, 1920×1080 | Audio: AAC, 44.1 KHz, 2 Ch
Genre: eLearning | Language: English | Duration: 11 Lessons (1h 39m) | Size: 1.1 GB

Use GraphQL to modernize how your Vue app queries, manipulates, and stores data.

Intro to GraphQL
There’s a problem with using traditional REST APIs: we always get the same server response for a given endpoint.

This lack of flexibility can lead to two equally annoying issues

Over-fetching data — when we get a huge response but only need a small piece of it.
Under-fetching — when we perform the first call only to receive a small piece of what we need. This can lead to chaining API calls and fetching even more unnecessary data in an attempt to get what we need.
Wouldn’t it be great instead if we could shape the response we get with the request we make, and fetch only what we need, when we need it? Fortunately that is possible with GraphQL, a modern way to build and query APIs.

In Vue Mastery’s GraphQL course, we will be creating a Vue + GraphQL app together to gain the confidence of using this powerful, modern tool.

Understanding its unique benefits
In a nutshell, GraphQL is a syntax that describes how to ask for data, and it’s generally used to load data from the server.

One of the core features and the biggest benefits of GraphQL is that you get only the data you asked for. Unlike with a REST API, where the shape of the API call response is defined on the server, with GraphQL this is done on the client side. This allows us to make a single request to fetch all required information and nothing else, instead of making subsequent REST API calls.

To understand this difference better, let’s look at an example where we’ll compare fetching data from GitHub using both REST and GraphQL APIs.

Fetching with REST
Imagine that we want to fetch a list of repositories of a certain user and check what programming languages are used in those repos.

With a REST API, first we would perform a call for /users/:username/repos, which would get us a list of repositories

Fetching with GraphQL
So how is this different with GraphQL? Using it, we send a query string that specifies the fields we want to fetch. This string is interpreted on the server, which returns JSON back to the client.

(What we’re looking at in the image is GraphiQL — an explorer that lets you examine the GraphQL API.)

As you can see, with only one request we fetched everything we needed without any additional, over-fetched data!

An added benefit of GraphQL is that it uses a strong type system to describe all of the possible data that you can fetch from the GraphQL server. This set of types is known as a GraphQL schema and can be examined in a UI like GraphiQL. Strong types make GraphQL less error-prone, can be validated during compile time, and can use IDE tools for validation and autocompletion.

What to expect from the course
Now that we are starting to understand how GraphQL provides a unique ability to query our data, how do we work with it on the frontend? We could use POST requests, but it’s more convenient to use one of the GraphQL clients.

In this course, we will be focusing on Apollo Client and its Vue integration: VueApollo. We’ll learn how to fetch and change data on the server, how to work with real-time subscriptions, and even learn how you can replace your local state management tool like Vuex with a built-in Apollo Client cache.

To get the most out of this course, you’ll need a solid understanding of Vue itself and the Vue CLI, as well as a fundamental understanding of the Composition API. So if you’re ready to start feeling confident plugging GraphQL into your Vue apps, I’ll see you in the next lesson.