Kuinka kuluttaa Github GraphQL Relay Modern -sovelluksen avulla

Reagoida / Relay / GraphQL

Hei siellä! Viime aikoina olen tehnyt jotain todella mahtavaa. Opiskelen huipputeknologioita. Tällä viikolla löysin loistavan yrityksen nimeltä entria. Jotkut Brasilian parhaista kehittäjistä työskentelevät siellä. Siellä olevat kaverit toivat React Confin Brasiliaan, joka on uskomaton konferenssi Reaktista. He käyttävät projektissaan paljon React / Relay / GraphQL-tiedostoa. Keskustellessani yhden näistä kavereista päätin luoda yksinkertaisen projektin käyttämällä tätä pinoa. Tämä viesti heijastaa mitä olen oppinut tekeessäni sitä.

Joka tapauksessa olen luonut projektin React / Relay Modern / etc -sovelluksella. Jos et tiedä miten aloittaa Relay Modernin kanssa todellisessa projektissa tai jos haluat tietää kuinka integroida Relay Modern Github GraphQL API: n kanssa, ystäväni, olet oikeassa paikassa.

Tässä artikkelissa kerrotaan seuraavista:

  • Vaihe 1: Projektin valmistelu
  • Vaihe 2: Releen määrittäminen projektille
  • Vaihe 3: Seuraajieni näyttäminen Githubista
  • Vaihe 4: Tietovaatimusten ilmoittaminen
  • Vaihe 5: Kaiken johdotus
Huomaa: Tarvitset aiempaa perustietoa React / Relay / GraphQL-tiedostosta, jotta ymmärrät tämän viestin kokonaan. Mutta älä huolehdi liikaa, yritä toteuttaa ja pidä hauskaa! \ O /

1. Projektin valmistelu

Sovelluksen luominen

Ensimmäinen askel, jonka tein, oli luoda projekti käyttämällä luo-reagoi-sovellusta, yksinkertaista komentorivityökalua, jonka avulla voit luoda Reakt-sovelluksia ilman kokoonpanorasioita.

# Asenna tarvittaessa "luo-reagoi-sovellus"
npm asenna -g luoda-reagoida-sovellus
# Loin React-sovelluksen nimeltä `react-relay-modern-github` (ja siirry siihen)
luo-reagoi-sovellus reagoi-rele-moderni-github
cd reagoi-rele-moderni-github

server

Koska käytin Github GraphQL API -sovellusta, minun ei tarvinnut luoda sitä tyhjästä. Voit tarkistaa täältä.

2. Releen määrittäminen projektiin

Kun projekti on jo luotu, minun on liitettävä se palvelimen Relay API -sovellukseen. Suoritin seuraavat vaiheet saavuttaaksesi tämän:

  1. Lisätty releiden riippuvuus
  2. Poistettu luo-reagoi-sovelluksesta Babelin määrittämiseen
  3. Lisätty relelisäosa Babel-kokoonpanoon
  4. Konfiguroitu releympäristö

Tarkistetaan jokainen vaihe yksityiskohtaisesti.

2.1 Lisää releiden riippuvuudet

Menin uudenaikaiseen verkkosivustoon tarkistamaan, mitkä riippuvuudet minun piti asentaa. Pohjimmiltaan mitä tein:

lanka lisää reagointirele
lanka lisää rele-kääntäjä --dev
lanka lisää babel-plugin-rele --dev

2.2 Poista luo-reagoi-sovellus

Luo-reagoi-sovellusprojekti piilottaa kaikki rakennustyökalujen kokoonpanot sinulta ja tarjoaa mukavan paikan aloittamiseen. Minun tapauksessani minun piti kuitenkin tehdä joitain mukautettuja Babel-kokoonpanoja saadakseni Relay toimimaan. Joten minun piti poistua luo-reagoi-sovelluksesta.

Käytin terminaalissa seuraavaa komentoa:

langan poisto

2.3 Lisää relelisäosa Babel-kokoonpanoon

Projektin poistamisen jälkeen minun piti lisätä rakennusprosessiin edellisessä vaiheessa asentama babel-plugin-rele. Pakettiin pack.json lisäsin välityslaajennuksen muokkaamalla babel-osaa näin:

Se on Babel-kokoonpano.

2.4. Määritä releympäristö

Releympäristö niputtaa yhteen konfiguraation, välimuistin tallennuksen ja verkonkäsittelyn, joita rele tarvitsee toimiakseen.

Releympäristö on toteutettava kahdella pääkomponentilla:

  1. Verkko, joka tietää, minkä GraphQL-palvelimen kanssa hän voi puhua
  2. Kauppa, joka huolehtii välimuistista

Tämän saavuttamiseksi olen luonut uuden tiedoston src-hakemistoon nimeltään createRelayEnvironment.js ja lisännyt siihen seuraavan koodin:

Tämä koodi on otettu asiakirjojen esimerkistä ja muokattu vain vähän.

Keskustelemme nopeasti yllä olevasta koodista ymmärtääksesi paremmin mitä tapahtuu:

  1. Tuin ensin vaadittavat JS-moduulit, joita tarvitsin ympäristön pikaistamiseen ja määrittämiseen.
  2. Täällä välitän vaaditun Kaupan, joka tallentaa välimuistissa olevat tiedot.
  3. Nyt luon verkon, joka tuntee aikaisemmin GraphQL-palvelimeni, se toteutetaan toiminnolla, joka palauttaa lupauksen verkostoitumisesta GraphQL API: lle - tässä tehdään noutaa.
  4. Voit nähdä rivillä 8, että käytän merkkijonoa githubin GraphQL-URL-osoitteeseen.
  5. Saavutettujen myymälöiden ja verkkojen avulla pystyin välittämään todellisen ympäristön.
  6. Viimein minun piti viedä ympäristö tästä moduulista.

3. Seuraajieni näyttäminen Githubista

Ensin loin uuden tiedoston nimeltä User.js src / components / user hakemistoon, joka edustaa yksittäistä käyttäjää:

Seuraavaksi lisäsin toisen tiedoston src / components / users-grid -hakemistoon ja nimeltään UsersGrid.js:

Kuten näet, tämä UsersGrid-komponentti yksinkertaisesti tuottaa luettelon käyttäjäkomponenteista kartoittamalla useita käyttäjiä.

Komponenttien luomisen jälkeen minun piti ilmoittaa tietovaatimukset tietojen saamiseksi palvelimelta.

4. Tietovaatimusten ilmoittaminen

Tapa ilmoittaa datariippuvuudet React-komponenttien rinnalla on FragmentContainer API.

Ensisijainen tapa ilmoittaa tietovaatimukset on viacreateFragmentContainer - korkeamman asteen React-komponentti, jonka avulla React-komponentit voivat koodata tietotarpeensa.

Samoin kuin React-komponentin renderöintimenetelmä ei muuta suoraan natiivinäkymiä, Relay-säilöt eivät hae tietoja suoraan. Sen sijaan kontit ilmoittavat eritelmän tarvittavista tiedoista. Rele takaa, että nämä tiedot ovat saatavilla ennen renderointia.

Funktio createFragmentContainer on korkeamman asteen komponentti, jolla on kaksi argumenttia:

  1. React-komponentti, josta haluat ilmoittaa joitain datariippuvuuksia
  2. Tietosuhteellisuudet, jotka on kirjoitettu GraphQL-fragmenttina ja kääreinä käyttämällä graafista funktiota

Joten tässä vaiheessa luin uuden tiedoston edustamaan kutakin fragmenttirasiaa (Relay), jotka liittyvät kahteen aiemmin lisäämääni komponenttiin. Ensin luin uuden tiedoston käyttäjäkomponentille nimeltä User.relay.js:

Käyttäjäkomponentti tarvitsee pääsyn käyttäjän nimeen ja avatarUrl-tunnukseen.

Huomaa: Yksi tärkeä asia tässä on, että luomilleni kappaleille on olemassa nimeämiskäytäntö! Jokainen fragmentti on nimettävä tiedoston ja komponenttiin injektoitavan potentiaalin mukaan: _

Minun tapauksessani tiedoston nimi on User.js ja komponentissa olevan prop: n tulisi olla käyttäjän. Joten päädyn fragmentin nimeen User_user -sovelluksella.

Tein samat vaiheet UsersGrid-komponentin kanssa, jonka tiedosto on nimeltään UsersGrid.relay.js:

Samoin kuin käyttäjäkomponentti, välitän UsersGrid-komponentin ja sen tietovaatimukset createFragmentContaineriin. UsersGridneeds tarvitsee pääsyn käyttäjäluetteloon. Pyydän vain ensimmäisten 10 käyttäjän näyttämistä. On myös mahdollista toteuttaa oikea sivutustapa.

Huomaa, että seuraan jälleen samaa nimeämiskäytäntöä ja nimetin fragmentin UsersGrid_viewer. UsersGrid.js on tiedoston nimi ja katseluohjelma on komponentti, jonka odotat.

Käytän myös User.user-fragmenttia, jonka kirjoitin User.js -käsittelyssä UserGridis korkeammalle React-komponentti- (ja Relay-säilö) -puulle, joten on vastuussa sisällyttää kaikki lastensa fragmentit!

Huomaa: Päätin erottaa komponentitiedoston komponentin välityskonfiguraatiosta, koska oli helpompaa luoda vain itse komponenttiin liittyviä kertomusjuttuja eikä mitään muuta.

5. Kaiken johdotus

Käytin QueryRenderer -sovelluksen avulla kaiken.

QueryRenderer on välityspuun juuri. Se ottaa kyselyn, hakee tiedot ja soittaa render-takaisinsoitolle datan kanssa.

Koska tämä kaveri on Relay-puun juuri, jouduin käyttämään sitä juurikomponentissani, joka minun tapauksessani oli App.js-tiedosto. Tässä on App.js, kun olen lisännyt QueryRenderer:

Kuten voit nähdä riveillä 11–15, kirjoitin juurihaun. Huomaa, kuinka käytämme nyt tosiasiallisesti fragmenttia UsersGrid_viewer KäyttäjätGrid-komponentista.

Vain yksi askel puuttuu. Minun piti koota GraphQL-koodi. Olen jo asentanut rele-kääntäjän, joten käytän sitä nyt.

Hakee kaava ja käännä graphQL-koodi

Koska käytämme githubin GraphQL-sovellusliittymää, meidän on saatava pääsy koko GraphQL-skeemoon. Suorittaakseni, että käytän tätä koodia saadakseni skeeman ja luomalla tarvitsemani tiedoston:

Muutin myös paketin.json-tiedoston kääntämään ja suorittamaan yllä oleva koodi, kuten näet täältä:

Nyt viimeinkin, jos käytät lankaa, voit testata sovelluksen.

Huomaa: Sinun on luotava github-tunnus sovelluksen suorittamiseksi. Tämä linkki näyttää kuinka sen tehdä.

Minusta se on se. Voit tarkistaa, mitä olen tehnyt github-sivullani. Nöyrä esimerkki on täällä. Kerro minulle ajatuksiasi.