No capítulo anterior, você criou e atualizou consultas persistentes usando o GraphiQL Explorer.
Este capítulo percorre as etapas para integrar as consultas persistentes ao aplicativo cliente WKND (também conhecido como Aplicativo WKND) usando solicitações HTTP GET em aplicativos existentes Componentes do React. Ele também oferece um desafio opcional para aplicar seus aprendizados AEM Headless, experiência em codificação para aprimorar o aplicativo cliente WKND.
Este documento faz parte de um tutorial dividido em várias partes. Assegure-se de que os capítulos anteriores foram completados antes de prosseguir com este capítulo. O aplicativo cliente WKND se conecta ao serviço de publicação AEM, portanto, é importante que você publicado o seguinte no serviço de publicação do AEM.
A variável As capturas de tela do IDE neste capítulo vêm de Código do Visual Studio
Um pacote de solução está disponível para ser instalado e conclui as etapas na interface do usuário do AEM para os capítulos 1 a 4. Este pacote é não é necessário se os capítulos anteriores tiverem sido concluídos.
Neste tutorial, você aprenderá a integrar as solicitações de consultas persistentes no aplicativo WKND GraphQL React de amostra usando o Cliente AEM Headless para JavaScript.
Para acelerar o tutorial, é fornecido um aplicativo JS React de início.
Clonar o adobe/aem-guides-wknd-graphql repositório:
$ git clone git@github.com:adobe/aem-guides-wknd-graphql.git
Edite o aem-guides-wknd-graphql/advanced-tutorial/.env.development
arquivo e definir REACT_APP_HOST_URI
para apontar para o serviço de publicação do AEM no target.
Atualize o método de autenticação se estiver se conectando a uma instância de autor.
# Server namespace
REACT_APP_HOST_URI=https://publish-pxx-eyy.adobeaemcloud.com
#AUTH (Choose one method)
# Authentication methods: 'service-token', 'dev-token', 'basic' or leave blank to use no authentication
REACT_APP_AUTH_METHOD=
# For Bearer auth, use DEV token (dev-token) from Cloud console
REACT_APP_DEV_TOKEN=
# For Service toke auth, provide path to service token file (download file from Cloud console)
REACT_APP_SERVICE_TOKEN=auth/service-token.json
# For Basic auth, use AEM ['user','pass'] pair (eg for Local AEM Author instance)
REACT_APP_BASIC_AUTH_USER=
REACT_APP_BASIC_AUTH_PASS=
As instruções acima são para conectar o aplicativo React ao Serviço de publicação do AEM, no entanto, para se conectar ao Serviço de autoria do AEM obtenha um token de desenvolvimento local para o ambiente as a Cloud Service do AEM de destino.
Também é possível conectar o aplicativo a um Instância de autor local usando o SDK do AEMaaCS usando autenticação básica.
Abra um terminal e execute os comandos:
$ cd aem-guides-wknd-graphql/advanced-tutorial
$ npm install
$ npm start
Uma nova janela do navegador deve ser carregada em http://localhost:3000
Toque Camping > Mochila de Yosemite para ver os detalhes da aventura do Yosemite Backpacking.
Abra as ferramentas de desenvolvedor do navegador e inspecione as XHR
solicitação
Você deve ver GET
solicitações para o endpoint do GraphQL com o nome de configuração do projeto (wknd-shared
), nome da consulta persistente (adventure-by-slug
), nome da variável (slug
), valor (yosemite-backpacking
) e codificações de caracteres especiais.
Se você estiver se perguntando por que a solicitação da API do GraphQL é feita em relação ao http://localhost:3000
e NÃO em relação ao domínio do AEM Publish Service, revise Debaixo da tampa do Tutorial básico.
No Tutorial básico - Criar um aplicativo React que usa APIs AEM GraphQL etapa revisamos e aprimoramos alguns arquivos importantes para obter experiência prática. Antes de aprimorar o aplicativo WKND, reveja os arquivos principais.
Adventures
Componente do ReactA visualização principal do aplicativo WKND React é a lista de todas as Aventuras e você pode filtrar essas Aventuras com base no tipo de atividade como Acampamento, Ciclismo. Esta exibição é renderizada pelo Adventures
componente. Abaixo estão os principais detalhes de implementação:
A variável src/components/Adventures.js
chamadas useAllAdventures(adventureActivity)
gancho e aqui adventureActivity
o argumento é tipo de atividade.
A variável useAllAdventures(adventureActivity)
o gancho é definido na variável src/api/usePersistedQueries.js
arquivo. Baseado em adventureActivity
, determina qual consulta persistente chamar. Se não for um valor nulo, ele chamará wknd-shared/adventures-by-activity
, senão obterá todas as aventuras disponíveis wknd-shared/adventures-all
.
O gancho usa a variável principal fetchPersistedQuery(..)
função que delega a execução da consulta a AEMHeadless
via aemHeadlessClient.js
.
O gancho também retorna apenas os dados relevantes da resposta do AEM GraphQL em response.data?.adventureList?.items
, permitindo que o Adventures
Os componentes de visualização do React são agnósticos das estruturas JSON principais.
Após a execução bem-sucedida da consulta, a variável AdventureListItem(..)
função de renderização de Adventures.js
adiciona o elemento HTML para exibir o Imagem, Duração do Percurso, Preço e Título informações.
AdventureDetail
Componente do ReactA variável AdventureDetail
O componente React renderiza os detalhes da aventura. Abaixo estão os principais detalhes de implementação:
A variável src/components/AdventureDetail.js
chamadas useAdventureBySlug(slug)
gancho e aqui slug
argumento é parâmetro de consulta.
Como acima, a variável useAdventureBySlug(slug)
o gancho é definido na variável src/api/usePersistedQueries.js
arquivo. Chama wknd-shared/adventure-by-slug
consulta persistente delegando a AEMHeadless
via aemHeadlessClient.js
.
Após a execução bem-sucedida da consulta, a variável AdventureDetailRender(..)
função de renderização de AdventureDetail.js
adiciona o elemento HTML para exibir os detalhes de Aventura.
adventure-details-by-slug
consulta persistenteNo capítulo anterior, criamos a variável adventure-details-by-slug
consulta persistente, ele fornece informações adicionais do Adventure, como local, equipe de instrutores e administrador. Vamos substituir adventure-by-slug
com adventure-details-by-slug
consulta persistente para renderizar essas informações adicionais.
Abrir src/api/usePersistedQueries.js
.
Localize a função useAdventureBySlug()
e atualizar consulta como
...
// Call the AEM GraphQL persisted query named "wknd-shared/adventure-details-by-slug" with parameters
response = await fetchPersistedQuery(
"wknd-shared/adventure-details-by-slug",
queryParameters
);
...
Para exibir informações adicionais sobre aventura, abra src/components/AdventureDetail.js
Localize a função AdventureDetailRender(..)
e atualizar função de retorno como
...
return (<>
<h1 className="adventure-detail-title">{title}</h1>
<div className="adventure-detail-info">
<LocationInfo {...location} />
...
<Location {...location} />
<Administrator {...administrator} />
<InstructorTeam {...instructorTeam} />
</div>
</>);
...
Defina também as funções de renderização correspondentes:
LocationInfo
function LocationInfo({name}) {
if (!name) {
return null;
}
return (
<>
<div className="adventure-detail-info-label">Location</div>
<div className="adventure-detail-info-description">{name}</div>
</>
);
}
Local
function Location({ contactInfo }) {
if (!contactInfo) {
return null;
}
return (
<>
<div className='adventure-detail-location'>
<h2>Where we meet</h2>
<hr />
<div className="adventure-detail-addtional-info">Phone:{contactInfo.phone}</div>
<div className="adventure-detail-addtional-info">Email:{contactInfo.email}</div>
</div>
</>);
}
InstructorTeam
function InstructorTeam({ _metadata }) {
if (!_metadata) {
return null;
}
return (
<>
<div className='adventure-detail-team'>
<h2>Instruction Team</h2>
<hr />
<div className="adventure-detail-addtional-info">Team Name: {_metadata.stringMetadata[0].value}</div>
</div>
</>);
}
Administrador
function Administrator({ fullName, contactInfo }) {
if (!fullName || !contactInfo) {
return null;
}
return (
<>
<div className='adventure-detail-administrator'>
<h2>Administrator</h2>
<hr />
<div className="adventure-detail-addtional-info">Name: {fullName}</div>
<div className="adventure-detail-addtional-info">Phone: {contactInfo.phone}</div>
<div className="adventure-detail-addtional-info">Email: {contactInfo.email}</div>
</div>
</>);
}
Abertura src/components/AdventureDetail.scss
e adicione as seguintes definições de classe
.adventure-detail-administrator,
.adventure-detail-team,
.adventure-detail-location {
margin-top: 1em;
width: 100%;
float: right;
}
.adventure-detail-addtional-info {
padding: 10px 0px 5px 0px;
text-transform: uppercase;
}
Os arquivos atualizados estão disponíveis em Guias de AEM WKND - GraphQL projeto, consulte Tutorial avançado seção.
Depois de concluir as melhorias acima, o aplicativo WKND se parece com o mostrado abaixo e as ferramentas do desenvolvedor do navegador são exibidas adventure-details-by-slug
chamada de consulta persistente.
A visualização principal do aplicativo WKND React permite filtrar essas Aventuras com base no tipo de atividade, como Acampamento, Ciclismo. No entanto, a equipe de negócios da WKND deseja ter uma Localização recurso de filtragem baseado em. Os requisitos são
Parabéns! Agora você concluiu a integração e a implementação das consultas persistentes no aplicativo WKND de amostra.