Een Front-End Developer ‘ s Guide to GraphQL

0
14

Ongeacht hoe groot of hoe klein uw aanvraag, u zult te maken krijgen met het ophalen van gegevens uit een externe server op een bepaald punt. Op de front-end, gaat het meestal om het raken van een REST eindpunt, het transformeren van de reactie, caching, en het bijwerken van uw UI. Voor de jaren, de REST is van de status quo voor Api ‘ s, maar het afgelopen jaar is er een nieuwe API-technologie genoemd GraphQL is geëxplodeerd in populariteit te danken aan haar uitstekende developer ervaring en declaratieve aanpak op gegevens ophalen.

In deze post, we lopen door een paar van hands-on voorbeelden om u te laten zien hoe de integratie van GraphQL in uw toepassing op te lossen zal veel pijn punten het werken met externe gegevens. Als u nieuw bent bij GraphQL, geen paniek! Ik zal ook enkele bronnen om u te helpen leren GraphQL met behulp van de Apollo stack, zodat u kunt beginnen 2018 ahead of the curve.

GraphQL 101

Voordat we dieper ingaan op hoe GraphQL maakt je leven als een front-end developer gemakkelijker is, moeten we eerst duidelijk maken wat het is. Als we praten over GraphQL, we zijn hetzij te verwijzen naar de taal zelf en zijn rijke ecosysteem van hulpmiddelen. In de kern, GraphQL is een type query language, ontwikkeld door dat kunt u met een omschrijving van uw gegevens te eisen in een declaratieve manier. De vorm van het resultaat overeenkomt met de vorm van uw zoekopdracht: in het onderstaande voorbeeld, kunnen we verwachten van een object met een munt eigendom en tarieven eigenschap met een array van objecten met beide munt en beoordelen van toetsen.

{
tarieven(munt: “USD”) {
munt
tarieven {
munt
tarief
}
}
}

Als we praten over GraphQL in bredere zin, zijn we vaak te verwijzen naar het ecosysteem van de tools die u helpen bij het implementeren GraphQL in uw toepassing. Op de backend, maakt u gebruik van Apollo Server te maken van een GraphQL server, dat is een single-eindpunt parseert een GraphQL aanvraag en worden gegevens geretourneerd. Hoe werkt de server weten welke gegevens? Gebruik je GraphQL Tools voor het bouwen van een schema (zoals een blauwdruk voor uw data) en een resolver-kaart (gewoon een reeks van functies, die het ophalen van uw gegevens uit een REST eindpunt, database, of waar dan ook u kiest).

Dit klinkt allemaal ingewikkelder dan het eigenlijk is — met Apollo Launchpad, een GraphQL server speeltuin, kunt u een werkende GraphQL server in uw browser in minder dan 60 regels code! 😮 We verwijzen naar dit Startpunt ik gemaakt die loopt van de Coinbase API in deze post.

U sluit uw GraphQL server voor uw toepassing met de Apollo-Client, een snelle en flexibele client haalt, caches, en de updates van je gegevens voor u op. Sinds Apollo Opdrachtgever is niet gekoppeld aan uw weergave te laag, kunt u deze gebruiken met Reageren, Hoekig, Vue, of gewoon JavaScript. Niet alleen is Apollo cross-kader, het is ook cross-platform, met Reageren Native & Ionische ondersteund out of the box.

Laten we het maar proberen! 🚀

Nu dat je goed op de hoogte van wat GraphQL is, laten we onze handen vuil te maken met een aantal praktische voorbeelden die illustreren hoe het is om de ontwikkeling van uw front-end met Apollo. Door het einde, ik denk dat je er van overtuigd dat een GraphQL-architectuur op basis van met de Apollo kan u helpen schip functies sneller dan voorheen.

1. Het toevoegen van nieuwe gegevens eisen, zonder het toevoegen van een nieuw eindpunt

