วิธีสร้างเซิร์ฟเวอร์ GraphQL โดยใช้เส้นทาง API ของ Next.js

Next.js มอบประสบการณ์นักพัฒนาที่ดีที่สุดแก่คุณด้วยคุณสมบัติทั้งหมดที่คุณต้องการสำหรับการผลิต เป็นโซลูชันที่ตรงไปตรงมาในการสร้าง API ของคุณโดยใช้เส้นทาง API ของ Next.js

ในคู่มือนี้ เราจะมาเรียนรู้กันก่อนว่าเส้นทาง API คืออะไร จากนั้นจึงสร้างเซิร์ฟเวอร์ GraphQL ที่ดึงข้อมูลจาก Github API โดยใช้เส้นทาง API ของ Next.js

เพื่อให้ได้ประโยชน์สูงสุดจากบทช่วยสอนนี้ คุณต้องมีความเข้าใจพื้นฐานเกี่ยวกับ GraphQL เป็นอย่างน้อย ความรู้เกี่ยวกับ Apollo Server จะช่วยได้ แต่ไม่บังคับ บทช่วยสอนนี้จะเป็นประโยชน์กับผู้ที่ต้องการขยายทักษะ React หรือ Next.js ไปยังฝั่งเซิร์ฟเวอร์ และสามารถสร้างแอปฟูลสแตกตัวแรกด้วย Next.js และ GraphQL ได้เช่นกัน

งั้นก็ดำดิ่งลงไปเลย

เส้นทาง API ของ Next.js คืออะไร

Next.js เป็นเฟรมเวิร์กที่เปิดใช้งานการเรนเดอร์แอป React บนไคลเอนต์หรือ/และเซิร์ฟเวอร์ ตั้งแต่เวอร์ชัน 9 สามารถใช้ Next.js เพื่อสร้าง API ด้วย Node.js, Express, GrapQL และอื่นๆ ได้ Next.js ใช้ระบบไฟล์เพื่อจัดการกับไฟล์ภายในโฟลเดอร์ pages/api เป็นปลายทาง API หมายความว่าตอนนี้ คุณจะสามารถเข้าถึงปลายทาง API ของคุณได้ที่ URL https://localhost:3000/api/your-file-name

หากคุณมาจาก React และไม่เคยใช้ Next.js มาก่อน อาจทำให้สับสนได้เนื่องจาก Next.js เป็นเฟรมเวิร์กของ React และอย่างที่เราทราบกันดีอยู่แล้วว่า React ถูกใช้เพื่อสร้างแอปส่วนหน้า เหตุใดจึงต้องใช้ Next.js สำหรับแอปแบ็กเอนด์และ API

Next.js สามารถใช้ได้ทั้งบนฝั่งไคลเอ็นต์และฝั่งเซิร์ฟเวอร์เพราะมันสร้างด้วย React, Node.js, Babel และ Webpack และแน่นอนว่าควรใช้งานได้บนเซิร์ฟเวอร์ด้วยเช่นกัน Next.js อาศัยเซิร์ฟเวอร์เพื่อเปิดใช้งานเส้นทาง API และให้คุณใช้ภาษาแบ็กเอนด์ที่คุณชื่นชอบได้ แม้ว่าในทางเทคนิคแล้วจะเป็นเฟรมเวิร์กของ React หวังว่าคุณจะเข้าใจถูกต้อง

จนถึงตอนนี้ เราได้เรียนรู้ว่าเส้นทาง API คืออะไร อย่างไรก็ตาม คำถามที่แท้จริงยังคงอยู่: เหตุใดจึงใช้ Next.js เพื่อสร้าง GraphQL Server ทำไมไม่ใช้ GraphQL หรือ Node.js ทำเช่นนั้น เรามาเปรียบเทียบเส้นทาง API ของ Next.js กับโซลูชันที่มีอยู่สำหรับการสร้าง API กันในหัวข้อถัดไป

เส้นทาง API ของ Next.js กับ REST และ GraphQL

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

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

พิจารณากรณีการใช้งานเมื่อคุณต้องการเพิ่มการตรวจสอบสิทธิ์ให้กับแอปถัดไปที่มีอยู่ แทนที่จะสร้างส่วนรับรองความถูกต้องตั้งแต่ต้นด้วย Node.js หรือ GraphQL คุณสามารถใช้เส้นทาง API เพื่อเพิ่มการตรวจสอบสิทธิ์ให้กับแอปของคุณได้ และจะยังคงใช้งานได้ที่ปลายทาง https://localhost:3000/api/your-file-name . เส้นทาง API จะไม่เพิ่มขนาดบันเดิลฝั่งไคลเอ็นต์ของคุณ เนื่องจากเป็นบันเดิลฝั่งเซิร์ฟเวอร์เท่านั้น

