GraphQL

Introdução

Agora que a contagem dos produtos está atualizada, precisamos consultar os dados dos N produtos mais vistos. Para tal, é possível utilizar o Master Data para consultar os dados de visitas às páginas de produto e ordená-los pelo campo count. Também podemos limitar a quantidade de produtos que são consultados, de forma a criar um rank customizado de produtos mais visitados.

GraphQL

Para pegar os dados de visitas por produto, vamos utilizar GraphQL, a tecnologia utilizada pelo VTEX IO para consulta de dados, para implementar uma query para o Master Data. GraphQL permite que implementemos queries de maneira simples e rápida, especificando os dados que você deseja consultar. Isto faz com que a API seja confiável, dado que o GraphQL controla os dados que são consultados, ao invés do servidor em si.

Também é a única maneira de criar uma interface entre os serviços e as aplicações de frontend.

Portanto, o GraphQL utiliza tipos e um schema para as queries para especificar os dados consultados, e resolvers para pegar apenas os dados necessários.

Vamos lá?

Recuperando dados do Master Data

1. Dentro do diretório /graphql, crie uma pasta chamada /types. Nesta pasta, crie o arquivo productView.graphql e declare o tipo de lista de produto que você quer consultar:

   # /graphql/types/productView.graphql
   type ProductView {
       slug: String
       count: Int
   }
   

2. Ainda na pasta /graphql, defina o schema no arquivo schema.graphql:

   type Query {
       productList(topN: Int): [ProductView]
   }
   

   Tenha em mente que o schema irá definir a estrutura da query e os dados que serão recuperados.

   Além disso, na declaração do schema, você pode incluir diretivas. Em alguns casos, é necessário, como casos em que precisamos pegar tokens de usuário ou usar cookies (exemplo: OrderForm). Para ler um pouco mais sobre isso, veja este link.

3. Com o schema, os tipos e a query definida, precisamos criar o resolver da query. O resolver é o código a ser executado quando uma query acontece. No nosso caso, queremos executar um scroll no Master Data, ordenando pela contagem (já que queremos pegar os N produtos mais vistos) e limitando o tamanho da página (top N). Para definir este resolver, crie a pasta /node/resolvers e nela, crie o arquivo products.ts e faça o seguinte:

   ts

   // node/resolvers/products.ts
   import { COURSE_ENTITY } from '../utils/constants'
   
   export const productList = async (
     _: any,
     { topN }: { topN: number },
     { clients: { masterdata } }: Context
   ) =>
     masterdata
       .scrollDocuments({
         dataEntity: COURSE_ENTITY,
         fields: ['count', 'slug'],
         schema: 'v1',
         size: topN,
         sort: `count DESC`,
       })
       .then(({ data }) => data)
   

   Nota: você pode checar a documentação a respeito do uso de scroll no Master Data neste link.

4. Importe o resolver no arquivo index.ts:

   ts

   import { productList } from './resolvers/products'
   

5. Por fim, precisamos atualizar o arquivo index.ts para definir o resolver e a query. Complete a declaração de Service como abaixo:

   ts

       },
           graphql: {
               resolvers: {
                   Query: {
                       productList,
                   },
           },
       },
   })
   

   Também é necessário lembrar de adicionar o builder de graphql ao arquivo manifest.json:

   Diff

   //manifest.json
   "builders": {
   +   "graphql": "1.x",
       "docs": "0.x",
       "node": "6.x"
   },
   

   Finalmente, linke a app e você poderá ver no terminal uma rota GraphQL. O resultado deve ser semelhante ao da imagem abaixo:

   

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)