วิธีสร้าง GraphQL API ด้วย Next.js

ในยุคของการพัฒนาเว็บแอปพลิเคชัน, การเลือกใช้ GraphQL เป็น API ในการจัดการข้อมูลนั้นกำลังได้รับความนิยมมากขึ้นเรื่อยๆ เพราะความยืดหยุ่นและประสิทธิภาพในการดึงข้อมูลที่เป็นประโยชน์ต่อทั้งฝั่งเซิร์ฟเวอร์และไคลเอนต์ อย่างไรก็ตาม, เมื่อเราพูดถึงการสร้าง GraphQL API ใน Next.js, หลายคนอาจจะรู้สึกว่าเป็นเรื่องที่ยากและซับซ้อน เพราะเราต้องทำงานกับ GraphQL และทำความเข้าใจกับวิธีการตั้งค่าและการเชื่อมต่อกับฐานข้อมูล แต่จริงๆ แล้วการสร้าง GraphQL API ใน Next.js นั้นไม่ยากอย่างที่คิด!

ในบทความนี้, เราจะมาพูดถึงวิธีการ สร้าง GraphQL API ด้วย Next.js ซึ่งจะช่วยให้คุณสามารถสร้าง API ที่มีประสิทธิภาพและมีความยืดหยุ่นสูงในการจัดการข้อมูลจากฐานข้อมูล รวมถึงการใช้งานในแอปพลิเคชันที่ซับซ้อนได้อย่างง่ายดาย

ทำไมต้องใช้ GraphQL?

ก่อนที่จะเริ่มสร้าง GraphQL API, มาทำความเข้าใจกันก่อนว่า ทำไม GraphQL ถึงเป็นตัวเลือกที่ดี สำหรับการพัฒนา API:

1. ดึงข้อมูลตามที่ต้องการ (Query-based): GraphQL ช่วยให้คุณสามารถดึงข้อมูลจากเซิร์ฟเวอร์ได้เฉพาะส่วนที่คุณต้องการ ซึ่งช่วยลดการขอข้อมูลที่ไม่จำเป็นและเพิ่มประสิทธิภาพ
2. การเรียกข้อมูลหลายๆ ชุดในคำขอเดียว (Multiple Resources): คุณสามารถดึงข้อมูลจากหลายๆ แหล่งในคำขอเดียว ซึ่งช่วยลดจำนวนคำขอที่ต้องทำไปยังเซิร์ฟเวอร์
3. การทำงานกับข้อมูลที่ซับซ้อน: GraphQL ทำให้การจัดการข้อมูลที่มีความซับซ้อน (เช่น ความสัมพันธ์ระหว่างตารางในฐานข้อมูล) ง่ายขึ้น
4. การใช้งานที่ยืดหยุ่นและปรับขนาดได้ดี: 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 สำหรับการดึงข้อมูลผู้ใช้จากฐานข้อมูล, และคุณยังสามารถขยายไปใช้ฟีเจอร์อื่นๆ ได้ตามต้องการ

การใช้ SWR ใน Next.js เพื่อดึงข้อมูลแบบ Client-side

ในโลกของการพัฒนาเว็บแอปพลิเคชัน ฝั่ง Frontend ต้องมีวิธีดึงข้อมูลจาก API อย่างมีประสิทธิภาพ ซึ่งใน Next.js มีหลายแนวทางให้เลือกใช้ เช่น getServerSideProps (SSR), getStaticProps (SSG), หรือ Client-side Fetching ซึ่งแต่ละวิธีก็มีข้อดีข้อเสียต่างกันไป

ถ้าพูดถึงการดึงข้อมูลแบบ Client-side แล้ว SWR เป็นตัวเลือกที่หลายคนชอบ เพราะมันช่วยให้การ fetch ข้อมูลลื่นไหล อัปเดตอัตโนมัติ และยังจัดการแคชได้อย่างฉลาด วันนี้เราจะมาทำความรู้จัก SWR และดูวิธีใช้งานใน Next.js กันแบบเข้าใจง่าย ๆ

🔍 SWR คืออะไร?

SWR ย่อมาจาก Stale-While-Revalidate เป็นแนวคิดที่ช่วยให้การดึงข้อมูลเร็วและสดใหม่ตลอดเวลา โดยที่ไม่ต้องให้ผู้ใช้รอนานเกินไป โดยถูกพัฒนาโดยทีมเดียวกับ Next.js (Vercel) ทำให้มันเหมาะกับการใช้ในโปรเจ็กต์ที่พัฒนาโดย Next.js มาก

หลักการของ SWR คือ

• คืนค่าข้อมูลเก่าจากแคชก่อน เพื่อให้ผู้ใช้เห็นข้อมูลเร็วที่สุด
• ดึงข้อมูลใหม่จาก API อยู่เบื้องหลัง
• อัปเดตข้อมูลใหม่ ใน UI อัตโนมัติ

ฟังดูดีใช่ไหม? เพราะมันช่วยให้การโหลดข้อมูลไม่กระตุก และมีประสบการณ์ใช้งานที่ดีขึ้น

🚀 ติดตั้ง SWR

ก่อนอื่น ถ้ายังไม่ได้ติดตั้ง SWR สามารถติดตั้งได้ง่าย ๆ ด้วยคำสั่งนี้

npm install swr
# หรือถ้าใช้ yarn
yarn add swr

เสร็จแล้วก็พร้อมลุย! 🎉

🛠 วิธีใช้ SWR เบื้องต้น

SWR ใช้งานง่ายมาก ๆ เพียงแค่ import และใช้ useSWR ใน React Component

