קורס חינם React & GraphQL – שיעור רביעי – graphQL מגדירים schema.

סוף סוף מתחילים ללמוד graphQL! עד עכשיו התעסקנו בreact וקצת nodejs ועכשיו הדבר האמיתי. כפי שכבר שציינו graphQL מאפשר לנו גמישות בעבודה עם API . ובשביל לבנות GQL יש הרבה דברים שצריך לדעת לעשות שהם:

1. הגדרה של המידע type-definition – הגדרה מדוייקת של המידע שנעבור איתו בGQL
2. resolvers – פונקציונלייותGQL (למשל query , mutation – ארחיב בהמשך)
3. הגדרה של הschema – המפה המרכזית שלנו בGQL , כל ההגדרות שלנו ישבו בתוך schema.

שיעורים הקודמים למי שעוד לא עקב נמצאים פה:

קורס חינם React & GraphQL – שיעור ראשון – אתחול צד לקוח

קורס חינם React & GraphQL – שיעור שני – משחק איקס עיגול TIK-TAK-TOE

קורס חינם React & GraphQL – שיעור שלישי – צד שרת Nodejs של המשחק איקס עיגול.

בשיעור הזה נכיר היטב את הschema ונתחיל להגדיר אותה וגם בשיעורים הבאים ככל הנראה כי יש הרבה על מה לעבור. אז נתחיל.

מהי schema ב-graphQL?

schema – בשביל graphQL ידע לאיזה דטה לגשת . אנחנו נצטרך להגיד schema שבה נגדיר במדוייק את המידע שחוזר או נשלח. כך גם אנו מקבלים דוקומנטציה מלאה של המידע שלנו בplayGround של graphQL .

מה זה graphQL playGround?

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

const express = require("express");
const app = express();
PORT = 5001;
const cors = require("cors");

const { graphqlHTTP } = require('express-graphql');

app.use(cors());
app.use('/graphql', graphqlHTTP({
   // schema,
    graphiql: true
}));
app.listen(PORT, () => {
    console.log('Server runnig on port ' + PORT);
});

כל מה שאנחנו צרכים להוסיף בקורץ index.js בסרבר שלנו הוא middleware שיגדיר route ונעביר לו עוד פונקנציה שנקראת graphqlHTTP. (כמובן שיש לייבא אותה מתוך express-graphql – שורה 6) וגם להגדיר true בgraphiql כי אחרת לא תוכלו לגשת לראוט הזה.

כמובן שאם ניסיתם לגלוש לכתובת שלכם ב playGround תקבלו שגיאה בסגנון הזה:

{"errors":[{"message":"GraphQL middleware options must contain a schema."}]}

וזה כמובן כי יש להגדיר את הschema . (שורה 10 בקומנט כרגע)

איך בונים schema?

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

1. מזהה של השחקן המנצח (id)
2. שם השחקן המנצח (name)
3. מה תוצאות הלוח של השחקן (results)

למעשה זהו. (כפי שציינתי אנחנו עושים משהו פשוט וקל)

נסיק מזה שיהיו לנו שאליתות של קריאה read . ב graphql אנחנו קוראים לזה query. ונצטרך גם לכתוב את התוצאות המשחקים החדשים. בדומה ל post , ב graphql אנחנו קוראים לזה mutation שזה התשובה של post , update, delete שאנחנו מכירים בתקשורת ישירה עם API.

אנחנו מוכנים להתקדם הלאה . נתראה בשיעור הבא ❤🐊

פוסטים קשורים:

קורס חינם React & GraphQL – שיעור שלישי – צד שרת Nodejs של המשחק איקס עיגול. קורס חינם React & GraphQL – שיעור ראשון – אתחול צד לקוח קורס חינם React & GraphQL – שיעור שני – משחק איקס עיגול TIK-TAK-TOE graphQl עוקף את REST בסיבוב? מדריך GQL