Aloittelijan opas GraphQL: ään

Yksi nykyään yleisimmin käsitellyistä termeistä on sovellusliittymä. Monet ihmiset eivät tiedä tarkalleen, mikä on sovellusliittymä. Pohjimmiltaan API tarkoittaa sovellusohjelmointirajapintaa. Se on, kuten nimestä käy ilmi, rajapinta, jonka kanssa ihmiset - kehittäjät, käyttäjät, kuluttajat - voivat olla vuorovaikutuksessa tietojen kanssa.

Voit ajatella sovellusliittymää baarimikkona. Kysyt baarimikolta juoman, ja he antavat sinulle mitä halusit. Yksinkertainen. Joten miksi se on ongelma?

Nykyaikaisen verkon perustamisesta lähtien sovellusliittymien rakentaminen ei ole ollut niin vaikeaa kuin miltä se kuulostaa. Mutta sovellusliittymien oppiminen ja ymmärtäminen oli. Kehittäjät muodostavat suurimman osan ihmisistä, jotka käyttävät sovellusliittymääsi jonkin rakentamiseen tai vain tietojen kuluttamiseen. Joten sovellusliittymäsi tulisi olla mahdollisimman puhdas ja intuitiivinen. Hyvin suunniteltu sovellusliittymä on erittäin helppo käyttää ja oppia. Se on myös intuitiivinen, hyvä huomioida asia, kun alat suunnitella sovellusliittymääsi.

Olemme rakentaneet sovellusliittymiä REST pitkään. Sen mukana tulee joitain ongelmia. Kun rakennat sovellusliittymää REST-suunnittelua käyttämällä, sinulla on joitain ongelmia, kuten:

1) sinulla on paljon päätepisteitä

2) Kehittäjien on paljon vaikeampaa oppia ja ymmärtää sovellusliittymääsi

3) tietoja haetaan liikaa ja liian vähän

Näiden ongelmien ratkaisemiseksi Facebook loi GraphQL: n. Tänään mielestäni GraphQL on paras tapa rakentaa sovellusliittymiä. Tämä artikkeli kertoo sinulle, miksi sinun pitäisi alkaa oppia sitä tänään.

Tässä artikkelissa opit miten GraphQL toimii. Aion näyttää sinulle, miten luoda erittäin hyvin suunniteltu, tehokas ja tehokas sovellusliittymä GraphQL: n avulla.

Olet todennäköisesti jo kuullut GraphQL: stä, koska monet ihmiset ja yritykset käyttävät sitä. Koska GraphQL on avoimen lähdekoodin, sen yhteisö on kasvanut valtavaksi.

Nyt on aika aloittaa oppiminen käytännössä, miten GraphQL toimii ja kaikki sen taikuudesta.

Mikä on GraphQL?

GraphQL on Facebookin kehittämä avoimen lähdekoodin kyselykieli. Se tarjoaa meille tehokkaamman tavan suunnitella, luoda ja kuluttaa sovellusliittymiämme. Pohjimmiltaan se korvaa RESTin.

GraphQL: llä on paljon ominaisuuksia, kuten:

  1. Kirjoitat haluamasi tiedot ja saat täsmälleen haluamasi tiedot. Ei enää tietojen noutoa, kuten olemme tottuneet RESTiin.
  2. Se antaa meille yhden päätepisteen, ei enää versiota 2 tai versiota 3 samalle sovellusliittymälle.
  3. GraphQL on tyypillisesti kirjoitettu, ja sen avulla voit tarkistaa kyselyn GraphQL-tyyppisessä järjestelmässä ennen suorittamista. Se auttaa meitä rakentamaan tehokkaampia sovellusliittymiä.

Tämä on perusohje GraphQL: lle - miksi se on niin tehokas ja miksi se on saanut paljon suosiota näinä päivinä. Jos haluat lisätietoja siitä, suosittelen, että siirryt GraphQL-verkkosivustoon ja tarkista se.

Päästä alkuun

Tämän artikkelin päätavoitteena ei ole oppia asettamaan GraphQL-palvelinta, joten emme ole syventäneet sitä toistaiseksi. Tavoitteena on oppia, miten GraphQL toimii käytännössä, joten aiomme käyttää nollakonfiguraatiota GraphQL-palvelinta nimeltä Graphpack.

Projektimme aloittamiseksi aiomme luoda uuden kansion, ja voit nimetä sen mitä haluat. Aion nimetä sen graafql-palvelimeksi:

Avaa pääte ja kirjoita:

mkdir graphql-palvelin

Nyt koneellasi pitäisi olla asennettuna npm tai lanka. Jos et tiedä mitä nämä ovat, npm ja lanka ovat JavaScriptin ohjelmointikielen paketinhallintaa. Node.js: n oletuspaketinhallinta on npm.

Kirjoita luodun kansion sisään seuraava komento:

npm init -y

Tai jos käytät lankaa:

lanka init

npm luo sinulle paketin.json-tiedoston, ja kaikki asentamasi riippuvuudet ja komennot ovat siellä.

Joten nyt asennamme ainoan riippuvuuden, jota aiomme käyttää.

Graphpack antaa sinun luoda GraphQL-palvelin nolla-määrityksellä. Koska olemme vasta aloittamassa GraphQL: llä, tämä auttaa meitä paljon jatkamaan ja oppimaan lisää huolehtimatta palvelimen kokoonpanosta.

Asenna päätteeseesi juurihakemistosi sisälle seuraavasti:

npm install --save-dev graphpack

Tai jos käytät lankaa, sinun pitäisi mennä näin:

lanka lisää --dev graphpack

Kun Graphpack on asennettu, mene skripteihimme pack.json-tiedostossa ja laita seuraava koodi sinne:

Aiomme luoda kansion nimeltä src, ja se tulee olemaan ainoa kansio koko palvelimellamme.

Luo kansio nimeltä src, sen jälkeen luomme kansioon vain kolme tiedostoa.

Luo src-kansiomme sisällä tiedosto nimeltä schema.graphql. Laita seuraava tiedosto seuraavaan tiedostoon:

Tässä schema.graphql-tiedostossa tulee olemaan koko GraphQL-skeema. Jos et tiedä mikä se on, selitän myöhemmin - älä huoli.

Luo nyt toinen tiedosto src-kansiomme sisällä. Kutsu sitä resolvers.js ja laita seuraava tiedosto seuraavaan tiedostoon:

Tämä resolvers.js-tiedosto tulee olemaan tapa, jolla annamme ohjeet GraphQL-operaation muuttamiseksi tiedoksi.

Ja lopuksi, luo kolmas tiedosto src-kansiosi sisällä. Soita tälle db.js ja laita seuraava tiedosto kolmanteen tiedostoon:

Tässä opetusohjelmassa emme käytä reaalimaailman tietokantaa. Joten tämä db.js-tiedosto simuloi tietokantaa, vain oppimista varten.

Nyt src-kansiomme pitäisi näyttää tältä:

src
  | --db.js
  | --resolvers.js
  | --schema.graphql

Nyt, jos suoritat komennon npm run dev tai jos käytät lankaa, lanka dev, sinun pitäisi nähdä tämä lähtö terminaalissasi:

Voit nyt siirtyä localhostiin: 4000. Tämä tarkoittaa, että olemme valmiita lähtemään kirjoittamaan ensimmäiset kyselyt, mutaatiot ja tilaukset GraphQL: ään.

Näet GraphQL Playgroundin, tehokkaan GraphQL IDE -sovelluksen parantamaan kehitystyönkulkuja. Jos haluat lisätietoja GraphQL Playgroundista, napsauta tätä.

kaavio

GraphQL: llä on oma kielityyppinsä, jota käytetään skeemien kirjoittamiseen. Tämä on ihmisille luettava skeeman syntaksi nimeltään Schema Definition Language (SDL). SDL on sama riippumatta käyttämästäsi tekniikasta - voit käyttää sitä millä tahansa haluamallasi kielellä tai kehyksellä.

Tämä kaavakieli on erittäin hyödyllinen, koska on helppo ymmärtää, minkä tyyppisiä sovellusliittymiäsi tulee. Voit ymmärtää sen vain etsimällä sitä oikein.

Tyypit