import useSWR from 'swr'

const fetcher = (url) => fetch(url).then(res => res.json())

export default function Profile() {
  const { data, error } = useSWR('/api/user', fetcher)

  if (error) return <div>โหลดข้อมูลไม่สำเร็จ 😢</div>
  if (!data) return <div>กำลังโหลดข้อมูล... ⏳</div>

  return (
    <div>
      <h1>สวัสดี, {data.name}!</h1>
      <p>อีเมล: {data.email}</p>
    </div>
  )
}

อธิบายโค้ด

• เราใช้ useSWR เพื่อดึงข้อมูลจาก /api/user
• fetcher คือฟังก์ชันที่ใช้ดึงข้อมูลจาก API
• ถ้ามี error จะแสดงข้อความผิดพลาด
• ถ้าข้อมูลยังมาไม่ถึง จะแสดงข้อความ กำลังโหลด...
• ถ้าทุกอย่างเรียบร้อยแล้ว ก็โชว์ข้อมูลที่ดึงมาได้

ข้อดีของวิธีนี้คือ ไม่ต้องใช้ useEffect หรือจัดการ state เองเลย เพราะ SWR จัดการให้หมด!

⚡️ ทำไม SWR ถึงดีกว่า useEffect + fetch?

บางคนอาจสงสัยว่า "แล้วทำไมไม่ใช้ useEffect กับ fetch ตรง ๆ ล่ะ?" คำตอบคือ SWR ดีกว่าเพราะ

✅ จัดการแคชให้อัตโนมัติ – ไม่ต้องโหลดข้อมูลซ้ำถ้ายังอยู่ในแคช
✅ อัปเดตข้อมูลเมื่อมีการเปลี่ยนแปลง – ไม่ต้อง reload หน้าเอง
✅ รองรับการ Revalidate อัตโนมัติ – ดึงข้อมูลใหม่เมื่อลูกค้ากลับมาที่หน้าเว็บ
✅ รองรับการดึงข้อมูลแบบ on-focus & re-fetch on reconnect – ไม่ต้องกดรีเฟรชเอง

ถ้าใช้ useEffect และ fetch เราต้องเขียนโค้ดจัดการแคชเอง ซึ่งยุ่งยากและซับซ้อนกว่า

🔄 ตัวอย่างการใช้ Mutate และ Revalidate

ถ้าต้องการให้ข้อมูลอัปเดตทันทีโดยไม่ต้องรอ SWR รีเฟรชเอง สามารถใช้ mutate ได้

import useSWR, { mutate } from 'swr'

const fetcher = (url) => fetch(url).then(res => res.json())

export default function Dashboard() {
  const { data } = useSWR('/api/stats', fetcher)

  return (
    <div>
      <h1>ยอดผู้ใช้งาน: {data ? data.users : 'กำลังโหลด...'}</h1>
      <button onClick={() => mutate('/api/stats')}>โหลดข้อมูลใหม่</button>
    </div>
  )
}

เมื่อกดปุ่ม โหลดข้อมูลใหม่ ระบบจะดึงข้อมูลใหม่จาก API ทันที

🔐 ใช้ SWR กับ Authentication

SWR เหมาะกับระบบที่ต้องใช้ Token Authentication เช่น JWT หรือ OAuth เพราะสามารถส่ง Header ไปกับทุก Request ได้ง่าย ๆ

import useSWR from 'swr'

const fetcher = (url) =>
  fetch(url, {
    headers: {
      Authorization: `Bearer ${localStorage.getItem('token')}`,
    },
  }).then((res) => res.json())

export default function UserProfile() {
  const { data, error } = useSWR('/api/profile', fetcher)

  if (error) return <div>โหลดข้อมูลไม่สำเร็จ</div>
  if (!data) return <div>กำลังโหลด...</div>

  return <h1>ชื่อผู้ใช้: {data.username}</h1>
}

🔥 การใช้งาน SWR กับ GraphQL

ถ้าใช้ GraphQL เราก็สามารถใช้ SWR ได้ โดยเปลี่ยนจาก fetch เป็นการส่ง Query ไปยัง API

const fetcher = (query) =>
  fetch('/graphql', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ query }),
  }).then((res) => res.json())

const GET_USER = `
  {
    user {
      name
      email
    }
  }
`

export default function UserProfile() {
  const { data, error } = useSWR(GET_USER, fetcher)

  if (error) return <div>โหลดข้อมูลไม่สำเร็จ</div>
  if (!data) return <div>กำลังโหลด...</div>

  return <h1>ชื่อ: {data.user.name}</h1>
}

📌 สรุป

SWR เป็นเครื่องมือที่ช่วยให้การดึงข้อมูลแบบ Client-side ง่ายขึ้น โดยที่ไม่ต้องจัดการแคชเอง รองรับการอัปเดตข้อมูลอัตโนมัติ และมีประสิทธิภาพสูงกว่าการใช้ useEffect + fetch แบบเดิม ๆ
✅ เหมาะกับ

• ดึงข้อมูลที่เปลี่ยนแปลงบ่อย เช่น ยอดไลก์, คอมเมนต์, จำนวนผู้ใช้
• แสดงข้อมูลให้ผู้ใช้เร็วที่สุด โดยใช้แคช
• อัปเดตข้อมูลอัตโนมัติ โดยไม่ต้องรีเฟรชหน้า

ถ้าคุณใช้ Next.js อยู่แล้ว ลองเอา SWR ไปใช้ดู รับรองว่าชีวิตง่ายขึ้นแน่นอน! 🚀