„GraphQL“ vadovas pradedančiajam

Vienas iš dažniausiai aptariamų terminų yra API. Daugelis žmonių tiksliai nežino, kas yra API. Iš esmės API reiškia programų programavimo sąsają. Tai, kaip sako pavadinimas, yra sąsaja, kuria žmonės - kūrėjai, vartotojai, vartotojai - gali sąveikauti su duomenimis.

Galite galvoti apie API kaip barmeną. Jūs paprašote barmeno atsigerti, o jie jums duoda tai, ko norėjote. Paprasta. Taigi kodėl ta problema?

Nuo pat modernaus interneto pradžios API kūrimas nebuvo toks sunkus, kaip atrodo. Tačiau API mokymasis ir supratimas buvo. Kūrėjai sudaro daugumą žmonių, kurie naudos jūsų API norėdami ką nors sukurti ar tiesiog sunaudoti duomenis. Taigi jūsų API turėtų būti kiek įmanoma aiškesnė ir intuityvesnė. Tinkamai suprojektuotą API labai lengva naudoti ir išmokti. Tai taip pat intuityvu, vertinga atsiminti, kai pradedate kurti savo API.

Ilgą laiką kūrėme API naudodami REST. Kartu kyla tam tikrų problemų. Kurdami API naudodami REST dizainą, susidursite su tokiomis problemomis kaip:

1) turėsite daug pasekmių

2) kūrėjams bus daug sunkiau išmokti ir suprasti jūsų API

3) yra per daug ir per mažai informacijos

Norėdami išspręsti šias problemas, „Facebook“ sukūrė „GraphQL“. Šiandien aš manau, kad „GraphQL“ yra geriausias būdas kurti API. Šis straipsnis jums pasakys, kodėl turėtumėte pradėti mokytis jau šiandien.

Šiame straipsnyje jūs sužinosite, kaip veikia „GraphQL“. Aš jums parodysiu, kaip naudojant „GraphQL“ sukurti labai gerai suplanuotą, efektyvią ir galingą API.

Tikriausiai jau esate girdėję apie „GraphQL“, nes ja naudojasi daugybė žmonių ir kompanijų. Kadangi „GraphQL“ yra atvirojo kodo, jo bendruomenė išaugo didžiulė.

Dabar laikas pradėti mokytis praktiškai, kaip veikia „GraphQL“, ir sužinoti apie jo magiją.

Kas yra „GraphQL“?

„GraphQL“ yra atvirojo kodo užklausų kalba, kurią sukūrė „Facebook“. Tai suteikia mums efektyvesnį būdą, kaip kurti, kurti ir naudoti mūsų API. Iš esmės tai yra REST pakaitalas.

„GraphQL“ turi daug funkcijų, tokių kaip:

  1. Jūs rašote norimus duomenis ir gaunate tiksliai tuos duomenis, kurių norite. Nebereikia per daug išgauti informacijos, kaip esame įpratę REST.
  2. Tai suteikia mums vieną galinį tašką, ne daugiau 2 ar 3 tos pačios API versijos.
  3. „GraphQL“ yra griežtai įvesta, ir prieš tai galite patikrinti užklausą „GraphQL“ tipo sistemoje prieš vykdydami. Tai padeda mums sukurti galingesnes API.

Tai yra pagrindinis „GraphQL“ įvadas - kodėl jis toks galingas ir kodėl šiomis dienomis populiarėja. Jei norite sužinoti daugiau apie tai, rekomenduoju apsilankyti „GraphQL“ svetainėje ir patikrinti.

Darbo pradžia

Pagrindinis šio straipsnio tikslas nėra išmokti nustatyti „GraphQL“ serverį, todėl kol kas to nesigiliname. Tikslas yra sužinoti, kaip „GraphQL“ veikia praktiškai, todėl naudosime nulinės konfigūracijos „GraphQL“ serverį pavadinimu „ Graphpack“.

Norėdami pradėti savo projektą, mes sukursime naują aplanką ir galėsite jį pavadinti kaip tik norite. Pavadinsiu tai „grafql“ serveriu:

