持久 GraphQL 查询

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

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

先决条件 prerequisites

本文档是多部分教程的一部分。 在继续本章之前,请确保已完成上一章

目标 objectives

在本章中,了解如何:

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

查看​ GraphQL持久查询 ​配置设置

我们来看看是否已在AEM实例中为WKND站点项目启用​ GraphQL持久查询

  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查询更新缓存控制参数。 查询响应很大,在缓存中控制其age很有用。 此持久查询稍后用于更新客户端应用程序

  1. 打开GraphiQL Explorer并单击永久查询旁边的​ 省略号 (…),然后单击​ 标头 ​以打开​ 缓存配置 ​模式。

    保留GraphQL标头选项

  2. 在​ 缓存配置 ​模式中,将max-age标头值更新为600 秒(10分钟),然后单击​ 保存

    保留GraphQL缓存配置

有关默认缓存控制参数的详细信息,请查看缓存您的持久查询

恭喜!

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

后续步骤

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

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