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.

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á?

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:

   
   

   _10

   # /graphql/types/productView.graphql

   _10

   type ProductView {

   _10

   slug: String

   _10

   count: Int

   _10

   }

   
   

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

   
   

   _10

   type Query {

   _10

   productList(topN: Int): [ProductView]

   _10

   }

   
   

   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:

   
   

   _17

   // node/resolvers/products.ts

   _17

   import { COURSE_ENTITY } from '../utils/constants'

   _17

   _17

   export const productList = async (

   _17

   _: any,

   _17

   { topN }: { topN: number },

   _17

   { clients: { masterdata } }: Context

   _17

   ) =>

   _17

   masterdata

   _17

   .scrollDocuments({

   _17

   dataEntity: COURSE_ENTITY,

   _17

   fields: ['count', 'slug'],

   _17

   schema: 'v1',

   _17

   size: topN,

   _17

   sort: `count DESC`,

   _17

   })

   _17

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

   
   

   _10

   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:

   
   

   _10

   },

   _10

   graphql: {

   _10

   resolvers: {

   _10

   Query: {

   _10

   productList,

   _10

   },

   _10

   },

   _10

   },

   _10

   })

   
   

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

   
   

   _10

   //manifest.json

   _10

   "builders": {

   _10

   + "graphql": "1.x",

   _10

   "docs": "0.x",

   _10

   "node": "6.x"

   _10

   },

   
   

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