Atidarykite terminalą ir įveskite:

mkdir graphql-serveris

Dabar jūsų kompiuteryje turėtų būti įdiegta npm arba verpalų. Jei nežinote, kas tai yra, npm ir verpalai yra „Java“ programavimo kalbos paketų tvarkytojai. „Node.js“ numatytasis paketo tvarkyklė yra npm.

Savo sukurtame aplanke įveskite šią komandą:

npm inicialas -y

Arba jei naudojate verpalus:

verpalų inicialas

npm sukurs jums failą package.json, o ten bus įdiegtos visos jūsų įdiegtos priklausomybės ir komandos.

Taigi dabar mes įdiegsime vienintelę priklausomybę, kurią naudosime.

„Grafpack“ leidžia sukurti „GraphQL“ serverį su nuline konfigūracija. Kadangi mes tik pradedame nuo „GraphQL“, tai mums labai padės tęsti ir sužinoti daugiau, nesijaudinant dėl ​​serverio konfigūracijos.

Savo terminale, šaknies aplanke, įdiekite jį taip:

npm įdiegti --save-dev graphpack

Arba, jei naudojate verpalus, turėtumėte elgtis taip:

siūlai pridėti --dev graphpack

Įdiegę „Graphpack“, eikite į mūsų scenarijus faile pack.json ir įdėkite šį kodą:

Mes sukursime aplanką pavadinimu src, ir jis bus vienintelis aplankas visame mūsų serveryje.

Sukurkite aplanką pavadinimu src. Po to savo aplanke sukursime tik tris failus.

Mūsų src aplanke sukurkite failą, vadinamą schema.graphql. Į šį pirmąjį failą įdėkite šį kodą:

Šiame schema.graphql faile bus visa mūsų „GraphQL“ schema. Jei nežinote, kas tai yra, paaiškinsiu vėliau - nesijaudinkite.

Dabar savo src aplanke sukurkite antrą failą. Pavadinkite jį resolvers.js ir į šį antrąjį failą įdėkite šį kodą:

Šis failas „resolvers.js“ bus toks, kokį pateiksime instrukcijas, kaip „GraphQL“ operaciją paversti duomenimis.

Ir galiausiai, savo src aplanke, sukurkite trečiąjį failą. Paskambinkite šiuo db.js ir į šį trečiąjį failą įrašykite šį kodą:

Šiame vadove nenaudojame realaus pasaulio duomenų bazės. Taigi šis db.js failas imituos duomenų bazę, tik mokymosi tikslais.

Dabar mūsų src aplankas turėtų atrodyti taip:

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

Dabar, jei paleisite komandą npm run dev arba jei naudojate verpalus, verpalų dev, turėtumėte pamatyti šį išvestį savo terminale:

Dabar galite kreiptis į „localhost“: 4000. Tai reiškia, kad esame pasirengę eiti ir pradėti rašyti savo pirmąsias užklausas, mutacijas ir prenumeratas „GraphQL“.

Jūs matote „GraphQL Playground“, galingą „GraphQL IDE“, skirtą geresnėms kūrimo darbo eigoms. Jei norite sužinoti daugiau apie „GraphQL Playground“, spustelėkite čia.

Schema

„GraphQL“ turi savo tipo kalbą, kuri naudojama schemoms rašyti. Tai žmonėms suprantama schemos sintaksė, vadinama schemos apibrėžimo kalba (SDL). SDL bus tas pats, nesvarbu, kokią technologiją naudojate - galite ją naudoti bet kuria norima kalba ar sistema.

Ši schemos kalba yra labai naudinga, nes nesunku suprasti, kokio tipo jūsų API bus. Jūs galite tai suprasti tiesiog gerai žiūrėdami.

Tipai

Tipai yra viena iš svarbiausių „GraphQL“ ypatybių. Tipai yra pasirinktiniai objektai, vaizduojantys, kaip atrodys jūsų API. Pvz., Jei kuriate socialinės medijos programą, jūsų API turėtų būti tokių tipų kaip Žinutės, Vartotojai, Patinka, Grupės.

