Giới thiệu về GraphiQL client

Gato GraphQL cung cấp GraphiQL client để tương tác với dịch vụ GraphQL. Truy cập bằng cách nhấp vào "GraphiQL" trên menu của plugin:

GraphiQL cho phép soạn thảo các GraphQL queries, thực thi chúng và xem phản hồi:

​

Hướng dẫn sử dụng GraphiQL client

Đây là cách sử dụng GraphiQL client để soạn thảo và thực thi một GraphQL query.

Chúng ta soạn thảo GraphQL query trên bảng điều khiển bên trái:

GraphiQL có tính năng tô màu cú pháp cho cú pháp GraphQL. Khi bắt đầu soạn thảo query, chúng ta có thể thấy tên của operation, các dấu ngoặc mở và đóng, các trường, đối số, directives và chú thích đều có màu sắc riêng biệt, giúp chúng ta dễ hiểu query hơn:

Khi tải lần đầu, GraphiQL sẽ truy xuất metadata của GraphQL schema thông qua introspection. Nhờ metadata của schema, tại mọi thời điểm trong quá trình soạn thảo query, GraphiQL sẽ gợi ý các tùy chọn tự động hoàn thành:

Chúng ta cũng có thể duyệt metadata của schema thông qua Documentation Explorer. Để mở nó, chúng ta phải nhấp vào nút "Docs":

Documentation Explorer sẽ xuất hiện ở phía bên phải:

Bằng cách nhấp vào tên của kiểu GraphQL, Documentation Explorer sẽ hiển thị thông tin của nó:

• mô tả của nó
• các interface mà nó triển khai
• danh sách tất cả các trường của nó, bao gồm:
  • các đối số mà chúng nhận
  • kiểu trả về của chúng (mà chúng ta cũng có thể nhấp vào)
  • mô tả của chúng

Tại bất kỳ thời điểm nào, chúng ta cũng có thể tìm kiếm và truy xuất thông tin về bất kỳ phần tử nào trong schema:

Di chuột qua bất kỳ phần tử nào trong query sẽ hiển thị thông tin của nó, và ctrl (hoặc cmd) + nhấp vào nó sẽ hiển thị trong Documentation Explorer:

Nhấp vào bảng "Query variables" ở phía dưới, chúng ta có thể soạn thảo các biến để truyền vào query, dưới dạng một JSON map của variable => value:

Để thực thi GraphQL query, chúng ta nhấn nút "Run", hoặc nhấn ctrl (hoặc cmd) + enter:

Phản hồi GraphQL sẽ được hiển thị trên bảng trung tâm:

Trên bảng điều khiển phía trên, có các add-on khác nhau cho GraphiQL:

Nhấp vào từng nút add-on sẽ thực hiện một hành động nhất định:

• "Prettify" định dạng GraphQL query
• "History" hiển thị danh sách các queries gần đây nhất, và nhấp vào bất kỳ query nào trong số đó sẽ nhập nó vào trình soạn thảo query
• "Explorer" mở bảng GraphiQL Explorer

GraphiQL Explorer là một add-on tuyệt vời. Nó hiển thị danh sách tất cả các trường, và nhấp vào chúng sẽ thêm chúng vào query trong trình soạn thảo, cho phép soạn thảo GraphQL query theo cách trực quan: