En Front End Developer ‘ s Guide till GraphQL

0
19

Oavsett hur stor eller liten din ansökan, du kommer att ha att göra med att hämta data från en annan server på någon punkt. På den främre änden, detta innebär oftast att träffa RESTEN slutpunkt, omvandla svar, cachning det, och uppdatera ditt UI. För år, RESTEN har varit status quo för Api: er, men under det senaste året, ett nytt API teknik som kallas GraphQL har exploderat i popularitet på grund av dess utmärkta utvecklare erfarenhet och deklarativa förhållningssätt till data att hämta.

I detta inlägg, vi kommer att gå igenom ett par praktiska exempel att visa dig hur integrera GraphQL i din ansökan kommer att lösa många svaga punkter att arbeta med externa data. Om du är ny till GraphQL, don ‘ t panic! Jag kommer också att lyfta fram några resurser för att hjälpa dig att lära dig GraphQL med Apollo stack, så att du kan börja 2018 före kurvan.

GraphQL 101

Innan vi fördjupar oss i hur GraphQL gör ditt liv som en front end-utvecklare lättare, bör vi först klargöra vad det är. När vi talar om GraphQL, vi är antingen med hänvisning till språket i sig eller dess rika ekosystem av verktyg. I sin kärna, GraphQL är en maskinskriven fråga språk som utvecklats av som gör att du kan beskriva dina krav på uppgifter i ett deklarativt sätt. Formen på dina resultat matchar formen på din fråga: i exemplet nedan kan vi räkna med att få tillbaka ett objekt med en valuta egendom och priser egendom som innehåller en array av objekt med både valuta och ränta nycklar.

{
priser(valuta: “USD”) {
valuta
priser {
valuta
ränta
}
}
}

När vi talar om GraphQL i en bredare mening, som vi ofta hänvisar till ekosystemet av verktyg som hjälper dig att genomföra GraphQL i din ansökan. På backend, du kommer att använda Apollo-Server för att skapa en GraphQL server, som är en gemensam slutpunkt som tolkar ett GraphQL begäran och returnerar data. Hur fungerar servern vet vilka uppgifter att återvända? Du kommer att använda GraphQL Verktyg för att bygga ett schema (som en plan för dina data) och en resolver karta (bara en serie av funktioner för att hämta data från en VILA slutpunkt, databas eller någon annanstans du väljer).

Allt detta låter mer komplicerat än det faktiskt är — med Apollo Launchpad, en GraphQL server lekplats, kan du skapa en fungerande GraphQL server i din webbläsare i mindre än 60 rader kod! 😮 Vi kommer att referera till denna Launchpad jag skapade som omsluter den Coinbase API hela detta inlägg.

Du ska ansluta din GraphQL server för att din ansökan med Apollo-Klienten, en snabb och flexibel klient som hämtar, cacheminne och uppdatera dina uppgifter för dig. Sedan Apollo-Klienten är inte kopplat till ditt visa-lager, och du kan använda det med att Reagera, Kantiga, Vue, eller vanlig JavaScript. Det är inte bara Apollo cross-ram, det är också plattformsoberoende, Reagera med Infödda & Joniska stöds ur lådan.

Låt oss ge det ett försök! 🚀

Nu är du väl insatt i vad GraphQL är, låt oss få våra händer smutsiga med ett par praktiska exempel för att illustrera hur det är att utveckla din front med Apollo. I slutet, jag tror att du kommer att bli övertygad om att en GraphQL-baserad arkitektur med Apollo kan hjälpa dig att fartyget har snabbare än innan.

1. Lägg till nya uppgifter utan att lägga till en ny slutpunkt

Vi har alla varit här innan: Du spendera timmar med att bygga en perfekt UI komponent när det plötsligt produkt krav på förändring. Du inser snabbt att de data som du behöver för att uppfylla dessa nya krav skulle antingen kräva en komplicerad vattenfall API-förfrågningar eller ännu värre, en ny RESTEN slutpunkt. Nu blockerad på ditt arbete, frågar du backend team för att bygga dig en ny slutpunkt bara för att tillfredsställa de behov av uppgifter för en komponent.

Denna gemensamma frustration inte längre finns med GraphQL eftersom de data som du förbrukar på klienten är inte längre kopplade till en slutpunkt resurs. Istället kan du alltid träffa samma slutpunkt för din GraphQL server. Din server anger alla de resurser man har tillgängliga via ditt schema och låter din fråga bestämma formen av resultatet. Låt oss illustrera dessa begrepp använder vår Launchpad från innan:

I vårt schema, titta på linjer 22-26 där vi definierar vår ExchangeRate typ. Dessa områden lista ut alla tillgängliga resurser kan vi fråga i vår ansökan.

typ ExchangeRate {
valuta: String
priser: String
namn: String
}

Med VILA, du är begränsad till de uppgifter som din resurs ger. Om din /valutakurser endpoint behöver inte uppge namn, då måste du antingen slå en annan slutpunkt gillar /valuta för data eller skapa den om den inte existerar.

Med GraphQL, vi vet att namnet är redan tillgänglig för oss genom att inspektera vårt schema, så kan vi fråga efter det i vår ansökan. Prova att köra detta exempel i Launchpad genom att lägga till fältet namn på panelen till höger!

