GraphQL 是一种用于 API 的查询语言，它提供了一种更有效地获取数据的方式。在 GraphQL 中，客户端可以明确地指定需要的数据，而不必像 REST API 一样获取整个资源。然而，当我们在使用 GraphQL 时，有时候还需要执行第二次解析才能获取到我们需要的数据。本文将介绍如何解决这个问题。
问题描述
假设我们有一个查询，需要从服务器获取一些数据，然后在客户端上进行处理。我们可以使用 GraphQL 查询来获取这些数据。下面是一个示例查询：
-- -------------------- ---- -------
----- -
----- -
--
-----
------ -
----
-
-
-在这个查询中，我们要获取所有文章的 id、title 和 author 的 name。服务器将返回以下数据：
-- -------------------- ---- -------
-
------- -
-------- -
-
----- --
-------- ----------
--------- -
------- ------
-
--
-
----- --
-------- --------
--------- -
------- ------
-
-
-
-
-现在，我们需要在客户端上对这些数据进行处理。我们可以使用一个函数来解析数据：
function parsePosts(postsData) {
return postsData.map(post => ({
id: post.id,
title: post.title,
authorName: post.author.name
}));
}这个函数将返回一个包含文章 id、title 和 author 的 name 的数组。现在，我们可以使用这个函数来处理我们的数据：
const postsData = getPostsDataFromServer(); const posts = parsePosts(postsData);
在这个例子中，我们需要执行第二次解析才能获取到我们需要的数据。
解决方案
为了解决这个问题，我们可以使用 GraphQL 的 fragments。fragments 允许我们定义一组字段，然后在查询中引用这些字段。这样，我们就可以在客户端上直接使用查询返回的数据，而无需执行第二次解析。
下面是一个使用 fragments 的示例查询：
-- -------------------- ---- -------
----- -
----- -
-------------
-
-
-------- ---------- -- ---- -
--
-----
------ -
----
-
-在这个查询中，我们使用 fragment 定义了一组字段 PostFields，然后在 posts 查询中引用了这些字段。服务器将返回以下数据：
-- -------------------- ---- -------
-
------- -
-------- -
-
----- --
-------- ----------
--------- -
------- ------
-
--
-
----- --
-------- --------
--------- -
------- ------
-
-
-
-
-现在，我们可以直接使用查询返回的数据。我们不再需要执行第二次解析，而是可以直接使用以下代码来处理数据：
const postsData = getPostsDataFromServer();
const posts = postsData.map(post => ({
id: post.id,
title: post.title,
authorName: post.author.name
}));总结
在本文中，我们介绍了如何使用 GraphQL 的 fragments 解决查询时无需再执行第二次解析的问题。使用 fragments 可以让我们在客户端上直接使用查询返回的数据，从而提高效率。希望本文对您有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65ffa4d4d10417a222adc4c2