We waren hier voor: U uren spenderen aan het bouwen van een perfecte UI-component toen plotseling, product-eisen veranderen. U beseffen al snel dat de gegevens die u nodig hebt om te voldoen aan deze nieuwe eisen zouden vereisen een gecompliceerde waterval van API-aanvragen, of nog erger, een nieuwe REST eindpunt. Nu geblokkeerd op je werk, vraag je het back-end team aan het bouwen van een nieuw eindpunt net om te voldoen aan de gegevens die nodig zijn voor één onderdeel.

Deze gemeenschappelijke frustratie niet langer bestaat met GraphQL omdat de data die je verbruikt op de klant is niet langer gekoppeld aan een eindpunt van de bron. In plaats daarvan, u altijd precies hetzelfde eindpunt voor uw GraphQL server. Uw server geeft aan alle van de middelen die zij beschikbaar heeft via uw schema en laat uw query bepalen de vorm van het resultaat. Laten we illustreren deze concepten met behulp van onze Launchpad uit voor:

In ons schema, kijk naar de lijnen 22-26 waar we definiëren onze ExchangeRate type. Deze lijst met velden uit alle beschikbare bronnen die we kunnen query in onze applicatie.

type ExchangeRate {
munt: String
tarief: String
naam: String
}

Met RUST, bent u beperkt tot de gegevens die de bron levert. Als jouw /exchange-tarieven eindpunt niet zijn naam, dan zul je nodig hebt om een hit een ander eindpunt van like /munt voor de gegevens of maak het aan als het niet bestaat.

Met GraphQL, kennen we die naam is al beschikbaar voor ons door de inspectie van ons schema, dus we kunnen de query voor het in onze applicatie. Probeer met dit voorbeeld in Launchpad door het toevoegen van de naam van het veld op het paneel aan de rechterkant!

{
tarieven(munt: “USD”) {
munt
tarieven {
munt
tarief
naam
}
}
}

Verwijder nu de naam van het veld en voer de query uit. Zie hoe de vorm van onze gevolg van veranderingen?

Uw GraphQL server geeft u altijd precies de gegevens die u vraagt. Niets meer. Dit verschilt aanzienlijk van RUST, waar u vaak te filteren en transformeren van de gegevens die u krijgt terug van de server in de vorm van uw UI-componenten nodig. Niet alleen bespaart u tijd, het resulteert ook in een kleiner netwerk payloads en CPU besparingen uit het laden en bij het parseren van het antwoord.

2. Het verminderen van uw state management boilerplate

Het ophalen van gegevens bijna altijd gaat om het bijwerken van uw aanvraag staat. Meestal zult u de code schrijven die track ten minste drie acties: één voor wanneer de gegevens laden, als de gegevens met succes binnenkomt, en als de gegevens fouten. Zodra de gegevens binnen zijn, moet je om het te veranderen in de vorm van uw UI-componenten verwachten, normaliseren, cache, en update uw UI. Dit proces kan herhaald worden, waarvoor talloze lijnen van bewaarplaats tot het uitvoeren van een verzoek.

Laten we eens kijken hoe Apollo Opdrachtgever elimineert dit lastige proces volledig door te kijken naar een voorbeeld Reageren app in CodeSandbox. Ga naar `list.js` en scroll naar de onderzijde.

export standaard graphql(ExchangeRateQuery, {
benodigdheden: ({ gegevens }) => {
als (gegevens.laden) {
terug { laden: de gegevens.het laden };
}
als (gegevens.fout) {
terug { fout: de gegevens.fout };
}
terug {
laden: false,
tarieven: gegevens.tarieven.tarieven
};
}
})(ExchangeRateList);

In dit voorbeeld, Reageren Apollo, Apollo Klant Reageren integratie, is bindend onze wisselkoers query onze ExchangeRateList component. Zodra Apollo Client voert de query, tracks laden en fout staat automatisch en voegt deze toe aan de data prop. Toen Apollo-Client ontvangt het resultaat, het bijwerken van de gegevens prop met het resultaat van de query wordt bijgewerkt uw UI met de tarieven die het nodig heeft om te renderen.

