GraphQL מציעה אלטרנטיבה גמישה לגישת REST הקלאסית כאשר אתה בונה API.

אחד הגורמים החשובים ביותר שיש לקחת בחשבון בעת ​​תכנון אפליקציה הוא סוג ארכיטקטורת ה-API להשתמש. עיצוב API יעיל הוא חיוני להבטחת ביצועי האפליקציות לאורך מחזור החיים שלהם.

ארכיטקטורת RESTful היא הגישה הפופולרית ביותר, אך יש לה חיסרון אחד משמעותי: מבנה נקודת קצה קבוע שמחזיר נתונים שנקבעו מראש. עיצוב זה עלול לגרום לתקשורת לא יעילה.

לעומת זאת, GraphQL - חלופה ל-REST - מציעה יותר גמישות בכך שהיא מאפשרת לך לבקש רק את הנתונים שאתה צריך.

מהם ממשקי API של GraphQL?

GraphQL היא שפת שאילתה שתוכל להשתמש בה כדי לכתוב ממשקי API אחוריים (ממשקי תכנות יישומים). בניגוד ממשקי API של REST, שיש להם מספר נקודות קצה עבור נתונים שונים, לממשקי API של GraphQL יש רק נקודת כניסה אחת.

לקוחות יכולים לציין את הנתונים שהם צריכים בשאילתות שלהם מנקודת כניסה יחידה זו, מה שהופך אותה לגמישה ויעילה יותר לאחזור הנתונים הדרושים בלבד.

במילים פשוטות, API של GraphQL מיישם את ארכיטקטורת GraphQL המתוארת על ידי מפרטי GraphQL. עיצוב זה כולל הגדרת הסכימה, השאילתות והמוטציות שאיתם לקוחות יכולים לקיים אינטראקציה.

instagram viewer

להלן פירוט פשוט של הרכיבים החיוניים של ארכיטקטורת ה-API של GraphQL:

  1. סכימה: סכימה היא תיאור של סוגי הנתונים והפעולות שה-API מספק. בעיקרון, סכימה מגדירה את מבנה הנתונים הזמינים ואת סוג השאילתות והמוטציות שלקוח יכול לבצע כדי לשנות את הנתונים.
  2. שאילתות: לקוחות משתמשים בשאילתות כדי להביא נתונים ממסד הנתונים על ידי ציון מבנה הנתונים שהם דורשים. יתר על כן, הם יכולים לקנן שאילתות מרובות בבקשת HTTP אחת כדי להביא נתונים קשורים ממספר נקודות קצה.
  3. מוטציות: מוטציות הן פעולות המשמשות לשינוי נתונים במסד הנתונים. לקוחות יכולים לשלוח בקשות מוטציה כדי ליצור, לעדכן או למחוק נתונים.

הגדר מסד נתונים של MongoDB

להתחיל, צור מסד נתונים MongoDB. לחילופין, אתה יכול הגדר אשכול MongoDB בענן בחינםלאחר הגדרת מסד הנתונים, העתק את מחרוזת ה-URI של חיבור מסד הנתונים של MongoDB.

אתה יכול למצוא את הקוד של הפרויקט הזה בו מאגר GitHub.

צור שרת אפולו

שרת אפולו הוא יישום שרת GraphQL פופולרי שיאפשר לך לבנות ממשקי API של GraphQL בסביבות JavaScript, כולל Node.js, Express ועוד.

צור ספרייה עבור פרויקט חדש ו CD לתוך זה:

mkdir graphql-API-mongoDB
cd graphql-API-mongoDB

לאחר מכן, אתחול פרויקט Node.js חדש.

npm init --כן

פקודה זו יוצרת א package.json קוֹבֶץ.

התקן את התלות הנדרשות

הפעל את הפקודה הבאה כדי להתקין את החבילות.

npm להתקין apollo-server graphql mongoose

לבסוף, צור index.js קובץ בספריית הבסיס של הפרויקט שלך.

הגדר את שרת אפולו

לִפְתוֹחַ index.js והוסיפו את הקוד למטה:

const { ApolloServer } = לִדרוֹשׁ('שרת אפולו');
const נמיה = לִדרוֹשׁ('נְמִיָה');
const typeDefs = לִדרוֹשׁ("./graphql/typeDefs");
const פותרים = לִדרוֹשׁ("./graphql/resolvers");
const שרת = חָדָשׁ ApolloServer({
 typeDefs, 
 פותרים 
});


