אז מה הדבר הזה של GraphQL שאני כל הזמן שומע עליו?

אם אתה כמוני, אתה כנראה עובר שלושה שלבים כשאתה שומע על טכנולוגיה חדשה:

1. פיטורין

ספריית JavaScript נוספת אחת ?! פשוט השתמש ב- jQuery כבר!

2. עניין

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

3. פאניקה

עֶזרָה! אני צריך ללמוד את הספרייה החדשה הזו עכשיו, אחרת אני אהיה מיושן לחלוטין!

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

זו הסיבה שעכשיו זה הזמן המושלם ללמוד מהו בדיוק הדבר הזה של GraphQL שאתה ממשיך לשמוע עליו.

הבסיס

בקצרה, GraphQL הוא תחביר המתאר כיצד לבקש נתונים , ומשמש בדרך כלל לטעינת נתונים משרת ללקוח. ל- GraphQL שלושה מאפיינים עיקריים:

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

אז איך התחיל GraphQL? איך זה נראה בפועל? ואיך מתחילים להשתמש בזה? המשך לקרוא כדי לגלות!

הבעיה

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

לדוגמא, דמיין שעליך להציג רשימה של רשימה postsתחת likesשמות משתמשים ושמות משתמש מתחת לכל פוסט . די קל, אתה משלים את postsה- API שלך כדי לכלול likesמערך המכיל אובייקטים של משתמשים:

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

כעת הוסיפו גורם נוסף לתערובת: מתברר כי בעוד postsשהם מאוחסנים במסד נתונים של MySQL, likesלעומת זאת גרים בחנות של Redis! מה אתה עושה עכשיו?!

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

הפתרון

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

באופן מעשי, שכבת GraphQL חיה בין הלקוח למקור נתונים אחד או יותר, מקבלת בקשות לקוח ומביאה את הנתונים הדרושים בהתאם להוראותיך. מְבוּלבָּל? הגיע זמן המטאפורה!

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

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

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

בפועל, ה- API GraphQL מאורגן סביב שלושה אבני בניין עיקרי: סכימה , שאילתא , ו resolvers .

שאילתות

הבקשה שתגיש לעוזר האישי שלך GraphQL היא השאילתה והיא נראית בערך כך:

query { stuff}

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

query { stuff { eggs shirt pizza }}

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

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

