Xin chào, đã bao giờ bạn gặp các bài toán như filter sản phẩm trên một trang e-commerce, lọc dữ liệu từ một bảng theo yêu cầu của người dùng, hay đơn giản chỉ muốn xây dựng một câu query nhưng bạn là front-end dev với 0% kiến thức về SQL 
. Đừng lo lắng vì react-querybuilder ở đây để hỗ trợ bạn làm điều đó.
I. Giới thiệu
Vậy querybuilder là gì? Querybuilder là một component được thiết kế để tăng cường hiệu suất, cũng như đơn giản hoá việc xây dựng câu truy vấn SQL (và cả NoSQL).
Hiện nay trên npm có hai package phổ biến nhất là react-querybuilder và react-awesome-query-builder:
Đến đây, có lẽ bạn sẽ thắc mắc vì sao react-awesome-query-builder nhìn có vẻ “out trình” react-querybuilder, thế nhưng vì sao mình lại chọn react-querybuilder? Vì các lí do sau đây:
II. So sánh với react-awesome-query-builder
Đầu tiên, hãy nhìn vào hai trang docs này:
Đây là react-awesome-query-builder
Còn đây là react-querybuilder
Không biết ý kiến của bạn như thế nào, nhưng cá nhân mình thì thích trang docs của react-querybuilder hơn 😀 (dễ navigate, search, rõ ràng,…).
Thứ hai, đó là về kích thước của hai package này, react-querybuidler nhẹ hơn hẳn so với react-awesome-query-builder:
react-awesome-query-builder
react-querybuilder
Thứ ba, dưới góc nhìn chủ quan thì bản thân mình thây react-querybuilder dễ tiếp cận hơn nhiều so với react-awesome-query-builder 
. Để chứng minh điều đó thì chúng ta hãy đi tiếp tới phần hướng dẫn sử dụng trước khi dùng nhé.
III. Ứng dụng
Bước 1, cài đặt package
npm i react-querybuilderyarn i react-querybuilder
Bước 2, thêm react-querybuilder vào dự án
import { QueryBuilder } from ‘react-querybuilder’;
import ‘react-querybuilder/dist/query-builder.scss’;export default () => <QueryBuilder />;
const fields: Field[] = [
{ name: ‘firstName’, label: ‘First Name’ },
{ name: ‘lastName’, label: ‘Last Name’ },
];export default () => <QueryBuilder fields={fields} />;
Các fields ở đây tương đương với các cột ở trong một table (hoặc nhiều table sau khi join)
Bước 4, thêm state vào component
import { useState } from ‘react’;
import { QueryBuilder, Field, RuleGroupType } from ‘react-querybuilder’;
import ‘react-querybuilder/dist/query-builder.scss’;const fields: Field[] = [
{ name: ‘firstName’, label: ‘First Name’ },
{ name: ‘lastName’, label: ‘Last Name’ },
];export default () => {
const [query, setQuery] = useState<RuleGroupType>({
combinator: ‘and’,
rules: [
{ field: ‘firstName’, operator: ‘=’, value: ‘Steve’ },
{ field: ‘lastName’, operator: ‘=’, value: ‘Vai’ },
],
});return <QueryBuilder fields={fields} query={query} onQueryChange={q => setQuery(q)} />;
};
Bước 5, kiểm tra output của react-querybuilder
<>
<QueryBuilder fields={fields} query={query} onQueryChange={q => setQuery(q)} />
<h4>
SQL as result of <code>formatQuery(query, ‘sql’)</code>:
</h4>
<pre>{formatQuery(query, ‘sql’)}</pre>
</>
Ở chỗ in đậm đỏ, bạn có thể thay các kiểu trả về mà bạn muốn để react-querybuilder xây dựng cho bạn câu truy vấn theo yêu cầu:
- JSON (with or without id(s) )
- SQL
WHEREclause - Parameterized SQL (with anonymous or named parameters)
- MongoDB
- Common Expression Language (CEL)
- Spring Expression Language (SpEL)
- JsonLogic
Như vậy là bạn đã có thể sử dụng được component này ở mức cơ bản là nhận input và xuất ra output rồi. Rất đơn giản phải không nào, không cần suy nghĩ câu truy vấn, where như nào, like % ra sao, việc bạn cần làm bây giờ là chỉ cần tích hợp nó vào giao diện của mình để làm được các chức năng như filter, lọc, sắp xếp, phân trang,…
IV. Tổng kết
Từ khi biết tới react-querybuilder, mình đã không còn phải đau đầu suy nghĩ về những bài toán filter hay phân trang nữa, đây là một công cụ tuyệt vời đối những front-end dev có ít kiến thức về cơ sở dữ liệu (như mình chẳng hạn 😀 ) để xử lí những câu query một cách đơn giản nhất có thể. Tuy nhiên, có thể bạn còn thắc mắc là nếu nó chỉ làm được như vậy thì có gì để so sánh với react-awesome-query-builder vốn nhận được rất nhiều sự tin dùng. Vậy thì bạn đã bị lừa rồi, bạn dính cả thính cả mồi ^^, ở bài viết này mình chỉ đưa ra cách sử dụng và tích hợp đơn giản của react-querybuiler thôi. React-querybuilder hoàn toàn có thể tích hợp material-ui, antd,… vào trong nó, biến component này trông “out trình” giao diện hẳn so với react-awesome-query-builder. Nếu như các bạn hứng thú, mình sẽ làm tiếp phần 2 với các hướng dẫn nâng cao hơn của package này như tích hợp material-ui, validation, custom operator, custom ValueEditor,… :))
Kết lại, dù là react-awesome-query-builder hay react-querybuilder thì chúng đều là công cụ giúp hỗ trợ xây dựng câu truy vấn rất tốt. Đây chỉ là một bài viết mang tính chất tham khảo, còn việc sử dụng package nào hoàn toàn là quyền quyết định của bạn. Mong rằng bài viết này sẽ giúp ích được cho mọi người. Xin cảm ơn và chào thân ái <3