Tipai turi laukus, ir šie laukai grąžina tam tikro tipo duomenis. Pvz., Mes sukursime vartotojo tipą. Turėtume turėti keletą vardo, el. Pašto ir amžiaus laukų. Tipo laukai gali būti bet kokie ir visada grąžinkite tokio tipo duomenis kaip „Int“, „Float“, „String“, „Boolean“, ID, Objektų tipų sąrašą arba Individualių objektų tipus.

Taigi dabar, norėdami parašyti pirmąjį „Type“, eikite į savo schema.graphql failą ir pakeiskite jau turimą „Query“ tipo užklausą taip:

Kiekvienas vartotojas turės ID, todėl suteikėme jam ID tipą. Vartotojas taip pat turės vardą ir el. Pašto adresą, todėl jam suteikėme eilutės tipą ir amžių, kuriam suteikėme Int tipą. Gana paprasta, tiesa?

Bet kaip su tais! kiekvienos eilutės pabaigoje? Šauktukas reiškia, kad laukai yra niekiniai, o tai reiškia, kad kiekvienas laukas turi grąžinti tam tikrus duomenis kiekvienoje užklausoje. Vienintelis neištrinamas laukas, kurį turėsime įvesdami tipą „Vartotojas“, bus amžius.

„GraphQL“ programoje turėsite nagrinėti tris pagrindines sąvokas:

  1. užklausos - būdas gauti duomenis iš serverio.
  2. mutacijos - būdas modifikuoti duomenis serveryje ir gauti atnaujintus duomenis (sukurti, atnaujinti, ištrinti).
  3. prenumeratos - būdas palaikyti realiojo laiko ryšį su serveriu.

Aš tau viską paaiškinsiu. Pradėkime nuo užklausų.

Klausimai

Norėdami tai paaiškinti paprastai, užklausos „GraphQL“ yra tai, kaip ketinate gauti duomenis. Vienas gražiausių klausimų, susijusių su „GraphQL“ užklausomis, yra tas, kad jūs ketinate gauti tikslius duomenis, kurių norite. Ne daugiau ne maziau. Tai daro didžiulį teigiamą poveikį mūsų API - nebereikia per daug gauti ar per mažai gauti informacijos, kaip mes turėjome REST API.

Mes sukursime pirmo tipo užklausą „GraphQL“. Visi mūsų klausimai pateks į šį tipą. Taigi, norėdami pradėti, eikime į schema.graphql ir parašysime naują tipą, vadinamą Užklausa:

Tai labai paprasta: naudotojų užklausa mums grąžins masyvą vieno ar daugiau vartotojų. Tai negrįš negaliojanti, nes mes įdėjome! , tai reiškia, kad užklausa yra neišbraukiama. Tai visada turėtų ką nors grąžinti.

Bet mes taip pat galėtume grąžinti konkretų vartotoją. Tam mes sukursime naują užklausą, vadinamą vartotoju. Įveskite užklausos tipą į šį kodą:

Dabar mūsų užklausos tipas turėtų atrodyti taip:

Kaip matote, su užklausomis „GraphQL“ mes taip pat galime perduoti argumentus. Tokiu atveju norėdami pateikti užklausą konkrečiam vartotojui, perduosime jo ID.

Bet jums gali kilti klausimas: kaip „GraphQL“ žino, kur gauti duomenis? Štai kodėl turėtume turėti resolvers.js failą. Šis failas nurodo „GraphQL“, kaip ir kur bus renkami duomenys.

Pirmiausia eikite į failą resolvers.js ir importuokite db.js, kurį ką tik sukūrėme prieš kelias akimirkas. Jūsų failas „resolvers.js“ turėtų atrodyti taip:

Dabar mes sukursime pirmąją užklausą. Eikite į savo failą resolvers.js ir pakeiskite sveikinimo funkciją. Dabar jūsų užklausos tipas turėtų atrodyti taip:

Dabar paaiškink, kaip tai veiks:

