Esplora le API di GraphQL explore-graphql-apis

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

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

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

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, è possibile utilizzare solo le query sui modelli Person e Team.

Ora dovrebbe essere abilitato un endpoint GraphQL nel tuo ambiente.

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

Nell'angolo in alto a destra, accertati che l'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
    }
  }
}

Premi il pulsante Riproduci nel menu principale per eseguire la query. Dovresti visualizzare i risultati dei frammenti di contenuto del capitolo precedente:

Posizionare il cursore sotto il testo title e immettere CTRL+spazio per attivare il suggerimento del codice. Aggiungere shortname e description alla query.

Eseguire nuovamente la query premendo il pulsante Riproduci. I risultati dovrebbero includere le proprietà aggiuntive di shortname e description.

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.

Aggiornare la query per includere la proprietà teamMembers. Ricorda che questo è un campo Riferimento frammento per il 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 a un modello Person è associato un Address, è 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 sul campo name e sulla stringa di variabile $name.

Nel pannello Variabili query immetti quanto segue:

{"name": "John Doe"}

Eseguire la query. È previsto che venga restituito solo il frammento di contenuto Persone con il valore John Doe.

Esistono molte altre opzioni per filtrare e creare query complesse. Vedere 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

        }
      }
    }
  }
}

profilePicture è un riferimento a contenuto e dovrebbe essere un'immagine, pertanto viene utilizzato l'oggetto predefinito ImageRef. Questo 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 le 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.

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

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

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

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

Dovresti salvare due query persistenti:

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

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

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

Tocca la query all-teams dal pannello Query persistenti e tocca Publish

Ripeti il passaggio precedente per la query person-by-name