Kuidas Github GraphQL-i tarbida, kasutades funktsiooni Relay Modern

Reageerimine / Relay / GraphQL

Tere! Viimasel ajal olen teinud midagi väga ägedat. Õpin tipptasemel tehnoloogiaid. Sel nädalal leidsin vahva ettevõtte nimega entria. Seal töötavad Brasiilia parimad arendajad. Sealsed poisid tõid React Konfi Brasiiliasse, mis on Reacti kohta hämmastav konverents. Nad kasutavad oma projektides palju React / Relay / GraphQL-i. Nendega rääkides otsustasin selle pinu abil luua lihtsa projekti. See postitus kajastab seda, mida ma olen seda tehes õppinud.

Igatahes lõin projekti React / Relay Modern / etc abil. Kui te ei tea, kuidas Relay Moderniga reaalprojektis alustada, või kui soovite teada, kuidas integreerida Relay Modern Github GraphQL API-ga, siis, mu sõber, oled õiges kohas.

Selles artiklis käsitleme järgmist:

  • 1. samm: projekti ettevalmistamine
  • 2. samm: relee konfigureerimine projektile
  • 3. samm: minu jälgijate kuvamine Githubist
  • 4. samm: andmenõuete deklareerimine
  • 5. samm: juhtmete ühendamine kõik üles
Märkus. Selle postituse täielikuks mõistmiseks vajate eelnevaid põhiteadmisi rakenduses React / Relay / GraphQL. Kuid ärge muretsege liiga palju, proovige seda rakendada ja nautige! \ o /

1. Projekti ettevalmistamine

Rakenduse loomine

Esimene samm, mille tegin, oli projekti loomine, kasutades käsku create-react-app, lihtsat käsurida, mis võimaldab teil luua React rakendusi ilma konfiguratsioonita.

# Vajadusel installige rakendus "loo-reageeri-rakendus"
npm install -g loo-reageeri-rakendus
# Ma lõin rakenduse Reakt nimega "reageeri-relee-modern-github" (ja sirvige sinna)
luua-reageerida-rakendus reageerida-relee-kaasaegne-github
cd reageerima-relee-moodne-github

Server

Kuna ma kasutasin Github GraphQL API-d, ei pidanud ma seda nullist looma. Saate vaadata siit.

2. Relee seadistamine projektil

Kui projekt on juba loodud, pean selle ühendama serveri Relay API-ga. Võtsin selle saavutamiseks järgmised sammud:

  1. Lisatud releesõltuvused
  2. Eemaldati rakendusest loo-reageeri, et seadistada Paabel
  3. Lisati relee plugin Babeli konfiguratsioonile
  4. Konfigureeritud releekeskkond

Vaatame iga sammu üksikasju.

2.1 Lisage releesõltuvused

Läksin tänapäevase veebisaidi üle, et kontrollida, millised sõltuvused ma installima pidin. Põhimõtteliselt see, mida ma tegin, oli:

lõng lisada reageerimisrelee
lõng lisada relee-kompilaator --dev
lõnga lisada babel-plugin-relee --dev

2.2 Lülitage välja loo-reageeri-rakendus

Rakenduse loomise-reageerimise projekt peidab teie eest kõik ehitustööriistade konfiguratsioonid ja pakub mugavat kohta alustamiseks. Kuid minu puhul tuli relee tööle saamiseks teha mõned kohandatud Babeli konfiguratsioonid. Nii et mul oli vaja looda-reageerida-rakendusest.

Terminalis kasutasin järgmist käsku:

lõnga väljutamine

2.3 Lisage relee plugin Babeli konfiguratsioonile

Pärast projekti väljutamist pidin ehitamise protsessi lisama babeli pistikprogrammi relee, mille olen eelmises etapis installinud. Lisasin paketile.json relee plugina, muutes babeli jaotist nii:

See on Paabeli konfiguratsioon.

2.4. Konfigureerige releekeskkond

Releekeskkond koondab konfiguratsiooni, vahemälu salvestuse ja võrguhalduse, mida relee tööks vajab.

Releekeskkond tuleb kiirendada kahe peamise komponendiga:

  1. Võrk, mis teab, millise GraphQL-serveriga ta saab rääkida
  2. Kauplus, mis hooldab vahemällu hoidmist

Selle saavutamiseks lõin src-kataloogis uue faili nimega createRelayEnvironment.js ja lisasin sellele järgmise koodi:

See kood on võetud dokumentide näites ja seda kohandati ainult pisut.

Arutame kiiresti ülaltoodud koodi, et toimuvast paremini aru saada:

  1. Esmalt importisin vajalikud JS-moodulid, mida mul oli vaja keskkonna kiireks muutmiseks ja konfigureerimiseks.
  2. Kohendan siin vajaliku poe, mis salvestab vahemällu salvestatud andmed.
  3. Nüüd loon võrgu, mis teab mu GraphQL-serverit juba varem, see on realiseeritud funktsiooniga, mis tagastab lubaduse võrgukõne saamiseks GraphQL API-le - siin on see tehtud tõmbamise abil.
  4. 8. real näete, et kasutan stringi githubi GraphQL URL-i jaoks.
  5. Kättesaadava poe ja võrgu abil suutsin hetkeolukorra hetkeolukorra esile tuua.
  6. Lõpuks oli mul vaja keskkond sellest moodulist eksportida.