Kiekvienas užklausos sprendimas turi keturis argumentus. Naudotojo funkcijoje ID pateiksime kaip argumentą, o tada grįšime konkrečiam vartotojui, kuris atitinka praleistą ID. Gana paprasta.

Naudodamiesi funkcija, mes tiesiog grąžinsime jau esamą vartotojų masyvą. Tai visada grįš mums visiems mūsų vartotojams.

Dabar mes patikrinsime, ar mūsų užklausos veikia tinkamai. Eikite į „localhost“: 4000 ir įdėkite šį kodą:

Tai turėtų grąžinti jums visiems mūsų vartotojams.

Arba, jei norite grąžinti konkretų vartotoją:

Dabar pradėsime mokytis apie mutacijas - vieną iš svarbiausių „GraphQL“ funkcijų.

Mutacijos

„GraphQL“ mutacijos yra būdas modifikuoti duomenis serveryje ir gauti atnaujintus duomenis. Galite galvoti kaip REST CUD (sukurti, atnaujinti, ištrinti).

Mes sukursime pirmojo tipo mutacijas „GraphQL“, ir visos mutacijos pateks į šio tipo vidų. Taigi, norėdami pradėti, eikite į mūsų schema.graphql ir parašykite naują tipą, vadinamą mutacija:

Kaip matote, turėsime tris mutacijas:

createUser: turėtume perduoti ID, vardą, el. pašto adresą ir amžių. Tai turėtų mums grąžinti naują vartotoją.

„updateUser“: turėtume perduoti ID ir naują vardą, el. pašto adresą arba amžių. Tai turėtų mums grąžinti naują vartotoją.

deleteUser: turėtume perduoti ID. Tai turėtų mums grąžinti naują vartotoją.

Dabar eikite į mūsų failą resolvers.js ir po užklausos objektu sukurkite naują mutacijos objektą:

Dabar mūsų failas resolvers.js turėtų atrodyti taip:

Dabar mes išbandysime, ar mūsų mutacijos veikia gerai. Eikite į „localhost“: 4000 ir įdėkite šį kodą:

Tai turėtų grąžinti jums naują vartotoją. Jei norite išbandyti naujų mutacijų darymą, rekomenduoju išbandyti patys! Pabandykite ištrinti tą patį jūsų sukurtą vartotoją, kad pamatytumėte, ar jis veikia gerai.

Galiausiai pradėsime sužinoti apie prenumeratas ir kodėl jos tokios galingos.

Prenumeratos

Kaip jau sakiau anksčiau, prenumeratos yra būdas palaikyti ryšį realiuoju laiku su serveriu. Tai reiškia, kad kai tik įvykis įvyksta serveryje ir kai jis yra iškviečiamas, serveris siųs atitinkamus duomenis klientui.

Dirbdami su prenumeratomis, galite nuolat atnaujinti savo programą pagal naujausius skirtingų vartotojų pakeitimus.

Pagrindinė prenumerata yra tokia:

Sakysite, kad ji labai panaši į užklausą, ir taip. Bet tai veikia skirtingai.

Kai kažkas bus atnaujinta serveryje, serveris paleis prenumeratoje nurodytą „GraphQL“ užklausą ir atsiųs klientui naujai atnaujintą rezultatą.

Mes neketiname dirbti su prenumeratomis šiame konkrečiame straipsnyje, bet jei norite daugiau sužinoti apie jas, spustelėkite čia.

Išvada

Kaip jau matėte, „GraphQL“ yra nauja technologija, kuri yra tikrai galinga. Tai suteikia mums realios galios kurti geresnes ir gerai suplanuotas API. Štai kodėl aš rekomenduoju jums pradėti mokytis dabar. Man tai ilgainiui pakeis REST.

Ačiū, kad perskaitėte straipsnį, prašau pateikti komentarą žemiau!

Sekite mane Twitteryje!
Sekite paskui mane „GitHub“!

Aš ieškau nuotolinės galimybės, taigi, jei norėčiau sužinoti apie tai, susisiekite su manimi „Twitter“!