อย่างไรก็ตาม เส้นทาง API ของ Next.js สามารถเข้าถึงได้ภายในต้นทางเดียวกันเท่านั้น เนื่องจากเส้นทาง API ไม่ได้ระบุส่วนหัว Cross-Origin Resource Sharing (CORS) คุณยังคงปรับแต่งการทำงานเริ่มต้นได้โดยเพิ่ม CORS ลงใน API ของคุณ แต่เป็นการตั้งค่าเพิ่มเติม หากคุณสร้างแอปถัดไปแบบสแตติกโดยใช้ next export คุณจะใช้เส้นทาง API ภายในแอปไม่ได้

จนถึงตอนนี้ เราได้เรียนรู้แล้วว่าเส้นทาง API อาจเป็นวิธีแก้ปัญหาที่ดีกว่าเมื่อเปรียบเทียบกับสิ่งที่คล้ายคลึงกัน ตอนนี้ มาลงมือทำกันเลย และเริ่มสร้าง GraphQL Server ของเรา

การตั้งค่า

ในการเริ่มแอปใหม่ด้วย Next.js เราจะไปที่ Create Next App นอกจากนี้ยังสามารถตั้งค่าแอพใหม่ด้วยตนเองด้วย Webpack คุณยินดีเป็นอย่างยิ่งที่จะทำเช่นนั้น ที่ถูกกล่าวว่าเปิดอินเทอร์เฟซบรรทัดคำสั่งของคุณและเรียกใช้คำสั่งนี้:

 npx create-next-app next-graphql-server

Next.js มีเทมเพลตเริ่มต้นสำหรับเส้นทาง API คุณสามารถใช้ได้โดยดำเนินการคำสั่งต่อไปนี้:

 npx create-next-app --example api-routes api-routes-app

ในบทช่วยสอนนี้ เราต้องการทำทุกอย่างตั้งแต่เริ่มต้น ซึ่งเป็นเหตุผลที่เราใช้ Create Next App เพื่อเริ่มแอปใหม่ ไม่ใช่เทมเพลตสำหรับผู้เริ่มต้น ตอนนี้จัดโครงสร้างโครงการดังนี้:

 ├── pages | ├── api | | ├── graphql.js | | ├── resolvers | | | └── index.js | | └── schemas | | └── index.js | └── index.js ├── package.json └── yarn.lock

ดังที่เราได้กล่าวไว้ก่อนหน้านี้ โฟลเดอร์ api เป็นที่ที่ API หรือเซิร์ฟเวอร์ของเราอาศัยอยู่ เนื่องจากเราจะใช้ GraphQL เราจึงต้องมีตัวแก้ไขและสคีมาเพื่อสร้างเซิร์ฟเวอร์ GraphQL จุดปลายของเซิร์ฟเวอร์จะสามารถเข้าถึงได้บนเส้นทาง /api/graphql ซึ่งเป็นจุดเริ่มต้นของเซิร์ฟเวอร์ GraphQL

ด้วยขั้นตอนนี้ เราจึงสามารถสร้าง GraphQL Schema สำหรับเซิร์ฟเวอร์ของเราได้

สร้างสคีมา GraphQL

สรุปโดยย่อ สคีมา GraphQL จะกำหนดรูปร่างของกราฟข้อมูลของคุณ

ต่อไป เราต้องติดตั้ง apollo-server-micro เพื่อใช้ Apollo Server ภายใน Next.js

 yarn add apollo-server-micro

สำหรับ npm

 npm install apollo-server-micro

ตอนนี้ มาสร้างสคีมา GraphQL ใหม่กัน

ใน api/schemas/index.js

 import { gql } from "apollo-server-micro"; export const typeDefs = gql` type User { id: ID login: String avatar_url: String } type Query { getUsers: [User] getUser(name: String!): User! }`

ในที่นี้ เรากำหนดประเภท User ที่อธิบายรูปร่างของผู้ใช้ Github ต้องการ id ประเภท ID การ login และ avatar_url ประเภท String จากนั้น เราใช้ประเภทในแบบสอบถาม getUsers ที่ต้องส่งคืนอาร์เรย์ของผู้ใช้ ต่อไป เราอาศัยการสืบค้น getUser เพื่อดึงข้อมูลผู้ใช้รายเดียว จำเป็นต้องรับชื่อผู้ใช้เพื่อเรียกค้นข้อมูล

ด้วยการสร้าง GraphQL Schema นี้ เราสามารถอัปเดตไฟล์ตัวแก้ไขและสร้างฟังก์ชันเพื่อดำเนินการค้นหาเหล่านี้ด้านบน

สร้างตัวแก้ไข GraphQL

ตัวแก้ไข GraphQL คือชุดของฟังก์ชันที่ช่วยให้คุณสร้างการตอบกลับจากการสืบค้น GraphQL

ในการขอข้อมูลจาก Github API เราจำเป็นต้องติดตั้งไลบรารี axios ดังนั้น เปิด CLI ของคุณและรันคำสั่งนี้:

 yarn add axios

หรือเมื่อใช้ npm

 npm install axios

เมื่อติดตั้งไลบรารี่แล้ว ให้เพิ่มโค้ดที่มีความหมายลงในไฟล์ตัวแก้ไข