3. Minu jälgijate kuvamine Githubist

Kõigepealt lõin src / components / user kataloogis uue faili nimega User.js, mis tähistab üksikut kasutajat:

Järgmisena lisasin src / components / users-grid kataloogi veel ühe faili ja selle nimi oli UsersGrid.js:

Nagu näete seda kasutajaGrid-komponenti, kuvatakse lihtsalt kasutajakomponentide loend, kaardistades üle hulga kasutajaid.

Pärast komponentide loomist pidin deklareerima andmevajaduse serverist andmete saamiseks.

4. Andmenõuete deklareerimine

Andmete sõltuvuste deklareerimiseks Reaxi komponentide kõrval on FragmentContainer API.

Esmane viis andmenõuete deklareerimiseks on viacreateFragmentContainer - kõrgema järgu React komponent, mis laseb React komponentidel oma andmevajadusi kodeerida.

Sarnaselt sellega, kuidas Reacti komponendi renderdusmeetod ei muuda natiivseid vaateid otseselt, ei kata releekonteinerid andmeid otse. Selle asemel deklareerivad konteinerid spetsifikatsiooni renderdamiseks vajalike andmete kohta. Relee garanteerib, et need andmed on enne renderdamist saadaval.

Funktsioon createFragmentContainer on kõrgema järgu komponent, millel on kaks argumenti:

  1. Reaktkomponent, mille kohta soovite teatada teatud andmest sõltuvused
  2. Andmetesõltuvused, mis on kirjutatud GraphQL-i fragmentidena ja ümbrisena, kasutades graafikfunktsiooni

Niisiis lõin ma sel hetkel uue faili, mis tähistab kõiki fragmentide konteinereid (releed), mis on seotud kahe komponendiga, mille varem lisasin. Kõigepealt lõin kasutajakomponendis uue faili nimega User.relay.js:

Komponent Kasutaja vajab juurdepääsu kasutaja nimele ja avatarUrl-le.

Märkus. Üks oluline asi on see, et minu loodud fragmentide jaoks on olemas nimetamise tava! Iga fragmenti tuleks nimetada vastavalt failile ja komponendile süstitavale rekvisiidile: _

Minu puhul nimetatakse faili kasutajaks.js ja komponendi tugiteenust tuleks nimetada kasutajaks. Nii et lõigu nimi on mul User_user.

Tegin samu samme komponendiga UsersGrid failiga nimega UsersGrid.relay.js:

Sarnaselt kasutajakomponendiga edastan komponendi UsersGrid koos selle andmenõuetega kausta createFragmentContainer. UsersGridneeds vajab juurdepääsu kasutajate loendile. Ma palun lihtsalt kuvada esimesed kümme kasutajat. Samuti on võimalik rakendada õiget lehtimise lähenemisviisi.

Pange tähele, et järgin jälle sama nimetamistava ja nimetasin fragmendi UsersGrid_viewer. UsersGrid.js on faili nimi ja vaataja on see komponent, mida te oskate oodata.

Kasutan ka User_user'i fragmenti, mille kirjutasin lehel User.js, kuna kasutajaGridis on kõrgem komponendi React (ja relee konteiner) puust, seega on vastutus lisada kõik oma laste killud!

Märkus. Otsustasin eraldada komponendi faili komponendi releekonfiguratsioonist, kuna lihtsam oli luua ainult komponendi enda ja mitte millegi muuga seotud juturaamatute lugusid.

5. Juhtmete ühendamine kõik üles

Kõigi juhtmete jaoks kasutasin QueryRendererit.

QueryRenderer on releepuu juur. See võtab vastu päringu, tõmbab andmed ja helistab koos andmetega renderdamise tagasihelistamisele.

Kuna see tüüp on releepuu juur, pidin seda kasutama oma juurkomponendis, mis minu puhul oli fail App.js. Pärast QueryRendereri lisamist on siin minu App.js:

Nagu näete ridadel 11–15, kirjutasin juurpäringu. Pange tähele, kuidas me tegelikult kasutame fragmenti UsersGrid_viewer, mis on pärit komponendist UsersGrid_view.

Ainult üks samm on puudu. Mul oli vaja kompileerida GraphQL-kood. Ma juba installisin relee-kompilaatori, nii et nüüd ma tegelikult kasutan seda.

Skeemi saamine ja graafiku koodi kompileerimine

Kuna kasutame githubi GraphQL API-d, peame saama juurdepääsu täielikule GraphQL-skeemile. Selle saavutamiseks kasutan skeemi saamiseks ja vajaliku faili loomiseks seda koodi:

Muutsin ka faili package.json, et kompileerida ja käivitada ülalolev kood, nagu näete siin:

Lõpuks, kui lõnga hakkate pakkuma, saate rakendust testida.

Märkus. Rakenduse täitmiseks peate looma githubi loa. See link näitab teile, kuidas seda teha.

Ma arvan, et see selleks. Saate oma githubi lehel vaadata, mida ma olen teinud. Minu alandlik näide on siin. Palun andke mulle oma mõtetest teada.