Sissejuhatus GraphQL-i: kuidas see töötab ja kuidas seda kasutada

Foto autor Matt Duncan saidil Unsplash

GraphQL on API päringute keel. See näitab, millised on serveri pakutavad eri tüüpi andmed ja seejärel saab klient valida täpselt selle, mida ta soovib.

Ka GraphQL-is saate ühe kõnega saada mitu serveriressurssi, selle asemel et teha mitu REST API-kõnet.

Eeliste täieliku loetelu leiate aadressilt https://graphql.org/.

Asi on selles, kuni näete, kuidas GraphQL töötab, on eelistest raske aru saada. Alustame siis GraphQL-i kasutamist.

Selles artiklis kasutame koos NodeJS-iga ka GraphQL-i.

Eeltingimused

Installige NodeJS siit: https://nodejs.org/et/.

Kuidas kasutada GraphQL-i koos NodeJ-dega

GraphQL-i saab kasutada mitme keelega. Siin keskendume sellele, kuidas saaksime kasutada GraphQL-i JavaScripti abil, kasutades NodeJS-i.

Looge kaust nimega graphql-with-nodejs. Minge projekti kausta ja käivitage projekt NodeJS loomiseks npm init. Selle käsk on toodud allpool.

cd graphql-with-nodejs
npm init

Installige sõltuvused

Installige Express, kasutades järgmist käsku:

npm install express

Installige GraphQL, kasutades järgmist käsku. Installime ExpressQLi jaoks GraphQL ja GraphQL.

npm installima express-graphql graphql

NodeJS kood

Looge projekti sees fail server.js ja kopeerige sinna järgmine kood:

const väljendama = nõudma ('väljendama');
const port = 5000;
const app = ekspress ();

app.get ('/ tere', (req, res) => {
    res.send ("tere");
   }
);

app.listen (port);
console.log (`Server töötab aadressil localhost: $ {port}`);

Ülaltoodud koodil on üks HTTP GET-i lõpp-punkt, mida nimetatakse / tere.

Lõpppunkt luuakse Expressi abil.

Nüüd muutkem seda koodi, et võimaldada GraphQL.

GraphQL-i lubamine koodis

GraphQL-l on üks URL-i lõpp-punkt nimega / graphql, mis haldab kõiki taotlusi.

Kopeerige järgmine kood server.js:

// hankige kõik vajalikud teegid
const väljendama = nõudma ('väljendama');
const graphqlHTTP = nõuda ('express-graphql');
const {GraphQLSchema} = nõuda ('graphql');

const {queryType} = nõuda ('./ query.js');

// pordi numbri ja kiirrakenduse seadistamine
const port = 5000;
const app = ekspress ();

 // Defineerige skeem
const schema = new GraphQLSchema ({query: queryType});

// Seadista nodejs GraphQL server
app.use ('/ graphql', graphqlHTTP ({
    skeem: skeem,
    graafik: tõsi,
}));

app.listen (port);
console.log (`GraphQL Server töötab aadressil localhost: $ {port}`);

Laskem see kood nüüd läbi.

graphqlHTTP võimaldab meil seadistada GraphQL serveri aadressil / graphql url. Ta teab, kuidas käsitleda saabuvat taotlust.

See seadistamine toimub järgmiste koodiridadega:

app.use ('/ graphql', graphqlHTTP ({
    skeem: skeem,
    graafik: tõsi,
}));

Nüüd lubage meil uurida graphqlHTTP sees olevaid parameetreid.

graafiql

graphiql on veebi kasutajaliides, millega saate testida GraphQL lõpp-punkte. Seadistame selle tõeseks, nii et meie loodud erinevaid GraphQL-i lõpp-punkte on lihtsam testida.

skeem

GraphQL-l on ainult üks väline lõpp-punkt / graphql. Sellel lõpp-punktil võib olla mitu muud näitajat, mis teevad mitmesuguseid asju. Need lõpp-punktid täpsustatakse skeemis.

Skeem teeks järgmist:

  • Täpsustage lõpp-punktid
  • Märkige lõpp-punkti sisend- ja väljundväljad
  • Märkige, mida tuleks teha, kui lõpp-punkt tabab jne.

