GraphQL là một ngôn ngữ truy vấn cho API của bạn và một tập hợp các thời gian chạy phía máy chủ (được triển khai bằng các ngôn ngữ phụ trợ khác nhau) để thực thi các truy vấn
GraphQL là gì
GraphQL là biên giới mới trong các API (Giao diện lập trình ứng dụng) thiết kế và cách chúng tôi xây dựng và tiêu thụ chúng.
Đó là một ngôn ngữ truy vấn và một tập hợp các thời gian chạy phía máy chủ (được triển khai bằng các ngôn ngữ phụ trợ khác nhau) để thực thi các truy vấn. Nó không gắn liền với một công nghệ cụ thể, nhưng bạn có thể triển khai nó bằng bất kỳ ngôn ngữ nào.
Đó là một phương pháp luậncạnh tranh trực tiếp với REST(Chuyển trạng thai biểu hiện) Các API, giống như REST đã cạnh tranh vớiXÀ BÔNGlúc đầu.
Và như chúng ta sẽ thấy, nó rất khác với REST. Nó tạo ra một chiều hướng hoàn toàn mới cho thiết kế API.
GraphQL cũ làphát triển tại Facebook, giống như nhiều công nghệ đang làm rung chuyển thế giới JavaScript gần đây, nhưPhản ứngvà React Native, và nó đã được công khailaunched in 2015- mặc dù Facebook đã sử dụng nó trong nội bộ một vài năm trước đó.
Nhiều công ty lớn đang áp dụng GraphQL bên cạnh Facebook, bao gồm GitHub, Pinterest, Twitter, Sky, The New York Times, Shopify, Yelp và hàng nghìn công ty khác.
Lần đầu tiên tôi liên hệ với GraphQL khi GitHub quyết định triển khai v4 của API của họ bằng công nghệ đó và tôi đã tham gia chương trình beta của họ. Đó là khi tôi phát hiện ra nó là một nhân tố thay đổi cuộc chơi ở nhiều khía cạnh.
Làm thế nào nó hoạt động
GraphQL cho thấy một điểm cuối duy nhấttừ máy chủ của bạn.
Bạngửi một truy vấn đến điểm cuối đóbằng cách sử dụng cú pháp Ngôn ngữ truy vấn đặc biệt. Truy vấn đó làchỉ là một chuỗi.
Máy chủ phản hồi một truy vấn bằng cách cung cấp một đối tượng JSON.
Hãy xem một ví dụ đầu tiên về một truy vấn như vậy. Truy vấn này lấy tên của một người cóid=1
:
GET /graphql?query={ person(id: "1") { name } }or:
{
person(id: "1") {
name
}
}
We’ll get this JSON response back:
{
"name": "Tony"
}
Let’s add a bit more complexity: we get the name of the person, and the city where the person lives, by extracting it from the address
object. We don’t care about other details of the address, and the server does not return them back to us because we didn’t ask for them:
GET /graphql?query={ person(id: "1") { name, address { city } } }or
{
person(id: "1") {
name
address {
city
}
}
}
This is what we get back:
{
"name": "Tony",
"address": {
"city": "York"
}
}
As you can see the data we get is basically the same structure of the request we sent, filled with values that were fetched.
GraphQL Queries
In this section you’ll learn how is a GraphQL query composed.
The concepts I’ll introduce are
- fields and arguments
- aliases
- fragments
Fields and arguments
Take this simple GraphQL query:
{
person(id: "1") {
name
}
}
In this query you see 2 fields, person
and name
, and 1 argument.
The field person
returns an Object which has another field in it, a String.
The argument allows us to specify which person we want to reference. We pass an id
, but we could as well pass a name
argument, if the API we talk to has the option to find a person by name.
Arguments are not limited to any particular field. We could have a friends
field in person
that lists the friends of that person, and it could have a limit
argument, to specify how many we want the API to return:
{
person(id: "1") {
name
friends(limit: 100)
}
}
Aliases
You can ask the API to return a field with a different name. For example here you request the name
field, but you want it returned as fullname
:
{
owner: person(id: "1") {
fullname: name
}
}
will return
{
"data": {
"owner": {
"fullname": "Tony"
}
}
}
This feature, beside creating more ad-hoc naming for your client code, in case you need, is the only thing that can make the query work if you need to reference the same endpoint 2 times in the same query:
{
owner: person(id: "1") {
fullname: name
}
first_employee: person(id: "2") {
fullname: name
}
}
Fragments
In the above query we replicated the person structure. Fragments allow us to specify the structure just once (a very useful thing when you have many similar fields):
{
owner: person(id: "1") {
...personFields
}
first_employee: person(id: "2") {
...personFields
}
}
fragment personFields on person {
fullname: name
}
GraphQL Variables
More complex GraphQL queries need to use variables, a way to dynamically specify a value that is used inside a query.
In this case we added the person id as a string inside the query:
{
owner: person(id: "1") {
fullname: name
}
}
The id will most probably change dynamically in our program, so we need a way to pass it, and not with string interpolation.
With variables, the same query can be written as this:
query GetOwner($id: String) {
owner: person(id: $id) {
fullname: name
}
}
{
“id”: “1”
}
In this snippet we have assigned the GetOwner
name to our query. Think of it as named functions, while previously you had an anonymous function. Named queries are useful when you have lots of queries in your application.
The query definition with the variables looks like a function definition, and it works in an equivalent way.
Making variables required
Appending a !
to the type:
query GetOwner($id: String!)instead of $id: String
will make the $id variable required.
Specifying a default value for a variable
You can specify a default value using this syntax:
query GetOwner($id: String = "1")GraphQL Directives
Directives let you include or exclude a field if a variable is true or false.
query GetPerson($id: String) {
person(id: $id) {
fullname: name,
address: @include(if: $getAddress) {
city
street
country
}
}
}
{
“id”: “1”,
“getAddress”: false
}
In this case if getAddress
variable we pass is true, we also get the address field, otherwise not.
We have 2 directives available: include
, which we have just seen (includes if true), and skip
, which is the opposite (skips if true)
@include(if: Boolean)
query GetPerson($id: String) {
person(id: $id) {
fullname: name,
address: @include(if: $getAddress) {
city
street
country
}
}
}
{
“id”: “1”,
“getAddress”: false
}
@skip(if: Boolean)
query GetPerson($id: String) {
person(id: $id) {
fullname: name,
address: @skip(if: $excludeAddress) {
city
street
country
}
}
}
{
“id”: “1”,
“excludeAddress”: false
}
More graphql tutorials:
- An introduction to GraphQL
- A complete introduction to Apollo, the GraphQL toolkit
- How to create a GraphQL Server with Node.js and Express
- How to authenticate using GraphQL Cookies and JWT
- GraphQL API vs REST API