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


Next step