{
priser(valuta: “USD”) {
valuta
priser {
valuta
ränta
namn
}
}
}

Nu, ta bort namn-fältet och köra samma fråga. Se hur formen på våra resultat förändringar?

Din GraphQL server alltid ger dig exakt de data som du frågar efter. Ingenting mer. Detta skiljer sig markant från ÖVRIGA, där du ofta har att filtrera och omvandla data du får tillbaka från servern i form ditt UI-komponenter behöver. Detta sparar inte bara tid, det resulterar också i mindre nätverk nyttolaster och CPU besparingar från inläsning och tolkning av svar.

2. Minska din statlig förvaltning standardtext

Hämtning av data nästan alltid handlar om att uppdatera din ansökan tillstånd. Typiskt att du ska skriva kod för att spåra minst tre åtgärder: en för när data läses in, en om de uppgifter som framgångsrikt anländer, och en om data fel ut. När data kommer in, du har för att omvandla det till formen ditt UI-komponenter förvänta sig, normalisera det, cache, och uppdatera ditt UI. Denna process kan vara repetitiva, som kräver oräkneliga rader av standardtext för att verkställa en begäran.

Låt oss se hur Apollo-Klienten eliminerar detta tröttsamma processen helt och hållet genom att titta på ett exempel Reagera app i CodeSandbox. Navigera till “list.js” och scrolla till botten.

export standard graphql(ExchangeRateQuery, {
rekvisita: ({ data }) => {
if (data.lastning) {
return { loading data.laddar };
}
if (data.error) {
return { fel: data.felet };
}
return {
lastning: false,
priser: data.priser.priser
};
}
})(ExchangeRateList);

I detta exempel, Reagerar Apollo Apollo-Klienten Reagerar integration, är bindande vår valutakurs förfrågan till vår ExchangeRateList komponent. När Apollo-Klienten körs som en fråga, det spår lastning och fel automatiskt och lägger den till de uppgifter som prop. När Apollo-Klienten erhåller resultat, det kommer uppdatera data prop med resultatet av en fråga, som kommer att uppdatera din UI med priser måste det göra.

Under huven, Apollo-Klienten normaliserar och sparar dina uppgifter för dig. Prova att klicka på någon av de valutor i panelen till höger för att titta på uppdatera data. Nu, välj en valuta en andra gång. Lägg märke till hur data visas omedelbart? Det är Apollo cache på jobbet! Du får allt detta gratis bara genom att ställa upp Apollo-Klienten med någon ytterligare konfiguration. 😍 För att se koden där vi initiera Apollo-Klienten, kolla in ” index.js`.

3. Felsöka snabbt & smärtfritt med Apollo DevTools & GraphiQL

Det ser ut som Apollo-Klienten gör en hel del för dig! Hur gör vi för att kika på insidan för att förstå vad är det som händer? Med funktioner som butik för kontroll och full insyn i dina frågor & mutationer, Apollo DevTools inte bara svar på den frågan, men gör även felsökning smärtfri och, vågar jag säga det, kul! 🎉 Den är tillgänglig som ett tillägg för Chrome och Firefox, med Reagera Native kommer snart.

Om du vill följa med, installera Apollo DevTools för din favorit webbläsare och navigera till vårt CodeSandbox från föregående exempel. Du måste köra exempel lokalt genom att klicka på Hämta i det övre navigeringsfältet, packa upp filen, kör npm install, och slutligen npm start. När du öppnar upp din webbläsares dev panelen verktyg, bör du se en flik som heter Apollo.

Första, låt oss kolla in vår butik inspektör. Den här fliken speglar vad som för närvarande är i din Apollo-Klienten cache, vilket gör det lätt att bekräfta din data lagras på kunden på rätt sätt.

Apollo DevTools kan du också testa dina frågor & mutationer i GraphiQL, en interaktiv fråga redaktören och dokumentation explorer. I själva verket, har du redan använt GraphiQL i det första exemplet där vi experimenterat med att lägga till fält till vår fråga. För att sammanfatta, GraphiQL har auto-complete som du skriver din fråga i editorn och genereras automatiskt dokumentation baserad på GraphQL typ av system. Det är mycket användbart för att utforska ditt schema, med noll underhåll börda för utvecklare.

Prova verkställande frågor med GraphiQL i panelen till höger i vår Launchpad. För att visa dokumentationen explorer, kan du för muspekaren över fälten i fråga redaktören och klicka på verktygstips. Om din fråga kan köras i GraphiQL, kan du vara 100% säker på att samma fråga kommer att köras i din ansökan.

Nivå upp din GraphQL kompetens

Om du gjort det till denna punkt, grymt jobb! 👏 Jag hoppas att du haft övningar och fick en försmak av hur det skulle vara att arbeta med GraphQL på den fronten.

Sugen på mer? 🌮 Gör det till din 2018 nyårslöfte att lära sig mer om GraphQL, som jag förväntar dess popularitet att öka ännu mer under kommande år. Här är ett exempel på en app för att komma igång med de begrepp som vi lärt oss idag:

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

Gå ut och GraphQL (och se till att tagga oss på @apollographql längs vägen)! 🚀