query { posts { # this is an array title body author { # we can go deeper! name avatarUrl profileUrl } }}

שדות שאילתות תומכים גם בטיעונים . אם אני רוצה להציג פוסט ספציפי, אני יכול להוסיף idטיעון postלשדה:

query { post(id: "123foo"){ title body author{ name avatarUrl profileUrl } }}

לבסוף, אם אני רוצה להפוך את idהטיעון הזה לדינמי, אני יכול להגדיר משתנה ואז לעשות בו שימוש חוזר בתוך השאילתה (שימו לב שאנחנו גם שמים את השאילתה כאן):

query getMyPost($id: String) { post(id: $id){ title body author{ name avatarUrl profileUrl } }}

דרך טובה ליישם את כל זה בפועל היא להשתמש ב- Explorer SQL API של GitHub. לדוגמה, נסה את השאילתה הבאה:

query { repository(owner: "graphql", name: "graphql-js"){ name description }}

שים לב שכאשר תנסה להקליד שם שדה חדש למטה description, ה- IDE יציע אוטומטית שמות שדות אפשריים באופן אוטומטי מה- API של GraphQL עצמו. נקי!

תוכל ללמוד עוד על שאילתות GraphQL במאמר האנטומיה המצוין של מאפיין QQLQL.

מחליטים

אפילו העוזר האישי הטוב ביותר בעולם לא יכול ללכת לנקות את הניקוי היבש שלך אלא אם תתן להם כתובת.

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

פותר אומר ל- GraphQL כיצד ואיפה להביא את הנתונים המתאימים לשדה נתון. לדוגמא, הנה איך postיכול להיראות פותר עבור השדה למעלה (באמצעות מחולל הסכימה GraphQL-Tools של אפולו):

Query: { post(root, args) { return Posts.find({ id: args.id }); }}

אנו מפעילים את הפותר Queryמכיוון שאנו רוצים לשאול postישירות ברמת השורש. אבל אתה יכול לקבל רזולוציות עבור שדות משנה, כגון שדה postשל author:

Query: { post(root, args) { return Posts.find({ id: args.id }); }},Post: { author(post) { return Users.find({ id: post.authorId}) }}

שים לב שהפתרונות שלך אינם מוגבלים להחזרת מסמכי מסד נתונים. לדוגמה, אולי תרצה להוסיף סוג לסוג commentsCountשלך Post:

Post: { author(post) { return Users.find({ id: post.authorId}) }, commentsCount(post) { return Comments.find({ postId: post.id}).count() }}

הרעיון המרכזי שיש להבין כאן הוא שעם GraphQL, סכמת ה- API שלך וסכימות מסדי הנתונים שלך מנותקות . במילים אחרות, לא היה יכול להיות שום authorואת commentsCountהשדות במסד הנתונים שלנו, אבל אנחנו יכולים "לחקות" אותם באמצעות כוח resolvers.

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

סכֵימָה

כל הדברים הטובים האלה מתאפשרים על ידי מערכת הסכימות המוקלדות של GraphQL. המטרה שלי היום היא לתת לך סקירה מהירה יותר מאשר הקדמה ממצה, כך שלא אפרט כאן.

עם זאת, אני ממליץ לך לבדוק את תיעוד GraphQL אם ברצונך ללמוד עוד.

שאלות נפוצות

בואו ניקח הפסקה כדי לענות על כמה שאלות נפוצות.

אתה שם, מאחור. כן אתה. אני יכול לראות שאתה רוצה לשאול משהו. קדימה, אל תתביישו!

מה הקשר בין GraphQL לבין מסדי נתונים גרפיים?

לא הרבה, באמת, ל- GraphQL אין שום קשר לבסיסי גרפים כמו Neo4j. החלק "גרף" נובע מהרעיון של סריקה על פני גרף ה- API שלך באמצעות שדות ותתי שדות; ואילו "QL" מייצג "שפת שאילתות".

אני מרוצה לחלוטין מ- REST, מדוע שאעבור ל- GraphQL?

אם עדיין לא נתקלת בנקודות הכאב של REST ש- GraphQL נועד לטפל בהן, הייתי אומר שזה דבר טוב!

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

האם אוכל להשתמש ב- GraphQL ללא React / Relay / * הכנס ספרייה לכאן *?

כן אתה יכול! מכיוון ש- GraphQL הוא רק מפרט, אתה יכול להשתמש בו עם כל ספריה בכל פלטפורמה, או עם לקוח (למשל, לאפולו יש לקוחות GraphQL לאינטרנט, iOS, Angular וכו ') או על ידי ביצוע שיחות משלך ל- GraphQL. שרת.

GraphQL נוצר על ידי פייסבוק, ואני לא סומך על פייסבוק

שוב, GraphQL הוא מפרט, כלומר אתה יכול להשתמש ביישומי GraphQL מבלי להריץ שורת קוד אחת שנכתבה על ידי פייסבוק.

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

כל העסק הזה "תן ללקוח לבקש את הנתונים שהם צריכים" לא נשמע לי מאובטח במיוחד ...

מכיוון שאתה כותב פתרונות משלך, עליכם לטפל בכל חשש אבטחה ברמה זו.

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

אז מה אני צריך כדי להתחיל?

באופן כללי, תצטרך לפחות שני רכיבים להפעלת אפליקציה המופעלת באמצעות GraphQL:

• GraphQL בשרת המשמש API שלך.
• GraphQL לקוח המתחבר לנקודת הסיום שלך.

המשך לקרוא כדי ללמוד עוד על האפשרויות השונות הזמינות.

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

שרתי GraphQL

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

GraphQL-JS (צומת)

זהו יישום הייחוס המקורי של GraphQL. אתה יכול להשתמש בו יחד עם express-graphql ליצירת שרת ה- API שלך.

שרת GraphQL (צומת)

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

פלטפורמות אחרות

ל- GraphQL.org יש רשימה של יישומי GraphQL לפלטפורמות שונות אחרות (PHP, Ruby וכו ').

לקוחות GraphQL

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

ממסר

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

לקוח אפולו

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

• Apollo-client, המאפשר לך להריץ שאילתות GraphQL בדפדפן ולאחסן את הנתונים שלהם (ויש לו גם סיומת devtools משלו).
• מחבר למסגרת החזיתית שבחרת (React-Apollo, Angular-Apollo וכו ').

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

אפליקציות קוד פתוח

למרות ש- GraphQL חדש למדי, יש כבר כמה אפליקציות קוד פתוח מבטיחות המשתמשות בו.

VulcanJS

ראשית, כתב ויתור: אני המנהל הראשי של VulcanJS. יצרתי את VulcanJS כדי לאפשר לאנשים לנצל את העוצמה של מחסנית React / GraphQL מבלי לכתוב כל כך הרבה צלחת דוד. אתה יכול לחשוב על זה כעל "מסילות למערכת האקולוגית המודרנית", בכך שהוא מאפשר לך לבנות יישומי CRUD (כגון שיבוט באינסטגרם) תוך מספר שעות.

גטסבי

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

כלים אחרים של GraphQL

GraphiQL

GraphiQL הוא IDE נוח מאוד בדפדפן לשאילתת נקודות קצה של GraphQL.

DataLoader

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

צור שרת GraphQL

צור שרת GraphQL הוא כלי שורת פקודה שמקל על פיגום במהירות של שרת GraphQL המופעל על ידי שרת Node ומסד נתונים של Mongo.

GraphQL-up

בדומה ליצירת שרת GraphQL, GraphQL-up מאפשר לך לבצע אתחול מהיר של back-end של GraphQL חדש המופעל על ידי שירות GraphCool.

שירותי GraphQL

לבסוף, ישנן גם מספר חברות "GraphQL-backend-as-a-service" שדואגות עבורך לכל צד השרת שבדברים, וייתכן שזו דרך נחמדה לטבול את בהונותיך במערכת האקולוגית של GraphQL.

Graphcool

פלטפורמת backend גמישה המשלבת GraphQL ו- AWS Lambda, עם תוכנית מפתח בחינם.

Scaphold

עוד backend של GraphQL כשירות, שיש לו גם תוכנית בחינם. הוא מציע הרבה מאותן תכונות כמו Graphcool.

יש כבר לא מעט מקומות בהם ניתן לצחצח את GraphQL.

GraphQL.org

באתר GraphQL הרשמי יש תיעוד נהדר כדי להתחיל בעבודה.

LearnGraphQL

LearnGraphQL הוא קורס אינטראקטיבי שהרכיבו אנשי קדירא.

LearnApollo

מעקב טוב ל- LearnGraphQL, LearnApollo הוא קורס בחינם שנעשה על ידי Graphcool.

הבלוג של אפולו

בבלוג אפולו יש טונות של פוסטים מפורטים וכתובים היטב על אפולו ו- GraphQL בכלל.

GraphQL שבועי

עלון על כל הדברים ש- GraphQL אוצר על ידי צוות Graphcool.

האשבנג שבועי

עלון נהדר נוסף, המכסה גם את React ו- Meteor בנוסף ל- GraphQL.

חופשי

סדרת הדרכה המלמדת כיצד לבנות שיבוט אינטרקום באמצעות GraphQL.

GraphQL מדהים

רשימה די ממצה של קישורים ומשאבים של GraphQL.

אז איך מממשים את הידע הגרפי שלך שרכשת לאחרונה? להלן מספר מתכונים שתוכלו לנסות:

אפולו + Graphcool + Next.js

אם אתה כבר מכיר את Next.js ו- React, דוגמה זו תאפשר לך להגדיר את נקודת הקצה של GraphQL שלך באמצעות Graphcool, ולאחר מכן לשאול אותה באמצעות Apollo.

VulcanJS

ההדרכה של Vulcan תעביר אתכם דרך הגדרת שכבת נתונים פשוטה של ​​GraphQL, הן בשרת והן בלקוח. מכיוון ש- Vulcan היא פלטפורמת All-in-One, זו דרך נחמדה להתחיל ללא כל התקנה. אם אתה זקוק לעזרה, אל תהסס לפנות לערוץ Slack שלנו!

הדרכת GraphQL & React

בבלוג Chroma יש הדרכה בת שישה חלקים על בניית אפליקציית React / GraphQL בעקבות גישה לפיתוח מונע רכיבים.

סיכום

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

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

לְהַסכִּים? לא מסכים? שאלות? רק תודיע לי כאן בתגובות. ואם נהנית ממאמר זה, אנא שקול ולשתף אותו!