Skeem on koodis määratletud järgmiselt:

const schema = new GraphQLSchema ({query: queryType});

Skeem võib sisaldada nii päringuid kui ka mutatsioonitüüpe. See artikkel keskendub ainult päringu tüübile.

päring

Skeemis näete, et päring on seatud queryType.

Impordime päringutüüpi failist query.js järgmise käsu abil:

const {queryType} = nõuda ('./ query.js');

query.js on kohandatud fail, mille me varsti loome.

päring on koht, kus me täpsustame skeemis kirjutuskaitstud lõpp-punktid.

Looge projektis fail nimega query.js ja kopeerige sellesse järgmine kood.

const {GraphQLObjectType,
    GraphQLString
} = nõuda ('graphql');


// Määrake päring
const queryType = uus GraphQLObjectType ({
    nimi: 'Query',
    väljad: {
        Tere: {
            tüüp: GraphQLString,

            lahenda: function () {
                tagasi "Tere maailm";
            }
        }
    }
});

export.queryType = queryType;

päring seletatud

queryType luuakse kui GraphQLObjectType ja sellele antakse nimi Päring.

väljad, kus me määratleme erinevad lõpp-punktid.

Seega lisame siia ühe lõpp-punkti, mida nimetatakse tere.

tere on tüüpi GraphQLString, mis tähendab, et sellel lõpp-punktil on tagastamise tüüp String. Tüüp on Stringi asemel GraphQLString, kuna see on GraphQL-skeem. Nii et Stringi kasutamine otse ei tööta.

lahendamise funktsioon näitab toimingut, mis tuleb teha lõpp-punkti kutsumisel. Siin on vaja tagastada keelpill “Tere maailm”.

Lõpuks ekspordime päringutüübi, kasutades export.queryType = queryType. Selle eesmärk on tagada, et saaksime selle importida serverisse.

Rakenduse käitamine

Käivitage rakendus järgmise käsu abil:

sõlme server.js

Rakendus töötab localhostis: 5000 / graphql.

Rakendust saate testida, minnes aadressile localhost: 5000 / graphql.

See URL käivitab Graphiql veebi kasutajaliidese, nagu on näidatud alloleval ekraanil.

Sisend on vasakul ja väljund paremal.

Andke järgmine sisend

{
  Tere
}

See annab järgmise väljundi

{
  "andmed": {
    "tere": "tere maailm"
  }
}

Palju õnne

Olete loonud oma esimese GraphQL-i lõpp-punkti.

Veel lõpp-punktide lisamine

Loome 2 uut lõpp-punkti:

  • film: see lõpp-punkt tagastab filmi, kui antakse filmi ID
  • direktor: see lõpp-punkt tagastab režissööri ID-ga direktori. See tagastab ka kõik selle režissööri lavastatud filmid.

Andmete lisamine

Tavaliselt loeb rakendus andmeid andmebaasist. Kuid selle õpetuse jaoks kodeerime lihtsuse huvides andmed koodis endas.

Looge fail nimega data.js ja lisage järgmine kood.

// Kõva kood mõned andmed filmide ja režissööride jaoks
lase filmidel = [{
    id: 1,
    nimi: "Film 1",
    aasta: 2018,
    direktorId: 1
},
{
    id: 2,
    nimi: "Film 2",
    aasta: 2017,
    direktorId: 1
},
{
    id: 3,
    nimi: "Film 3",
    aasta: 2016,
    lavastaja ID: 3
}
];

las direktorid = [{
    id: 1,
    nimi: "direktor 1",
    vanus: 20
},
{
    id: 2,
    nimi: "direktor 2",
    vanus: 30
},
{
    id: 3,
    nimi: "direktor 3",
    vanus: 40
}
];

export.movies = filmid;
export.directors = direktorid;

Selles failis on filmide ja režissööride andmed. Kasutame oma lõpp-punktide jaoks selle faili andmeid.

Filmi lõpp-punkti lisamine päringule

Uued lõpp-punktid lisatakse päringutüüpi faili query.js alla.

Filmi lõpp-punkti kood on näidatud allpool:

