Conectar o bloco à Função Edge do AEM

Nossa meta é criar um bloco dinâmico do Edge Delivery Services que chame uma Função AEM Edge para buscar dados dinâmicos de uma API de terceiros.

A terceira etapa é conectar o bloco do Edge Delivery Services que você colocou em scaffolding em Desenvolver o bloco do Edge Delivery Services à Função do AEM Edge que você criou em Desenvolver a Função do AEM Edge. Essa é a etapa que une os dois projetos. Execute ambos os servidores de desenvolvimento locais lado a lado, em duas portas diferentes, e faça com que o JavaScript do bloco chame o correto, dependendo de onde ele estiver sendo executado.

Executar ambos os servidores de desenvolvimento locais

No projeto do site do Edge Delivery Services:

$ aem up

Isso disponibiliza o site em http://localhost:3000.

No projeto AEM Edge Functions, em um segundo terminal:

$ aio aem edge-functions serve

Isso serve o ponto de extremidade em http://127.0.0.1:7676.

Conectar a chamada de busca

Adicione o seguinte a estimated-delivery.js, junto com o scaffolding de Desenvolver o bloco de Edge Delivery Services.

Escolha o URL certo para o ambiente

O bloco Edge Delivery Services chama um URL diferente dependendo de onde está sendo executado:

Detecte o desenvolvimento local a partir do nome de host relatado pelo navegador e armazene o resultado em cache para que cada solicitação não repita a verificação:

// blocks/estimated-delivery/estimated-delivery.js
const API_PATH = '/api/frescopa/estimated-delivery';
const LOCAL_EDGE_FUNCTION_ORIGIN = 'http://127.0.0.1:7676';

let cachedApiUrl;

function isLocalDev() {
  const { hostname } = window.location;
  return hostname === 'localhost' || hostname === '127.0.0.1';
}

function getEstimatedDeliveryApiUrl() {
  if (cachedApiUrl) return cachedApiUrl;

  // Local: site (aem up) on :3000, Edge Function on :7676 — call it directly.
  // Production: relative path, routed to Edge Function via CDN origin selector.
  cachedApiUrl = isLocalDev()
    ? `${LOCAL_EDGE_FUNCTION_ORIGIN}${API_PATH}`
    : API_PATH;

  return cachedApiUrl;
}

Essa é a única lógica específica do ambiente no bloco do Edge Delivery Services. Todo o resto, a chamada de busca, o tratamento de resposta, a renderização, funciona nos dois ambientes porque o caminho é o mesmo; somente a origem é alterada.

Chamar a função Edge do AEM

// blocks/estimated-delivery/estimated-delivery.js
async function fetchEstimatedDelivery(sku, postcode, signal) {
  const params = new URLSearchParams({ sku, postcode });
  const response = await fetch(`${getEstimatedDeliveryApiUrl()}?${params.toString()}`, {
    signal,
    cache: 'no-store',
  });

  const body = await response.json().catch(() => ({}));

  if (!response.ok) {
    const apiMessage = body.message || body.error;
    const err = new Error(apiMessage || 'Unable to check estimated delivery right now.');
    err.code = body.code;
    throw err;
  }

  return body;
}

err.code carrega o mesmo campo code de Defina o contrato de API (MISSING_POSTCODE, UNKNOWN_SKU), para que um chamador possa se ramificar nele. O bloco Edge Delivery Services só exibe message. cache: 'no-store' impede que o navegador armazene em cache uma resposta personalizada. O próprio comportamento do cache do CDN é controlado separadamente, por skipCache em cdn.yaml, coberto em Criar um ponto de extremidade de API.

Conectar o manipulador de envio

Adicione isso dentro de decorate(), após a marcação de formulário de Desenvolver o bloco de Edge Delivery Services. Este é o padrão principal: cancelar qualquer solicitação em andamento, mostrar carregamento, chamar a função e rotear o resultado para setState:

// blocks/estimated-delivery/estimated-delivery.js
form.addEventListener('submit', async (event) => {
  event.preventDefault();
  // ...extract and validate sku/postcode from the form, omitted here...

  activeRequest?.abort();
  const controller = new AbortController();
  activeRequest = controller;

  setState({ loading: true });

  try {
    const data = await fetchEstimatedDelivery(sku, postcode, controller.signal);
    setState({ data });
  } catch (err) {
    if (err.name === 'AbortError') return;
    setState({ error: formatError(err) });
  }
});

setState envolve renderResult(), que alterna entre carregamento, erro e marcação de sucesso. Um erro lançado roteia por formatError(), o que distingue uma falha de rede (a Função Edge do AEM não está acessível, portanto, o servidor de desenvolvimento local não está em execução ou a rota CDN ainda não foi implantada) de um erro comercial que a Função Edge do AEM retornou de propósito, por exemplo, uma SKU desconhecida. O manipulador completo também valida o lado do cliente do código postal antes de chamar a função e desativa o botão Enviar enquanto uma solicitação está em andamento. Consulte o ouvinte completo renderResult() e formatError() em estimated-delivery.js.

Testar o loop completo localmente

Com ambos os servidores dev em execução, abra a página criada em http://localhost:3000/dev/branches/estimated-delivery, envie o formulário e confirme se o resultado é renderizado como um cartão com status colorido com dados das chamadas upstream da Função Edge do AEM.

Em seguida, verifique os outros dois estados:

Abra o console do navegador para qualquer um desses. Se uma solicitação falhar inesperadamente, verifique primeiro se é um erro do CORS (correção na AEM Edge Function) ou um erro de conexão (o servidor de desenvolvimento do AEM Edge Function não está em execução).

Próximas etapas

Em Implantar e verificar, você implanta ambos os projetos e confirma se o mesmo fluxo funciona no site de Desenvolvimento, não apenas localmente.

Recursos adicionais