Como consumir dados via API Pública

🔍 Preview

O Store Theme consome dados diretamente da API Pública.

Você pode fazer isso de duas formas:

✅ Usando o public-sdk (recomendado)
⚙️ Fazendo chamadas diretas (menos comum)

O public-sdk já resolve:

Persistência de dados
Integração com tracking (GA4)
Padronização
Suporte de tipagem da API em Typescript

🔌Forma simples: usando o public-sdk

A forma mais simples é consumir dados utilizando o módulo Api.

🎯 Exemplo simples (sem tracking)

1import { onMounted, ref } from 'vue';
2
3import { Api } from '@uappi/public-sdk';
4import type { Banners } from '@uappi/public-sdk/modules/Api/types';
5
6const bannersData = ref<Banners | null>(null);
7
8onMounted(async () => {
9  bannersData.value = await Api.customization
10    .listBanners('my-banner')
11    .catch(() => null);
12});
import { onMounted, ref } from 'vue';
import { Api } from '@uappi/public-sdk';
import type { Banners } from '@uappi/public-sdk/modules/Api/types';
const bannersData = ref<Banners | null>(null);
onMounted(async () => {
  bannersData.value = await Api.customization
    .listBanners('my-banner')
    .catch(() => null);
});

📊 Com tracking automático (GA4)

Se o dado impacta experiência ou jornada do cliente e precise mensurar essas informações pelo Google Analytics, utilize Tracking.

Isso mantém sua loja enviando eventos automaticamente.

1import { Tracking } from '@uappi/public-sdk';
2import { onMounted, ref } from 'vue';
3import type { Banners } from '@uappi/public-sdk/modules/Api/types';
4
5const bannersData = ref<Banners | null>(null);
6
7onMounted(async () => {
8  bannersData.value = await Tracking.customization
9    .listBanners('my-banner')
10    .catch(() => null);
11});
import { Tracking } from '@uappi/public-sdk';
import { onMounted, ref } from 'vue';
import type { Banners } from '@uappi/public-sdk/modules/Api/types';
const bannersData = ref<Banners | null>(null);
onMounted(async () => {
  bannersData.value = await Tracking.customization
    .listBanners('my-banner')
    .catch(() => null);
});

📌 A diferença aqui é:

Método	Quando usar
`Api`	Apenas consumo de dados
`Tracking`	Dados que fazem parte da jornada do cliente

🚀 Múltiplas requisições (padrão recomendado)

Em páginas reais como a Home, é comum precisar de vários dados ao mesmo tempo.

Criar várias ref() manualmente não escala.

Para isso use useAsyncData para centralizar dos dados.

1src/core/composables/useAsyncData
src/core/composables/useAsyncData

🧠 Exemplo utilizando `useAsyncData`

1import { onMounted, computed } from 'vue';
2import { Api } from '@uappi/public-sdk';
3import { Tracking } from '@uappi/public-sdk';
4import type { Banners } from '@uappi/public-sdk/modules/Api/types';
5
6const { data: pageContent, execute } = useAsyncData(async () => {
7  const [
8    homeBannersData,
9    homeShowcaseData,
10    homeMenusData,
11    homeBrandsData,
12    storeReviewRes,
13  ] = await Promise.all([
14    Tracking.customization
15      .listBanners([
16        'main-banner',
17        'home-triple-grid-banner',
18        'home-pitchbar',
19        'home-main-categories',
20        'home-check-banner',
21        'home-institutional-section',
22        'home-triple-grid-banner-two',
23        'home-blog'
24      ])
25      .catch(() => []),
26
27    Tracking.customization
28      .listShowcase(['home-showcase-one'], {
29        fields: ['media', 'mainUrl', 'status', 'review'],
30      })
31      .catch(() => []),
32
33    Api.customization
34      .listMenu([
35        'home-showcase-one-link',
36        'home-showcase-with-navigation',
37        'home-showcase-filter',
38      ])
39      .catch(() => []),
40
41    Api.product.listBrands().catch(() => false),
42    Api.customer.listStoreReview().catch(() => false),
43  ]);
44
45  return {
46    homeBannersData,
47    homeShowcaseData,
48    homeMenusData,
49    homeBrandsData,
50    storeReviewRes,
51  };
52});
53
54onMounted(async () => {
55  await execute();
56});
import { onMounted, computed } from 'vue';
import { Api } from '@uappi/public-sdk';
import { Tracking } from '@uappi/public-sdk';
import type { Banners } from '@uappi/public-sdk/modules/Api/types';
const { data: pageContent, execute } = useAsyncData(async () => {
  const [
    homeBannersData,
    homeShowcaseData,
    homeMenusData,
    homeBrandsData,
    storeReviewRes,
  ] = await Promise.all([
    Tracking.customization
      .listBanners([
        'main-banner',
        'home-triple-grid-banner',
        'home-pitchbar',
        'home-main-categories',
        'home-check-banner',
        'home-institutional-section',
        'home-triple-grid-banner-two',
        'home-blog'
      ])
      .catch(() => []),
    Tracking.customization
      .listShowcase(['home-showcase-one'], {
        fields: ['media', 'mainUrl', 'status', 'review'],
      })
      .catch(() => []),
    Api.customization
      .listMenu([
        'home-showcase-one-link',
        'home-showcase-with-navigation',
        'home-showcase-filter',
      ])
      .catch(() => []),
    Api.product.listBrands().catch(() => false),
    Api.customer.listStoreReview().catch(() => false),
  ]);
  return {
    homeBannersData,
    homeShowcaseData,
    homeMenusData,
    homeBrandsData,
    storeReviewRes,
  };
});
onMounted(async () => {
  await execute();
});

