Nghiên cứu về GraphQL và ứng dụng trên Magento, NestJS (Phần 2)

Tiếp nối với nội dung của bài viết trước thì ở bài viết này chúng ta sẽ đi sâu vào phần ứng dụng GraphQL vào dự án. Ở phần này chúng ta sẽ tìm hiểu và ứng dụng GraphQL vào Magento kèm với các đoạn code ví dụ.

GraphQL trong Magento 2

• Kể từ phiên bản 2.3 thì Magento bắt đầu hỗ trợ GraphQL cho hệ thống
• Magento xây dựng sẵn một số API hỗ trợ GraphQL có sẵn trong phần core của mình, các API này thường được đặt ở trong module có chứa từ graphql trong thư mục vendor\magento
• Để truy cập vào GraphQL trên magento thì truy cập ở url /graphql
  VD: Lấy danh sách của các countries trong hệ thống

{ countries { available_regions { code id name } full_name_locale full_name_english id two_letter_abbreviation three_letter_abbreviation }
}

Các bước để tạo một module có sử dụng GraphQL Magento

Bước 1: Chuẩn bị môi trường và công cụ

• Cài đặt môi trường phát triển magento 2. Mình sẽ không đi vào chi tiết bước này mọi người có thể tham khảo ở link Installation Guide
• Cài đặt công cụ hỗ trợ GraphQL: có thể sử dụng extension của Chrome như Altair GraphQL Client hoặc ChromeiQL

Bước 2: Khởi tạo module

• Tạo folder TestModule/GraphQL ở trong thử mục app/code
• Tạo file registration.php tại đường dẫn app/code/TestModule/GraphQL/registration.php

<?php use Magento\Framework\Component\ComponentRegistrar; ComponentRegistrar::register(ComponentRegistrar::MODULE, 'TestModule_GraphQL', __DIR__);

• Tạo file module.xml tại đường dẫn app/code/TestModule/GraphQL/etc/module.xml

<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Module/etc/module.xsd"> <module name="TestModule_GraphQL" setup_version="1.0.0"> <sequence> <module name="Magento_Backend" /> <module name="Magento_GraphQl" /> <module name="Magento_Review" /> </sequence> </module>
</config> 

Bước 3: Định nghĩa GraphQL Schema

• File schema cho GraphQL của magento sẽ được đặt ở trong thư mục etc
• Tạo một file schema.graphqls tại đường dẫn app/code/TestModule/GraphQL/etc/schema.graphqls
• Trong GraphQL theo như ta đã nghiên cứu ở bài viết trước thì sẽ có 2 type là type Query để truy vấn dữ liệu và type Mutation để gửi các yêu cầu tác động đễ dữ liệu (thêm, sửa, xóa). Vì vậy ở file schema.graphqls chúng ta sẽ định nghĩa 2 type này
• Query:

# GraphQl Schema for Query
type Query { allReviews( pageSize: Int = 20 @doc( description: "The maximum number of results to return at once. The default value is 20." ) currentPage: Int = 1 @doc( description: "The page of results to return. The default value is 1." ) ): ListReviews @doc(description: "Return all reviews") @resolver(class: "TestModule\\GraphQL\\Model\\Resolver\\AllReviews") listReviewOfProduct( productId: Int pageSize: Int = 20 @doc( description: "The maximum number of results to return at once. The default value is 20." ) currentPage: Int = 1 @doc( description: "The page of results to return. The default value is 1." ) ): ListReviews @doc(description: "Return list review of product") @resolver( class: "TestModule\\GraphQL\\Model\\Resolver\\ListReviewOfProduct" )
} type ListReviews @doc(description: "Contain a list of reviews") { items: [Review]! @doc(description: "List of reviews") page_info: SearchResultPageInfo! @doc(description: "Metadata for pagination rendering.")
} type Review @doc(description: "Review info type") { entity_id: Int! @doc(description: "Review ID") title: String! @doc(description: "Title of review") detail: String @doc(description: "Detail of review") nickname: String! @doc(description: "Nickname of reviewer") customer_id: Int @doc(description: "Customer ID") email: String! @doc(description: "Email of reviewer") created_at: String! @doc(description: "Created at")
}

• Ở đây schema định nghĩa 2 object types là Review bao gồm các trường thông tin của 1 review và ListReviews bao gồm một danh sách các reviews và các thông tin về trang được truy vấn
• Type Query định nghĩa 2 trường là allReviews để lấy thông tin của tất cả các reviews trong hệ thống và listReviewOfProduct để lấy danh sách review của một product thông qua product id.
• Mutation:

# GraphQl Schema for Mutation
type Mutation { createReview( input: CreateReviewInput! @doc(description: "An input object to create a review") ) : CreateReviewOutput! @doc(description: "An output after created a review") @resolver(class: "TestModule\\GraphQL\\Model\\Resolver\\CreateReview")
} input CreateReviewInput @doc( description: "CreateReviewInput" ) { sku: String! @doc(description: "Product Sku") nickname: String! @doc(description: "Nickname of reviewer") email: String @doc(description: "Email of reviewer") title: String! @doc(description: "Title of review") details: String @doc(description: "Details of review") ratings: [ReviewRatingInput!]! @doc(description: "Rating of review")
} input ReviewRatingInput @doc(description: "Reviewer's rating for a single aspect of a review.") { id: String! @doc(description: "An encoded rating ID.") value_id: String! @doc(description: "An encoded rating value ID.")
} type CreateReviewOutput @doc( description: "CreateReviewOutput" ) { success: Boolean! @doc(description: "True if the review was successfully created") item: Review @doc(description: "Review created")
}

