介绍
GraphQL 提供了一种富有表现力的语言来精确指定您想要获取的资源和数据。然而，这可能会导致一个问题，即客户端发送的查询文本负载比 REST 等效负载大数百倍。
本指南将演示如何使用自动持久查询来解决此问题。上一篇指南《如何在 React 应用中设置 GraphQL》介绍了如何使用 Apollo Client 使用 GraphQL 设置新的 React 项目。本指南以您在那里学到的知识为基础。在这里，您将学习如何通过发送较小的 GraphQL 请求来提高网络性能。
持久查询的工作原理
通常，当您通过 HTTP 发出 GraphQL 请求时，您会 POST 大量文本，指定所需的所有资源和字段。如果有大量用户和资源，这可能会导致网络性能问题。Apollo 客户端和服务器实现了一项称为“自动持久查询”的功能。此功能通过对查询进行哈希处理来工作，即对大型查询文本应用函数以生成一个更小的数学链接值 - 哈希值。然后将这个较小的哈希值而不是大型查询文本发送到服务器。
Apollo Server 首次收到哈希时，会通知客户端发送整个查询文本。客户端发送完整的查询文本，允许服务器将哈希与查询文本关联起来。对于所有未来相同类型的查询，即使来自不同的用户，客户端也会发送小哈希，服务器会查找哈希并知道正在请求哪个，而无需通过网络明确发送。这样，可以减少大量网络流量。
注意：持久查询不是GraphQL 规范的一部分。事实上，该规范并没有规定使用什么传输方法来发送请求和传递响应。该规范仅描述了查询语言和执行引擎。这意味着并非所有服务器实现都支持自动持久查询。Apollo服务器无需任何配置即可提供此功能。但是，如果您使用graphql-dotnet作为服务器，则需要添加第三方包（如GraphQL.PersistedQueries）以添加对自动持久查询的支持。
在客户端中启用自动持久查询
如果您正在使用 Apollo Server 和 Apollo Client，则唯一需要更新的是您的客户端。为此，请添加link，它可以自定义从 graphQL 查询和突变到后端的数据流。
运行以下命令来安装持久查询链接：
yarn add apollo-link-persisted-queries
然后将src/ApolloClient/client.js文件更新为：
import { createPersistedQueryLink } from "apollo-link-persisted-queries";
import { ApolloClient, ApolloLink, InMemoryCache } from "@apollo/client";
import { HttpLink } from "apollo-link-http";
const httpLink = new HttpLink({
uri: "https://48p1r2roz4.sse.codesandbox.io",
});
export const client = new ApolloClient({
cache: new InMemoryCache(),
link: ApolloLink.from([createPersistedQueryLink(), httpLink]),
});
您已更新链接链，将createPersistedQueryLink()放在httpLink之前。持久链接不能是列表中的最后一个。无需进行其他更改。最后，启动 React 并进行查询。如果服务器之前见过您的查询，则请求负载将如下所示：
{
"operationName":"GetExchangeRates",
"variables":{},
"extensions":{
"persistedQuery": {
"version":1,
"sha256Hash":"a14a78df14b12400059895968ef375948d2ed45da8748495d7f75368a4ac2bd1"
}
}
}
结论
免责声明：本内容来源于第三方作者授权、网友推荐或互联网整理，旨在为广大用户提供学习与参考之用。所有文本和图片版权归原创网站或作者本人所有，其观点并不代表本站立场。如有任何版权侵犯或转载不当之情况，请与我们取得联系，我们将尽快进行相关处理与修改。感谢您的理解与支持！
