Documentation
Feedback
Guides
Learning Center

Learning Center
Learning Center
Usando o Client Catalog para fazer requisições
View in English
This content was migrated from the VTEX Learning Center and is no longer being actively maintained. For the most accurate and up-to-date information, please check the official documentation.

Introdução

Neste passo você aprenderá como usar o Client que você acabou de configurar em um middleware da app service-example. Iremos usar o método getSkuById para retornar informações de um SKU (Stock Keeping Unit) no Catálogo da VTEX.

O termo Stock Keeping Unit (SKU), em português Unidade de Manutenção de Estoque, está ligado à logística de armazém e designa os diferentes itens do estoque, estando normalmente associado a um código identificador. (Wikipedia)

Rota de Testes

Já que o app service-example já exporta uma rota pública para testes (https://{workspace}--{account}.myvtex.com/_v/status/:code), iremos utilizá-la para testar a realização de uma chamada utilizando o Client de Catalog. Iremos usar o parâmetro code como o nosso "ID do Sku" para rapidamente testarmos o nosso Client.

Se você já rodou o comando vtex link, basta mantê-lo rodando já que a CLI da VTEX atualiza automaticamente sua aplicação com mudanças no código. Caso não, rode o comando agora.

Atividade

Como vimos no passo anterior, agora já temos disponível os métodos do nosso Client em ctx.clients.catalog. Para utilizá-lo, precisaremos chamar os métodos em algum middleware de nossa app.

  1. No arquivo node/middlewares/status.ts para usar o ctx.clients.catalog. Cole lá o seguinte código:

_11
export async function status(ctx: Context, next: () => Promise<any>) {
_11
const {
_11
state: { code },
_11
clients: { catalog },
_11
} = ctx
_11
_11
const data = await catalog.getSkuById(code.toString())
_11
ctx.body = data
_11
_11
await next()
_11
}

O que estamos fazendo?

  • Extraindo catalog do contexto que é recebido nas funções de middleware. Isso é um atalho para não precisarmos chamar ctx.clients.catalog. Saiba mais sobre Destructuring aqui.
  • Extraindo a variável code, que virá como parâmetro da URL da nossa rota (/_v/status/:code). Usaremos este dado para representar o ID do SKU que iremos testar na chamada ao Catálogo.
  • Chamando o método getSkuById do Client Catalog. Este método irá, internamente, chamar o endpoint relativo no módulo do catálogo, repassando o parâmetro que estamos passando (code) como o ID do SKU a ser buscado. Lembrando que esta é uma chamada assíncrona, então precisamos adicionar o await logo antes para esperá-la.

Porém, ainda precisamos configurar um último passo para testar!

  1. Geralmente, os Clients do commerce-clients já são configurados automaticamente para fazerem chamadas autenticadas, por padrão usando o token da app. Mesmo assim, ainda precisamos declarar que nossa aplicação estará fazendo requisições para algum serviço, e isso é feito no arquivo manifest.json.

Para o nosso caso especificamente, precisamos adicionar a seguinte sessão no campo policies deste arquivo:


_10
{
_10
"name": "outbound-access",
_10
"attrs": {
_10
"host": "portal.vtexcommercestable.com.br",
_10
"path": "/api/catalog/*"
_10
}
_10
},

Isso permitirá que sua app faça chamadas para essa URL, especificamente. Por mais que você não tenha precisado colocá-la em seu código, é ela que é usada internamente pelo Catalog Client.

Essa declaração é necessária e importante para apps distribuídas na App Store da VTEX. No processo de instalação, o responsável pela conta deve ler e aceitar todas as permissões que a app está solicitando.

Caso o recurso que você esteja tentando acessar precise de algum role de autorização, você também precisará adicioná-lo nesta sessão. Por exemplo, a app store-graphql precisa declarar que precisa da policy LogisticsAdmin para que possa ser autorizadas a acessar alguns recursos do módulo de Logística.

  1. Agora, vamos testar o que fizemos! O processo do vtex link já deve ter atualizado, e poderemos copiar a URL pública que nosso serviço está expondo:
    {"base64":"  ","img":{"width":2396,"height":318,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":333283,"url":"https://user-images.githubusercontent.com/18706156/93384506-4d306e80-f83b-11ea-9cec-0e1b23f23a48.png"}}

Neste caso, a app está sendo desenvolvida na conta marinbrasil e no workspace trainingweek, mas no seu Terminal você deverá copiar o link fornecido para seu ambiente.

Como o nosso middleware é ativado por uma requisição GET, podemos testar a funcionalidade no nosso próprio navegador. Cole na barra de endereços https://{workspace}--{account}.myvtex.com/_v/status/1 para buscarmos informações sobre o SKU de ID 1.

O resultado abaixo deve ser esperado:

{"base64":"  ","img":{"width":1770,"height":1042,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":159764,"url":"https://user-images.githubusercontent.com/18706156/93388848-b87d3f00-f841-11ea-8d2e-bed1c14d355d.png"}}

Lembrando que esta informação dependerá do catálogo da conta sendo utilizada.


Answer sheet

See answer sheet for manifest.json
manifest.json

_34
{
_34
"name": "service-example",
_34
"vendor": "vtex",
_34
"version": "0.1.1",
_34
"title": "Service Example",
_34
"description": "Reference app for VTEX IO Services",
_34
"mustUpdateAt": "2018-01-04",
_34
"categories": [],
_34
"dependencies": {},
_34
"builders": {
_34
"node": "6.x",
_34
"docs": "0.x"
_34
},
_34
"scripts": {
_34
"prereleasy": "bash lint.sh"
_34
},
_34
"credentialType": "absolute",
_34
"policies": [
_34
{
_34
"name": "outbound-access",
_34
"attrs": {
_34
"host": "portal.vtexcommercestable.com.br",
_34
"path": "/api/catalog/*"
_34
}
_34
},
_34
{
_34
"name": "colossus-fire-event"
_34
},
_34
{
_34
"name": "colossus-write-logs"
_34
}
_34
],
_34
"$schema": "https://raw.githubusercontent.com/vtex/node-vtex-api/master/gen/manifest.schema"
_34
}

See answer sheet for status.ts
status.ts

_11
export async function status(ctx: Context, next: () => Promise<any>) {
_11
const {
_11
state: { code },
_11
clients: { catalog },
_11
} = ctx
_11
_11
const data = await catalog.getSkuById(code.toString())
_11
ctx.body = data
_11
_11
await next()
_11
}

On this page