Mis on see GraphQLi asi, millest ma pidevalt kuulen?

Mis on see GraphQLi asi, millest ma pidevalt kuulen?

Kui olete nagu mina, läbite uuest tehnoloogiast kuuldes tõenäoliselt kolm etappi:

1. Vallandamine

Veel üks JavaScripti kogu ?! Lihtsalt kasutage juba jQuery!

2. Huvi

Hmm, võibolla ma peaks tsekkata seda uut raamatukogu Kuulen pidevalt umbes ...

3. Paanika

Aidake! Pean selle uue raamatukogu kohe ära õppima, muidu olen iganenud!

Nipp oma mõistuse säilitamiseks nendel kiiresti arenevatel aegadel on õppida uusi asju kohe teise ja kolmanda etapi vahel, kui teie huvi on saavutatud, kuid kui olete endiselt kurvist ees.

Seetõttu on praegu ideaalne aeg teada saada, mis see GraphQL-i asi on, millest te pidevalt kuulete.

Põhitõed

Lühidalt öeldes on GraphQL süntaks, mis kirjeldab andmete küsimist , ja seda kasutatakse tavaliselt andmete serverist kliendi laadimiseks. GraphQL-il on kolm peamist omadust:

  • See võimaldab kliendil täpselt täpsustada, milliseid andmeid ta vajab.
  • See hõlbustab mitmest allikast pärit andmete koondamist.
  • Andmete kirjeldamiseks kasutatakse tüübisüsteemi.

Kuidas siis GraphQL alustas? Kuidas see praktikas välja näeb? Ja kuidas seda kasutama hakata? Loe edasi, et teada saada!

Probleem

GraphQL sai alguse vanast suurest Facebookist, kuid isegi palju lihtsamad rakendused võivad sageli kokku puutuda traditsiooniliste REST-i API-de piirangutega.

Näiteks kujutage ette, et peate kuvama loendi postsja iga postituse all loendi likes, sealhulgas kasutajanimed ja avatarid. Piisavalt lihtne, kohandate oma postsAPI-d likeskasutajate objekte sisaldava massiivi lisamiseks:

Kuid nüüd on aeg töötada oma mobiilirakenduses ja selgub, et kogu selle täiendava teabe laadimine aeglustab asja. Nii et teil on nüüd vaja kahte lõpp-punkti, üks koos likesja teine ​​ilma nendeta.

Lisage nüüd segule veel üks tegur: selgub, et kuigi need postson salvestatud MySQL-i andmebaasi, likeselage seevastu Redise poes! Mis sa nüüd teed?!

Ekstrapoleerige see stsenaarium nii paljudele andmeallikatele kui ka API-klientidele, mida Facebook peab haldama, ja võite ette kujutada, miks vanad head REST-i API-d hakkasid oma piire näitama.

Lahendus

Facebooki välja pakutud lahendus on kontseptuaalselt väga lihtne: selle asemel, et teil oleks mitu „lolli“ lõpp-punkti, omage ühte „nutikat“ lõpp-punkti, mis võib keerulistes päringutes osaleda, ja seejärel masseerige andmete väljund kliendi soovitud kuju.

Praktiliselt öeldes elab GraphQL-i kiht kliendi ja ühe või mitme andmeallika vahel, võttes vastu kliendipäringuid ja toomas vajalikke andmeid vastavalt teie juhistele. Segaduses? On metafooride aeg!

Vana mudel REST on nagu pitsa tellimine, seejärel toidukaupade kohaletoimetamine, seejärel riiete hankimiseks helistamine keemilisele puhastusvahendile. Kolm poodi, kolm telefonikõnet.

GraphQL seevastu on nagu isiklik abistaja: kui olete neile kõigile kolmele aadressile aadressi andnud, võite lihtsalt küsida, mida soovite ("hankige mulle keemiline puhastus, suur pitsa ja kaks tosinat muna") ) ja oodake nende tagasitulekut.

Teisisõnu, GraphQL kehtestab selle maagilise isikliku abistajaga rääkimiseks standardkeele.

Praktikas on GraphQL API korraldatud kolme peamise ehitusploki ümber: skeem , päringud ja lahendajad .

Päringud

GraphQL-i isiklikule assistendile tehtud päring on päring ja see näeb välja umbes selline:

query { stuff}

Deklareerime uue päringu querymärksõna abil ja seejärel küsime välja nimega stuff. GraphQL-i päringute suurepärane külg on see, et need toetavad pesastatud välju, nii et saame minna ühe taseme sügavamale:

query { stuff { eggs shirt pizza }}

Nagu näete, ei pea päringu teinud klient hoolima, millisest poest andmed pärinevad. Küsige lihtsalt, mida vajate, ja laske GraphQL-serveril ülejäänu eest hoolitseda.

