在现代前端开发中，前端应用往往需要和后端接口进行交互。GraphQL 是一种新型的 API 框架，虽然它已经有一段时间了，但是很多开发者仍然不是很熟悉，尤其是在前端领域。在使用 GraphQL 进行数据交互的过程中，我们经常需要对返回的数据进行统一化的处理和缓存，这时候就需要使用到 graphql-normalizer 这个 NPM 包。
graphql-normalizer 简介
graphql-normalizer 是由 Apollo 开发的一款用于对 GraphQL 查询返回的 JSON 数据进行规范化处理的工具包，它可以将 GraphQL 查询结果从多种不同的结构转换为一个规范化的、扁平化的对象，遵循 Relay 规范。相比之下，原始的 GraphQL 响应往往包含了大量的嵌套结构，容易导致冗余数据和性能问题。
graphql-normalizer 还支持对 GraphQL 查询结果进行缓存和比较，以减少网络带宽和提高程序效率。如果你正在构建一个 React 应用，使用 Apollo Client 来管理后端数据，那么 graphql-normalizer 将是一个不可或缺的工具。
安装与使用
首先，你需要在你的项目中安装 graphql-normalizer：
npm install graphql-normalizer --save
接下来，你需要导入 graphql-normalizer：
import normalize from 'graphql-normalizer';
然后，你可以使用 normalize 函数对 GraphQL 查询结果进行规范化。假设你的查询如下：
-- -------------------- ---- -------
----- ------- -
----- -
--
----
---------
---- -
--
----
-
-
-如果你直接将这个查询的结果存储为一个对象，那么它的结构将类似于这样：
-- -------------------- ---- -------
-
------- -
-------- -
-
----- ----
------- ----- ---
------------ ------
------- -
----- ----
------- -------
-
--
-
----- ----
------- ----- ---
------------ -----
------- -
----- ----
------- -----
-
-
-
-
-这个结构很难处理，并且很可能会导致冗余数据。使用 graphql-normalizer，你可以将它转化为一个扁平化的、规范化的对象：
const normalizedData = normalize(data, {
// 定义查询名称
query: GetTodo,
});
console.log(normalizedData.result); // [ 'Todo:1', 'Todo:2' ]
console.log(normalizedData.entities); // { Todo: { '1': { id: '1', text: 'Todo 1', completed: false, user: 'User:1' }, '2': { id: '2', text: 'Todo 2', completed: true, user: 'User:2' } }, User: { '1': { id: '1', name: 'Alice' }, '2': { id: '2', name: 'Bob' } } }这个对象的结构更加清晰，具有更高的可读性和可维护性。你可以在你的应用中直接使用它，而不需要对原始结果进行额外的处理。
缓存
除了对查询结果进行规范化处理，graphql-normalizer 还支持对查询结果进行缓存。这样，当你发起一个新的查询时，你可以优先使用缓存中的数据，而不必向服务器重新请求数据。
首先，你需要定义一个用于存储缓存数据的对象：
const cache = {};每当你发起一个新的查询请求时，你可以先检查缓存中是否已经存在该查询的结果：
-- -------------------- ---- ------- -- ------------------ - -- ---------- - ---- - -- ------------------ ----- -------- - ----- ---------- - ----- --- -- ----------------------------- ----- -------------- - ------------------------ - ----- --- ---------------- - --------------- -
通过将规范化后的数据存储在缓存对象中，你可以在之后的查询中直接使用它们，而不必重新请求服务器。这将大大提高你的应用的性能和网络效率。
总结
graphql-normalizer 是一个非常有用的 NPM 包，它可以帮助你对 GraphQL 查询结果进行规范化处理和缓存。使用它，你可以避免冗余数据和网络性能问题，提高应用的效率和性能。如果你的应用需要与 GraphQL 接口交互，那么你一定要尝试使用 graphql-normalizer。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055a2181e8991b448d7c37