Importando um Client em sua aplicação

Introdução

Neste passo você aprenderá como buscar Clients já prontos que abstraem as APIs de Core Commerce, além de como importá-los para sua app no VTEX IO. Importaremos o Client Catalog que permitirá que busquemos detalhes sobre um SKU dentro da plataforma VTEX.

Clients

Clients, no VTEX IO, são abstrações para serviços externos e são usados nativamente para fazermos requisições externas em serviços de backend. Você pode ler um pouco sobre eles aqui.

VTEX IO Commerce Clients

O pacote Commerce Clients é uma biblioteca Typescript que oferece vários clients já configurados para acessar as APIs de Core Commerce da VTEX. Para usá-lo em sua app, basta instalá-lo na pasta node/ rodando:

yarn add @vtex/clients

Custom Clients

Caso você não encontre o Client que você deseja para um serviço de Core Commerce da VTEX, recomendamos que você envie um Pull Request para o repositório commerce-clients. Ficaremos felizes em revisar e, eventualmente, mergear sua contribuição.

Mas, caso o serviço que você esteja tentando acessar seja um provedor externo (ex: API do Here Maps), recomendamos que você crie o Client na sua própria app seguindo estes passos.

Atividade

1. Vamos agora importar um Client do módulo Catalog em nossa app. Após ter clonado a app de boilerplate, abra no seu editor o código da app que foi baixado na pasta service-example.

2. Como o Client que usaremos é oferecido no pacote de Commerce Clients, vamos realizar a instalação. Dentro da pasta node, rode o seguinte comando:

yarn add @vtex/clients

3. Agora que o pacote foi instalado, precisamos configurar o Client para utilizá-lo nos resolvers e middlewares de nossa app. Para isso, precisamos que você abra no seu editor o arquivo node/clients/index.ts.

4. Importe o Client Catalog a partir da biblioteca @vtex/clients.

5. Adicione o getter catalog, similar ao método acima na classe Clients.

+    import { Catalog } from '@vtex/clients'
...
+    public get catalog() {
+      return this.getOrSet('catalog', Catalog)
+    }

Pronto! Agora, qualquer uma das funções de resolver GraphQL ou middlewares de serviço pode utilizar este Client através de ctx.clients.catalog. Por conta do Typescript, é possível ter autocomplete dos métodos e ver detalhes dos tipos necessários nos parâmetros.

Está com dúvidas?

Veja o gabarito para esta etapa ou acompanhe nosso [office hours] no canal VTEX Developers(https://www.youtube.com/c/VTEXDevelopers)