Tehát mi ez a GraphQL dolog, amiről folyamatosan hallok?
Ha olyan vagy, mint én, valószínűleg három szakaszon megy keresztül, amikor új technológiáról hallasz:
1. Elbocsátás
Még egy JavaScript könyvtár ?! Csak használja a jQuery-t már!2. Érdeklődés
Hmm, talán meg kellene néznem ezt az új könyvtárat, amiről folyamatosan hallok ...3. Pánik
Segítség! Meg kell tanulni az új könyvtár most vagy én leszek teljesen elavult!A józan ész megőrzésének trükkje ezekben a gyorsan változó időkben az, hogy új dolgokat kell megtanulnia a második és a harmadik szakasz között, ha felkeltette az érdeklődését, de még mindig a görbe előtt áll.
Ezért van itt a tökéletes alkalom arra, hogy megtudja, mi is ez a GraphQL dolog, amiről folyamatosan hallani szokott.
Az alapok
Dióhéjban a GraphQL egy szintaxis, amely leírja, hogyan kell adatokat kérni , és általában arra szolgál, hogy adatokat töltsön fel a szerverről az ügyfélre. A GraphQL három fő jellemzővel rendelkezik:
- Ez lehetővé teszi az ügyfél számára, hogy pontosan meghatározza, milyen adatokra van szüksége.
- Ez megkönnyíti a több forrásból származó adatok összesítését.
- Típusrendszert használ az adatok leírására.
Tehát hogyan indult a GraphQL? Hogyan néz ki a gyakorlatban? És hogyan kezdi el használni? Olvassa el, hogy megtudja!
A probléma
A GraphQL a nagy régi Facebook-on kezdődött, de még sokkal egyszerűbb alkalmazások is gyakran ütközhetnek a hagyományos REST API-k korlátaiba.
Például képzelje el, hogy megjelenítenie kell egy listát posts, és minden bejegyzés alatt fel kell venni egy listát likes, beleértve a felhasználóneveket és az avatarokat. Elég egyszerű, úgy módosítja az postsAPI-t, hogy tartalmazzon egy likestömböt, amely felhasználói objektumokat tartalmaz:
De most itt az ideje dolgozni a mobilalkalmazáson, és kiderült, hogy az összes extra adat betöltése lassítja a dolgokat. Tehát most két végpontra van szükség , az egyikre a likesés a nélkülük.
Most adjon még egy tényezőt a keverékhez: kiderült, hogy míg postsa MySQL adatbázisban vannak tárolva, likesviszont egy Redis üzletben élnek! Mit csinálsz most?!
Extrapolálja ezt a forgatókönyvet a Facebook által kezelt sok adatforrásra és API-kliensre, és el tudja képzelni, miért kezdték megmutatni a régi jó REST API-k a határaikat.
A megoldás
A Facebook által kidolgozott megoldás fogalmilag nagyon egyszerű: ahelyett, hogy több „buta” végpont lenne, legyen egyetlen „intelligens” végpontunk, amely bonyolult lekérdezéseket végezhet, majd masszírozza az adatkimenetet az ügyfél által igényelt formába.
Gyakorlatilag elmondható, hogy a GraphQL réteg az ügyfél és egy vagy több adatforrás között él, fogadja az ügyfél kéréseit, és az utasításainak megfelelően lehívja a szükséges adatokat. Zavaros? Ez a metafora ideje!
A régi REST modell olyan, mint pizzát rendelni, majd élelmiszereket szállítani, majd felhívni a vegytisztítót, hogy megszerezze a ruháit. Három üzlet, három telefonhívás.
A GraphQL másrészt olyan, mint egy személyes asszisztens: ha megadta nekik a címeket mindhárom helyre, egyszerűen megkérdezheti, mit akar ("szerezzen nekem vegytisztítást, egy nagy pizzát és két tucat tojást"). ), és várja meg, amíg visszatérnek.
Más szavakkal, a GraphQL szabványos nyelvet hoz létre a varázslatos személyes asszisztenssel való beszélgetéshez.
A gyakorlatban a GraphQL API három fő építőelem köré szerveződik: a séma , a lekérdezések és a felbontók .
Lekérdezések
A GraphQL személyes asszisztenséhez intézett kérés a lekérdezés , és így néz ki:
query { stuff}Új lekérdezést jelentünk be a querykulcsszóval, majd egy megnevezett mezőt kérünk stuff. A GraphQL lekérdezések nagyszerű tulajdonsága, hogy támogatják a beágyazott mezőket, így egy szinttel mélyebbre léphetünk:
query { stuff { eggs shirt pizza }}Mint látható, a lekérdezést készítő ügyfélnek nem kell törődnie azzal, hogy melyik „boltból” származnak az adatok. Csak kérdezze meg, amire szüksége van, és hagyja, hogy a többiekről a GraphQL szerver gondoskodjon.
Érdemes megjegyezni, hogy a lekérdező mezők tömbökre is mutathatnak . Például itt van egy gyakori minta, amikor lekérdezi a bejegyzések listáját:
query { posts { # this is an array title body author { # we can go deeper! name avatarUrl profileUrl } }}A lekérdező mezők is támogatják az érveket . Ha egy adott bejegyzést szeretnék megjeleníteni, hozzáadhatok egy idargumentumot a postmezőhöz:
query { post(id: "123foo"){ title body author{ name avatarUrl profileUrl } }}Végül, ha iddinamikusvá akarom tenni ezt az argumentumot, meghatározhatok egy változót , majd újra felhasználhatom a lekérdezésen belül (vegye figyelembe, hogy itt is megnevezzük a lekérdezést):
query getMyPost($id: String) { post(id: $id){ title body author{ name avatarUrl profileUrl } }}Jó módszer mindezek gyakorlatba ültetésére a GitHub GraphQL API Explorer használata. Próbálkozzon például a következő lekérdezéssel:
query { repository(owner: "graphql", name: "graphql-js"){ name description }}
Figyelje meg, hogy amikor megpróbál új mezőnevet beírni az alábbiakban description, az IDE automatikusan felajánlja a lehetséges mezőneveket, amelyek automatikusan kitöltődnek magából a GraphQL API-ból. Tiszta!
A GraphQL lekérdezésekről többet megtudhat a GraphQL Query kiváló anatómiájának cikkében.
Megoldók
Még a világ legjobb személyi asszisztense sem mehet a vegytisztításba, hacsak nem ad meg nekik egy címet.
Hasonlóképpen, a GraphQL szerver nem tudja, mit kell tennie egy bejövő lekérdezéssel, hacsak nem egy resolver segítségével mondja meg .
Egy felbontó megmondja a GraphQL-nek, hogyan és honnan kell lekérni az adott mezőnek megfelelő adatokat. Például így postnézhet ki a fenti mező megoldója (az Apollo GraphQL-Tools sémagenerátorának használatával):
Query: { post(root, args) { return Posts.find({ id: args.id }); }}Feltesszük a megoldót, Querymert postközvetlenül a root szinten akarunk lekérdezni . De lehet részmegoldókhoz is megoldó, például egy post's authormezőhöz:
Query: { post(root, args) { return Posts.find({ id: args.id }); }},Post: { author(post) { return Users.find({ id: post.authorId}) }}És vegye figyelembe, hogy a felbontók nem korlátozódnak az adatbázis-dokumentumok visszaadására. Például, esetleg hozzá szeretne adni egy típust commentsCounta Posttípusához:
Post: { author(post) { return Users.find({ id: post.authorId}) }, commentsCount(post) { return Comments.find({ postId: post.id}).count() }}A kulcsfontosságú megértés itt az, hogy a GraphQL segítségével az API sémája és az adatbázis sémái elválnak egymástól . Más szavakkal, előfordulhat, hogy nincsenek mezők authorés commentsCountmezők az adatbázisunkban, de a megoldók erején keresztül „szimulálhatjuk” őket.
Amint látta, bármilyen megoldó kódot beírhat egy megoldóba. Ezért van az is, hogy azok módosíthatják a tartalmát az adatbázis, amely esetben ők nevezik mutáció rezolverek.
Séma
Mindezeket a jó dolgokat a GraphQL tipizált séma rendszere teszi lehetővé. A mai célom az, hogy egy gyors áttekintést adjak Önnek, nem pedig kimerítő bevezetést, ezért itt nem részletezem a részleteket.
Ennek ellenére arra kérem Önt, hogy olvassa el a GraphQL dokumentációját, ha többet szeretne megtudni.
Gyakran Ismételt Kérdések
Tartsunk szünetet néhány gyakori kérdés megválaszolásához.
Te ott, hátul. Igen, te. Látom, hogy kérdezni akarsz valamit. Menj előre, ne légy szégyenlős!
Mi a kapcsolat a GraphQL és a grafikon adatbázisok között?
Valójában nem sok, a GraphQL-nek semmi köze nincs a Neo4j-hez hasonló grafikon-adatbázisokhoz. A „grafikon” rész abból az ötletből származik, hogy mezőket és almezőket használva bejárja az API-grafikonját; míg a „QL” jelentése „lekérdezési nyelv”.
Teljesen elégedett vagyok a REST-szel, miért kellene váltanom a GraphQL-re?
Ha még nem ütközött bele azokba a REST fájdalom pontokba, amelyeket a GraphQL hivatott kezelni, akkor azt mondanám, hogy ez jó dolog!
A GraphQL használata a REST felett valószínűleg nem fogja annyira befolyásolni az alkalmazás általános felhasználói élményét, így a rá való váltás semmiképpen sem élet vagy halál kérdése. Ennek ellenére mindenképpen javasoljuk, hogy próbálja ki a GraphQL-t egy kis mellékprojektben, ha valaha is megkapja a lehetőséget.
Használhatom a GraphQL-t React / Relay / * könyvtár beillesztése nélkül *?
Igen tudsz! Mivel a GraphQL csak specifikáció, bármely platform bármelyik könyvtárával használhatja, akár klienssel (például az Apollo rendelkezik GraphQL kliensekkel az internethez, iOS, Angular stb.), Akár saját hívások kezdeményezésével egy GraphQL-hez szerver.
A GraphQL-t a Facebook készítette, és nem bízom a Facebookban
Ismételten a GraphQL egy specifikáció, ami azt jelenti, hogy a GraphQL megvalósításait használhatja anélkül, hogy egyetlen, a Facebook által írt kódsort futtatna.
És bár a Facebook támogatása mindenképpen szép plusz a GraphQL ökoszisztémának, ezen a ponton úgy gondolom, hogy a közösség elég nagy ahhoz, hogy a GraphQL boldoguljon, még akkor is, ha a Facebook abbahagyná a használatát.
Ez az egész „hadd kérje az ügyfél a szükséges adatokat” számomra nem tűnik nagyon biztonságosnak…
Mivel saját megoldókat írsz, rajtad múlik, hogy ezen a szinten kezelj bármilyen biztonsági problémát.
Például, ha hagyja, hogy az ügyfél megadjon egy limitparamétert a beérkező dokumentumok számának szabályozásához, akkor valószínűleg fel kívánja tüntetni ezt a számot, hogy elkerülje a szolgáltatásmegtagadási stílusú támadásokat, amikor az ügyfelek több millió dokumentumot kérnek újra és újra.
Tehát mi kell a kezdéshez?
Általánosságban elmondható, hogy legalább két összetevőre van szükség a GraphQL-alapú alkalmazások futtatásához:
- Az API-t kiszolgáló GraphQL szerver .
- A GraphQL kliens , amely csatlakozik a végpont.
Olvassa el, hogy többet megtudjon a rendelkezésre álló különféle lehetőségekről.
Most, hogy van egy jó ötlete a GraphQL működéséről, beszéljünk a tér néhány fő szereplőjéről.
GraphQL szerverek
Az első szükséges tégla egy GraphQL szerver. Maga a GraphQL még csak specifikáció, így ez nyitva hagyja az ajtót néhány versengő megvalósítás előtt.
GraphQL-JS (csomópont)
Ez a GraphQL eredeti referencia implementációja. Használhatja az express-graphql-lel együtt az API-kiszolgáló létrehozásához.
GraphQL-Server (csomópont)
Az Apollo csapatnak saját all-in-one GraphQL szerver implementációja is van. Még nem annyira elterjedt, mint az eredeti, de nagyon jól dokumentált és támogatott, és gyorsan teret nyer.
Egyéb platformok
A GraphQL.org tartalmaz egy listát a GraphQL implementációkról más platformokhoz (PHP, Ruby stb.).
GraphQL kliensek
Bár technikailag közvetlenül lekérdezheti a GraphQL API-t, külön dedikált ügyfélkönyvtár használata nélkül, ez mindenképpen megkönnyítheti az életét.
Relé
A Relay a Facebook saját GraphQL eszköztára. Magam nem használtam, de amit hallottam, főleg a Facebook saját igényeire szabott, és a legtöbb felhasználáshoz kissé túltervezhető.
Apollo kliens
Az új belépő ezen a téren Apollo, és gyorsan átveszi. A tipikus Apollo kliens verem két téglából áll:
- Apollo-kliens, amely lehetővé teszi a GraphQL lekérdezések futtatását a böngészőben és az adatok tárolását (és saját devtools kiterjesztéssel is rendelkezik).
- Csatlakozó a választott front-end keretrendszerhez (React-Apollo, Angular-Apollo stb.).
Ne feledje, hogy az Apollo-kliens alapértelmezés szerint az adatokat a Redux segítségével tárolja, ami nagyszerű, mivel a Redux maga is eléggé kialakult állapotgazdálkodási könyvtár, gazdag ökoszisztémával.
Nyílt forráskódú alkalmazások
Annak ellenére, hogy a GraphQL meglehetősen új, már vannak ígéretes nyílt forráskódú alkalmazások, amelyek ezt használják.
VulcanJS
Először egy felelősség kizárása: én vagyok a VulcanJS vezető fenntartója. Azért hoztam létre a VulcanJS-t, hogy az emberek kihasználhassák a React / GraphQL verem erejét anélkül, hogy ennyi kazánt kellene írni. Úgy gondolhat rá, mint „sínek a modern webes ökoszisztémára”, mivel ez lehetővé teszi CRUD alkalmazások (például Instagram klón) építését néhány óra alatt.
Gatsby
A Gatsby egy React statikus webhely-generátor, amelyet az 1.0 verziótól kezdve a GraphQL hajt. Bár ez elsőre furcsa kombinációnak tűnhet, valójában meglehetősen erős. Építési folyamata során a Gatsby több GraphQL API-ból is beolvashatja az adatokat, majd felhasználhatja őket egy teljesen statikus, csak klienseknek szánt React alkalmazás létrehozásához.
Egyéb GraphQL eszközök
GraphiQL
A GraphiQL egy nagyon praktikus böngészőbeli IDE a GraphQL végpontok lekérdezéséhez.
DataLoader
A GraphQL lekérdezések egymásba ágyazott jellege miatt egyetlen lekérdezés könnyen több tucat adatbázis-hívást indíthat el. A teljesítménysütés elkerülése érdekében használhat egy kötegelt és gyorsítótárazó könyvtárat, például a Facebook által kifejlesztett DataLoadert.
Hozzon létre GraphQL szervert
A GraphQL Server létrehozása egy parancssori segédprogram, amely megkönnyíti a Node kiszolgáló és a Mongo adatbázis által működtetett GraphQL kiszolgáló gyors állványozását.
GraphQL-up
A GraphQL Server létrehozásához hasonlóan a GraphQL-up segítségével gyorsan elindíthatja az új GraphQL hátteret, amelyet a GraphCool szolgáltatása működtet.
GraphQL Services
Végül számos olyan „GraphQL-backend-as-a-service” vállalat is működik, amelyek a dolgok teljes szerver oldaláról gondoskodnak az Ön számára, és jó módszer lehet arra, hogy a lábujjakat belemerítsék a GraphQL ökoszisztémába.
Graphcool
Rugalmas háttérrendszer, amely ötvözi a GraphQL-t és az AWS Lambda-t egy ingyenes fejlesztői tervvel.
Scaphold
Egy másik GraphQL háttér, mint szolgáltatás, amely szintén ingyenes tervvel rendelkezik. Sok olyan funkciót kínál, mint a Graphcool.
Már jó néhány helyen lehet ecsetelni a GraphQL-t.
GraphQL.org
A hivatalos GraphQL webhely nagyszerű dokumentációval rendelkezik az induláshoz.
LearnGraphQL
A LearnGraphQL egy interaktív tanfolyam, amelyet a Kadira emberei állítottak össze.
LearnApollo
A LearnGraphQL jó nyomon követése. A LearnApollo egy ingyenes tanfolyam, amelyet a Graphcool készített.
Az Apollo Blog
Az Apollo blog rengeteg részletes, jól megírt bejegyzést tartalmaz az Apollóról és általában a GraphQL-ről.
GraphQL Weekly
Hírlevél a Graphcool csapatának gondozásában a GraphQL-ről.
Hashbang Weekly
Egy másik nagyszerű hírlevél, amely a GraphQL mellett a React és a Meteort is tartalmazza.
Freecom
Bemutató sorozat, amely megtanítja, hogyan készítsen kaputelefon klónot a GraphQL segítségével.
Félelmetes GraphQL
A GraphQL-linkek és erőforrások eléggé teljes listája.
Tehát hogyan alkalmazza az újonnan megszerzett GraphQL ismereteket a gyakorlatban? Íme néhány recept, amelyet kipróbálhat:
Apollo + Graphcool + Next.js
Ha már ismeri a Next.js-t és a React-et, akkor ez a példa lehetővé teszi a GraphQL végpont beállítását a Graphcool használatával, majd az Apollo használatával történő lekérdezést.
VulcanJS
A Vulcan oktatóanyag segítségével egy egyszerű GraphQL adatréteget állíthat be mind a szerveren, mind az ügyfélen. Mivel a Vulcan egy all-in-one platform, ez egy szép módja annak, hogy mindenféle beállítás nélkül elinduljon. Ha segítségre van szüksége, ne habozzon átlátogatni a Slack csatornánkra!
GraphQL & React bemutató
A Chroma blog hatrészes oktatóanyaggal rendelkezik a React / GraphQL alkalmazás felépítéséről, egy komponens-vezérelt fejlesztési megközelítést követve.
Következtetés
A GraphQL elsőre összetettnek tűnhet, mivel ez egy olyan technológia, amely a modern fejlesztés számos területén elérhető. De ha időt szán az alapul szolgáló fogalmak megértésére, azt hiszem, megtudja, hogy soknak csak értelme van.
Tehát függetlenül attól, hogy valóban használja-e vagy sem, úgy gondolom, hogy érdemes időt szánnia a GraphQL megismerésére. Egyre több vállalat és keretrendszer veszi át, és ez nagyon jó lehet, hogy a következő években az internet egyik legfontosabb építőköve lesz.
Egyetért? Nem ért egyet? Kérdések? Csak tudassa velem itt a megjegyzéseket. És ha tetszett ez a cikk, kérjük, fontolja meg és ossza meg!