const MONGO_URI = 'mongodb://localhost: 27017';
נְמִיָה
 .connect (MONGO_URI, {
 useNewUrlParser: נָכוֹן,
 useUnifiedTopology: נָכוֹן,
 })
 .לאחר מכן(() => {
לְנַחֵם.עֵץ(`Db מחובר`);
לַחֲזוֹר server.listen({ נמל: 5000 });
 })
 .לאחר מכן((מילואים) => {
לְנַחֵם.עֵץ(`שרת פועל ב ${res.url}`);
 })
 .לתפוס(לִטְעוֹת => {
לְנַחֵם.log (err.message);
 });

קוד זה מאתחל שרת GraphQL מקומי באמצעות ספריית Apollo Server. לאחר מכן הוא יוצר חיבור למסד נתונים של MongoDB עם URI החיבור הנתון.

שימו לב כיצד הקוד מעביר שני ארגומנטים למופע החדש של ApolloServer: typeDefs ו-resolvers. אלה מציינים את סוגי הנתונים ואת הפעולות שה-API של GraphQL יכול לבצע.

לאחר הגדרת החיבור למסד הנתונים של MongoDB, השרת מתחיל להאזין ביציאה 5000.

הגדר את מודל הנתונים

צור תיקיה חדשה בספריית הבסיס של תיקיית הפרויקט שלך ושמה לה דגמים. בתיקייה זו, צור שמות קובץ חדשים dataModel.js והוסיפו לו את הקוד הבא:

const {דגם, Schema} = לִדרוֹשׁ('נְמִיָה');
const עובדסכימה = חָדָשׁ סכֵימָה({
 שֵׁם: חוּט,
 מַחלָקָה: חוּט,
 שכר: חוּט,
});
מודול‎.exports = model('עוֹבֵד', Employe Schema);

הגדר את סכמת GraphQL

סכימת GraphQL מגדירה את מבנה הנתונים שאתה יכול לבצע שאילתות באמצעות ה-API של GraphQL. הסכימה גם מתארת ​​את השאילתות והמוטציות שה-API יכול להריץ. אתה יכול להשתמש בשאילתות כדי להביא נתונים ומוטציות כדי לשנות אותם.

בספריית השורש של הפרוייקט שלך, צור תיקיה חדשה ושמה לה graphql. בתוך תיקיה זו, הוסף שני קבצים: typeDefs.js ו resolvers.js

הוסף את הקוד למטה בקובץ typeDefs.js:

const {gql} = לִדרוֹשׁ("שרת אפולו");
const typeDefs = gql`
 סוג עובד {
 אני עשיתי!
 שֵׁם: חוּט
 מַחלָקָה: חוּט
 שכר: חוּט
 }
 קלט EmployeeInput {
 שֵׁם: חוּט
 מַחלָקָה: חוּט
 שכר: חוּט
 }
 הקלד שאילתה { 
 getEmployee (מזהה: מזהה): עובד #לַחֲזוֹר עובד לפי תעודת זהות
 עובדים: [עובד] #לַחֲזוֹר מַעֲרָך שֶׁל עובדים
 }
 סוג מוטציה {
 createEmployee (EmployeeInput: EmployeeInput): Employee
 updateEmployee (מזהה: מזהה, קלט עובד: EmployeeInput): בוליאנית
 deleteEmployee (מזהה: מזהה): בוליאנית
 }
`;
מודול.exports = typeDefs;

קוד זה לעיל משתמש ב- gql פונקציה שסופקה על ידי חבילת apollo-server ליצירת סכימת GraphQL עבור נתוני העובד.

הסכימה מורכבת מארבעה אלמנטים עיקריים: סוגי נתונים למידע על העובדים, סוגי קלט, שאילתות ומוטציות שה-API יכול לבצע.

הגדר את הפותרים עבור ה-API של GraphQL

Resolver הוא פונקציית GraphQL המגדירה את הנתונים שיועברו כאשר לקוח שולח שאילתת API כדי להביא נתונים. בעיקרו של דבר, תפקידו העיקרי הוא לאחזר את הנתונים הנדרשים ממקור הנתונים שצוין ולהחזיר אותם ללקוח.

