L’API GraphQL in AEM consente di esporre i dati dei frammenti di contenuto alle applicazioni downstream. Nell’esercitazione di base esercitazione su GraphQL in più passaggi, è stato utilizzato il Navigatore GraphiQL per testare e perfezionare le query GraphQL.
In questo capitolo, si utilizza Esplora risorse di GraphiQL per definire query più avanzate per raccogliere i dati dei frammenti di contenuto creati nel capitolo precedente.
Questo documento fa parte di un tutorial in più parti. Assicurarsi che i capitoli precedenti siano stati completati prima di procedere con questo capitolo.
In questo capitolo viene illustrato come:
La Esplora risorse lo strumento consente agli sviluppatori di creare e testare le query in base al contenuto nell’ambiente AEM corrente. Lo strumento GraphiQL consente inoltre agli utenti di persistere o salvare le query che devono essere utilizzate dalle applicazioni client in un'impostazione di produzione.
Quindi, esplora la potenza di AEM API GraphQL utilizzando il GraphiQL Explorer integrato.
Dalla schermata iniziale AEM, passa a Strumenti > Generale > Editor query GraphQL.
In, alcune versioni di AEM (6.X.X) lo strumento GraphiQL Explorer (aka GraphiQL IDE) deve essere installato manualmente, seguire istruzioni da qui.
Nell’angolo in alto a destra, assicurati che l’endpoint sia impostato su Endpoint condiviso WKND. Modifica della Endpoint in questo caso, il valore del menu a discesa visualizza il valore esistente Query persistenti nell'angolo in alto a sinistra.
In questo modo tutte le query verranno estese ai modelli creati nella WKND condiviso progetto.
Nel precedente esercitazione su GraphQL in più passaggi, hai definito e utilizzato query persistenti di base per ottenere i dati dei frammenti di contenuto. In questo caso, espandi questa conoscenza e filtra i dati dei frammenti di contenuto trasmettendo le variabili alle query persistenti.
Quando si sviluppano applicazioni client, in genere è necessario filtrare i frammenti di contenuto in base ad argomenti dinamici. L’API GraphQL AEM ti consente di passare questi argomenti come variabili in una query per evitare la costruzione di stringhe sul lato client in fase di runtime. Per ulteriori informazioni sulle variabili di GraphQL, consulta la sezione Documentazione di GraphQL.
Per questo esempio, eseguire una query su tutti gli istruttori che hanno una particolare abilità.
Nell’IDE GraphiQL, incolla la seguente query nel pannello a sinistra:
query listPersonBySkill ($skillFilter: String!){
personList(
_locale: "en"
filter: {skills: {_expressions: [{value: $skillFilter}]}}
) {
items {
fullName
contactInfo {
phone
email
}
profilePicture {
... on ImageRef {
_path
}
}
biography {
plaintext
}
instructorExperienceLevel
skills
}
}
}
La listPersonBySkill
la query sopra accetta una variabile (skillFilter
) obbligatoria String
. Questa query esegue una ricerca per tutti i frammenti di contenuto personale e li filtra in base a skills
e la stringa passata skillFilter
.
La listPersonBySkill
include contactInfo
proprietà, che è un riferimento a un frammento del modello Informazioni di contatto definito nei capitoli precedenti. Il modello Informazioni contatto contiene phone
e email
campi. Affinché la query possa essere eseguita correttamente, è necessario che almeno uno di questi campi sia presente.
contactInfo {
phone
email
}
Poi, definiamo skillFilter
e ottieni tutti gli istruttori che sono esperti nello sci. Incolla la seguente stringa JSON nel pannello Variabili query nell’IDE GraphiQL:
{
"skillFilter": "Skiing"
}
Esegui la query. Il risultato dovrebbe essere simile al seguente:
{
"data": {
"personList": {
"items": [
{
"fullName": "Stacey Roswells",
"contactInfo": {
"phone": "209-888-0011",
"email": "sroswells@wknd.com"
},
"profilePicture": {
"_path": "/content/dam/wknd-shared/en/contributors/stacey-roswells.jpg"
},
"biography": {
"plaintext": "Stacey Roswells is an accomplished rock climber and alpine adventurer. Born in Baltimore, Maryland, Stacey is the youngest of six children. Stacey's father was a lieutenant colonel in the US Navy and mother was a modern dance instructor. Stacey's family moved frequently with father's duty assignments and took the first pictures when father was stationed in Thailand. This is also where Stacey learned to rock climb."
},
"instructorExperienceLevel": "Advanced",
"skills": [
"Rock Climbing",
"Skiing",
"Backpacking"
]
}
]
}
}
}
Premere Play nel menu principale per eseguire la query. Dovresti visualizzare i risultati dei frammenti di contenuto del capitolo precedente:
L’API GraphQL AEM consente di eseguire query sui frammenti di contenuto nidificati. Nel capitolo precedente, hai aggiunto tre nuovi riferimenti al frammento a un frammento di contenuto avventura: location
, instructorTeam
e administrator
. Ora, filtra tutte le Avventure per qualsiasi Amministratore con un nome specifico.
Affinché la query possa essere eseguita correttamente, è necessario consentire solo un modello come riferimento.
Nell’IDE GraphiQL, incolla la seguente query nel pannello a sinistra:
query getAdventureAdministratorDetailsByAdministratorName ($name: String!){
adventureList(
_locale: "en"
filter: {administrator: {fullName: {_expressions: [{value: $name}]}}}
) {
items {
title
administrator {
fullName
contactInfo {
phone
email
}
administratorDetails {
json
}
}
}
}
}
Quindi, incolla la seguente stringa JSON nel pannello Variabili di query :
{
"name": "Jacob Wester"
}
La getAdventureAdministratorDetailsByAdministratorName
query filtra tutte le avventure per qualsiasi administrator
di fullName
"Jacob Wester", che restituisce informazioni da due frammenti di contenuto nidificati: Avventura e istruttore.
Esegui la query. Il risultato dovrebbe essere simile al seguente:
{
"data": {
"adventureList": {
"items": [
{
"title": "Yosemite Backpacking",
"administrator": {
"fullName": "Jacob Wester",
"contactInfo": {
"phone": "209-888-0000",
"email": "jwester@wknd.com"
},
"administratorDetails": {
"json": [
{
"nodeType": "paragraph",
"content": [
{
"nodeType": "text",
"value": "Jacob Wester has been coordinating backpacking adventures for three years."
}
]
}
]
}
}
}
]
}
}
}
L’API GraphQL AEM consente di eseguire query per i riferimenti a contenuti e frammenti all’interno di campi di testo a più righe. Nel capitolo precedente, hai aggiunto entrambi i tipi di riferimento nel Descrizione campo del frammento di contenuto del team di Yosemite. Ora, recuperiamo questi riferimenti.
Nell’IDE GraphiQL, incolla la seguente query nel pannello a sinistra:
query getTeamByAdventurePath ($fragmentPath: String!){
adventureByPath (_path: $fragmentPath) {
item {
instructorTeam {
_metadata {
stringMetadata {
name
value
}
}
teamFoundingDate
description {
plaintext
}
}
}
_references {
... on ImageRef {
__typename
_path
}
... on LocationModel {
__typename
_path
name
address {
streetAddress
city
zipCode
country
}
contactInfo {
phone
email
}
}
}
}
}
La getTeamByAdventurePath
query filtra tutte le avventure per percorso e restituisce i dati per instructorTeam
riferimento al frammento di una specifica avventura.
_references
è un campo generato dal sistema che viene utilizzato per visualizzare i riferimenti, inclusi quelli inseriti nei campi di testo su più righe.
La getTeamByAdventurePath
query recupera più riferimenti. Innanzitutto, utilizza il ImageRef
oggetto da recuperare _path
e __typename
di immagini inserite come riferimenti di contenuto nel campo di testo a più righe. Successivamente, utilizza LocationModel
per recuperare i dati del frammento di contenuto posizione inserito nello stesso campo.
La query include anche la _metadata
campo . In questo modo puoi recuperare il nome del frammento di contenuto del team e visualizzarlo successivamente nell’app WKND.
Quindi, incolla la seguente stringa JSON nel pannello Variabili query per ottenere la Yosemite Backpackaging Avventure:
{
"fragmentPath": "/content/dam/wknd-shared/en/adventures/yosemite-backpacking/yosemite-backpacking"
}
Esegui la query. Il risultato dovrebbe essere simile al seguente:
{
"data": {
"adventureByPath": {
"item": {
"instructorTeam": {
"_metadata": {
"stringMetadata": [
{
"name": "title",
"value": "Yosemite Team"
},
{
"name": "description",
"value": ""
}
]
},
"teamFoundingDate": "2016-05-24",
"description": {
"plaintext": "\n\nThe team of professional adventurers and hiking instructors working in Yosemite National Park.\n\nYosemite Valley Lodge"
}
}
},
"_references": [
{
"__typename": "LocationModel",
"_path": "/content/dam/wknd-shared/en/adventures/locations/yosemite-valley-lodge/yosemite-valley-lodge",
"name": "Yosemite Valley Lodge",
"address": {
"streetAddress": "9006 Yosemite Lodge Drive",
"city": "Yosemite National Park",
"zipCode": "95389",
"country": "United States"
},
"contactInfo": {
"phone": "209-992-0000",
"email": "yosemitelodge@wknd.com"
}
},
{
"__typename": "ImageRef",
"_path": "/content/dam/wknd-shared/en/adventures/teams/yosemite-team/team-yosemite-logo.png"
}
]
}
}
}
La _references
mostra sia l'immagine del logo che il frammento di contenuto del lodge Yosemite Valley inserito nel Descrizione campo .
A volte, durante lo sviluppo di applicazioni client, è necessario modificare la struttura delle query in modo condizionale. In questo caso, l’API GraphQL AEM ti consente di utilizzare le direttive GraphQL per modificare il comportamento delle query in base ai criteri specificati. Per ulteriori informazioni sulle direttive GraphQL, consulta la sezione Documentazione di GraphQL.
In sezione precedente, hai imparato a cercare i riferimenti in linea all’interno di campi di testo a più righe. Il contenuto è stato recuperato dal description
depositato nel plaintext
formato. Quindi, espandiamo la query e utilizziamo una direttiva per recuperare in modo condizionale description
in json
anche il formato.
Nell’IDE GraphiQL, incolla la seguente query nel pannello a sinistra:
query getTeamByAdventurePath ($fragmentPath: String!, $includeJson: Boolean!){
adventureByPath(_path: $fragmentPath) {
item {
instructorTeam {
_metadata{
stringMetadata{
name
value
}
}
teamFoundingDate
description {
plaintext
json @include(if: $includeJson)
}
}
}
_references {
... on ImageRef {
__typename
_path
}
... on LocationModel {
__typename
_path
name
address {
streetAddress
city
zipCode
country
}
contactInfo {
phone
email
}
}
}
}
}
La query di cui sopra accetta un'altra variabile (includeJson
) obbligatoria Boolean
, nota anche come direttiva della query. Una direttiva può essere utilizzata per includere i dati provenienti dal description
nel campo json
in base al formato booleano passato includeJson
.
Quindi, incolla la seguente stringa JSON nel pannello Variabili di query :
{
"fragmentPath": "/content/dam/wknd-shared/en/adventures/yosemite-backpacking/yosemite-backpacking",
"includeJson": false
}
Esegui la query. Dovresti ottenere lo stesso risultato della sezione precedente su come eseguire query per riferimenti in linea all’interno di campi di testo a più righe.
Aggiorna includeJson
direttiva true
ed esegui nuovamente la query. Il risultato dovrebbe essere simile al seguente:
{
"data": {
"adventureByPath": {
"item": {
"instructorTeam": {
"_metadata": {
"stringMetadata": [
{
"name": "title",
"value": "Yosemite Team"
},
{
"name": "description",
"value": ""
}
]
},
"teamFoundingDate": "2016-05-24",
"description": {
"plaintext": "\n\nThe team of professional adventurers and hiking instructors working in Yosemite National Park.\n\nYosemite Valley Lodge",
"json": [
{
"nodeType": "paragraph",
"content": [
{
"nodeType": "reference",
"data": {
"path": "/content/dam/wknd-shared/en/adventures/teams/yosemite-team/team-yosemite-logo.png",
"mimetype": "image/png"
}
}
]
},
{
"nodeType": "paragraph",
"content": [
{
"nodeType": "text",
"value": "The team of professional adventurers and hiking instructors working in Yosemite National Park."
}
]
},
{
"nodeType": "paragraph",
"content": [
{
"nodeType": "reference",
"data": {
"href": "/content/dam/wknd-shared/en/adventures/locations/yosemite-valley-lodge/yosemite-valley-lodge",
"type": "fragment"
},
"value": "Yosemite Valley Lodge"
}
]
}
]
}
}
},
"_references": [
{
"__typename": "LocationModel",
"_path": "/content/dam/wknd-shared/en/adventures/locations/yosemite-valley-lodge/yosemite-valley-lodge",
"name": "Yosemite Valley Lodge",
"address": {
"streetAddress": "9006 Yosemite Lodge Drive",
"city": "Yosemite National Park",
"zipCode": "95389",
"country": "United States"
},
"contactInfo": {
"phone": "209-992-0000",
"email": "yosemitelodge@wknd.com"
}
},
{
"__typename": "ImageRef",
"_path": "/content/dam/wknd-shared/en/adventures/teams/yosemite-team/team-yosemite-logo.png"
}
]
}
}
}
Nel capitolo precedente sull’authoring dei frammenti di contenuto, è stato aggiunto un oggetto JSON al Meteo per stagione campo . Ora recuperiamo tali dati all’interno del frammento di contenuto della posizione.
Nell’IDE GraphiQL, incolla la seguente query nel pannello a sinistra:
query getLocationDetailsByLocationPath ($fragmentPath: String!) {
locationByPath(_path: $fragmentPath) {
item {
name
description {
json
}
contactInfo {
phone
email
}
locationImage {
... on ImageRef {
_path
}
}
weatherBySeason
address {
streetAddress
city
state
zipCode
country
}
}
}
}
Quindi, incolla la seguente stringa JSON nel pannello Variabili di query :
{
"fragmentPath": "/content/dam/wknd-shared/en/adventures/locations/yosemite-national-park/yosemite-national-park"
}
Esegui la query. Il risultato dovrebbe essere simile al seguente:
{
"data": {
"locationByPath": {
"item": {
"name": "Yosemite National Park",
"description": {
"json": [
{
"nodeType": "paragraph",
"content": [
{
"nodeType": "text",
"value": "Yosemite National Park is in California's Sierra Nevada mountains. It's famous for its gorgeous waterfalls, giant sequoia trees, and iconic views of El Capitan and Half Dome cliffs."
}
]
},
{
"nodeType": "paragraph",
"content": [
{
"nodeType": "text",
"value": "Hiking and camping are the best ways to experience Yosemite. Numerous trails provide endless opportunities for adventure and exploration."
}
]
}
]
},
"contactInfo": {
"phone": "209-999-0000",
"email": "yosemite@wknd.com"
},
"locationImage": {
"_path": "/content/dam/wknd-shared/en/adventures/locations/yosemite-national-park/yosemite-national-park.jpeg"
},
"weatherBySeason": {
"summer": "81 / 89°F",
"fall": "56 / 83°F",
"winter": "46 / 51°F",
"spring": "57 / 71°F"
},
"address": {
"streetAddress": "9010 Curry Village Drive",
"city": "Yosemite Valley",
"state": "CA",
"zipCode": "95389",
"country": "United States"
}
}
}
}
}
La weatherBySeason
contiene l’oggetto JSON aggiunto nel capitolo precedente.
Finora sono state eseguite più query per illustrare le funzionalità dell’API GraphQL AEM.
Gli stessi dati possono essere recuperati con una sola query e questa query viene successivamente utilizzata nell'applicazione client per recuperare informazioni aggiuntive come la posizione, il nome del team, i membri del team di un'avventura:
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
}
}
}
}
# in Query Variables
{
"slug": "yosemite-backpacking"
}
Congratulazioni. Sono state testate query avanzate per raccogliere i dati dei frammenti di contenuto creati nel capitolo precedente.
In capitolo successivo, verrà illustrato come persistere delle query GraphQL e perché è consigliabile utilizzare query persistenti nelle applicazioni.