持久 GraphQL 查询

持久查询是存储在Adobe Experience Manager (AEM)服务器上的查询。 客户端可以发送一个具有查询名称的HTTPGET请求来执行它。 这种方法的好处是可缓存性。 虽然客户端GraphQL查询也可以使用HTTPPOST请求执行(无法缓存),但持久查询可以由HTTP缓存或CDN缓存,从而提高性能。 持久查询允许您简化请求并提高安全性,因为您的查询已封装在服务器上,并且AEM管理员可以完全控制它们。 它是 最佳实践和强烈建议 在使用AEM GraphQL API时使用持久查询。

在上一章中,您已探索了一些高级GraphQL查询以收集WKND应用程序的数据。 在本章中,您将查询保留到AEM,并了解如何在保留的查询上使用缓存控制。

前提条件 prerequisites

本文档是多部分教程的一部分。 请确保 上一章 已完成,然后再继续本章。

目标 objectives

在本章中,了解如何:

  • 使用参数保留GraphQL查询
  • 将cache-control参数用于持久查询

审核 GraphQL持久查询 配置设置

让我们回顾一下 GraphQL持久查询 已在AEM实例中为WKND站点项目启用。

  1. 导航到 工具 > 常规 > 配置浏览器.

  2. 选择 WKND已共享,然后选择 属性 以打开配置属性。 在配置属性页面上,您应该看到 GraphQL持久查询 权限已启用。

    配置属性

使用内置GraphiQL Explorer工具持久GraphQL查询

在此部分中,我们将保留GraphQL查询,该查询以后在客户端应用程序中使用来获取和渲染冒险内容片段数据。

  1. 在GraphiQL Explorer中输入以下查询:

    code language-graphql
    query getAdventureDetailsBySlug($slug: String!) {
    adventureList(filter: {slug: {_expressions: [{value: $slug}]}}) {
        items {
        _path
        title
        activity
        adventureType
        price
        tripLength
        groupSize
        difficulty
        primaryImage {
            ... on ImageRef {
            _path
            mimeType
            width
            height
            }
        }
        description {
            html
            json
        }
        itinerary {
            html
            json
        }
        location {
            _path
            name
            description {
            html
            json
            }
            contactInfo {
            phone
            email
            }
            locationImage {
            ... on ImageRef {
                _path
            }
            }
            weatherBySeason
            address {
            streetAddress
            city
            state
            zipCode
            country
            }
        }
        instructorTeam {
            _metadata {
            stringMetadata {
                name
                value
            }
            }
            teamFoundingDate
            description {
            json
            }
            teamMembers {
            fullName
            contactInfo {
                phone
                email
            }
            profilePicture {
                ... on ImageRef {
                _path
                }
            }
            instructorExperienceLevel
            skills
            biography {
                html
            }
            }
        }
        administrator {
            fullName
            contactInfo {
            phone
            email
            }
            biography {
            html
            }
        }
        }
        _references {
        ... on ImageRef {
            _path
            mimeType
        }
        ... on LocationModel {
            _path
            __typename
        }
        }
    }
    }
    

    在保存查询之前,请验证查询是否有效。

  2. 接下来,点按另存为,并输入 adventure-details-by-slug 作为查询名称。

    持久GraphQL查询

通过编码特殊字符执行带变量的持久查询

让我们了解客户端应用程序如何通过对特殊字符进行编码来执行带变量的持久查询。

要执行持久查询,客户端应用程序使用以下语法发出GET请求:

GET <AEM_HOST>/graphql/execute.json/<Project-Config-Name>/<Persisted-Query-Name>

执行持久查询 带变量,则上述语法将更改为:

GET <AEM_HOST>/graphql/execute.json/<Project-Config-Name>/<Persisted-Query-Name>;variable1=value1;variable2=value2

必须转换分号(;)、等号(=)、斜杠(/)和空格等特殊字符才能使用相应的UTF-8编码。

通过运行 getAllAdventureDetailsBySlug 从命令行终端进行查询,我们回顾这些概念的实际操作情况。

  1. 打开GraphiQL Explorer并单击 椭圆 (…)永久查询旁边 getAllAdventureDetailsBySlug,然后单击 复制URL. 将复制的URL粘贴到文本板中,如下所示:

    code language-code
        http://<AEM_HOST>/graphql/execute.json/wknd-shared/getAllAdventureDetailsBySlug;slug=
    
  2. 添加 yosemite-backpacking 作为变量值

    code language-code
        http://<AEM_HOST>/graphql/execute.json/wknd-shared/getAllAdventureDetailsBySlug;slug=yosemite-backpacking
    
  3. 编码分号(;)和等号(=)特殊字符

    code language-code
        http://<AEM_HOST>/graphql/execute.json/wknd-shared/getAllAdventureDetailsBySlug%3Bslug%3Dyosemite-backpacking
    
  4. 打开命令行终端并使用 Curl 运行查询

    code language-shell
    $ curl -X GET http://<AEM_HOST>/graphql/execute.json/wknd-shared/getAllAdventureDetailsBySlug%3Bslug%3Dyosemite-backpacking
    
TIP
如果对AEM创作环境运行上述查询,则必须发送凭据。 请参阅 本地开发访问令牌 演示和 调用AEM API 以了解文档详细信息。

此外,查看 如何执行持久查询使用查询变量、和 为应用程序使用的查询URL编码 以了解客户端应用程序的持久查询执行。

更新持久查询中的缓存控制参数 cache-control-all-adventures

AEM GraphQL API允许您更新查询的默认缓存控制参数,以提高性能。 默认的cache-control值为:

  • 60秒是客户端(例如浏览器)的默认(maxage=60) TTL

  • 7200秒是Dispatcher和CDN的默认(s-maxage=7200) TTL;也称为共享缓存

使用 adventures-all 查询以更新cache-control参数。 查询响应很大,控制其大小很有用 age 在缓存中。 此持久查询稍后用于更新 客户端应用程序.

  1. 打开GraphiQL Explorer并单击 椭圆 (…),然后单击 标题 以打开 缓存配置 模式。

    保留GraphQL标题选项

  2. 缓存配置 模式,更新 max-age 标题值至 600 秒(10分钟),然后单击 保存

    保留GraphQL缓存配置

审核 正在缓存您的持久查询 以获取有关默认cache-control参数的详细信息。

恭喜!

恭喜!您现在已了解如何使用参数持久GraphQL查询,更新持久查询,以及对持久查询使用缓存控制参数。

后续步骤

下一章,则将在WKND应用程序中实施对持久查询的请求。

recommendation-more-help
e25b6834-e87f-4ff3-ba56-4cd16cdfdec4