Tyypit ovat yksi tärkeimmistä piirteistä GraphQL: ssä. Tyypit ovat mukautettuja objekteja, jotka edustavat sovellusliittymän näyttämistä. Jos esimerkiksi rakennat sosiaalisen median sovellusta, sovellusliittymässäsi tulisi olla tyyppejä, kuten Viestit, Käyttäjät, Tykkäykset, Ryhmät.

Tyypeillä on kentät, ja nämä kentät palauttavat tietyn tyyppisen datan. Aiomme esimerkiksi luoda käyttäjätyypin, meillä pitäisi olla joitain nimi-, sähköposti- ja ikäkenttiä. Tyyppikentät voivat olla mitä tahansa, ja ne palauttavat aina tietyn tyyppisiä tietoja: Int, kelluva, merkkijono, looginen, tunnus, objektityyppiluettelo tai mukautettuja objektityyppejä.

Joten kirjoita nyt ensimmäinen tyyppimme, siirry schema.graphql-tiedostoosi ja korvaa jo olemassa oleva kyselytyyppi seuraavalla:

Jokaisella käyttäjällä on tunnus, joten annoimme sille tunnustyypin. Käyttäjällä on myös nimi ja sähköpostiosoite, joten meille annettiin merkkijonotyyppi ja ikä, joille annettiin Int-tyyppi. Aika yksinkertainen, eikö niin?

Mutta entä nuo! jokaisen rivin lopussa? Huutomerkki tarkoittaa, että kentät eivät ole tyhjät, mikä tarkoittaa, että jokaisen kentän on palautettava joitain tietoja jokaisessa kyselyssä. Ainoa tyhjä kenttä, joka meillä tulee olemaan käyttäjätyypissä, on ikä.

GraphQL käsittelee kolme pääkonseptia:

  1. kyselyt - tapa, jolla aiot saada tietoja palvelimelta.
  2. mutaatiot - tapa, jolla aiot muokata palvelimen tietoja ja saada päivitetyt tiedot takaisin (luoda, päivittää, poistaa).
  3. tilaukset - tapa ylläpitää reaaliaikaista yhteyttä palvelimeen.

Aion selittää ne kaikki sinulle. Aloitetaan kyselyillä.

kyselyt

Tämän selittämiseksi yksinkertaisella tavalla GraphQL-kyselyt ovat tapa, jolla aiot saada tietoja. Yksi kauneimmista asioista GraphQL-kyselyissä on, että aiot vain saada tarkkoja tietoja, joita haluat. Ei enempää ei vähempää. Tällä on valtava positiivinen vaikutus sovellusliittymäämme - ei enää noutaa tai hakea lisätietoja, kuten meillä oli REST-sovellusliittymien kanssa.

Aiomme luoda ensimmäisen tyyppisen kyselymme GraphQL: ssä. Kaikki kyselymme päätyvät tämän tyyppisiin. Joten aloittamalla siirrymme schema.graphql -sivustomme ja kirjoitamme uuden tyypin nimeltä Query:

Se on hyvin yksinkertaista: käyttäjien kysely palauttaa meille joukon yhden tai useamman käyttäjän. Se ei palauta tyhjäksi, koska laitamme sisään! , mikä tarkoittaa, että kysely ei ole tyhjä. Sen pitäisi aina palauttaa jotain.

Mutta voimme myös palauttaa tietyn käyttäjän. Sitä varten aiomme luoda uuden kyselyn nimeltä käyttäjä. Laita kyselytyyppiin seuraava koodi:

Nyt kyselytyyppimme pitäisi näyttää tältä:

Kuten näette, GraphQL-kyselyillä voimme myös lähettää argumentteja. Tässä tapauksessa välitämme tietyn käyttäjän kyselyn käyttäjän tunnuksen.

Mutta saatat ihmetellä: kuinka GraphQL tietää mistä tiedot saadaan? Siksi meillä pitäisi olla resolvers.js-tiedosto. Tiedosto kertoo GraphQL: lle, kuinka ja mihin se noutaa tiedot.

Siirry ensin resolvers.js-tiedostoomme ja tuo db.js, jonka loimme juuri hetki sitten. Resolvers.js-tiedostosi pitäisi näyttää seuraavalta:

Nyt aiomme luoda ensimmäisen kyselymme. Siirry resolvers.js-tiedostoosi ja korvaa hello-toiminto. Nyt kyselytyyppisi pitäisi näyttää tältä:

