Importando Clients do pacote VTEX

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

  1. 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.

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

  3. 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 participe do nosso office hours


Ajude-nos a fazer este conteúdo melhor!

Os cursos do VTEX IO são de código aberto. Se você perceber algum problema, pode abrir um pull request!

Faça uma contribuição

ou abra uma issue