• Ở đây Schema định nghĩa 2 input ReviewRatingInput và CreateReviewInput đễ xác định các trường sẽ truyền vào để tạo review
• Object type CreateReviewOutput được định nghĩa để xác định các dữ liệu sẽ trả về của Mutation
• Type Mutation định nghĩa trường createReview để cung cấp khả năng tạo review cho user

B4: Tạo Schema Resolver

• Schema Resolver chính là nơi sẽ trực tiếp xử lý các truy vấn ở GraphQL
• Schema Resolver thường được đặt ở thư mục Model/Resolver
• Tạo một file AllReviews.php ở đường dẫn app/code/TestModule/GraphQL/Model/Resolver/AllReviews.php

<?php declare(strict_types=1); namespace TestModule\GraphQL\Model\Resolver; use Magento\Framework\GraphQl\Query\ResolverInterface;
use Magento\Framework\GraphQl\Config\Element\Field;
use Magento\Framework\GraphQl\Schema\Type\ResolveInfo;
use Magento\Framework\GraphQl\Exception\GraphQlInputException;
use Magento\Review\Model\ResourceModel\Review\Collection as ReviewCollection;
use Magento\Review\Model\ResourceModel\Review\CollectionFactory as ReviewCollectionFactory; class AllReviews implements ResolverInterface
{ /** * @var ReviewCollectionFactory */ private $reviewCollectionFactory; /** * @param ReviewCollectionFactory $reviewCollectionFactory */ public function __construct(ReviewCollectionFactory $reviewCollectionFactory) { $this->reviewCollectionFactory = $reviewCollectionFactory; } /** * @inheritdoc */ public function resolve( Field $field, $context, ResolveInfo $info, array $value = null, array $args = null ) { $this->validateInput($args); /** @var ReviewCollection */ $reviewCollection = $this->reviewCollectionFactory->create(); $reviewCollection->setPageSize($args['pageSize']) ->setCurPage($args['currentPage']); $reviewCollection->getSelect()->joinLeft( ['rating' => $reviewCollection->getTable('rating_option_vote')], 'main_table.review_id = rating.review_id', ['rating' => 'value'] ); $data = [ 'items' => $reviewCollection->getData(), 'page_info' => [ 'page_size' => $reviewCollection->getPageSize(), 'current_page' => $reviewCollection->getCurPage(), 'total_pages' => $reviewCollection->getLastPageNumber() ] ]; return $data; } /** * @throws GraphQlInputException */ private function validateInput(array $input) { if ($input['currentPage'] < 1) { throw new GraphQlInputException(__('currentPage value must be greater than 1')); } if ($input['pageSize'] < 1) { throw new GraphQlInputException(__('pageSize value must be greater than 1')); } }
}

• Ở file này, method resolve sẽ phụ trách xử lý các yêu cầu từ GraphQL do client gửi lên và trả về thông tin tương ứng
• Lưu ý: Các class resolver xử lý GraphQL đều phải implement interface ResolverInterface
• Tương tự với file ListReviewOfProduct.php và CreateReview.php. Vì các đoạn code khá dài nên mình sẽ không ghi chi tiết code của 2 file đó ở bài viết này, để đọc code của 2 file này mọi người có thể vào link repo mình để bên dưới.

B5: Chạy và kiểm tra query GraphQL

• Chạy các command sau để đảm bảo module được bật

bin/magento module:enable TestModule_GraphQL
bin/magento setup:upgrade
bin/magento setup:di:compile
bin/magento cache:clean

• Kiểm tra query
  Query:

{ allReviews(pageSize: 20, currentPage: 1) { items { created_at customer_id detail email entity_id nickname title } page_info { current_page page_size total_pages } }
}

Response:

{ "data": { "allReviews": { "items": [ { "created_at": "2024-01-10 04:52:58", "customer_id": 1, "detail": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi in purus ullamcorper, sagittis turpis tristique, ullamcorper lectus. Nullam interdum aliquam porttitor.", "email": "", "entity_id": 1, "nickname": "Customer", "title": "Lorem ipsum dolor" }, { "created_at": "2024-01-12 04:52:58", "customer_id": 2, "detail": "Nulla libero leo, sagittis placerat dapibus id, auctor congue mi. Praesent sit amet est sapien. Sed ultricies consequat libero, id porttitor lectus accumsan ut.", "email": "", "entity_id": 2, "nickname": "Steve", "title": "Praesent sit amet" }, ... ], "page_info": { "current_page": 1, "page_size": 20, "total_pages": 10 }

Tổng kết

• Ở bài viết này chúng ta đã tìm hiểu cách để sử dụng và phát triển API GraphQL với Magento 2. Magento 2 cung cấp khá nhiều các API với GraphQL mọi người có thể đọc và tìm hiểu kĩ hơn các API được cung cấp ở Link hoặc ở code của magento trong thử mục vendor/magento với các module có tên chứa từ graphql. Đây là link repo code của bài viết này: Link Repo
• Ở bài viết tiếp theo của series chúng ta sẽ tiếp tục tìm hiểu cách ứng dụng GraphQL vào NestJS

Tài liệu tham khảo

• Magento Official Documentation
• How to Create and Use Custom GraphQL in Magento 2 - Cloudways