Film: {
            tüüp: movieType,
            args: {
                id: {tüüp: GraphQLInt}
            },
            lahendama: funktsioon (allikas, args) {
                return _.find (filmid, {id: args.id});
            }
        }

Selle lõpp-punkti naasmise tüüp on movieType, mis määratletakse varsti.

parameetrit args kasutatakse filmi lõpp-punkti sisendi märkimiseks. Selle lõpp-punkti sisend on id, mis on tüüpi GraphQLInt.

lahendamise funktsioon tagastab ID-le vastava filmi filmide loendist. leidmine on funktsioon lodashi teegist, mida kasutatakse loendis elemendi leidmiseks.

Järgnevalt on näidatud päringu.js täielik kood:

const {GraphQLObjectType,
    GraphQLString,
    GraphQLInt
} = nõuda ('graphql');
const _ = nõuda ('lodash');

const {movieType} = nõuda ('./ type.js');
lase {movies} = nõuda ('./ data.js');


// Määrake päring
const queryType = uus GraphQLObjectType ({
    nimi: 'Query',
    väljad: {
        Tere: {
            tüüp: GraphQLString,

            lahenda: function () {
                tagasi "Tere maailm";
            }
        },

        Film: {
            tüüp: movieType,
            args: {
                id: {tüüp: GraphQLInt}
            },
            lahendama: funktsioon (allikas, args) {
                return _.find (filmid, {id: args.id});
            }
        }
    }
});

export.queryType = queryType;

Ülaltoodud koodist näeme, et movieType on tegelikult määratletud tips.js.

Kohandatud tüübi movieType'i lisamine

Looge fail nimega tips.js.

Lisage järgmine kood tüüp.js-s

const {
    GraphQLObjectType,
    GraphQLID,
    GraphQLString,
    GraphQLInt
} = nõuda ('graphql');

// Määratle filmi tüüp
movieType = uus GraphQLObjectType ({
    nimi: 'film',
    väljad: {
        id: {tüüp: GraphQLID},
        nimi: {tüüp: GraphQLString},
        aasta: {tüüp: GraphQLInt},
        directorId: {tüüp: GraphQLID}

    }
});

export.movieType = movieType;

On näha, et movieType on loodud kui GraphQLObjectType.

Sellel on 4 välja: ID, nimi, aasta ja direktorId. Nende lisamise ajal on täpsustatud ka kõigi nende väljade tüübid.

Need väljad pärinevad otse andmetest. Sel juhul on see filmiloendist.

Lisamine direktori lõpp-punkti päringule ja tüübile

Nagu filmis, saab lisada isegi režissööri lõpp-punkti.

In query.js saab direktori lõpp-punkti lisada järgmiselt:

režissöör: {
            tüüp: directorType,
            args: {
                id: {tüüp: GraphQLInt}
            },
            lahendama: funktsioon (allikas, args) {
                return _.find (režissöörid, {id: args.id});
            }
        }

directorType'i saab type.js-s lisada järgmiselt:

// Määrake direktori tüüp
directorType = uus GraphQLObjectType ({
    nimi: "direktor",
    väljad: {
        id: {tüüp: GraphQLID},
        nimi: {tüüp: GraphQLString},
        vanus: {tüüp: GraphQLInt},
        filmid: {
            tüüp: uus GraphQLList (movieType),
            lahenda (allikas, args) {
                return _.filter (filmid, {directorId: source.id});
            }

        }

    }
});

Oota hetk. DirectorType erineb pisut MovieType'ist. Miks on see?

Miks on direktorType'is lahendamisfunktsioon? Varem nägime, et lahendamise funktsioonid olid olemas ainult päringus ...

DirectorType'i eriline olemus

Kui režissööri lõpp-punkt kutsutakse, peame tagastama režissööri üksikasjad ja kõik filmid, mida režissöör on suunanud.

Esimesed 3 välja ID, nimi, vanus direktorType'is on sirged ja pärinevad otse andmetest (direktorite loend).

Neljas väli, filmid, peab sisaldama selle režissööri filmide loendit.