Com os dados centralizados, você pode expor apenas o que cada componente precisa:

1const mainBannerData = computed(() => {
2  return pageContent.value?.homeBannersData.find(
3    banner => banner.code === 'main-banner'
4  ) as Banners | undefined;
5});
6
7const showcaseOneData = computed(() => {
8  return pageContent.value?.homeShowcaseData.find(
9    showcase => showcase.code === 'home-showcase-one'
10  );
11});
const mainBannerData = computed(() => {
  return pageContent.value?.homeBannersData.find(
    banner => banner.code === 'main-banner'
  ) as Banners | undefined;
});
const showcaseOneData = computed(() => {
  return pageContent.value?.homeShowcaseData.find(
    showcase => showcase.code === 'home-showcase-one'
  );
});

Por que utilizar o `useAsyncData`

Evita múltiplas refs
Mantém tipagem centralizada e automatizada
Permite paralelismo com Promise.all
Facilita manutenção

🔎 Quando usar `Api` vs `Tracking`

O public-sdk disponibiliza dois modos de consumo de dados:

Api
Tracking

Ambos retornam os mesmos dados da API Pública. A diferença está no envio automático de eventos de comportamento do cliente.

📡 `Api`

Use quando deseja apenas consumir dados da loja.

1Api.customization.listBanners('main-banner')
Api.customization.listBanners('main-banner')

Retorna os dados
Não envia eventos de analytics

Ideal para:

Informações irrelevantes para mensuração da jornada do cliente
Dados que não representam interação ou visualização relevante do cliente

📊 `Tracking`

Use quando o conteúdo exibido representa interação relevante na jornada do cliente.

1Tracking.customization.listBanners('main-banner')
Tracking.customization.listBanners('main-banner')

Retorna os dados
Dispara eventos automaticamente no dataLayer
Alimenta o tracking da loja

🎯 Por que isso existe?

Na plataforma Uappi, o tracking é baseado no modelo de eventos do GA4 (Google Analytics 4).

É uma boa prática enviar informações de visualização para que o time de mídia possa:

acompanhar performance
medir impacto visual
analisar comportamento do cliente

Ao utilizar:

1Tracking.customization.listBanners('main-banner')
Tracking.customization.listBanners('main-banner')

Além de buscar os dados do banner, o SDK envia automaticamente o evento view_promotion

Esse é um evento padrão do GA4 utilizado para registrar a visualização de promoções.

Referência oficial do evento:

https://developers.google.com/analytics/devguides/collection/ga4/reference/events?hl=pt-br&client_type=gtag#view_promotion

Referência geral de eventos GA4:

https://developers.google.com/analytics/devguides/collection/ga4/reference/events

👀 Como esse evento aparece na prática?

Quando o Tracking é utilizado, o evento é enviado ao dataLayer da página.

Exemplo real de visualização:

event: view_promotion
promotion_id
promotion_name
creative_name
creative_slot
index

Essas informações permitem que ferramentas de análise identifiquem:

Qual banner foi visto
Em qual contexto

⚠️ Uso sem o Public SDK

É possível consumir os dados da API Pública utilizando diretamente bibliotecas como o axios.

Essa abordagem funciona e pode ser adotada em cenários específicos.

No entanto, ao optar por não utilizar o public-sdk, você deixará de contar com recursos importantes fornecidos pela plataforma:

Tipagens oficiais da API escritas em TypeScript
Integração automática com eventos de tracking (GA4)
Configuração nativa de persistência de dados entre Store Theme, Checkout e Área Restrita

Isso significa que toda essa responsabilidade passará a ser do próprio projeto.

Por esse motivo, recomendamos o uso do public-sdk sempre que possível, garantindo padronização, rastreabilidade e compatibilidade com o ecossistema da plataforma Uappi.

🏁 Próximo passo

Agora que você sabe como consumir dados, entenda como funciona a persistencia de dados no Store Theme.

Persistência de dados Store Theme: como funciona por baixo dos panos

Começando

Store Theme

Customização de Interface

Consumo de Dados

Tracking e SEO

Checkout

Consumo de Dados

Tracking e SEO

Ambiente de Pagamento

Área Restrita (Minha Conta)

Consumo de Dados

Tracking e SEO

SDK Público (public-sdk)

Modules

Api

Tracking

API Pública

Área Restrita (Minha Conta)

Carrinho de Compras

API Privada

Apps

Configurações Gerais

Clientes

Template

Avaliações

Notificações

ERPs

Filas

Grupo de Pedidos

Pedidos

Carrinhos

Pagamentos

Anti-Fraude

Produtos

Inteligência Artificial

Marcas

Categorias

Filtros

Atributos

Url

Relatórios

Render

Fretes

Usuários

Promocionais

Marketplace

Third Party

Datalogic

Busca

MCP

Como consumir dados via API Pública

🔍 Preview

🔌Forma simples: usando o public-sdk

📊 Com tracking automático (GA4)

🚀 Múltiplas requisições (padrão recomendado)

🧠 Exemplo utilizando useAsyncData

Por que utilizar o useAsyncData

🔎 Quando usar Api vs Tracking

📡 Api

📊 Tracking

🎯 Por que isso existe?

🧩 Exemplo prático: Banner

👀 Como esse evento aparece na prática?

⚠️ Uso sem o Public SDK

🏁 Próximo passo

Nesta página

Institucional

🧠 Exemplo utilizando `useAsyncData`

Por que utilizar o `useAsyncData`

🔎 Quando usar `Api` vs `Tracking`

📡 `Api`

📊 `Tracking`