Väärib märkimist, et päringuväljad võivad osutada ka massiividele . Näiteks postituste loendi pärimisel on siin levinud muster:

query { posts { # this is an array title body author { # we can go deeper! name avatarUrl profileUrl } }}

Päringuväljad toetavad ka argumente . Kui tahan kuvada kindlat postitust, saan väljale lisada idargumendi post:

query { post(id: "123foo"){ title body author{ name avatarUrl profileUrl } }}

Lõpuks, kui ma tahan teha, et idargument dünaamiline, võin määratleda muutuja ja siis seda kasutada sees päringu (teadmiseks, et me ka nimetades päringu siin):

query getMyPost($id: String) { post(id: $id){ title body author{ name avatarUrl profileUrl } }}

Hea viis seda kõike praktikas rakendada on kasutada GitHubi GraphQL API Explorerit. Proovige näiteks järgmist päringut:

query { repository(owner: "graphql", name: "graphql-js"){ name description }}

Pange tähele, et kui proovite allpool uut välja nime kirjutada description, pakub IDE automaatselt võimalikke väljade nimesid, mis täidetakse otse GraphQL API-st. Korralik!

GraphQL-päringute kohta saate lisateavet GraphQL-päringu suurepärasest anatoomiast.

Lahendajad

Isegi maailma parim isiklik abistaja ei saa minna keemilist puhastust hankima, kui te ei anna neile aadressi.

Samamoodi ei tea teie GraphQL-server, mida sissetuleva päringuga teha, kui te pole seda resolveri abil öelnud .

Lahendaja ütleb GraphQL-ile, kuidas ja kust antud väljale vastavad andmed tuua. Näiteks võib postülaltoodud välja lahendaja välja näha (kasutades Apollo GraphQL-Tools'i skeemigeneraatorit):

Query: { post(root, args) { return Posts.find({ id: args.id }); }}

Paneme lahenduse peale, Querykuna soovime päringuid teha postotse juuretasandil. Kuid teil võib olla ka alamväljade, näiteks a post's authorlahutajaid:

Query: { post(root, args) { return Posts.find({ id: args.id }); }},Post: { author(post) { return Users.find({ id: post.authorId}) }}

Pange tähele, et teie lahendajad ei piirdu ainult andmebaasi dokumentide tagastamisega. Näiteks soovite võib-olla commentsCountoma Posttüübile lisada a :

Post: { author(post) { return Users.find({ id: post.authorId}) }, commentsCount(post) { return Comments.find({ postId: post.id}).count() }}

Põhimõte, mida siin mõista, on see, et GraphQL-iga on teie API-skeem ja andmebaasiskeemid lahti ühendatud . Teisisõnu, meie andmebaasis ei pruugi olla ühtegi välja authorja commentsCountvälja, kuid me võime neid lahenduste jõul „simuleerida“.

Nagu olete näinud, saate resolveri sisse kirjutada mis tahes koodi. Seetõttu saate panna neid ka oma andmebaasi sisu muutma , sel juhul nimetatakse neid mutatsioonide lahendajateks.

Skeem

Kogu selle hea kraami teeb võimalikuks GraphQLi sisestatud skeemide süsteem. Minu eesmärk on täna anda teile kiire ülevaade, mitte ammendav sissejuhatus, nii et ma ei hakka siin üksikasjadesse laskuma.

Sellest hoolimata soovitan teil lisateabe saamiseks tutvuda GraphQL-i dokumentatsiooniga.

Korduma kippuvad küsimused

Teeme pausi, et vastata mõnele levinud küsimusele.

Sina seal taga. Jah, sina. Näen, et soovite midagi küsida. Lase käia, ära ole häbelik!

Milline on suhe GraphQL-i ja graafikute andmebaaside vahel?

Tegelikult pole palju, GraphQL-il pole midagi pistmist graafiku andmebaasidega nagu Neo4j. Graafiku osa pärineb ideest üle oma API-graafiku roomata väljade ja alaväljade abil; samas kui “QL” tähendab “päringukeelt”.

Olen RESTiga täiesti rahul, miks peaksin GraphQL-ile üle minema?

Kui te pole veel põrganud REST-i valupunktidesse, millele GraphQL on mõeldud tegelema, siis ma ütleksin, et see on hea!

GraphQLi kasutamine üle RESTi ei mõjuta tõenäoliselt teie rakenduse üldist kasutajakogemust nii palju, nii et sellele üleminek ei ole mingil juhul elu ega surma küsimus. Nagu öeldud, soovitaksin kindlasti proovida GraphQL-i väikeses kõrvalprojektis, kui teil kunagi võimalus on.

Kas ma saan GraphQL-i kasutada ilma React / Relay / * siia teeki sisestamata *?

Jah, sa saad! Kuna GraphQL on ainult spetsifikatsioon, saate seda kasutada mis tahes platvormi mis tahes teegiga, kas koos kliendiga (näiteks Apollol on GraphQL-i kliendid veebi jaoks, iOS, Angular jne) või helistades ise GraphQL-ile server.

GraphQLi tegi Facebook ja ma ei usalda Facebooki

Jällegi on GraphQL spetsifikatsioon, mis tähendab, et saate kasutada GraphQL-i rakendusi ilma ühe Facebooki kirjutatud koodirea käivitamiseta.

Ja kuigi Facebooki tugi on kindlasti GraphQL ökosüsteemi jaoks kena pluss, usun siinkohal, et kogukond on piisavalt suur, et GraphQL areneks, isegi kui Facebook selle kasutamise lõpetaks.

Kogu see äri "laske kliendil küsida vajalikke andmeid" ei kõla minu jaoks eriti turvaliselt ...

Kuna kirjutate ise lahendajad, on teie ülesanne lahendada mis tahes turvaküsimused sellel tasemel.

Näiteks kui lubate kliendil limitparameetri määratleda vastuvõetud dokumentide arvu kontrollimiseks, peate tõenäoliselt selle numbri piirama, et vältida teenuse keelamise stiilis rünnakuid, kus kliendid taotlevad miljoneid dokumente ikka ja jälle.

Mida ma siis alustamiseks vajan?

Üldiselt vajate GraphQL-toega rakenduse käitamiseks vähemalt kahte komponenti:

  • GraphQL server , mis toimib oma API.
  • GraphQL kliendi , mis ühendab oma tulemusnäitaja.

Lugege edasi, et saada lisateavet erinevate võimalike valikute kohta.

Nüüd, kui teil on õiglane ettekujutus GraphQL-i toimimisest, räägime mõnest selle ruumi peamisest mängijast.

GraphQL-serverid

Esimene tellis, mida vajate, on GraphQL-server. GraphQL ise on lõppude lõpuks vaid spetsifikatsioon, nii et see jätab ukse vähestele konkureerivatele rakendustele.

GraphQL-JS (sõlm)

See on GraphQL-i algne viide. API serveri loomiseks saate seda kasutada koos express-graphql-ga.

GraphQL-server (sõlm)

Apollo meeskonnal on ka oma kõik-ühes GraphQL-serveri juurutus. See pole veel nii laialt levinud kui originaal, kuid on väga hästi dokumenteeritud ja toetatud ning kiiresti saavutamas.

Muud platvormid

GraphQL.org-is on nimekiri GraphQL-i juurutustest muudele teistele platvormidele (PHP, Ruby jne).

GraphQL kliendid

Ehkki saate oma GraphQL API-st tehniliselt otse päringuid teha, ilma et oleks vaja spetsiaalset kliendikogu, võib see teie elu kindlasti lihtsamaks muuta.

Relee

Relay on Facebooki enda GraphQL-i tööriistakomplekt. Ma pole seda ise kasutanud, kuid kuuldu järgi on see peamiselt kohandatud Facebooki enda vajadustele ja võib olla enamiku kasutusviiside jaoks veidi üle kavandatud.

Apollo klient

Uus siseneja selles ruumis on Apollo ja see võetakse kiiresti üle. Tüüpiline Apollo kliendipakk koosneb kahest tellistest:

  • Apollo-klient, mis võimaldab teil brauseris käivitada GraphQL-i päringuid ja salvestada nende andmeid (ning sellel on ka oma devtoolsi laiendus).
  • Pistik teie valitud esiotsa raamistikule (React-Apollo, Angular-Apollo jne).

Pange tähele, et vaikimisi salvestab Apollo-klient oma andmed Reduxi abil, mis on suurepärane, kuna Redux on ise üsna väljakujunenud rikkaliku ökosüsteemiga riigihalduse kogu.

Avatud lähtekoodiga rakendused

Ehkki GraphQL on üsna uus, kasutavad seda juba mõned paljulubavad avatud lähtekoodiga rakendused.

VulcanJS

Esiteks lahtiütlus: ma olen VulcanJSi peamine hooldaja. Lõin VulcanJS-i, et inimesed saaksid kasutada React / GraphQL-i korstna jõudu ära, ilma et peaksin nii palju katlaplaate kirjutama. Võite seda mõelda kui “Rööpad tänapäevase veebiökosüsteemi jaoks”, kuna see võimaldab mõne tunni jooksul ehitada CRUD-i rakendusi (näiteks Instagrami klooni).

Gatsby

Gatsby on staatilise saidi React generaator, mida alates versioonist 1.0 toetab nüüd GraphQL. Kuigi see võib alguses tunduda veider kombinatsioon, on see tegelikult üsna võimas. Ehitamise käigus saab Gatsby tuua andmeid mitmelt GraphQL API-lt ja seejärel nende abil luua täielikult staatilise ainult klientidele mõeldud rakenduse React.

Muud GraphQL-i tööriistad

GraphiQL

GraphiQL on brauserisisene IDE GraphQL-i lõpp-punktide päringute tegemiseks.

DataLoader

GraphQL-päringute pesastatud olemuse tõttu võib üks päring hõlpsasti käivitada kümneid andmebaasikõnesid. Jõudlushiti võtmise vältimiseks võite kasutada Facebooki välja töötatud pakkimis- ja vahemälu kogu nagu DataLoader.

Looge GraphQL Server

GraphQL-i serveri loomine on käsurea utiliit, mille abil on lihtne sõlmida GraphQL-serverit, mille toide on sõlmeserver ja Mongo andmebaas.

GraphQL-up

Sarnaselt GraphQL Serveri loomisele võimaldab GraphQL-up teil kiiresti käivitada uue GraphQL-i tugiteenuse, mida toetab GraphCooli teenus.

GraphQL teenused

Lõpuks on olemas ka mitmeid „GraphQL-backend-as-a-service“ ettevõtteid, kes hoolitsevad teie eest kogu serveri poole eest ja võivad olla kena viis oma varbad GraphQLi ökosüsteemi kastmiseks.

Graphcool

Paindlik taustaplatvorm, mis ühendab GraphQL ja AWS Lambda ning tasuta arendajakava.

Scaphold

Teine GraphQL-i taustaprogramm teenusena, millel on ka tasuta plaan. See pakub palju samu funktsioone nagu Graphcool.

Juba praegu on üsna palju kohti, kus saab GraphQL-i täiendada.

GraphQL.org

Ametlikul GraphQL-i saidil on alustamiseks suurepärane dokumentatsioon.

LearnGraphQL

LearnGraphQL on interaktiivne kursus, mille inimesed on kokku pannud Kadiral.

LearnApollo

LearnGraphQLi hea jätk, LearnApollo on Graphcooli koostatud tasuta kursus.

Apollo ajaveeb

Apollo ajaveebis on palju üksikasjalikke, hästi kirjutatud postitusi Apollo ja GraphQL kohta üldiselt.

GraphQL nädalas

Infoleht kõigist asjadest, mille GraphQL on kureerinud Graphcooli meeskond.

Hashbangi nädalaleht

Veel üks tore uudiskiri, mis hõlmab lisaks GraphQL-ile ka Reactit ja Meteorit.

Freecom

Õpetussari, mis õpetab, kuidas luua Intercomi klooni GraphQLi abil.

Äge GraphQL

Päris ammendav loetelu GraphQL-i linkidest ja ressurssidest.

Kuidas siis oma värskelt omandatud GraphQL-teadmisi praktikas rakendada? Siin on mõned retseptid, mida saate proovida:

Apollo + Graphcool + Next.js

Kui olete Next.js ja React juba tuttav, võimaldab see näide teil Graphcooli abil oma GraphQL-i lõpp-punkti seadistada ja seejärel Apollo abil päringu teha.

VulcanJS

Vulcani õpetus juhatab teid lihtsa GraphQL-i andmekihi seadistamisse nii serveris kui ka kliendis. Kuna Vulcan on kõik-ühes platvorm, on see kena viis alustamiseks ilma seadistusteta. Kui vajate abi, külastage meie Slacki kanalit!

GraphQL ja reageerimise õpetus

Chroma ajaveebil on kuueosaline õpetus React / GraphQL rakenduse loomiseks, järgides komponendipõhist arendusviisi.

Järeldus

Esialgu võib GraphQL tunduda keeruline, kuna see on tehnoloogia, mis ulatub paljudesse tänapäevase arengu valdkondadesse. Aga kui võtate aega põhimõistete mõistmiseks, siis arvan, et saate teada, et suur osa sellest on lihtsalt mõttekas.

Nii et kas kasutate seda tegelikult või mitte, usun, et tasub aega võtta, et ennast GraphQL-iga kurssi viia. Üha rohkem ettevõtteid ja raamistikke võtab selle kasutusele ja võib väga hästi saada järgmise paari aasta jooksul üheks peamiseks veebi ehituskiviks.

Nõus? Ei nõustu? Küsimused? Andke mulle lihtsalt kommentaarides teada. Ja kui see artikkel on teile meeldinud, siis palun kaaluge selle jagamist ja jagamist!