Selle jaoks mainime, et filmi tüüpi tüüp on filmType (filmide loend) GraphQLList.

Kuid kuidas täpselt leiame kõik selle režissööri lavastatud filmid?

Selleks on meil filmide väljal lahendamisfunktsioon. Selle lahendamise funktsiooni sisendid on allikad ja argsed.

allikas on vanemobjekti üksikasjad.

Võimaldab öelda, et režissööri väljad id = 1, nimi = “juhuslik” ja vanus = 20. Siis source.id = 1, source.name = “juhuslik” ja source.age = 20

Nii et selles näites leiab lahendamise funktsioon kõik filmid, kus DirectorId vastab vajaliku režissööri ID-le.

Kood

Selle rakenduse kogu kood on saadaval selles GitHubi repos

Rakenduse testimine

Nüüd katsetage rakendust erinevate stsenaariumide jaoks.

Käivitage rakendus, kasutades sõlme server.js.

Minge localhost: 5000 / graphql ja proovige järgmisi sisendeid.

Film

Sisend:

{
  film (id: 1) {
    nimi
  }
}

Väljund:

{
  "andmed": {
    "Film": {
      "nimi": "film 1"
    }
  }
}

Ülaltoodust näeme, et klient saab taotleda täpselt seda, mida ta soovib, ja GraphQL tagab, et ainult need parameetrid saadetakse tagasi. Siin taotletakse ainult nimevälja ja ainult seda saadab server tagasi.

Filmis (id: 1) on id sisendparameeter. Palume serveril saata tagasi film, mille id on 1.

Sisend:

{
  film (id: 3) {
    nimi
    id
    aastal
  }
}

Väljund:

{
  "andmed": {
    "Film": {
      "nimi": "film 3",
      "id": "3",
      "aasta": 2016
    }
  }
}

Ülaltoodud näite nime puhul tuleb sisestada ID ja aasta väljad. Nii saadab server kõik need väljad tagasi.

lavastaja

Sisend:

{
  režissöör (id: 1) {
    nimi
    id,
    vanus
  }
}

Väljund:

{
  "andmed": {
    "režissöör": {
      "nimi": "direktor 1",
      "id": "1",
      "vanus": 20
    }
  }
}

Sisend:

{
  režissöör (id: 1) {
    nimi
    id,
    vanus,
    filmid {
      nimi,
      aastal
    }
  }
}

Väljund:

{
  "andmed": {
    "režissöör": {
      "nimi": "direktor 1",
      "id": "1",
      "vanus": 20,
      "filmid": [
        {
          "nimi": "film 1",
          "aasta": 2018
        },
        {
          "nimi": "film 2",
          "aasta": 2017
        }
      ]
    }
  }
}

Ülaltoodud näites näeme GraphQLi võimsust. Märgime, et tahame režissööri ID-ga 1. Samuti soovime kõiki selle režissööri filme. Nii režissööri kui ka filmi väljad on kohandatavad ja klient saab taotleda täpselt seda, mida ta soovib.

Samamoodi saab seda laiendada teistele väljadele ja tüüpidele. Näiteks võiksime käivitada päringu nagu Leia režissöör ID-ga 1. Selle režissööri jaoks leiate kõik filmid. Iga filmi jaoks leidke näitlejad. Iga näitleja jaoks saate 5 parimat filmi ja nii edasi. Selle päringu jaoks peame täpsustama tüüpide omavahelise seose. Kui oleme selle teinud, saab klient küsida mis tahes suhteid, mida ta soovib.

Palju õnne

Nüüd teate GraphQLi põhimõisteid.

GraphQLi kohta lisateabe saamiseks saate tutvuda dokumentatsiooniga

Autori kohta

Armastan tehnoloogiat ja jälgin selles valdkonnas tehtud edusamme. Mulle meeldib ka teistele oma tehnoloogiliste teadmistega abistamine.

Võtke minuga ühendust minu LinkedIni kontol https://www.linkedin.com/in/aditya1811/

Võite mind jälgida ka twitteris https://twitter.com/adityasridhar18

Minu veebisait: https://adityasridhar.com/

Algselt avaldati saidil adityasridhar.com.