REST API แฒแ แแ แฅแ แแแฅ แแญ แตแแฝ แแแฅ แญแแฃแแ โ GraphQL แซแตแแแแ แฅแป แญแฐแฃแแ!
GraphQL โ Facebook (Meta) 2015 แ.แ แซแฐแซแ แจ API query language แแแข
REST API แแแณ แฅแ
แ แแญ แแแ แญแฝแแแข
แแแ แแฉแแฑ: REST แแตแฅ Server แแ แญแฐแฃแแ แฅแ แญแแตแแ โ
GraphQL แแตแฅ แ แแฐ แแ แตแแแแแ
แฅแแ
แตแ แญแแแ
!
REST API แแตแฅ แฅแ endpoints แ แ โ /users, /posts, /commentsโฆ
GraphQL แแตแฅ แ แแต endpoint แฅแป (/graphql) แ แ โ แแแ query แแฐ แซ แ แแต endpoint แญแแณแ!
GraphQL แแตแฅ 3 แแญแแต operations แ แ โ Query (แแแแ แฅ)แฃ Mutation (แแแแจแญ/แแแแ แญ)แฃ Subscription (แ real-time)แข REST แแตแฅ GET/POST/PUT/DELETE แแแณ แฅแแแ แแธแ!
Operations แ แแ แจแฅ:
| OPERATION | แแ แซแฐแญแแ? | REST แแตแญ | แแณแ |
|---|---|---|---|
| query | แแแฅ แแแ แฅ / Read data | GET | query { users { name } } |
| mutation | แแแฅ แแ แญ/แแญแญ/แฐแญแ | POST/PUT/DELETE | mutation { createUser(...) } |
| subscription | Real-time แแแฅ แแณแแฅ | WebSocket | subscription { newMessage } |
GraphQL แแฐแต โ แจ Client แฅแตแจ DB:
Schema โ GraphQL แแตแฅ แแ types แ แแฃ แแ queries/mutations แญแแแณแ แแ แญแแแแข แฅแแฐ Prisma schema แแญแแต แแ!
Resolver โ แซ query แฒแ แจแ
แแ แแตแจแ? DB แ แ แญแ
? แแ แญแแแต? แแ แญแแแ!
# GraphQL Schema โ แแ types แ แ? type User { id: ID! # ! = required (แแดแณ) name: String! email: String! posts: [Post] # User แ Posts แแญ relation } type Post { id: ID! title: String! content: String # แซแ ! = optional author: User! } # แแ queries แญแแแณแ? type Query { users: [User] # แแแ users user(id: ID!): User # แ แแต user posts: [Post] # แแแ posts } # แแ mutations แญแแแณแ? type Mutation { createUser(name: String!, email: String!): User deleteUser(id: ID!): Boolean }
const resolvers = { // Query resolvers โ แฒแ แจแ แแ แซแฐแญแแ? Query: { // users query โ DB แแแ users แ แแฃ users: async () => { return await prisma.user.findMany(); }, // user(id) query โ แ แแฑแ user แ แแฃ user: async (_, { id }) => { return await prisma.user.findUnique({ where: { id } }); }, }, // Mutation resolvers โ แฒแแฉ แแ แซแฐแญแแ? Mutation: { // createUser โ แ แฒแต user แแ แญ createUser: async (_, { name, email }) => { return await prisma.user.create({ data: { name, email } }); }, // deleteUser โ user แฐแญแ deleteUser: async (_, { id }) => { await prisma.user.delete({ where: { id } }); return true; }, }, // Type resolvers โ relation แซแตแฐแแแณแ User: { posts: async (parent) => { return await prisma.post.findMany({ where: { authorId: parent.id } }); }, }, };
# โโ QUERY โ แแแฅ แแแ แฅ โโโโโโโโโโโโโโโโโโโโโโโโโ # แแแ users โ name แฅแ email แฅแป แแแแแ query { users { name email } } # แ แแต user โ id แฃ name แฃ posts แญแแญ query GetUserWithPosts { user(id: "1") { id name posts { title content } } } # โโ MUTATION โ แแแฅ แแ แญ/แแญแญ โโโโโโโโโโโโโโโโ # แ แฒแต user แแ แญ mutation CreateNewUser { createUser( name: "Abel Tesfaye" email: "abel@ethiocode.com" ) { id name email } } # user แฐแญแ mutation { deleteUser(id: "3") } # โโ VARIABLES โ Query แ แฐแแแแญ โโโโโโโโโโโโโโโ query GetUser($userId: ID!) { user(id: $userId) { name email } } # Variables: { "userId": "1" }
GraphQL Simulator! Query แปแ โ Run โ Response แญแณแซแแ! Fields Selector โ แแ fields แตแแแแแ แแจแฅ โ Query แซแฑ แญแฐแซแแ!
แแ fields แตแแแแแ
? แแจแฅ โ Query แซแฑ แญแฐแซแแแ!
แญแ
แแ GraphQL แฅแ
แ โ แซแตแแแแ
fields แฅแป!
Mutation = แแแฅ แแ แญแฃ แแญแญแฃ แฐแญแ! Query แแแณ mutation แตแ แแแแ !
REST API แแ แญแฐแฃแแ แฅแ แญแแตแแ โ GraphQL แ แแฐ แแ แตแแแแแ แฅแแ แตแ แญแแแ ! Over-fetching (แฅแ แแฃ) แฅแ Under-fetching (แตแแฝ แแฃ) แฝแแญ แซแตแแฃแแ!
REST แแตแฅ /users, /posts, /commentsโฆ แฅแ endpoints แ แ โ GraphQL แแตแฅ /graphql แ แแต แฅแป แแ! แแแ query แแฐ แซ แญแแณแ!
Schema = แแ types แ แ? แแ queries แญแแแณแ? | Resolver = แซ query แฒแ แจแ แแ แซแฐแญแแ? DB แญแ แญแแ!
query = แแแ แฅ (REST GET) | mutation = แแ แญ/แแญแญ/แฐแญแ (REST POST/PUT/DELETE) | subscription = Real-time (WebSocket)
User + Posts แ แแต query แแตแฅ แ แแฃ! { user { name posts { title } } } โ REST แแตแฅ แแแต requests แซแตแแแแ แแ แญ!