前言
随着现代 Web 应用的日益复杂，前端代码也变得越来越庞大。同时，前后端分离的趋势也促使前端代码变得越来越复杂。为了解决这个问题，GraphQL 应运而生。GraphQL 是一个强类型的查询语言，用于实现 API 的查询和变更。与 RESTful API 相比，GraphQL 具有更好的性能、可伸缩性和灵活性。
然而，GraphQL 也存在一些问题。GraphQL 查询语句通常非常庞大，尽管可以使用工具解决这些问题，但这些工具通常仅仅是把查询语句存储在另一处。因此，我们需要一种更好的方式来管理 GraphQL 查询语句。
这时，@amazee/persistgraphql 就出现了。@amazee/persistgraphql 是一个能够使用 GraphQL 查询语句自动生成查询 ID 的工具。本文将介绍如何使用 @amazee/persistgraphql。
安装
@amazee/persistgraphql 的安装非常简单。只需要执行以下命令即可：
npm install @amazee/persistgraphql
使用
使用 @amazee/persistgraphql 需要两个步骤。第一步，需要在 GraphQL Schema 中添加 PersistedQueryMiddleware。第二步，需要在客户端代码中添加 PersistGraphQL。
第一步：添加 PersistedQueryMiddleware
-- -------------------- ---- ------- ----- ------- - ------------------- ----- - ----------- - - --------------------------- ----- - -------------------- - - --------------------------------- ----- - ------------------------- ------------------- - - ---------------------------------- ----- -- - -------------- -- -- ------- ------ -- ----- -------- - ----------------------------------- -------- -- -- ------- ------ ----- --------- - --- ----- ------ - ---------------------- --------- --------- --- -- -- ------------------------ ----- ------------ - ----- -- - ----- ------ - ------------------ ----- ---- - ---------------------------- ------------------- ------ ------------------- -- ----- --------------------- - - ------ --- ------ ------------ -- ----- ---------- - -------------------------- ------- --------------------- --- ----- --- - ---------- ------------------- ----------- ------------- ------- ----展开代码
在上面的代码中，我们首先读取 GraphQL Schema 文件，并根据该文件创建 GraphQL Schema。然后，我们使用 PersistedQueryMiddleware 创建一个 Express 中间件，并将其附加到 /graphql 路由上。这里我们使用 SHA-256 算法作为哈希函数，将查询语句转换为哈希值。最后，我们定义了一个 GraphQLHTTP 服务，提供 GraphQL API。
第二步：添加 PersistGraphQL
现在，我们需要客户端代码中添加 PersistGraphQL。具体来说，我们需要在创建 ApolloClient 时添加 PersistGraphQL：
-- -------------------- ---- ------- ------ - ------------------------ - ---- ---------------------------------------- ------ - ------------- -------------- -------------- - ---- ----------------- -- -- ------------------ ----- ---- - -------------------------- ----------------------- ----- ------------- ----- -- - ----- ------ - ------------------ ----- ---- - ---------------------------- ------------------- ------ ------------------- -- --- -- -- ------------ ----- ------ - --- -------------- ----- ------ --- ---------------- ---- ----------- --- ---------------- --------------- ---------------- ---- -- ------------------ -------------------------------- --展开代码
在上面的代码中，我们首先使用 createPersistedQueryLink 创建了一个 PersistedQueryLink，并将其添加到 ApolloClient 中。在这里，我们也使用 SHA-256 算法作为哈希函数，将查询语句转换为哈希值。然后，我们创建了一个 ApolloClient，并将其传递给 ApolloProvider。
现在，我们已经成功地使用了 @amazee/persistgraphql。
总结
本文介绍了如何使用 @amazee/persistgraphql。使用 @amazee/persistgraphql 可以大大简化 GraphQL 查询语句的管理。我们首先在 GraphQL Schema 中添加了 PersistedQueryMiddleware，并在客户端代码中添加了 PersistGraphQL。通过这两个步骤，我们可以自动生成查询 ID，从而更好地管理 GraphQL 查询语句。
示例代码
本文使用的示例代码可以在 GitHub 上下载。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/93095
