GraphQL API's verkennen explore-graphql-apis

Van het AEM scherm van het Begin, navigeer aan Hulpmiddelen > Algemeen > GraphQL.

Tik creeer in de hoger-juiste hoek, in de resulterende dialoog ga de volgende waarden in:

• Naam*: Mijn Eindpunt van het Project.
• Het schema van GraphQL van het gebruik door… * wordt verstrekt: Mijn Project

Tik creeer om het eindpunt te bewaren.

De GraphQL eindpunten die op een projectconfiguratie worden gecreeerd laten slechts vragen tegen modellen toe die tot dat project behoren. In dit geval, kunnen de enige vragen tegen de Persoon en modellen van het Team worden gebruikt.

Er moet nu één GraphQL-eindpunt worden weergegeven dat op uw omgeving is ingeschakeld.

Van het AEM scherm van het Begin, navigeer aan Hulpmiddelen > Algemeen > de Redacteur van de Vraag van GraphQL.

In de hoger-juiste hoek, zorg ervoor dat het Eindpunt aan Mijn Eindpunt van het Project wordt geplaatst.

Plak de volgende query in het hoofdvenster (vervang de lijst met opmerkingen):

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

Druk de knoop van het Spel in het hoogste menu om de vraag uit te voeren. De resultaten van de inhoudsfragmenten uit het vorige hoofdstuk worden weergegeven:

Plaats de curseur onder de title tekst en ga CTRL+Space in om coderingstips teweeg te brengen. Voeg shortname en description toe aan de query.

Voer opnieuw de vraag uit door de Spel knoop te drukken en u zou moeten zien dat de resultaten de extra eigenschappen van shortname en description omvatten.

shortname is een eenvoudige eigenschap en description is een tekstveld met meerdere regels en met de GraphQL API kunnen we verschillende indelingen kiezen voor de resultaten zoals html , markdown , json of plaintext .

Werk de query bij om de eigenschap teamMembers op te nemen. Rappel dat dit a gebied van de Verwijzing van het 0} Fragment {aan het Model van de Persoon is. Eigenschappen van het Person-model kunnen worden geretourneerd:

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

JSON-reactie:

{
    "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"
                ]
                }
              ]
        }
        ]
        }
    }
}

De mogelijkheid om te zoeken op geneste fragmenten is een krachtige functie van de AEM GraphQL API. In dit eenvoudige voorbeeld is het nesten slechts twee niveaus diep. Maar het is mogelijk om fragmenten nog verder te nesten. Bijvoorbeeld, als er een 1} model van het Adres {verbonden aan a Persoon was zou het mogelijk zijn om gegevens van alle drie modellen in één enkele vraag terug te keren.

Ga de volgende vraag in GraphiQL UI in:

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

De bovenstaande query voert een zoekopdracht uit tegen alle Person-fragmenten in het systeem. Het toegevoegde filter aan het begin van de query voert een vergelijking uit op het veld name en de variabele tekenreeks $name .

In het paneel van de Variabelen van de Vraag ga het volgende in:

{"name": "John Doe"}

Voer de vraag uit, wordt het verwacht dat slechts het Fragment van de Inhoud van de Personen met een waarde van John Doe is teruggekeerd.

Er zijn vele andere opties voor het filtreren en het creëren van complexe vragen, zie Lerend om GraphQL met AEM te gebruiken - de Inhoud en Vragen van de Steekproef.

Verbeter bovenstaande query om profielafbeelding op te halen

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 is een inhoudsverwijzing en wordt verwacht dat het een afbeelding is; daarom wordt een ingebouwd ImageRef -object gebruikt. Op deze manier kunnen we aanvullende gegevens opvragen over de afbeelding waarnaar wordt verwezen, zoals de width en height .

Ga de volgende vraag in de redacteur GraphiQL in:

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

Ga het volgende voor de Variabelen van de Vraag in:

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

Voer de vraag uit en neem waar dat het enige resultaat is teruggekeerd.

Ga de volgende vraag in GrahiQL winde in:

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

Controleer of de query werkt.

De volgende tikken sparen als en gaan all-teams als Naam van de Vraag in.

De vraag zou onder Verlengde Vragen in het linkerspoor moeten worden getoond.

Tik daarna de ellipsen … naast de blijvende vraag en tik Exemplaar URL om de weg aan uw klembord te kopiëren.

Open een nieuw tabblad en plak het gekopieerde pad in uw browser:

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

Het moet er ongeveer zo uitzien als het bovenstaande pad. U moet zien dat de JSON-resultaten van de geretourneerde query.

De bovenstaande URL opsplitsen:

Terugkeer naar GrahiQL winde en gebruik de plus knoop + om de NIEUWE vraag voort te zetten

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

Sla de query op als: person-by-name.

Er moeten twee doorlopende query's worden opgeslagen:

Van het AEM scherm van het Begin, navigeer aan Hulpmiddelen > Algemeen > GraphQL.

Tik checkbox naast Mijn Eindpunt van het Project en tik Publish

Van het AEM scherm van het Begin, navigeer aan Hulpmiddelen > Algemeen > de Redacteur van de Vraag van GraphQL

Tik alle-teams vraag van het Persisted paneel van Vragen en ontvang Publish

Bovenste stap herhalen voor person-by-name -query