ใน api/resolvers/index.js

 import axios from "axios"; export const resolvers = { Query: { getUsers: async () => { try { const users = await axios.get("https://api.github.com/users"); return users.data.map(({ id, login, avatar_url }) => ({ id, login, avatar_url })); } catch (error) { throw error; } }, getUser: async (_, args) => { try { const user = await axios.get( `https://api.github.com/users/${args.name}` ); return { id: user.data.id, login: user.data.login, avatar_url: user.data.avatar_url }; } catch (error) { throw error; } } } };

ดังที่คุณเห็นที่นี่ เราจับคู่ชื่อการสืบค้นที่กำหนดไว้ก่อนหน้านี้ใน GraphQL Schema กับฟังก์ชันตัวแก้ไข ฟังก์ชัน getUsers ช่วยให้เราดึงผู้ใช้ทั้งหมดจาก API แล้วส่งคืนอาร์เรย์ของผู้ใช้ที่ต้องการมิเรอร์ประเภท User ต่อไป เราใช้เมธอด getUser เพื่อดึงผู้ใช้รายเดียวโดยใช้ชื่อที่ส่งผ่านเข้ามาเป็นพารามิเตอร์

ด้วยสิ่งนี้ ตอนนี้เรามี GraphQL Schema และตัวแก้ไข GraphQL — ถึงเวลาที่จะรวมพวกมันเข้าด้วยกันและสร้าง GraphQL Server

สร้างเซิร์ฟเวอร์ GraphQL

เซิร์ฟเวอร์ GraphQL เปิดเผยข้อมูลของคุณเป็น GraphQL API ช่วยให้แอปไคลเอ็นต์สามารถขอข้อมูลที่ต้องการได้อย่างแม่นยำและไม่ต้องทำอะไรเพิ่มเติม

ใน api/graphql.js

 import { ApolloServer } from "apollo-server-micro"; import { typeDefs } from "./schemas"; import { resolvers } from "./resolvers"; const apolloServer = new ApolloServer({ typeDefs, resolvers }); export const config = { api: { bodyParser: false } }; export default apolloServer.createHandler({ path: "/api/graphql" });

หลังจากนำเข้า ApolloServer เราจะใช้มันเพื่อสร้างอินสแตนซ์ใหม่ จากนั้นจึงส่งผ่านในสคีมาและตัวแก้ไขเพื่อสร้างเซิร์ฟเวอร์ GraphQL ต่อไป เราต้องบอก Next.js ไม่ให้แยกวิเคราะห์คำขอที่เข้ามา และให้ GraphQL จัดการให้เรา สุดท้าย เราใช้ apolloServer เพื่อสร้างตัวจัดการใหม่ ซึ่งหมายความว่าเส้นทาง /api/graphql จะทำหน้าที่เป็นจุดเริ่มต้นสำหรับเซิร์ฟเวอร์ GraphQL ของเรา

Next.js ต่างจาก Apollo Server ทั่วไปตรงที่ Next.js จัดการกับการเริ่มต้นของเซิร์ฟเวอร์สำหรับเรา เนื่องจากต้องอาศัยการเรนเดอร์ฝั่งเซิร์ฟเวอร์ นั่นคือเหตุผลที่เราไม่ต้องเริ่มเซิร์ฟเวอร์ GraphQL ด้วยตัวเอง

ยอดเยี่ยม! ด้วยขั้นตอนนี้ เราสามารถทดสอบว่าเซิร์ฟเวอร์ GraphQL ทำงานได้หรือไม่

ทดสอบเซิร์ฟเวอร์ GraphQL

เมื่อคุณเรียกดูรูทของโปรเจ็กต์แล้ว ให้เปิดบน CLI แล้วดำเนินการคำสั่งนี้:

 yarn dev

หรือสำหรับ npm

 npm run dev

ตอนนี้ ไปที่ https://localhost:3000/api/graphql และเพิ่มการสืบค้น GraphQL ด้านล่างเพื่อดึงข้อมูลผู้ใช้ทั้งหมดจาก Github

 { getUsers { id login avatar_url } }

มาตรวจสอบว่าเราสามารถเรียกผู้ใช้รายเดียวด้วยข้อความค้นหานี้ได้หรือไม่

 query($name: String!){ getUser(name:$name){ login id avatar_url } }

ยอดเยี่ยม! เซิร์ฟเวอร์ของเราทำงานตามที่คาดไว้ เราสร้างเซิร์ฟเวอร์ GraphQL โดยใช้เส้นทาง API ของ Next.js เสร็จแล้ว

บทสรุป

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

คุณสามารถดูตัวอย่างโครงการที่เสร็จแล้วใน CodeSandbox

ขอบคุณที่อ่าน!

แหล่งข้อมูลเพิ่มเติม

แหล่งข้อมูลที่มีประโยชน์เหล่านี้จะนำคุณไปไกลกว่าขอบเขตของบทช่วยสอนนี้

• แนะนำเส้นทาง API (Next.js 9)
• เส้นทาง API ของ Next.js
• เส้นทาง API มิดเดิลแวร์