โ What is GraphQL?
GraphQL is a query language for APIs and a runtime for fulfilling those queries with your existing data. It provides a complete and understandable description of the data in your API, gives clients the power to ask for exactly what they need and nothing more, and makes it easier to evolve APIs over time. ๐
While traditional ๐ REST APIs often involve multiple round-trips to different endpoints (e.g., /users/1, /users/1/posts, /users/1/followers), GraphQL allows a client to fetch all necessary data in a โก single request.

๐ Key Concepts
- ๐ Schema: The contract between the client and the server. It defines the types of data available and the relationships between them.
- ๐ Query: How the client requests data.
- โ๏ธ Mutation: How the client modifies data (create, update, delete).
- โ๏ธ Resolver: The actual function on the server that fetches the data for a specific field.
๐ค Example: A User Profile
Imagine you want to fetch a user’s name and the titles of their recent blog posts. ๐
๐๏ธ 1. The Schema (Definition)
The server defines the shape of the data:
type User {
id: ID!
name: String!
posts: [Post]
}
type Post {
title: String!
content: String
}
type Query {
user(id: ID!): User
}
๐จ 2. The Request (Query)
The client sends a query specifying exactly which fields are needed:
query {
user(id: "123") {
name
posts {
title
}
}
}
๐ฉ 3. The Response
The server returns JSON that perfectly matches the structure of the query:
{
"data": {
"user": {
"name": "Jane Doe",
"posts": [
{ "title": "Understanding GraphQL" },
{ "title": "Introduction to APIs" }
]
}
}
}
๐ Benefits of GraphQL
- ๐ฏ Avoid Over-fetching/Under-fetching: You never receive more data than you asked for, and you never have to make extra requests to get missing information.
- ๐ก๏ธ Strongly Typed: The schema acts as a formal contract, making it easier for front-end and back-end teams to work in parallel.
- ๐ Introspection: Clients can query the schema itself to understand what data is available, enabling powerful tooling like automated documentation and IDE auto-completion.
- ๐ Single Endpoint: Unlike REST, where you have many endpoints, GraphQL typically operates via a single
/graphqlendpoint, simplifying network management.
โ GraphQL เฐ เฐเฐเฑ เฐเฐฎเฐฟเฐเฐฟ?
GraphQL เฐ เฐจเฑเฐฆเฐฟ APIs เฐเฑเฐธเฐ เฐเฐ query language เฐฎเฐฐเฐฟเฐฏเฑ เฐฎเฑ existing data เฐคเฑ เฐ queries เฐจเฐฟ fulfill เฐเฑเฐฏเฐกเฐพเฐจเฐฟเฐเฐฟ เฐเฐ runtime. เฐเฐฆเฐฟ เฐฎเฑ API เฐฒเฑเฐจเฐฟ data เฐฏเฑเฐเฑเฐ complete เฐฎเฐฐเฐฟเฐฏเฑ understandable description เฐจเฐฟ เฐ เฐเฐฆเฐฟเฐธเฑเฐคเฑเฐเฐฆเฐฟ. Clients เฐเฐฟ เฐเฐเฑเฐเฐฟเฐคเฐเฐเฐพ เฐเฐฎเฐฟ เฐเฐพเฐตเฐพเฐฒเฑ (exactly what they need) เฐ เฐฆเฐฟ เฐฎเฐพเฐคเฑเฐฐเฐฎเฑ เฐ เฐกเฐฟเฐเฑ power เฐจเฐฟ เฐเฐธเฑเฐคเฑเฐเฐฆเฐฟ เฐฎเฐฐเฐฟเฐฏเฑ เฐเฐพเฐฒเฐเฑเฐฐเฐฎเฑเฐฃเฐพ APIs เฐจเฐฟ evolve เฐเฑเฐฏเฐกเฐ easier เฐเฑเฐธเฑเฐคเฑเฐเฐฆเฐฟ. ๐
Traditional ๐ REST APIs เฐฒเฑ เฐตเฑเฐฐเฑเฐตเฑเฐฐเฑ endpoints เฐเฐฟ (e.g., /users/1, /users/1/posts, /users/1/followers) multiple round-trips เฐเฑเฐฏเฐพเฐฒเฑเฐธเฐฟ เฐเฐเฐเฑเฐเฐฆเฐฟ, เฐเฐพเฐจเฑ GraphQL เฐฆเฑเฐตเฐพเฐฐเฐพ client เฐคเฐฎเฐเฑ เฐ
เฐตเฐธเฐฐเฐฎเฑเฐจ data เฐ
เฐเฐคเฐเฐฟเฐจเฑ เฐเฐเฑ โก single request เฐฒเฑ fetch เฐเฑเฐธเฑเฐเฑเฐตเฐเฑเฐเฑ.
๐ Key Concepts (เฐฎเฑเฐเฑเฐฏเฐฎเฑเฐจ เฐเฐพเฐจเฑเฐธเฑเฐชเฑเฐเฑเฐธเฑ)
- ๐ Schema: เฐเฐฆเฐฟ client เฐฎเฐฐเฐฟเฐฏเฑ server เฐฎเฐงเฑเฐฏ เฐเฐ contract เฐฒเฐพเฐเฐเฐฟเฐฆเฐฟ. เฐเฐฆเฐฟ available เฐเฐพ เฐเฐจเฑเฐจ data types เฐจเฐฟ เฐฎเฐฐเฐฟเฐฏเฑ เฐตเฐพเฐเฐฟ เฐฎเฐงเฑเฐฏ เฐเฐจเฑเฐจ relationships เฐจเฐฟ define เฐเฑเฐธเฑเฐคเฑเฐเฐฆเฐฟ.
- ๐ Query: Client data เฐจเฐฟ เฐเฐฒเฐพ request เฐเฑเฐธเฑเฐคเฐพเฐฐเฑ เฐ เฐจเฑเฐฆเฐฟ เฐเฐฆเฐฟ เฐคเฑเฐฒเฑเฐชเฑเฐคเฑเฐเฐฆเฐฟ.
- โ๏ธ Mutation: Client data เฐจเฐฟ เฐเฐฒเฐพ modify เฐเฑเฐธเฑเฐคเฐพเฐฐเฑ (create, update, delete) เฐ เฐจเฑเฐฆเฐฟ เฐฆเฑเฐจเฐฟ เฐฆเฑเฐตเฐพเฐฐเฐพ เฐเฐฐเฑเฐเฑเฐคเฑเฐเฐฆเฐฟ.
- โ๏ธ Resolver: เฐเฐ specific field เฐเฑเฐธเฐ data เฐจเฐฟ fetch เฐเฑเฐธเฑ server เฐฒเฑเฐจเฐฟ actual function เฐจเฐฟ resolver เฐ เฐเฐเฐพเฐฐเฑ.
๐ค Example: A User Profile (เฐเฐฆเฐพเฐนเฐฐเฐฃ: เฐเฐ User Profile)
เฐเฐ user เฐฏเฑเฐเฑเฐ name เฐฎเฐฐเฐฟเฐฏเฑ เฐตเฐพเฐฐเฐฟ recent blog posts เฐฏเฑเฐเฑเฐ titles เฐจเฐฟ เฐฎเฑเฐฐเฑ fetch เฐเฑเฐฏเฐพเฐฒเฐฟ เฐ เฐจเฑเฐเฑเฐเฐฆเฐพเฐ. ๐
๐๏ธ 1. The Schema (Definition)
Server เฐ data เฐฏเฑเฐเฑเฐ shape เฐจเฐฟ เฐเฐฒเฐพ define เฐเฑเฐธเฑเฐคเฑเฐเฐฆเฐฟ:
GraphQL
type User {
id: ID!
name: String!
posts: [Post]
}
type Post {
title: String!
content: String
}
type Query {
user(id: ID!): User
}
๐จ 2. The Request (Query)
Client เฐคเฐฎเฐเฑ exactly เฐ fields เฐเฐพเฐตเฐพเฐฒเฑ specify เฐเฑเฐธเฑเฐคเฑ เฐเฐ query เฐจเฐฟ เฐชเฐเฐชเฑเฐคเฐพเฐฐเฑ:
GraphQL
query {
user(id: "123") {
name
posts {
title
}
}
}
๐ฉ 3. The Response
Server query เฐฏเฑเฐเฑเฐ structure เฐคเฑ perfectly match เฐ เฐฏเฑเฐฏเฑ JSON เฐจเฐฟ return เฐเฑเฐธเฑเฐคเฑเฐเฐฆเฐฟ:
JSON
{
"data": {
"user": {
"name": "Jane Doe",
"posts": [
{ "title": "Understanding GraphQL" },
{ "title": "Introduction to APIs" }
]
}
}
}
๐ Benefits of GraphQL (GraphQL เฐตเฐฒเฑเฐฒ เฐเฐชเฐฏเฑเฐเฐพเฐฒเฑ)
- ๐ฏ Avoid Over-fetching/Under-fetching: เฐฎเฑเฐฐเฑ เฐ เฐกเฐฟเฐเฐฟเฐจ เฐฆเฐพเฐจเฐฟเฐเฐเฐเฑ เฐเฐเฑเฐเฑเฐต data เฐฐเฐพเฐฆเฑ (Over-fetching เฐเฐฐเฐเฐฆเฑ), เฐ เฐฒเฐพเฐเฐจเฐฟ missing information เฐเฑเฐธเฐ เฐฎเฐณเฑเฐณเฑ extra requests เฐเฑเฐฏเฐพเฐฒเฑเฐธเฐฟเฐจ เฐ เฐตเฐธเฐฐเฐ เฐเฑเฐกเฐพ เฐเฐเฐกเฐฆเฑ (Under-fetching เฐเฐฐเฐเฐฆเฑ).
- ๐ก๏ธ Strongly Typed: Schema เฐเฐ formal contract เฐฒเฐพเฐเฐพ เฐชเฐจเฐฟเฐเฑเฐธเฑเฐคเฑเฐเฐฆเฐฟ, เฐฆเฑเฐจเฐฟเฐตเฐฒเฑเฐฒ front-end เฐฎเฐฐเฐฟเฐฏเฑ back-end teams เฐเฐตเฐฐเฐฟเฐเฐฟ เฐตเฐพเฐฐเฑ parallel เฐเฐพ เฐตเฐฐเฑเฐเฑ เฐเฑเฐฏเฐกเฐ easier เฐ เฐตเฑเฐคเฑเฐเฐฆเฐฟ.
- ๐ Introspection: เฐ data available เฐเฐพ เฐเฐเฐฆเฑ เฐ เฐฐเฑเฐฅเฐ เฐเฑเฐธเฑเฐเฑเฐตเฐกเฐพเฐจเฐฟเฐเฐฟ clients เฐกเฑเฐฐเฑเฐเฑเฐเฑ เฐเฐพ schema เฐจเฑ query เฐเฑเฐฏเฐตเฐเฑเฐเฑ. เฐเฐฆเฐฟ automated documentation เฐฎเฐฐเฐฟเฐฏเฑ IDE auto-completion เฐฒเฐพเฐเฐเฐฟ powerful tooling เฐจเฐฟ enable เฐเฑเฐธเฑเฐคเฑเฐเฐฆเฐฟ.
- ๐ Single Endpoint: REST เฐฒเฑ เฐฒเฐพเฐเฐพ multiple endpoints เฐเฐพเฐเฑเฐเฐกเฐพ, GraphQL เฐธเฐพเฐงเฐพเฐฐเฐฃเฐเฐเฐพ เฐเฐเฑ single
/graphqlendpoint เฐฆเฑเฐตเฐพเฐฐเฐพ operate เฐ เฐตเฑเฐคเฑเฐเฐฆเฐฟ, เฐเฐฆเฐฟ network management เฐจเฐฟ simplify เฐเฑเฐธเฑเฐคเฑเฐเฐฆเฐฟ.