Now that we have updated the product count, we need to retrieve the top N most viewed products. To do so, we can 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 achieve this objective, we'll employ GraphQL, the technology used by VTEX IO for data retrieval and interface between services and front-end applications. GraphQL allows implementing queries for fetching the exact data you need via types, schemas, and resolvers.
Using the graphql builder
To enable the use of GraphQL in your VTEX IO app, add the graphql builder to the app's manifest.json file.
Creating the GraphQL type
Within the service-course-template/graphql folder, create a folder named types. Inside this folder, create the productView.graphql file to declare the type of the product list we intend to retrieve.
Creating the GraphQL schema
Still within the service-course-template/graphql folder, define the schema in the schema.graphql file. This schema outlines the structure of our query and the data to be retrieved.
Optionally, directives can be included for scenarios like obtaining user tokens or utilizing cookies. Check out the graphql-example app for advanced usage examples.
Creating the GraphQL resolver
With the schema, types, and query defined, create the query's resolver. The resolver determines the actions executed when a query is invoked. In our case, we want to perform a scroll on Master Data, ordering by the count (to obtain the top most viewed products) and limiting the page size (the top N).
Back to our node implementation, define the resolver by creating a node/resolvers folder. In this new folder, add a file named products.ts and populate it with the code presented in the right panel.
Using the GraphQL resolver
Import the resolver into the node/index.ts file and set up the graphql section, connecting your defined queries with the underlying data retrieval logic (productList).
Note that resolvers act as the glue between your GraphQL schema and the actual data-fetching logic. When a GraphQL query is executed, the resolver associated with each field in the query is invoked to obtain the corresponding data. In this case, when the productList query is executed, the productList resolver function (products.ts) is triggered to fetch the top N most viewed products from Master Data.
Linking the app
Finally, run vtex link and access the provided GraphQL route.
Using the graphql builder
To enable the use of GraphQL in your VTEX IO app, add the graphql builder to the app's manifest.json file.
Creating the GraphQL type
Within the service-course-template/graphql folder, create a folder named types. Inside this folder, create the productView.graphql file to declare the type of the product list we intend to retrieve.
Creating the GraphQL schema
Still within the service-course-template/graphql folder, define the schema in the schema.graphql file. This schema outlines the structure of our query and the data to be retrieved.
Optionally, directives can be included for scenarios like obtaining user tokens or utilizing cookies. Check out the graphql-example app for advanced usage examples.
Creating the GraphQL resolver
With the schema, types, and query defined, create the query's resolver. The resolver determines the actions executed when a query is invoked. In our case, we want to perform a scroll on Master Data, ordering by the count (to obtain the top most viewed products) and limiting the page size (the top N).
Back to our node implementation, define the resolver by creating a node/resolvers folder. In this new folder, add a file named products.ts and populate it with the code presented in the right panel.
Using the GraphQL resolver
Import the resolver into the node/index.ts file and set up the graphql section, connecting your defined queries with the underlying data retrieval logic (productList).
Note that resolvers act as the glue between your GraphQL schema and the actual data-fetching logic. When a GraphQL query is executed, the resolver associated with each field in the query is invoked to obtain the corresponding data. In this case, when the productList query is executed, the productList resolver function (products.ts) is triggered to fetch the top N most viewed products from Master Data.
Linking the app
Finally, run vtex link and access the provided GraphQL route.