解决 GraphQL 查询字符串过长的问题-JavaScript中文网-JavaScript教程资源分享门户

最近我们团队的前端在使用 GraphQL 时遇到了一个问题：查询字符串过长导致后端无法正常解析请求。这是一个比较常见的问题，但是解决方法却各不相同。经过研究和实践，我们发现了一些比较好的解决方法，并希望和大家分享。

问题分析

首先，要解决这个问题，我们需要先了解一个背景：GraphQL 查询是由客户端发起的，包含了客户端需要的数据。这个查询是一段字符串，有时候会非常长，尤其是当我们需要查询的字段越来越多时。例如：

-- -------------------- ---- -------
----- -
  ---- -
    --
    ----
    -----
    -----
    ------- -
      ----
      ------
      -------
    -
    --------- -
      ------
      ------
      ---------
      -------
    -
    ---
  -
-

如果我们需要查询的字段非常多，那么这个查询字符串可能会非常长，超过了常见的 URL 长度限制，例如 Firefox 和 Safari 的长度限制分别是 65536 和 8000，这会导致查询失败，无法从后端获取数据。

解决方法

那么，我们该如何解决这个问题呢？以下是我们总结的几种方法：

1. 使用分页查询

我们可以将查询结果分页返回，这样就可以避免查询字符串过长的问题。例如，我们可以先查询第一页的数据，然后再根据需要，去查询后面的页数。这种方式需要后端实现支持，前端也需要对分页进行处理。

query {
  users(page: 1,perPage: 10) {
    id
    name
  }
}

2. 使用 Fragment

我们可以使用 Fragment 来将查询字符串拆分成多个小的查询，然后再将它们合并起来。这种方式避免了查询字符串过长的问题，同时也使代码更加易读易维护。

-- -------------------- ---- -------
-------- -------- -- ---- -
  --
  ----
  -----
  -----
  ------- -
    ----
    ------
    -------
  -
-

-------- ------------- -- ---- -
  --------- -
    ------
    ------
    ---------
    -------
  -
-

----- -
  ---- -
    -----------
    ----------------
  -
-

3. 使用 ID 查询

我们可以使用 ID 查询来获取指定的数据，这样就可以避免查询字符串过长的问题。这种方式需要后端支持，前端也需要将 ID 保存下来。

query {
  user(id: "123") {
    id
    name
  }
}

4. 使用 POST 请求

我们可以使用 POST 请求来发送查询字符串，这样就可以避免 URL 长度限制。这种方式需要后端支持，前端也需要将查询字符串放在请求体中。

POST /api/graphql HTTP/1.1
Content-Type: application/json

{
  "query": "{ user { id name } }"
}

总结

以上是我们总结的几种解决 GraphQL 查询字符串过长的问题的方法。不同的场景需要采用不同的方法，通常情况下，使用 Fragment 是比较好的选择，因为它不仅避免了查询字符串过长的问题，同时也提高了代码的可读性和可维护性。希望本篇文章能为大家解决 GraphQL 查询字符串过长的问题提供一些借鉴和帮助。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/646365fa968c7c53b046efab