Esplora le API di GraphQL explore-graphql-apis

Dalla schermata iniziale dell’AEM, passa a Strumenti > Generale > GraphQL.

Tocca Crea nell’angolo in alto a destra, nella finestra di dialogo risultante inserisci i seguenti valori:

• Nome*: Endpoint progetto personale.
• Utilizza lo schema GraphQL fornito da … *: Il mio progetto

Tocca Crea per salvare l’endpoint.

Gli endpoint di GraphQL creati in base alla configurazione di un progetto abilitano solo le query sui modelli appartenenti a tale progetto. In questo caso, le uniche query per Persona e Team possono essere utilizzati.

Ora dovrebbe essere abilitato un endpoint GraphQL nel tuo ambiente.

Dalla schermata iniziale dell’AEM, passa a Strumenti > Generale > Editor query di GraphQL.

Nell’angolo in alto a destra, accertati che Endpoint sia impostato su Endpoint progetto personale.

Incolla la seguente query nel pannello principale (sostituendo l’elenco dei commenti):

query allTeams {
  teamList {
    items {
      _path
      title
    }
  }
}

Premere il tasto Play nel menu principale per eseguire la query. Dovresti visualizzare i risultati dei frammenti di contenuto del capitolo precedente:

Posiziona il cursore sotto il title testo e immetti CTRL+spazio per attivare suggerimenti sul codice. Aggiungi shortname e description alla query.

Eseguire nuovamente la query premendo il tasto Play e dovresti vedere che i risultati includono le proprietà aggiuntive di shortname e description.

Il shortname è una proprietà semplice e description è un campo di testo su più righe e l’API GraphQL consente di scegliere vari formati per i risultati, come html, markdown, json, o plaintext.

Aggiorna la query per includere teamMembers proprietà. Ricorda che si tratta di un Riferimento frammento al modello della persona. È possibile restituire le proprietà del modello Persona:

query allTeams {
    teamList {
        items {
            _path
            title
            shortName
            description {
                plaintext
            }
            teamMembers {
                fullName
                occupation
            }
        }
    }
}

Risposta JSON:

{
    "data": {
        "teamList": {
        "items": [
            {
            "_path": "/content/dam/my-project/en/team-alpha",
            "title": "Team Alpha",
            "shortName": "team-alpha",
            "description": {
                "plaintext": "This is a description of Team Alpha!"
            },
            "teamMembers": [
                {
                "fullName": "John Doe",
                "occupation": [
                    "Artist",
                    "Influencer"
                ]
                },
                {
                "fullName": "Alison Smith",
                "occupation": [
                    "Photographer"
                ]
                }
              ]
        }
        ]
        }
    }
}

La possibilità di eseguire query sui frammenti nidificati è una potente funzione dell’API GraphQL dell’AEM. In questo semplice esempio, la nidificazione è profonda solo due livelli. Tuttavia, è possibile nidificare ulteriormente i frammenti. Ad esempio, se è stato Indirizzo modello associato a un Persona sarebbe possibile restituire dati da tutti e tre i modelli in una singola query.

Immetti la seguente query nell’interfaccia utente GraphiQL:

query personByName($name:String!){
  personList(
    filter:{
      fullName:{
        _expressions:[{
          value:$name
          _operator:EQUALS
        }]
      }
    }
  ){
    items{
      _path
      fullName
      occupation
    }
  }
}

La query precedente esegue una ricerca in tutti i frammenti Persona nel sistema. Il filtro aggiunto all’inizio della query esegue un confronto sulla name e la stringa della variabile $name.

In Variabili di query immetti quanto segue:

{"name": "John Doe"}

Esegui la query. È previsto che solo Persone Il frammento di contenuto viene restituito con il valore John Doe.

Esistono molte altre opzioni per filtrare e creare query complesse. Consulta Imparare a utilizzare GraphQL con AEM: contenuto di esempio e query.

Migliora la query precedente per recuperare l’immagine del profilo

query personByName($name:String!){
  personList(
    filter:{
      fullName:{
        _expressions:[{
          value:$name
          _operator:EQUALS
        }]
      }
    }
  ){
    items{
      _path
      fullName
      occupation
      profilePicture{
        ... on ImageRef{
          _path
          _authorUrl
          _publishUrl
          height
          width

        }
      }
    }
  }
}

Il profilePicture è un riferimento di contenuto e deve essere un’immagine, pertanto è incorporato ImageRef viene utilizzato l'oggetto. Questo ci consente di richiedere dati aggiuntivi sull’immagine da usare come riferimento, come width e height.

Immetti la seguente query nell’editor GraphiQL:

query personByPath($path: String!) {
    personByPath(_path: $path) {
        item {
        fullName
        occupation
        }
    }
}

Immetti quanto segue per Variabili di query:

{"path": "/content/dam/my-project/en/alison-smith"}

Esegui la query e osserva che viene restituito il singolo risultato.

Immetti la seguente query nell’IDE GraphiQL:

query allTeams {
    teamList {
        items {
            _path
            title
            shortName
            description {
                plaintext
            }
            teamMembers {
                fullName
                occupation
            }
        }
    }
}

Verifica che la query funzioni.

Tocco successivo Salva con nome e immetti all-teams come Nome query.

La query deve essere visualizzata in Query persistenti nella barra a sinistra.

Tocca quindi i puntini di sospensione … accanto alla query persistente e tocca Copia URL per copiare il percorso negli Appunti.

Apri una nuova scheda e incolla il percorso copiato nel browser:

https://$YOUR-AEMasCS-INSTANCEID$.adobeaemcloud.com/graphql/execute.json/my-project/all-teams

Deve essere simile al percorso precedente. Dovresti vedere che sono stati restituiti i risultati JSON della query.

Suddivisione dell’URL precedente:

Torna all’IDE GraphiQL e utilizza il pulsante più + per rendere persistente la query NEW

query personByName($name: String!) {
  personList(
    filter: {
      fullName:{
        _expressions: [{
          value: $name
          _operator:EQUALS
        }]
      }
    }){
    items {
      _path
      fullName
      occupation
      biographyText {
        json
      }
      profilePicture {
        ... on ImageRef {
          _path
          _authorUrl
          _publishUrl
          width
          height
        }
      }
    }
  }
}

Salva la query con nome: person-by-name.

Dovresti salvare due query persistenti:

Dalla schermata iniziale dell’AEM, passa a Strumenti > Generale > GraphQL.

Tocca la casella di controllo accanto a Endpoint progetto personale e tocca Pubblica

Dalla schermata iniziale dell’AEM, passa a Strumenti > Generale > Editor query di GraphQL

Tocca il all-teams query dal pannello Query persistenti e tocca Pubblica

Ripeti il passaggio precedente per person-by-name query