קורס חינם React & GraphQL – שיעור שישי – graphQL על query and mutation.

אוקי אז אולי ההגדרות השימושיות ביותר ב graphQL הם query ו mutation שבאופן כללי אלו שמבצעים את כל העבודה של הקריאות השונות שככל שנראה יגיעו מצד הלקוח. אז לפני שנתחיל , מי שעוד לא יודע והגיע במקרה לפוסט הזה ישירות. אז זהו קורס חינם שלReact & GraphQL ומוזמן לעבור על השיעור שעברנו עד כה:

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

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

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

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

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

ואנחנו ממשיכים להגדרות החשובות שכבר ציינו לעיל…

query

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

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

השאילתה הזו תביא מערך של של אובייקטים בצורה הזו:

הכל טוב ויפה אבל איך זה קרה?. טוב אז קודם כל נתחיל לרשום קצת קוד והכל יהיה ברור.

מגדירים את ה query ב schema

נמשיך לקוד ואסביר מה התרחש. נוסיף את השינויים הללו לקובץ index.js שלנו בnodejs

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

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

const graphql = require("graphql");
const { GraphQLSchema, GraphQLObjectType, GraphQLInt, GraphQLString, GraphQLList} = graphql;

const {results} = require("../client/src/mock/results");

const ResultsType = new GraphQLObjectType({
    name: "Results",
    fields: ()=> ({
        id: {type: GraphQLInt},
        player: {type: GraphQLString},
        results: {type: GraphQLString}
    })
});


const RootQuery = new GraphQLObjectType({
    name: "RootQueryType",
    fields: {
        getResults: {
            type: new GraphQLList(ResultsType),
            resolve(parent,args) {
                return results
            }
        }
    }
})

const schema = new GraphQLSchema({
    query: RootQuery
})

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

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

• GraphQLObjectType – אובייקט GQL שנצטרך להגדיר אותו. למעשה נגדיר את תצורת האובייקט שאני מעוניין לקבל. (זה מאד מזכיר types מ typescript וכדומה)
• GraphQLList – תצורת רשימה . למשל אם מדובר במידע שתרצו לקבל כמערך את יהיה עליכם להגדיר בעזרת GraphQLList כפי שעשיתי פה לgetResults, שהוא משתנה חופשי שבחרתי להגדיר. עדיף לתת שם נוח שמגדיר את אופי השאילתה.
• ResultsType – זהו טייפ שאני יצרתי שמכיר בתוכו מספר ID , השחקן המנצח , ותוצאות הלוח. וכן הגדרתי בשורה 25 כי הרשימה שאני מעוניין לקבל היא מסוג זה, של ResultsType.
• GraphQLInt, GraphQLString טיייפים של המידע שמספק לנו GQL. למשל ID הגדרתי כמספר GraphQLInt ושחקן ותוצאת הלוח הגדרתי כסטרינג GraphQLString .
• resolve – פונקציה שמחזירה לנו את המידע. (בשיעור הסיום יהיה הסבר יותר מפורט על resolvers ).

קצת על ה"מבנה המוזר" של GQL .

שנרצה להגדיר שאילתה ונעשה שימוש ב GraphQLObjectType יהיה עלינו להגדיר בהתאם לדרישות GQL , שם של אותו הטייפ, לכל טייפ יש להגדיר שדות (fields) שיכול לקבל פונקציה או אובייקט עם resolve. ניתן לראות את שתי המקרים בדומה שלי.

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

החלק האומנותי של GQL

עכשיו שהגדרנו את הטייפים של query והגדרנו אותו באובייקט ה schema נוכל סוף סוף להריץ את שרת הnodejs שלנו עם npm run start ולגשת לכתובת שהגדרנו (במקרה שלי זה http://localhost:5001/graphql)

ולהריץ את השאילתה ולקבל תשובה:

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

מאיפה הגיע המידע??

המידע הוא קובץ MOCK שיצרתי לטוב זה, להלן : (ניתן לראות שייבאתי אותו לindex.js בקוד לעיל)

const results = [
    {id: 1 , player: 'Player One', results: '1,5,9'}
];

module.exports = {
    results
}

לסיכום שיעור שישי query

אז זהו אחר הכלים היותר שימושיים שאתם תעשו עם GQL . ממשק בדיקת השאילתות יהיה לכם לעזר רב עוד לפני שתכתבו את השאילתות הללו בUI. וכמו כן יש עוד שיעור הבא יהיה השיעור על mutation ועוד כמה הסברי המשך על עבודה עם סביבת בדיקת השאילתות.

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

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