Explorar APIs do GraphQL explore-graphql-apis

Na tela inicial do AEM, navegue até Ferramentas > Geral > GraphQL.

Toque em Criar no canto superior direito. Na caixa de diálogo resultante, insira os seguintes valores:

• Nome*: Meu Ponto De Extremidade Do Projeto.
• Usar esquema do GraphQL fornecido por… *: Meu projeto

Toque em Criar para salvar o ponto de extremidade.

Os endpoints do GraphQL criados com base em uma configuração de projeto só permitem consultas em modelos que pertencem a esse projeto. Nesse caso, as únicas consultas nos modelos Pessoa e Equipe podem ser usadas.

Agora você deve ver um endpoint do GraphQL habilitado no seu ambiente.

Na tela inicial do AEM, navegue até Ferramentas > Geral > Editor de Consultas do GraphQL.

No canto superior direito, verifique se a Extremidade está definida como Meu Ponto de Extremidade do Projeto.

Cole a seguinte consulta no painel principal (substituindo a lista de comentários):

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

Pressione o botão Reproduzir no menu superior para executar a consulta. Você deve ver os resultados dos fragmentos de conteúdo do capítulo anterior:

Posicione o cursor abaixo do texto title e insira CTRL+Espaço para acionar a referência de código. Adicionar shortname e description à consulta.

Execute a consulta novamente pressionando o botão Reproduzir e você verá que os resultados incluem as propriedades adicionais de shortname e description.

O shortname é uma propriedade simples e description é um campo de texto multilinha e a API do GraphQL nos permite escolher vários formatos para os resultados, como html, markdown, json ou plaintext.

Atualize a consulta para incluir a propriedade teamMembers. Lembre-se de que este é um campo Referência de fragmento para o modelo de pessoa. As propriedades do modelo de Pessoa podem ser retornadas:

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

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

A capacidade de consultar em fragmentos aninhados é um recurso eficiente da API GraphQL do AEM. Neste exemplo simples, o aninhamento tem apenas dois níveis de profundidade. No entanto, é possível aninhar fragmentos ainda mais. Por exemplo, se houvesse um modelo Endereço associado a uma Pessoa, seria possível retornar dados de todos os três modelos em uma única consulta.

Insira a seguinte consulta na interface do GraphiQL:

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

A consulta acima executa uma pesquisa em relação a todos os fragmentos de Pessoa no sistema. O filtro adicionado ao início da consulta executa uma comparação no campo name e na cadeia de caracteres da variável $name.

No painel Variáveis de consulta, insira o seguinte:

{"name": "John Doe"}

Execute a consulta. Espera-se que somente o Fragmento de conteúdo Pessoas seja retornado com um valor de John Doe.

Há muitas outras opções para filtrar e criar consultas complexas, consulte Aprendendo a usar o GraphQL com AEM - Exemplos de conteúdo e consultas.

Aprimorar a consulta acima para obter a foto do perfil

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

        }
      }
    }
  }
}

O profilePicture é uma referência de conteúdo e espera-se que seja uma imagem, portanto, o objeto ImageRef interno é usado. Isso nos permite solicitar dados adicionais sobre a imagem que está sendo referenciada, como width e height.

Insira a seguinte consulta no editor de GraphiQL:

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

Insira o seguinte para as Variáveis de consulta:

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

Execute a consulta e observe que o único resultado é retornado.

Insira a seguinte consulta no GraphiQL IDE:

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

Verifique se o query funciona.

Toque em Salvar como e insira all-teams como o Nome da consulta.

A consulta deve ser exibida em Consultas persistentes no painel esquerdo.

Em seguida, toque nas reticências … ao lado da consulta persistente e toque em Copiar URL para copiar o caminho para a área de transferência.

Abra uma nova guia e cole o caminho copiado no navegador:

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

Deve ser semelhante ao caminho acima. Você deve ver que os resultados JSON da consulta retornaram.

Analisando o URL acima:

Retorne ao GraphiQL IDE e use o botão de adição + para criar a consulta persistente 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
        }
      }
    }
  }
}

Salve a consulta como: person-by-name.

Você deve ter duas consultas persistentes salvas:

Na tela inicial do AEM, navegue até Ferramentas > Geral > GraphQL.

Toque na caixa de seleção ao lado de Meu Ponto de Extremidade do Projeto e toque em Publish

Na tela inicial do AEM, navegue até Ferramentas > Geral > Editor de consultas do GraphQL

Toque na consulta todas as equipes do painel Consultas persistentes e toque em Publish

Repita a etapa acima para a consulta person-by-name