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

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

Mutation

כפי שציינו Mutation זו הדרך שלנו לשנות להוסיף ולמחוק מידע בעזרת GQL, שכן מקל עלינו בעובדה מול API רגיל. וכמובן כמו שאנחנו מכירים קצת את GQL אנחנו צריכים להגדיר את השאילתות שלנו בschema וזה כולל גם את הקריאות מסוג Mutation. אז נתחיל מההגדרה של Mutation: אז שוב בחזרה לקובץ האינדקס שלנו בצד השרת.

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 Mutation = new GraphQLObjectType({
    name: "Mutation",
    fields: {
        createGameResults: {
            type: ResultsType,
            args: {
                id: {type: GraphQLInt},
                player: {type: GraphQLString},
                results: {type: GraphQLString}
            },
            resolve(parent,args){
                if(!results.some(item => item.id === args.id)){
                    results.push({id: results.length+1, player:args.player, results: args.results })
                    return args
                }
                return null
            }
        }
    }
})


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

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

שימו לב שורה 35 והילך. הגדרתי את ה mutation שלנו, כל מה שהוא עושה בתכלס, מוסיף עוד אייטם מסוג ResultsType וגם בודק לפי ID אם הוא כבר קיים (במידה ואיכשהו היוזר הצליח ללחוץ פעמיים למרות שזה גם יטופל בUI) בשביל להגדיר את הmutation כל שעלינו לעשות זה בדומה להגדרה של query רק שנשתמש הפעם בפונקציה של resolve בשביל לעשות את העבודה המתאימה. אז אפשר לראות שאני עושה PUSH למערך של המידע שלנו וכמובן אוסף את המידע שחוזר מהשאילתה שלנו שמגיע דרך המשתנה args. לאחר מכן נוכל להחזיר מהשיאלתה הזו של mutation מה שנרצה, אני בחרתי להחזיר את ה args. ודבר נוסף חשוב הוא כמובן להגדיר את mutation ב schema כפי שניתן לראות בשורה 58.

סביבת הבדיקות ו Mutations

כמו שהראיתי בפוסט הקודם איך בודקים את השאילתות של query נוכל גם לבדוק באותה שיטה את הקריאות של mutation. בשביל לעבוד בנוחות נוכל להוריד תוסף לכרום שנקרא : Apollo Client Devtool. זהו ממש הרבה יותר נוח לעבודה , מה שנצטרך לעשות זה לשים את הendpoint שלנו בשורה בפינה שמאל למעלה: http://localhost:5001/graphql

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

אז כל מה שצריך לעשות זה לקחת את הקריאה שבנינו שנראת כך :

mutation CreateGameResults($id: Int, $player: String, $results: String){  createGameResults(id : $id, player : $player,results: $results){    player    results  }}

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

אז בשביל לבדוק Mutation נצטרך גם להעביר נתונים ואת זה עושים בעזרת החלק התחתון משמאל: Variables

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

שימו לב שכרגע אנחנו עומדים על לשונית של RootQueryType שזה אחד השמות שאנחנו הגדרנו. ובצד ימין אפשר לראות שהוא מקבל שדה של getResults שהוא מערך של Results (שם של הטייפ שיצרו עבור ResultsType) . אם נלחץ על Results נראה ממה הוא מורכב.

סיכום Mutation

למעשה סיימנו עם ההגדה של הschema שהגדרנו לתוכה את כל הקריאות שלנו שהם היו גם query וגם mutation . ועכשיו נוכל להמשיך ולממש את הקריאות דרך הUI היישר למשחק שלנו וללמוד כיצד עובדים עם apollo client. נתראה בשיעור הבא בקורס זה. 🐊❤

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

קורס חינם React & GraphQL – שיעור שישי – graphQL על query and mutation. קורס חינם React & GraphQL – שיעור חמישי – graphQL מגדירים schema. קורס חינם React & GraphQL – שיעור רביעי – graphQL מגדירים schema. קורס חינם React & GraphQL – שיעור שני – משחק איקס עיגול TIK-TAK-TOE