ในยุคของการพัฒนาเว็บแอปพลิเคชัน, การเลือกใช้ GraphQL เป็น API ในการจัดการข้อมูลนั้นกำลังได้รับความนิยมมากขึ้นเรื่อยๆ เพราะความยืดหยุ่นและประสิทธิภาพในการดึงข้อมูลที่เป็นประโยชน์ต่อทั้งฝั่งเซิร์ฟเวอร์และไคลเอนต์ อย่างไรก็ตาม, เมื่อเราพูดถึงการสร้าง GraphQL API ใน Next.js, หลายคนอาจจะรู้สึกว่าเป็นเรื่องที่ยากและซับซ้อน เพราะเราต้องทำงานกับ GraphQL และทำความเข้าใจกับวิธีการตั้งค่าและการเชื่อมต่อกับฐานข้อมูล แต่จริงๆ แล้วการสร้าง GraphQL API ใน Next.js นั้นไม่ยากอย่างที่คิด!
ในบทความนี้, เราจะมาพูดถึงวิธีการ สร้าง GraphQL API ด้วย Next.js ซึ่งจะช่วยให้คุณสามารถสร้าง API ที่มีประสิทธิภาพและมีความยืดหยุ่นสูงในการจัดการข้อมูลจากฐานข้อมูล รวมถึงการใช้งานในแอปพลิเคชันที่ซับซ้อนได้อย่างง่ายดาย
ทำไมต้องใช้ GraphQL?
ก่อนที่จะเริ่มสร้าง GraphQL API, มาทำความเข้าใจกันก่อนว่า ทำไม GraphQL ถึงเป็นตัวเลือกที่ดี สำหรับการพัฒนา API:
- ดึงข้อมูลตามที่ต้องการ (Query-based): GraphQL ช่วยให้คุณสามารถดึงข้อมูลจากเซิร์ฟเวอร์ได้เฉพาะส่วนที่คุณต้องการ ซึ่งช่วยลดการขอข้อมูลที่ไม่จำเป็นและเพิ่มประสิทธิภาพ
- การเรียกข้อมูลหลายๆ ชุดในคำขอเดียว (Multiple Resources): คุณสามารถดึงข้อมูลจากหลายๆ แหล่งในคำขอเดียว ซึ่งช่วยลดจำนวนคำขอที่ต้องทำไปยังเซิร์ฟเวอร์
- การทำงานกับข้อมูลที่ซับซ้อน: GraphQL ทำให้การจัดการข้อมูลที่มีความซับซ้อน (เช่น ความสัมพันธ์ระหว่างตารางในฐานข้อมูล) ง่ายขึ้น
- การใช้งานที่ยืดหยุ่นและปรับขนาดได้ดี: GraphQL สามารถปรับแต่งให้เหมาะสมกับขนาดและความซับซ้อนของแอปพลิเคชันได้ง่าย
ขั้นตอนการสร้าง GraphQL API ด้วย Next.js
1. การติดตั้งเครื่องมือที่จำเป็น
ก่อนที่เราจะเริ่มสร้าง GraphQL API, เราต้องติดตั้งเครื่องมือและไลบรารีที่จำเป็นในการทำงานกับ GraphQL ใน Next.js ก่อน โดยใช้คำสั่ง:
npx create-next-app@latest my-next-graphql-app
cd my-next-graphql-app
หลังจากที่สร้างโปรเจกต์เสร็จแล้ว, เราต้องติดตั้งไลบรารีที่ช่วยในการทำงานกับ GraphQL โดยใช้คำสั่ง:
npm install apollo-server-micro graphql
- apollo-server-micro คือไลบรารีสำหรับการสร้าง GraphQL API ที่ทำงานร่วมกับ Next.js ได้ดี
- graphql เป็นไลบรารีหลักสำหรับการทำงานกับ GraphQL ใน Node.js
2. การตั้งค่า Apollo Server ใน Next.js
ในขั้นตอนนี้, เราจะตั้งค่า Apollo Server เพื่อให้สามารถรับคำขอ GraphQL จากลูกค้าได้ โดยการใช้ Apollo Server Micro ที่เหมาะสำหรับการทำงานในสภาพแวดล้อม serverless อย่าง Next.js
สร้างไฟล์ pages/api/graphql.js:
import { ApolloServer, gql } from 'apollo-server-micro';
// กำหนด Schema ของ GraphQL
const typeDefs = gql`
type Query {
hello: String
}
`;
// กำหนด Resolvers สำหรับการดึงข้อมูล
const resolvers = {
Query: {
hello: () => {
return 'Hello, world!';
},
},
};
// สร้าง Apollo Server
const apolloServer = new ApolloServer({
typeDefs,
resolvers,
});
// เปิดใช้งาน Apollo Server
const startServer = apolloServer.start();
export default async function handler(req, res) {
await startServer;
return apolloServer.createHandler({
path: '/api/graphql',
})(req, res);
}
export const config = {
api: {
bodyParser: false,
},
};
ในตัวอย่างนี้, เรากำหนด GraphQL Schema โดยใช้ typeDefs ซึ่งในที่นี้มี Query hello ที่ส่งกลับข้อความ "Hello, world!". เรากำหนด Resolvers ที่ใช้ในการดึงข้อมูลจาก GraphQL ซึ่งในที่นี้จะส่งกลับข้อความที่เรากำหนดไว้
3. การทดสอบ API ด้วย GraphQL Playground
ในตอนนี้, เราสามารถเปิดโปรเจกต์ของเราและทดสอบ GraphQL API ผ่าน GraphQL Playground หรือเครื่องมืออื่นๆ ที่รองรับ GraphQL
หลังจากที่คุณเริ่มต้นเซิร์ฟเวอร์ Next.js แล้ว (โดยการรันคำสั่ง npm run dev), ไปที่ http://localhost:3000/api/graphql ในเบราว์เซอร์ของคุณเพื่อเข้าถึง GraphQL Playground ที่คุณสามารถทดสอบคำขอ GraphQL ได้
ตัวอย่างคำขอ GraphQL:
query {
hello
}
ผลลัพธ์ที่ได้จะเป็น:
{
"data": {
"hello": "Hello, world!"
}
}
4. การเชื่อมต่อ GraphQL กับฐานข้อมูล
ต่อไปเราจะเชื่อมต่อ GraphQL API กับฐานข้อมูลเพื่อให้สามารถดึงข้อมูลจากฐานข้อมูลได้ ตัวอย่างนี้เราจะใช้ Prisma ORM สำหรับการเชื่อมต่อกับฐานข้อมูล MySQL
ติดตั้ง Prisma:
npm install prisma @prisma/client
จากนั้น, ตั้งค่าฐานข้อมูลของเราในไฟล์ prisma/schema.prisma:
datasource db {
provider = "mysql"
url = env("DATABASE_URL")
}
generator client {
provider = "prisma-client-js"
}
เมื่อเราได้ตั้งค่า prisma/schema.prisma แล้ว, ให้ใช้คำสั่งนี้เพื่อสร้าง Prisma Client:
npx prisma generate
5. การแก้ไข GraphQL Schema และ Resolvers สำหรับฐานข้อมูล
ตอนนี้เราจะสร้าง GraphQL schema และ resolvers สำหรับการดึงข้อมูลจากฐานข้อมูล
อัปเดต pages/api/graphql.js:
import { ApolloServer, gql } from 'apollo-server-micro';
import prisma from '../../lib/prisma'; // เชื่อมต่อกับ Prisma Client
// กำหนด GraphQL Schema สำหรับการดึงข้อมูลผู้ใช้
const typeDefs = gql`
type User {
id: Int
name: String
email: String
}
type Query {
users: [User]
}
`;
// สร้าง Resolver สำหรับการดึงข้อมูลผู้ใช้จากฐานข้อมูล
const resolvers = {
Query: {
users: async () => {
return await prisma.user.findMany(); // ดึงข้อมูลผู้ใช้ทั้งหมดจากฐานข้อมูล
},
},
};
// สร้าง Apollo Server
const apolloServer = new ApolloServer({
typeDefs,
resolvers,
});
const startServer = apolloServer.start();
export default async function handler(req, res) {
await startServer;
return apolloServer.createHandler({
path: '/api/graphql',
})(req, res);
}
export const config = {
api: {
bodyParser: false,
},
};
ในตัวอย่างนี้, เราได้เพิ่ม GraphQL Type สำหรับ User และ Query สำหรับดึงข้อมูลผู้ใช้ทั้งหมดจากฐานข้อมูล MySQL โดยใช้ Prisma
6. การทดสอบการดึงข้อมูลจากฐานข้อมูล
หลังจากที่เราได้อัปเดต GraphQL API แล้ว, เราสามารถทดสอบการดึงข้อมูลผู้ใช้จากฐานข้อมูลได้
ตัวอย่างคำขอ:
query {
users {
id
name
email
}
}
ผลลัพธ์ที่ได้จะเป็น:
{
"data": {
"users": [
{
"id": 1,
"name": "John Doe",
"email": "johndoe@example.com"
},
{
"id": 2,
"name": "Jane Doe",
"email": "janedoe@example.com"
}
]
}
}
7. การปรับปรุงและเพิ่มฟีเจอร์
หลังจากที่เราสร้าง GraphQL API ที่เชื่อมต่อกับฐานข้อมูลได้แล้ว, คุณสามารถขยาย API ของคุณเพื่อรองรับฟีเจอร์ต่างๆ เช่น การเพิ่มผู้ใช้ใหม่, การอัปเดตข้อมูล, การลบข้อมูล, และการทำงานกับข้อมูลที่มีความสัมพันธ์กัน
ตัวอย่างการเพิ่มผู้ใช้ใหม่:
const resolvers = {
Mutation: {
addUser: async (_, { name, email }) => {
return await prisma.user.create({
data: { name, email },
});
},
},
};
สรุป
การสร้าง GraphQL API ด้วย Next.js นั้นไม่ยากอย่างที่คิด คุณสามารถใช้ Apollo Server ร่วมกับ Prisma และฐานข้อมูลต่างๆ เพื่อสร้าง API ที่ยืดหยุ่นและมีประสิทธิภาพ ในบทความนี้เราครอบคลุมการสร้าง GraphQL API สำหรับการดึงข้อมูลผู้ใช้จากฐานข้อมูล, และคุณยังสามารถขยายไปใช้ฟีเจอร์อื่นๆ ได้ตามต้องการ
