GraphQL: Consultando dados do Master Data

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:

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

    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:

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

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

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

    imageimage

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