הוסף את הקוד למטה ל- resolvers.js קובץ ב- graphql תיקייה. הפותרים, במקרה זה, מצוינים בתוך אובייקטי השאילתה והמוטציה.

אובייקט ה-Query מגדיר שתי שיטות: עובדים ו getEmployee. שיטות אלו אחראיות על שליפת נתוני עובדים ממסד הנתונים לפי בקשה של לקוח.

const עובד = לִדרוֹשׁ("../models/employeesModel");
// GraphQL Resolvers
const פותרים = {
 שאילתא: {
 עובדים: אסינכרון () => {
לְנַסוֹת {
const עובדים = לְהַמתִין Employee.find({});
לַחֲזוֹר עובדים;
 } לתפוס (שגיאה) {
לְנַחֵם.error (שגיאה);
לזרוקחָדָשׁשְׁגִיאָה("לא הצליח להביא עובדים");
 }
 },
 getEmployee: אסינכרון (הורה, args) => {
לְנַסוֹת {
const עובד = לְהַמתִין Employee.findById (args.id);
לַחֲזוֹר עוֹבֵד;
 } לתפוס (שגיאה) {
לְנַחֵם.error (שגיאה);
לזרוקחָדָשׁשְׁגִיאָה('לא הצלחנו להביא עובד באמצעות תעודת זהות');
 }
 },
 },

לאובייקט Mutation יש שלוש שיטות: ליצור Employee, עדכן עובד, ו מחק עובד. שיטות אלו מבצעות שינויים בנתונים המאוחסנים במסד הנתונים של MongoDB.

 מוטציה: {
אסינכרון createEmployee (_, { קלט עובד: { שם, מחלקה, משכורת } }) {
const עובד חדש = חָדָשׁ עוֹבֵד({
 שם שם,
 מחלקה: מחלקה,
 משכורת: משכורת
 });
const תגובה = לְהַמתִין newEmployee.save();
לְנַחֵם.log (newEmployee);


לַחֲזוֹר {
 id: response._id,
 ...תגובה._דוק
 }
 },


אסינכרון updateEmployee (_, {id, קלט עובד: {שם, מחלקה, שכר}}) {
const עדכן Employee = לְהַמתִין Employee.updateOne(
 { _תְעוּדַת זֶהוּת: id },
 { שם, מחלקה, שכר }
 );


אם (!updatedEmployee) {
לזרוקחָדָשׁשְׁגִיאָה(`עובד עם תעודת זהות: ${id} לא נמצא`);
 }


לַחֲזוֹרנָכוֹן; // החזר ערך בוליאני המציין הצלחה בעדכון
 },


אסינכרון deleteEmployee (_, {id}) {
const מחקEmployee = לְהַמתִין Employee.deleteOne({ _תְעוּדַת זֶהוּת: id });

אם (!deletedEmployee || deletedEmployee.deletedCount 0) {
לזרוקחָדָשׁשְׁגִיאָה(`עובד עם תעודת זהות ${id} לא נמצא`);
 }


לַחֲזוֹרנָכוֹן; // החזר ערך בוליאני המציין הצלחה במחיקה
 },
 },
};
מודול.exports = פותרים;

לבסוף, הפעל את הפקודה הזו כדי לסובב את השרת:

node index.js

ברגע שהוא יצר חיבור למסד נתונים, השרת יתחיל ביציאה 5000.

אתה יכול להמשיך ולבדוק את הפונקציונליות של ה-API של GraphQL על ידי ביצוע בקשות HTTP ממגרש המשחקים של GraphQL בדפדפן שלך.

לדוגמה, אתה יכול להשתמש ב- ליצור Employee מוטציה להוספת נתוני עובדים חדשים במסד הנתונים של MongoDB.

פופולריות GraphQL בקהילת המפתחים

GraphQL צובר אחיזה בקהילת המפתחים כגישת עיצוב API חלופית לארכיטקטורת REST הפופולרית.

זאת בשל יכולתו לספק דרך גמישה ויעילה יותר לאחזור נתונים ממקורות שונים, הכל מנקודת כניסה אחת. זה ימנע צורך לנהל מספר נקודות קצה עבור נתונים שונים, שהיא בעיה נפוצה בארכיטקטורת REST API. פתרון עיצוב זה מייעל את תהליך הבנייה והניהול של ממשקי API אחוריים.