Nyt selittää miten se toimii:

Jokaisella kyselyn ratkaisijalla on neljä argumenttia. Käyttäjätoiminnossa lähetämme tunnuksen argumenttina ja palautamme sitten tietyn käyttäjän, joka vastaa välitettyä tunnusta. Aika yksinkertainen.

Käyttäjätoiminnossa palautamme vain jo olemassa olevan käyttäjien ryhmän. Se palaa aina meille kaikille käyttäjillemme.

Nyt testataan, toimiiko kyselymme hyvin. Siirry localhost: 4000 ja kirjoita seuraava koodi:

Sen pitäisi palata sinulle kaikille käyttäjillemme.

Tai jos haluat palauttaa tietyn käyttäjän:

Nyt aiomme oppia mutaatioista, jotka ovat yksi tärkeimmistä ominaisuuksista GraphQL: ssä.

mutaatiot

GraphQL: ssä mutaatiot ovat tapa, jolla aiot muokata palvelimen tietoja ja saada päivitetyt tiedot takaisin. Voit ajatella kuten RESTin CUD (Luo, päivitä, poista).

Aiomme luoda ensimmäisen tyyppisen mutaation GraphQL: ään, ja kaikki mutaatiomme päätyvät tämän tyyppiseen sisälle. Joten aloittamalla siirry schema.graphql -sivustomme ja kirjoita uusi tyyppi, nimeltään mutaatio:

Kuten näette, meillä on kolme mutaatiota:

createUser: meidän tulee välittää tunnus, nimi, sähköpostiosoite ja ikä. Sen pitäisi palauttaa uusi käyttäjä meille.

updateUser: meidän tulee välittää tunnus ja uusi nimi, sähköpostiosoite tai ikä. Sen pitäisi palauttaa uusi käyttäjä meille.

deleteUser: meidän pitäisi välittää tunnus. Sen pitäisi palauttaa uusi käyttäjä meille.

Siirry nyt resolvers.js-tiedostoomme ja Luo kyselyobjektin alle uusi mutaatiobjekti näin:

Nyt resolvers.js-tiedostomme pitäisi näyttää seuraavalta:

Nyt testataan, mutaatiomme toimivat hyvin. Siirry localhost: 4000 ja kirjoita seuraava koodi:

Sen pitäisi palauttaa sinulle uusi käyttäjä. Jos haluat kokeilla uusien mutaatioiden tekemistä, suosittelen kokeilemaan itse! Yritä poistaa sama luomasi käyttäjä nähdäksesi, toimiiko se hyvin.

Viimeinkin aiomme alkaa oppia tilauksista ja miksi ne ovat niin voimakkaita.

Tilaukset

Kuten aiemmin totesin, tilaukset ovat tapa, jolla aiot ylläpitää reaaliaikaista yhteyttä palvelimeen. Tämä tarkoittaa, että aina kun palvelimessa tapahtuu tapahtuma ja kun sitä kutsutaan, palvelin lähettää vastaavat tiedot asiakkaalle.

Työskentelemällä tilauksilla voit pitää sovelluksesi päivitettynä viimeisimpiin muutoksiin eri käyttäjien välillä.

Perustilaus on seuraava:

Sanot, että se on hyvin samanlainen kuin kysely, ja kyllä ​​se on. Mutta se toimii eri tavalla.

Kun jotain päivitetään palvelimella, palvelin suorittaa tilauksessa määritetyn GraphQL-kyselyn ja lähettää vasta päivitetyn tuloksen asiakkaalle.

Emme aio käsitellä tilauksia tässä nimenomaisessa artikkelissa, mutta jos haluat lukea lisää niistä, napsauta tätä.

johtopäätös

Kuten huomasit, GraphQL on uusi tekniikka, joka on todella tehokas. Se antaa meille todellista voimaa rakentaa parempia ja hyvin suunniteltuja sovellusliittymiä. Siksi suosittelen, että aloitat oppimisen nyt. Minulle se lopulta korvaa REST.

Kiitos artikkelin lukemisesta, anna kommentti alla!

Seuraa minua Twitterissä!
Seuraa minua GitHubissa!

Etsin etämahdollisuutta, joten jos haluaisin kuulla siitä, ota minuun yhteyttä Twitterissäni!