Now that we have updated the product count, we need to retrieve the top n most viewed products. We can, then, use Master Data to retrieve the product page view data and sort by the count field. We can also limit the length of retrieved products, creating a customized size rank of most-visited products.

To get these product page views, we will use GraphQL, the technology used by VTEX IO for data fetching, to implement a query to Master Data. GraphQL allows us to implement queries in a simple and easy way, specifying the data you want to retrieve. This makes your API reliable since GraphQL controls the data fetched instead of the server itself.

It's also the only possible way to create an interface between services and front end applications.

Therefore, GraphQL uses types and a query schema to specify the data retrieved and resolvers to get the exact data needed.

1. Inside the /graphql directory, create a folder called /types. In this folder, create the productView.graphql file and declare the type of the product list we want to retrieve:

   
   

   _10

   # /graphql/types/productView.graphql

   _10

   type ProductView {

   _10

   slug: String

   _10

   count: Int

   _10

   }

   
   

2. Still in the /graphql directory, define the schema in the schema.graphql file:

   
   

   _10

   type Query {

   _10

   productList(topN: Int): [ProductView]

   _10

   }

   
   

   Keep in mind that the schema will define the structure of our query and the retrieved data.

   Also, in this declaration you can include directives. In some cases, it is required, for example, if you need to get the user token or use cookies (e.g.: OrderForm). To read more about it, check out this link.

3. With the schema, types, and the query defined, we need to create the query's resolver. The resolver is what happens when a query is executed. In our case, we want to perform a scroll on Master Data, ordering by the count (as we want to get a topmost viewed products) and limiting the page size (the top n). To define this resolver, in the /node/resolvers directory, create the file products.ts and do the following:

   
   

   _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)

   
   

   Note: you can check the Master Data scroll documentation in this link.

4. Import the resolver on the index.ts file:

5. At last, we need to update the index.ts file to set up the resolver and the query. Complete the service declaration as below:

   
   

   _10

   },

   _10

   graphql: {

   _10

   resolvers: {

   _10

   Query: {

   _10

   productList,

   _10

   },

   _10

   },

   _10

   },

   _10

   })

   
   

   And, also, remember to add the graphql builder on the manifest.json:

   
   

   _10

   //manifest.json

   _10

   "builders": {

   _10

   + "graphql": "1.x",

   _10

   "docs": "0.x",

   _10

   "node": "6.x"

   _10

   },

   
   

   Finally, link the app and you should get a GraphQL route. The result should be like this: