En Front End Developer ‘ s Guide til GraphQL

0
10

Uansett hvor stor eller liten din søknad, vil du har til å håndtere hente data fra en ekstern server på enkelte punkt. På fronten, dette innebærer vanligvis å treffe en RESTEN endepunkt, transformerer svar, caching det, og å oppdatere din UI. For år, RESTEN har vært status quo for Api-er, men i løpet av det siste året, en ny API-teknologi som kalles GraphQL har eksplodert i popularitet på grunn av sin utmerkede utvikler erfaring og fortellende tilnærming til data henting.

I dette innlegget, vi vil gå gjennom et par praktiske eksempler for å vise deg hvordan å integrere GraphQL inn din søknad vil løse mange smerter poeng arbeide med eksterne data. Hvis du er ny til GraphQL, ikke få panikk! Jeg vil også fremheve noen ressurser for å hjelpe deg å lære GraphQL med Apollo stabelen, slik at du kan starte 2018 i forkant av kurven.

GraphQL 101

Før vi dykke inn i hvordan GraphQL gjør livet som en front-end utvikler lettere, bør vi først avklare hva det er. Når vi snakker om GraphQL, vi er enten å henvise til språket i seg selv eller sin rike økosystem av verktøy. I sin kjerne, GraphQL er skrevet query language utviklet av som gir deg mulighet til å beskrive data som trengs i en fortellende måte. Formen på resultatet samsvarer med formen på din spørring: i eksempelet nedenfor, kan vi forvente å få tilbake et objekt med en valuta eiendom og priser eiendel som inneholder en array av objekter med både valuta og rente-tastene.

{
priser(valuta: “USD”) {
valuta
priser {
valuta
pris
}
}
}

Når vi snakker om GraphQL i en bredere forstand, er det vi ofte refererer til økosystemet verktøy som hjelper deg med å implementere GraphQL i din søknad. På backend, vil du bruke Apollo-Server for å lage en GraphQL server, som er et enkelt endepunkt som analyserer en GraphQL forespørsel og returnerer data. Hvordan fungerer server vite hvilke data å komme tilbake til? Vil du bruke GraphQL Verktøy for å bygge et skjema (som en blåkopi for dine data) og en resolver kart (bare en rekke funksjoner som henter data fra en RESTEN endepunkt, database, eller hvor som helst ellers du velger).

Dette høres mer komplisert enn det faktisk er, — med Apollo Launchpad, en GraphQL server lekeplassen, kan du opprette en arbeidsgruppe GraphQL server i nettleseren på mindre enn 60 linjer med kode! 😮 Vi vil referere denne Launchpad jeg opprettet som wraps Coinbase API hele dette innlegget.

Vil du koble din GraphQL server til din søknad med Apollo Klient, en rask og fleksibel klient som henter, cacher, og oppdateringene dine data for deg. Siden Apollo-Klienten ikke er koblet til ditt syn laget, kan du bruke den med Reagere, Kantete, Vue, eller ren JavaScript. Ikke bare er Apollo cross-ramme, det er også cross-platform, med Reagerer Native & Ioniske støttes ut av boksen.

La oss gi det et forsøk! 🚀

Nå som du er godt bevandret i hva GraphQL er, la oss få hendene skitne med et par praktiske eksempler som illustrerer hva det vil si å utvikle din front end med Apollo. Ved slutten, tror jeg du vil bli overbevist om at en GraphQL-basert arkitektur med Apollo kan hjelpe deg med skipet funksjoner raskere enn før.

1. Legge til nye data som trengs uten å legge til et nytt endepunkt

Vi har alle vært her før: Du tilbringe timer å bygge en perfekt UI komponent når du plutselig, produkt-krav endres. Du fort innse at dataene du trenger for å oppfylle de nye kravene vil enten kreve en komplisert foss av API-forespørsler eller verre, en ny RESTEN endepunkt. Nå blokkert på arbeidet ditt, spør du backend team for å bygge deg et nytt endepunkt bare for å tilfredsstille dataene behov for en komponent.

Denne felles frustrasjon eksisterer ikke lenger med GraphQL fordi dataene du spiser på klienten er ikke lenger koblet til et endepunkt er ressurs. I stedet, du alltid treffer samme endepunkt for din GraphQL server. Din server angir alle de ressurser den har tilgjengelig via skjema og lar søket bestemmer formen på resultatet. La oss illustrere disse begrepene ved hjelp av vår Launchpad fra før:

I vårt skjema, se på linjer 22-26 der vi definerer vår ExchangeRate type. Disse feltene liste ut alle tilgjengelige ressurser vi kan spørre i vårt program.

skriv ExchangeRate {
valuta: String
pris: String
navn: String
}

Med RESTEN, du er begrenset til dataene dine resource gir. Hvis din /exchange-priser endepunkt ikke inkluderer navn, må du enten treffe en annen endepunkt som /valuta for data, eller opprette den hvis den ikke eksisterer.

Med GraphQL, vi vet at navnet er allerede tilgjengelig for oss, og ved å undersøke vårt skjema, så vi kan spørre etter det i vår søknad. Prøve å kjøre dette eksempelet i Launchpad ved å legge til navn-feltet på høyre side av panelet!

{
priser(valuta: “USD”) {
valuta
priser {
valuta
pris
navn
}
}
}

