Documentazione AEM Tutorial su AEM Tutorial di AEM Headless

Query GraphQL persistenti

Last update: Fri Jan 26 2024 00:00:00 GMT+0000 (Coordinated Universal Time)

Argomenti:
GraphQL API

Creato per:

Intermediate
Developer

Le query persistenti sono query memorizzate nel server Adobe Experience Manager (AEM). I client possono inviare una richiesta HTTP GET con il nome della query per eseguirla. Il vantaggio di questo approccio è la possibilità di memorizzazione in cache. Mentre le query GraphQL lato client possono essere eseguite anche utilizzando richieste HTTP POST, che non possono essere memorizzate nella cache, le query persistenti possono essere memorizzate nella cache da cache HTTP o da una rete CDN, migliorando le prestazioni. Le query persistenti consentono di semplificare le richieste e migliorare la sicurezza, in quanto sono incapsulate nel server e l’amministratore AEM ne ha il pieno controllo. È best practice e vivamente consigliati per utilizzare le query persistenti quando si lavora con l’API GraphQL dell’AEM.

Nel capitolo precedente, hai esplorato alcune query GraphQL avanzate per raccogliere dati per l’app WKND. In questo capitolo, rendi le query persistenti a AEM e scopri come utilizzare il controllo della cache sulle query persistenti.

Prerequisiti prerequisites

Questo documento fa parte di un'esercitazione in più parti. Assicurati che il capitolo precedente è stato completato prima di procedere con questo capitolo.

Obiettivi objectives

In questo capitolo, scopri come:

Mantenere le query GraphQL con i parametri
Utilizzare parametri di controllo cache con query persistenti

Revisione Query persistenti GraphQL configurazione

Vediamo un po' Query persistenti GraphQL sono abilitati per il progetto del sito WKND nell’istanza AEM.

Accedi a Strumenti > Generale > Browser configurazioni.
Seleziona WKND condiviso, quindi seleziona Proprietà nella barra di navigazione superiore per aprire le proprietà di configurazione. Nella pagina Proprietà di configurazione, dovresti notare che il Query persistenti GraphQL autorizzazione abilitata.

Mantenere le query GraphQL utilizzando lo strumento GraphiQL Explorer incorporato

In questa sezione, rendiamo persistente la query GraphQL che viene successivamente utilizzata nell’applicazione client per recuperare ed eseguire il rendering dei dati dei frammenti di contenuto Adventure.

Immetti la seguente query in GraphiQL Explorer:

code language-graphql

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

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

Verifica che la query funzioni prima di salvarla.

Tocca Avanti Salva con nome e immetti adventure-details-by-slug come Nome query.

Esecuzione di query persistenti con variabili tramite codifica di caratteri speciali

Comprendiamo in che modo le query persistenti con variabili vengono eseguite dall’applicazione lato client codificando i caratteri speciali.

Per eseguire una query persistente, l’applicazione client effettua una richiesta di GET utilizzando la seguente sintassi:

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

Per eseguire una query persistente con una variabile, la sintassi precedente diventa:

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

I caratteri speciali come punto e virgola (;), segno di uguale (=), barre (/) e spazio devono essere convertiti per utilizzare la codifica UTF-8 corrispondente.

Eseguendo la getAllAdventureDetailsBySlug query dal terminale della riga di comando, esaminiamo questi concetti in azione.

Apri GraphiQL Explorer e fai clic sul pulsante ellissi (…) accanto alla query persistente getAllAdventureDetailsBySlug, quindi fai clic su Copia URL. Incolla l’URL copiato in un riquadro di testo, come illustrato di seguito:

code language-code
`http://<AEM_HOST>/graphql/execute.json/wknd-shared/getAllAdventureDetailsBySlug;slug=`

Aggiungi yosemite-backpacking come valore variabile

code language-code
`http://<AEM_HOST>/graphql/execute.json/wknd-shared/getAllAdventureDetailsBySlug;slug=yosemite-backpacking`

Codificare i punti e virgola (;) e il segno di uguale (=) caratteri speciali

code language-code
`http://<AEM_HOST>/graphql/execute.json/wknd-shared/getAllAdventureDetailsBySlug%3Bslug%3Dyosemite-backpacking`

Apri un terminale della riga di comando e utilizza Curl eseguire la query

code language-shell
`$ curl -X GET http://<AEM_HOST>/graphql/execute.json/wknd-shared/getAllAdventureDetailsBySlug%3Bslug%3Dyosemite-backpacking`

TIP

Se esegui la query di cui sopra nell’ambiente di authoring AEM, devi inviare le credenziali. Consulta Token di accesso per lo sviluppo locale per dimostrarlo e Chiamata dell'API AEM per informazioni dettagliate sulla documentazione.

Inoltre, rivedi Eseguire una query persistente, Utilizzo delle variabili di query, e Codifica dell’URL della query per l’utilizzo da parte di un’app per apprendere l’esecuzione di query persistenti da parte delle applicazioni client.

Aggiornamento dei parametri di controllo cache nelle query persistenti cache-control-all-adventures

L’API GraphQL dell’AEM ti consente di aggiornare i parametri predefiniti di controllo cache alle query per migliorare le prestazioni. I valori predefiniti per il controllo della cache sono:

60 secondi è il valore TTL predefinito (maxage=60) per il client (ad esempio, un browser)
7200 secondi, TTL predefinito (s-maxage=7200) per Dispatcher e CDN, o cache condivise

Utilizza il adventures-all per aggiornare i parametri di controllo cache. La risposta alla query è grande ed è utile controllarne la age nella cache. Questa query persistente viene utilizzata in seguito per aggiornare applicazione client.

Apri GraphiQL Explorer e fai clic sul pulsante ellissi (…) accanto alla query persistente, quindi fai clic su Intestazioni per aprire Configurazione cache modale.
In Configurazione cache modale, aggiorna il max-age valore intestazione a 600 secondi (10 minuti), quindi fai clic su Salva

Revisione Memorizzazione in cache delle query persistenti per ulteriori informazioni sui parametri di controllo cache predefiniti.

Congratulazioni.

Congratulazioni. Ora hai imparato a rendere persistenti le query GraphQL con parametri, aggiornare le query persistenti e utilizzare parametri di controllo cache con le query persistenti.

Passaggi successivi

In capitolo successivo, implementerai le richieste di query persistenti nell’app WKND.

recommendation-more-help

e25b6834-e87f-4ff3-ba56-4cd16cdfdec4