Onder de motorkap, Apollo Opdrachtgever normaliseert en slaat uw gegevens voor u op. Probeer dan te klikken op een van de valuta ‘ s in het deelvenster aan de rechterkant om naar te kijken het vernieuwen van de gegevens. Nu, selecteert u een munt met een tweede tijd. Merk op hoe de gegevens worden weergegeven onmiddellijk? Dat is de Apollo-cache op het werk! Je krijgt dit alles voor gratis alleen door het opzetten van Apollo Opdrachtgever, zonder extra configuratie. 😍 Om de code te bekijken waar we initialiseren Apollo Klant, bekijk `index.js`.

3. Debug snel en pijnloos met de Apollo DevTools & GraphiQL

Het lijkt op Apollo Opdrachtgever doet veel voor u! Hoe doen we een kijkje in om te begrijpen wat er aan de hand? Met functies, zoals het opslaan inspectie en volledig inzicht in uw query ‘ s en-mutaties, Apollo DevTools niet alleen antwoord op die vraag, maar ook maakt het debuggen pijnloos en, durf ik het zeggen, leuk! 🎉 Het is beschikbaar als een extensie voor Chrome en Firefox, met Reageren Native binnenkort.

Als u wilt volgen langs, installeren Apollo DevTools voor uw favoriete browser en ga naar onze CodeSandbox uit het vorige voorbeeld. Je moet lopen in het voorbeeld ter plaatse door op Downloaden te klikken in de bovenste navigatiebalk, uitpakken van het bestand uitvoeren van npm installeren, en ten slotte npm start. Zodra u uw browser dev tools paneel, zie je een tabblad dat zegt Apollo.

Eerste, laten we check out onze winkel inspecteur. Dit tabblad spiegels van wat er op dit moment in uw Apollo Client cache, waardoor het gemakkelijk is om te bevestigen dat uw gegevens worden opgeslagen op de client correct.

Apollo DevTools ook kunt u testen uw vragen en mutaties in GraphiQL, een interactieve query-editor en de documentatie explorer. In feite, kunt u al gebruikt GraphiQL in het eerste voorbeeld waar we geëxperimenteerd met het toevoegen van velden aan onze query. Om samen te vatten, GraphiQL functies voor automatisch aanvullen als u uw query in de editor en automatisch gegenereerde documentatie op basis van GraphQL type systeem. Het is uiterst nuttig voor het verkennen van het schema, met nul onderhoud lasten voor ontwikkelaars.

Probeer het uitvoeren van query ‘ s met GraphiQL in het paneel aan de rechterkant van onze Launchpad. Om de documentatie explorer, kunt u de muisaanwijzer over de velden in de query-editor en klikt u op de knopinfo. Als de query wordt uitgevoerd in GraphiQL, u kunt er 100% zeker van bent dat de query wordt uitgevoerd in uw toepassing.

Niveau omhoog uw GraphQL vaardigheden

Als u heeft op dit punt, geweldige baan! 👏 Ik hoop dat je genoten hebt van de oefeningen en kreeg een voorproefje van hoe het zou zijn om te werken met GraphQL op de front-end.

Honger naar meer? 🌮 Je 2018 voornemen voor het Nieuwe Jaar om meer te leren over GraphQL, als ik verwacht dat de populariteit om verder te groeien in het komende jaar. Hier is een voorbeeld van een app aan de slag met de concepten die we geleerd vandaag:

  • Reageren: https://codesandbox.io/s/jvlrl98xw3
  • Hoekig (Ionische): https://github.com/aaronksaunders/ionicLaunchpadApp
  • Vue: https://codesandbox.io/s/3vm8vq6kwq

Uitgaan en GraphQL (en zorg ervoor dat de tag ons op @apollographql langs de weg)! 🚀