Explorar APIs do GraphQL explore-graphql-apis

Na tela inicial do AEM, acesse Ferramentas > Geral > GraphQL.

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

• Nome*: Meu Ponto de Extremidade de Projeto.
• Use o esquema do GraphQL fornecido por … *: Meu projeto

Toque Criar para salvar o endpoint.

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 em relação ao Person e Equipe podem ser usados.

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

Na tela inicial do AEM, acesse Ferramentas > Geral > Editor de consultas GraphQL.

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

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

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

Pressione a 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 title text e enter CTRL+Espaço para acionar referências de código. Adicionar shortname e description à consulta.

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

A variável shortname é uma propriedade simples e description é um campo de texto multilinha e a API do GraphQL permite escolher vários formatos para os resultados, como html, markdown, jsonou plaintext.

Atualize a consulta para incluir a teamMembers propriedade. Lembre-se de que este é um Referência do fragmento ao 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 houver uma variável Endereço modelo associado a um Person seria possível retornar dados de todos os três modelos em um único query.

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 do query executa uma comparação no name e a string da variável $name.

No Variáveis de consulta insira o seguinte:

{"name": "John Doe"}

Execute a query, espera-se que somente Pessoas O fragmento de conteúdo é retornado com um valor de John Doe.

Há muitas outras opções para filtrar e criar consultas complexas, consulte Saiba como 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

        }
      }
    }
  }
}

A variável profilePicture é uma referência de conteúdo e espera-se que seja uma imagem, portanto, incorporada ImageRef objeto é 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 o 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.

Próximo toque Salvar como e insira all-teams como o Nome da consulta.

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

Próximo 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 uma 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, acesse Ferramentas > Geral > GraphQL.

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

Na tela inicial do AEM, acesse Ferramentas > Geral > Editor de consultas GraphQL

Toque no todas as equipes consulte no painel Consultas persistentes e toque em Publish

Repita a etapa acima para person-by-name query