Nå, fjerne navnet feltet og kjøre den samme spørringen. Se hvordan formen av våre medføre endringer?

Din GraphQL server gir alltid tilbake nøyaktig de dataene du ber om. Ingenting mer. Dette skiller seg vesentlig fra RESTEN, hvor du ofte nødt til å filtrere og transformere dataene du får tilbake fra serveren i form din UI komponenter trenger. Ikke bare gjør dette for å spare tid, er det også resulterer i mindre nettverk nyttelaster og CPU besparelser fra lasting og analyse av svar.

2. Redusere statlig styring standardtekst

Hente data nesten alltid innebærer å oppdatere programmets tilstand. Vanligvis vil du skrive kode for å spore minst tre tiltak: ett for når data lastes inn, hvis dataene vellykket kommer, og hvis dataene feil ut. Når dataene kommer, har du å gjøre det om til formen din UI komponenter forvente, normalisere det, cache det, og oppdatere din UI. Denne prosessen kan være gjentakende, som krever utallige linjer av standardteksten for å utføre en forespørsel.

La oss se hvordan Apollo Klient eliminerer dette slitsom prosess helt av ved å se på et eksempel Reagere app i CodeSandbox. Gå til “list.js” og bla til bunnen.

eksport standard graphql(ExchangeRateQuery, {
rekvisittar: ({ data }) => {
hvis (data.legge i) {
tilbake { lasting: data.legge };
}
hvis (data.- feil) {
tilbake { feil: dataene.feil };
}
tilbake {
lasting: false,
priser: data.priser.priser
};
}
})(ExchangeRateList);

I dette eksemplet, Reagerer Apollo Apollo kundens Reagere integrering, er bindende vår exchange rate-spørring til vår ExchangeRateList komponent. Når Apollo-Klient som utfører søket, er det spor for lasting og feil staten automatisk og legger det til data prop. Da Apollo mottar Klienten resultat, det vil oppdatere dataene prop med resultatet av spørringen, som vil oppdatere din UI med priser det er behov for å gjengi.

Under panseret, Apollo-Klienten normaliserer og bufrer data for deg. Prøv å klikke på noen av valutaene i panelet til høyre for å se oppdater data. Nå, velg en valuta til en annen gang. Legg merke til hvordan data vises umiddelbart? Det er Apollo-buffer på jobb! Du får alt dette for gratis bare ved å sette opp Apollo-Klienten uten ekstra konfigurasjon. 😍 For å se koden der vi initialisere Apollo-Klient, sjekk ut ” index.js`.

3. Debug raskt og smertefritt med Apollo DevTools & GraphiQL

Det ser ut som Apollo-Klienten gjør mye for deg! Hvordan gjør vi titt inne for å forstå hva er det som skjer? Med funksjoner som store inspeksjon og full oversikt over dine spørsmål & mutasjoner, Apollo DevTools ikke bare svar på det spørsmålet, men gjør også debugging smertefri og, tør jeg si det, gøy! 🎉 Det er tilgjengelig som en utvidelse for både Chrome og Firefox, med Reagerer Native kommer snart.

Hvis du ønsker å følge med, installere Apollo DevTools for din foretrukne nettleser og naviger til vår CodeSandbox fra forrige eksempel. Du trenger for å kjøre eksempel lokalt ved å klikke Last ned øverst til nav bar, pakke ut filen, kjører npm installere, og til slutt npm start. Når du åpner opp nettleseren dev verktøy-panelet, burde du se en fane som sier Apollo.

Først, la oss sjekke ut butikken vår inspektør. Denne kategorien speil hva som er i Apollo-Klienten cache, noe som gjør det enkelt å bekrefte dine data er lagret på klienten riktig.

Apollo DevTools gir deg også muligheten til å teste dine spørsmål & mutasjoner i GraphiQL, en interaktiv query editor og dokumentasjon explorer. Faktisk, du allerede har brukt GraphiQL i det første eksempelet, der vi eksperimenterte med å legge til felt til vår spørring. Til oppsummering, GraphiQL har auto-fullfør når du skriver inn søkeord i editoren og automatisk generert dokumentasjon basert på GraphQL type system. Det er svært nyttig for å utforske skjema, med null vedlikehold byrde for utviklere.

Prøv å utføre spørringer med GraphiQL i høyre side av panelet av våre Launchpad. For å vise dokumentasjonen explorer, kan du holde musepekeren over feltene i spørringen redaktør og klikk på verktøylinjen. Hvis spørringen kjøres i GraphiQL, kan du være 100% positivt at samme spørring vil kjøres i din søknad.

Nivå opp din GraphQL ferdigheter

Hvis du har gjort det til dette punktet, kjempebra jobb! 👏 Jeg håper du likte øvelser og fikk en smak av hva det ville være å jobbe med GraphQL på fronten.

Sulten på mer? 🌮 Gjør den til din 2018 Nytt År oppløsning til å lære mer om GraphQL, som jeg forventer sin popularitet til å vokse enda mer i det kommende året. Her er et eksempel app for å komme i gang med begrepene vi lært i dag:

  • Reagerer: https://codesandbox.io/s/jvlrl98xw3
  • Kantete (Jonisk): https://github.com/aaronksaunders/ionicLaunchpadApp
  • Vue: https://codesandbox.io/s/3vm8vq6kwq

Gå ut og GraphQL (og husk å tag oss på @apollographql underveis)! 🚀