持久查询与 GraphQL 链接

2020-09-29 08:00:00 · 飞浪

本指南将演示如何使用*自动持久查询*来处理客户端发送的比 REST 等效内容大得多的查询文本负载。

介绍

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"
    }
  }
}
    

结论

与远程数据交互是现代 Web 应用的重要组成部分。使用 Apollo 和 GraphQL，从 REST 和 GraphQL 端点查询数据变得更加容易。您已经了解了如何提高查询效率。下一步，您可能希望探索其他 Apollo 功能，例如突变和订阅。

_{免责声明：本内容来源于第三方作者授权、网友推荐或互联网整理，旨在为广大用户提供学习与参考之用。所有文本和图片版权归原创网站或作者本人所有，其观点并不代表本站立场。如有任何版权侵犯或转载不当之情况，请与我们取得联系，我们将尽快进行相关处理与修改。感谢您的理解与支持！}

_查看原文

技术指南

阅读全文

持久查询与 GraphQL 链接

杭州电子商务研究院

4年前 · 面向社会、服务行业、政产学研结合、整合资源、和谐发展

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]), });

{ "operationName":"GetExchangeRates", "variables":{}, "extensions":{ "persistedQuery": { "version":1, "sha256Hash":"a14a78df14b12400059895968ef375948d2ed45da8748495d7f75368a4ac2bd1" } } }