随着现代应用程序变得越来越复杂，REST API 已经不足以满足需要。GraphQL 已经成为前端领域的焦点，尤其是当你需要处理大量数据时，它能够在效率上占据优势。不过，初学者可能会遇到一些困难，因此本文将分享一些学习 GraphQL 时的10个常见问题及解决办法。
1.什么是 GraphQL？
GraphQL 是一种用于构建 API 的查询语言和运行时。GraphQL 旨在替代 REST，具有更高的灵活性和适应性。它允许前端客户端精确指定需要获取的数据，从而有助于减少数据传输，提高应用的性能。
2.与 REST API 相比，GraphQL 有何优势？
相对于 REST API，GraphQL 具有许多优势。其中一些是：
- 灵活性：GraphQL 是一种灵活的语言，可以灵活地处理数据。前端开发人员可以只获取他们需要的内容，而不用通过多个 API 对数据进行逐一筛选。
- 性能：GraphQL 通过大量使用单个 API 负责处理所有请求的语言优化性能。
- 无版本：GraphQL 具有 API 无版本的特点，这意味着我们可以在不更改任何代码的情况下更改我们的 API。
3.如何设置 GraphQL？
以下是一些用于设置 GraphQL 的库：
- Apollo Client：一个强大的 JavaScript 客户端，可以轻松地集成 GraphQL 网络层，以便前端开发人员可以获取和操作数据。
- Relay：由 Facebook 开发的库，可直接集成到现有 React 应用程序中。它旨在提供一种强大的架构，使前端开发人员能够轻松地管理很多数据。
4.如何避免过度查询？
一种常见的 GraphQL 问题是查询过度。由于 GraphQL 具有查询精度，因此前端开发人员有预先指定查询内容的途径。如果前端开发人员不小心并查询了太多数据，则可能会导致过度查询，从而降低应用程序性能。为了避免这种情况，请始终遵循以下准则：
- 最小化查询的数据量。
- 使用其他查询来获取其他数据。
下面是一个查询过度的示例：
-- -------------------- ---- -------
----- -
-------- -- -
----
---
-----
------- -
----
-----
------- -
----
-----
------- -
----
-----
-
-
-
-
-请注意，这个查询将用户的姓名、年龄和电子邮件地址及其所有朋友及其所有朋友的朋友的姓名和电子邮件地址查询出来。这将是一个大查询，可能会拖慢应用的性能。
最好的做法是进行两次查询，如下所示：
-- -------------------- ---- -------
----- -
-------- -- -
----
---
-----
------- -
----
-----
-
-
-这是第一次查询，它将返回用户的姓名、年龄和电子邮件地址，以及他们的所有朋友的姓名和电子邮件地址。
query {
user(id: 7) {
friends {
name
email
}
}
}这是第二次查询，它将只返回 ID 为 7 的朋友的姓名和电子邮件地址。
5.如何处理嵌套查询？
GraphQL 允许嵌套查询。在处理嵌套查询时，请使用以下最佳实践：
- 确定如何为每个嵌套级别处理查询，并确定何时停止进行查询。
- 避免在每个嵌套层次上重复数据。
- 确定可用于每个嵌套级别的数据列表。
以下是一个处理嵌套查询的示例：
-- -------------------- ---- -------
----- -
-------- -- -
----
---
-----
------- -
----
-----
------- -
----
-----
-
-
-
-在这个查询中，我们想获取用户的姓名、年龄和电子邮件地址，以及每个朋友的姓名、电子邮件和他们的每个朋友的姓名和电子邮件。这个查询看起来很深，但实际上它只涉及两个对象：用户和朋友。因此，我们可以开始处理第一嵌套层次。
第一嵌套层次是用户。我们处理这个查询，直到我们获得了用户的姓名、年龄和电子邮件地址。接下来，我们开始处理下一个嵌套级别。
第二嵌套级别是用户的朋友。我们使用之前找到的用户 ID 来寻找用户的朋友，并检索他们的姓名和电子邮件地址。使用之前的查询结果，我们现在可以访问朋友的 ID，即我们可以继续查找朋友的朋友。这个过程会一直下去，直到我们找到所有用户的朋友的姓名和电子邮件地址。
在此过程中，请确保遵循上述最佳实践，以确保您在请求的数据中保持清洁和有效。
6.如何解决跨域请求问题？
当您想从浏览器中的服务器请求数据时，跨域请求问题可能会出现。一般情况下，GraphQL 和 REST API 不跨域，这部分是由于 GraphQL 不会将完整的网址发送到服务器。它发送一个 HTTP POST 请求，该请求的 URL 是您在应用程序中定义的 URL。
如果出现跨域问题，请使用 CORS（跨域资源共享）来解决。CORS 允许您通过将特定 HTTP 头文件发送到服务器来允许从其他特定域发出的请求访问当前域中的资源。请注意，服务器必须返回正确的 CORS 头文件才能让浏览器正常工作。
以下是一个在 Node.js 中启用 CORS 的示例：
const express = require('express')
const cors = require('cors')
const app = express()
app.use(cors())
// 这里写入路由和 GraphQL 逻辑7.如何处理错误？
GraphQL 处理错误有其自身的方式。当查询存在问题时，将抛出错误。以下是一些 GraphQL 可能出现的错误以及它们在浏览器控制台输出的方式：
- 语法错误：如果查询字符串有语法错误，则会在控制台中看到类似于“未预期的名称”或“意外的字符”等错误消息。
- 运行错误：如果查询（或代码）与服务器不兼容，您将看到类似于“类型错误”或“未定义的函数”等错误消息。
对于这些错误，请确保您在浏览器控制台中检查错误提示。如果有可用的调试信息，请使用它来查找错误并修复它们。
8.如何在查询参数中使用变量？
GraphQL 的查询参数可以采用变量。变量可以在查询中使用，以便重复使用相同的查询，并仅更改可以动态生成的值。以下是一个使用变量的示例：
query($id: ID!) {
user(id: $id) {
name
age
email
}
}在这个查询中，我们定义了一个名为“id”的变量，并将其视为 ID 类型。我们将该变量发送到服务器以获取物品的详细信息。请注意，在查询中，我们使用了 $id 变量，而没有实际提供其值。我们将该值通过发送变量对象来提供：
{
"variables": {
"id": 5
},
"query": "query GetUser($id: ID!) { user(id: $id) { name age email } }"
}在该对象中，我们将变量“id”的值设置为 5。
9.如何使用 GraphQL 的 subscriptions？
GraphQL 具有 subscriptions，它是一种用于在服务器上创建订阅的语言。您可以使用该功能实时更新应用程序中的数据。以下是一个使用 subscriptions 的示例：
subscription {
greeting
}在这个 subscriptions 中，我们将订阅“greeting”事件。在后端，我们将为事件创建一个发布器，以便任何时候任何用户更新时，向所有在线用户自动发送更新。
以下是一个在服务器上创建一个订阅的示例：
-- -------------------- ---- -------
------ - ------ - ---- ---------------
----- ------ - --- --------
----- -------------- - ----------
------ ------- -
------ - -- ------
--
--------- - -- ------
--
------------- - -- ------
--------- -
---------- -- -- -------------------------------------
--
--
-10.如何分页数据？
分页数据可能是 GraphQL 开发的一个挑战。以下是一个处理分页数据的示例：
query ($first: Int!, $offset: Int!) {
allUsers(limit: $first, offset: $offset) {
id
name
email
}
}在这个查询中，我们想按数量限制用户和按偏移量获取用户。我们使用 $first 和 $offset 变量来限制和偏移查询。
请注意，这只是一种在 GraphQL 中处理分页数据的方式，也许还有其他处理方式。
结论
在本文中，我们讨论了使用 GraphQL 时的一些常见问题及其解决办法。其中包括：什么是 GraphQL、与 REST API 相比的优势、如何设置 GraphQL、避免查询过度、嵌套查询、处理跨域请求、处理错误、在查询参数中使用变量、使用 GraphQL 的订阅和分页数据。通过这些常见问题的解决办法，我们可以获得更好的前端开发经验，并使我们的应用程序更加高效和健壮。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/672bb97addd3a70eb6d34677