Så hvad er denne GraphQL-ting, jeg stadig hører om?

Så hvad er denne GraphQL-ting, jeg bliver ved med at høre om?

Hvis du er som mig, gennemgår du sandsynligvis tre faser, når du hører om en ny teknologi:

1. Afskedigelse

Endnu et JavaScript-bibliotek ?! Brug bare jQuery allerede!

2. Interesse

Hmm, måske jeg skulle tjekke denne nye bibliotek Jeg bliver ved at høre om ...

3. Panik

Hjælp! Jeg har brug for at lære dette nye bibliotek lige nu, ellers bliver jeg helt forældet!

Tricket for at opretholde din tilregnelighed i disse hurtige tider er at lære nye ting lige mellem trin to og tre, når din interesse er vækket, men mens du stadig er foran kurven.

Derfor er det nu det perfekte tidspunkt at lære, hvad netop denne GraphQL-ting, du stadig hører om, virkelig er.

Det grundlæggende

I en nøddeskal er GraphQL en syntaks, der beskriver, hvordan man beder om data , og bruges generelt til at indlæse data fra en server til en klient. GraphQL har tre hovedegenskaber:

  • Det lader klienten specificere nøjagtigt, hvilke data den har brug for.
  • Det gør det lettere at samle data fra flere kilder.
  • Det bruger et typesystem til at beskrive data.

Så hvordan kom GraphQL i gang? Hvordan ser det ud i praksis? Og hvordan begynder du at bruge det? Læs videre for at finde ud af det!

Problemet

GraphQL fik sin start på store gamle Facebook, men endda meget enklere apps kan ofte støde på begrænsningerne ved traditionelle REST API'er.

Forestil dig f.eks. At du skal vise en liste over postsog under hvert indlæg en liste over likes, inklusive brugernavne og avatarer. Nemt nok tilpasser du din postsAPI til at inkludere et likesarray, der indeholder brugerobjekter:

Men nu er det tid til at arbejde på din mobilapp, og det viser sig, at indlæsning af alle de ekstra data bremser tingene. Så du har nu brug for to slutpunkter, et med det likesog et uden dem.

Tilføj nu endnu en faktor til blandingen: Det viser sig, at mens de postser gemt i en MySQL-database, likespå den anden side bor i en Redis-butik! Hvad gør du nu?!

Ekstrapoler dette scenarie til hvor mange datakilder og API-klienter Facebook skal administrere, og du kan forestille dig, hvorfor gode gamle REST API'er begyndte at vise deres grænser.

Løsningen

Løsningen Facebook kom på er begrebsmæssigt meget enkel: I stedet for at have flere "dumme" slutpunkter, skal du have et enkelt "smart" slutpunkt, der kan tage komplekse forespørgsler, og derefter massere dataoutputtet i den form, klienten har brug for.

Praktisk set lever GraphQL-laget mellem klienten og en eller flere datakilder, modtager klientanmodninger og henter de nødvendige data i henhold til dine instruktioner. Forvirret? Det er metafor tid!

Den gamle REST-model er som at bestille pizza, derefter få leveret dagligvarer og derefter ringe til din renser for at få dit tøj. Tre butikker, tre telefonopkald.

GraphQL er derimod som at have en personlig assistent: Når du først har givet dem adresserne til alle tre steder, kan du bare bede om, hvad du vil have ("skaff mig min renseri, en stor pizza og to dusin æg" ) og vent på, at de vender tilbage.

Med andre ord opretter GraphQL et standardsprog til at tale med denne magiske personlige assistent.

I praksis er en GraphQL API organiseret omkring tre hovedbygningsblokke: skemaet , forespørgsler og resolvere .

Forespørgsler

Den anmodning, du fremsætter til din personlige grafiske assistent, er forespørgslen , og den ser sådan ud:

query { stuff}

Vi erklærer en ny forespørgsel ved hjælp af querynøgleordet og beder derefter om et felt med navnet stuff. Det fantastiske ved GraphQL-forespørgsler er, at de understøtter indlejrede felter, så vi kan gå et niveau dybere:

query { stuff { eggs shirt pizza }}

Som du kan se, behøver klienten, der foretager forespørgslen, ikke bekymre sig om, hvilken "butik" dataene kommer fra. Bare spørg efter, hvad du har brug for, og lad GraphQL-serveren tage sig af resten.

Det er værd at bemærke, at forespørgselsfelter også kan pege på arrays . For eksempel er her et almindeligt mønster, når du spørger efter en liste over indlæg:

query { posts { # this is an array title body author { # we can go deeper! name avatarUrl profileUrl } }}

Forespørgselsfelter understøtter også argumenter . Hvis jeg vil vise et bestemt indlæg, kan jeg tilføje et idargument til postfeltet:

query { post(id: "123foo"){ title body author{ name avatarUrl profileUrl } }}

Endelig, hvis jeg vil gøre dette idargument dynamisk, kan jeg definere en variabel og derefter genbruge den inde i forespørgslen (bemærk at vi også navngiver forespørgslen her):

query getMyPost($id: String) { post(id: $id){ title body author{ name avatarUrl profileUrl } }}

En god måde at sætte alt dette i praksis på er at bruge GitHubs GraphQL API Explorer. Prøv for eksempel følgende forespørgsel:

query { repository(owner: "graphql", name: "graphql-js"){ name description }}

Bemærk, at når du prøver at skrive et nyt feltnavn nedenfor description, vil IDE automatisk tilbyde mulige feltnavne, der direkte udfyldes automatisk fra selve GraphQL API. Pænt!

Du kan lære mere om GraphQL-forespørgsler i den fremragende anatomi i en GraphQL-forespørgselsartikel.

Resolvere

Selv den bedste personlige assistent i verden kan ikke gå og få din renseri, medmindre du giver dem en adresse.

På samme måde ved din GraphQL-server ikke, hvad de skal gøre med en indgående forespørgsel, medmindre du fortæller det ved hjælp af en resolver .

En resolver fortæller GraphQL, hvordan og hvor de data, der svarer til et givet felt, skal hentes. For eksempel er her, hvordan en resolver for postfeltet ovenfor kan se ud (ved hjælp af Apollo's GraphQL-Tools-skema-generator):

Query: { post(root, args) { return Posts.find({ id: args.id }); }}

Vi sætter resolveren på, Queryfordi vi ønsker at søge postdirekte på rodniveauet. Men du kan også have resolvere til sub-områder, såsom en post's authorfelt:

Query: { post(root, args) { return Posts.find({ id: args.id }); }},Post: { author(post) { return Users.find({ id: post.authorId}) }}

Og bemærk, at dine opløsere ikke er begrænset til at returnere databasedokumenter. For eksempel, måske vil du føje en commentsCounttil din Posttype:

Post: { author(post) { return Users.find({ id: post.authorId}) }, commentsCount(post) { return Comments.find({ postId: post.id}).count() }}

Nøglebegrebet at forstå her er, at med GraphQL afkobles dit API-skema og dine databaseskemaer . Med andre ord, kan der ikke være nogen authorog commentsCountmarker i vores database, men vi kan ”simulere” dem i kraft af resolvere.

Som du har set, kan du skrive en hvilken som helst kode i en resolver. Derfor kan du også få dem til at ændre indholdet af din database, i hvilket tilfælde de er kendt som mutationsopløsere .

Skema

Alle disse gode ting er muliggjort af GraphQLs typeskema-system. Mit mål i dag er at give dig et hurtigt overblik mere end en udtømmende introduktion, så jeg vil ikke gå i detaljer her.

Når det er sagt, opfordrer jeg dig til at tjekke GraphQL-dokumentationen, hvis du gerne vil vide mere.

Ofte stillede spørgsmål

Lad os tage en pause for at besvare et par almindelige spørgsmål.

Du der, i ryggen. Ja dig. Jeg kan se, at du vil spørge noget. Gå videre, vær ikke genert!

Hvad er forholdet mellem GraphQL og grafdatabaser?

Ikke meget, virkelig, GraphQL har ikke noget at gøre med grafdatabaser som Neo4j. "Graf" -delen kommer fra ideen om at gennemgå din API-graf ved hjælp af felter og underfelter; mens "QL" står for "forespørgselssprog".

Jeg er helt tilfreds med REST, hvorfor skal jeg skifte til GraphQL?

Hvis du endnu ikke er stødt på de REST-smertepunkter, som GraphQL er beregnet til at tackle, så vil jeg sige, at det er en god ting!

Brug af GraphQL over REST påvirker sandsynligvis ikke din apps samlede brugeroplevelse så meget, så det er ikke et spørgsmål om liv eller død på nogen måde at skifte til det. Når det er sagt, vil jeg bestemt anbefale at prøve GraphQL på et lille sideprojekt, hvis du nogensinde får chancen.

Kan jeg bruge GraphQL uden React / Relay / * indsæt bibliotek her *?

Ja du kan! Da GraphQL kun er en specifikation, kan du bruge den med ethvert bibliotek på enhver platform, enten med en klient (for eksempel har Apollo GraphQL-klienter til internettet, iOS, Angular osv.) Eller ved at foretage dine egne opkald til en GraphQL server.

GraphQL blev lavet af Facebook, og jeg stoler ikke på Facebook

Igen er GraphQL en specifikation, hvilket betyder at du kan bruge GraphQL-implementeringer uden at køre en enkelt kodelinje skrevet af Facebook.

Og mens Facebooks support er afgjort et godt plus for GraphQL-økosystemet, tror jeg på dette tidspunkt, at samfundet er stort nok til, at GraphQL kan trives, selvom Facebook stopper med at bruge det.

Hele denne "lad klienten bede om de data, de har brug for" forretning lyder ikke særlig sikker for mig ...

Da du skriver dine egne resolvere, er det op til dig at løse eventuelle sikkerhedsproblemer på det niveau.

For eksempel, hvis du lader klienten specificere en limitparameter til at styre antallet af dokumenter, den modtager, vil du sandsynligvis dække dette nummer for at undgå angreb i denial-of-service-stil, hvor klienter beder om millioner af dokumenter igen og igen.

Så hvad har jeg brug for for at komme i gang?

Generelt skal du bruge mindst to komponenter til at køre en GraphQL-drevet app:

  • En GraphQL-server, der betjener din API.
  • En GraphQL-klient, der opretter forbindelse til dit slutpunkt.

Læs videre for at lære mere om de forskellige tilgængelige muligheder.

Nu hvor du har en god idé om, hvordan GraphQL fungerer, lad os tale om nogle af de vigtigste aktører i rummet.

GraphQL-servere

Den første mursten, du har brug for, er en GraphQL-server. GraphQL selv er trods alt bare en specifikation, så dette efterlader døren åben for et par konkurrerende implementeringer.

GraphQL-JS (Node)

Dette er den oprindelige referenceimplementering af GraphQL. Du kan bruge det sammen med express-graphql til at oprette din API-server.

GraphQL-server (knude)

Apollo-teamet har også deres egen all-in-one GraphQL-serverimplementering. Det er ikke så udbredt som originalen endnu, men er meget veldokumenteret og understøttet og vinder hurtigt terræn.

Andre platforme

GraphQL.org har en liste over GraphQL-implementeringer til forskellige andre platforme (PHP, Ruby osv.).

GraphQL-klienter

Selvom du teknisk kan spørge din GraphQL API direkte uden behov for et dedikeret klientbibliotek, kan det helt sikkert gøre dit liv lettere.

Relæ

Relay er Facebooks eget GraphQL-værktøjssæt. Jeg har ikke brugt det selv, men efter hvad jeg har hørt, er det hovedsageligt skræddersyet til Facebooks egne behov og kan være lidt overkonstrueret til de fleste anvendelser.

Apollo-klient

Den nye aktør i dette rum er Apollo, og den overtages hurtigt. Den typiske Apollo-klientstak består af to klodser:

  • Apollo-klient, som lader dig køre GraphQL-forespørgsler i browseren og gemme deres data (og har også sin egen devtools-udvidelse).
  • Et stik til din frontend-ramme efter eget valg (React-Apollo, Angular-Apollo osv.).

Bemærk, at Apollo-klienten som standard gemmer sine data ved hjælp af Redux, hvilket er fantastisk, da Redux i sig selv er et ret etableret statsstyringsbibliotek med et rigt økosystem.

Open Source-apps

Selvom GraphQL er ret nyt, er der allerede nogle lovende open source apps, der bruger det.

VulcanJS

For det første en ansvarsfraskrivelse: Jeg er førende vedligeholder af VulcanJS. Jeg oprettede VulcanJS for at lade folk udnytte kraften i React / GraphQL-stakken uden at skulle skrive så meget kedelplade. Du kan tænke på det som “Rails for the modern web ecosystem”, idet det lader dig opbygge CRUD-apps (såsom en Instagram-klon) på få timer.

Gatsby

Gatsby er en React statisk stedgenerator, som nu drives af GraphQL fra version 1.0. Selvom det måske virker som en underlig kombination i starten, er den faktisk ret kraftig. Under sin byggeproces kan Gatsby hente data fra flere GraphQL API'er og derefter bruge dem til at oprette en fuldt statisk React-app til kun klienter.

Andre GraphQL-værktøjer

GraphiQL

GraphiQL er en meget praktisk IDE i browseren til forespørgsel på GraphQL-slutpunkter.

DataLoader

På grund af den indlejrede karakter af GraphQL-forespørgsler kan en enkelt forespørgsel let udløse snesevis af databaseopkald. For at undgå at tage et præstationshit kan du bruge et batch- og cachebibliotek som DataLoader, udviklet af Facebook.

Opret GraphQL Server

Opret GraphQL Server er et kommandolinjeprogram, der gør det nemt hurtigt at stilladsere en GraphQL-server drevet af en Node-server og en Mongo-database.

GraphQL-up

I lighed med Create GraphQL Server giver GraphQL-up dig mulighed for hurtigt at starte en ny GraphQL-back-end, der drives af GraphCools service.

GraphQL-tjenester

Endelig er der også en række “GraphQL-backend-as-a-service” virksomheder, der tager sig af hele serversiden af ​​tingene for dig, og det kan være en god måde at dyppe tæerne i GraphQL-økosystemet.

Grafkøl

En fleksibel backend-platform, der kombinerer GraphQL og AWS Lambda med en gratis udviklerplan.

Scaphold

En anden GraphQL-backend som en tjeneste, som også har en gratis plan. Det tilbyder mange af de samme funktioner som Graphcool.

Der er allerede et par steder, hvor du kan børste op på GraphQL.

GraphQL.org

Det officielle GraphQL-websted har god dokumentation for at komme i gang.

LearnGraphQL

LearnGraphQL er et interaktivt kursus sammensat af folk på Kadira.

LearnApollo

En god opfølgning på LearnGraphQL, LearnApollo er et gratis kursus lavet af Graphcool.

Apollo-bloggen

Apollo-bloggen har masser af detaljerede, velskrevne indlæg om Apollo og GraphQL generelt.

GraphQL Ugentlig

Et nyhedsbrev om alle ting GraphQL kurateret af Graphcool-teamet.

Hashbang Ugentlig

Et andet godt nyhedsbrev, der også dækker React og Meteor ud over GraphQL.

Freecom

En tutorial-serie, der lærer dig, hvordan du opbygger en Intercom-klon ved hjælp af GraphQL.

Fantastisk GraphQL

En ret udtømmende liste over GraphQL-links og ressourcer.

Så hvordan omsætter du din nytilegnede GraphQL-viden i praksis? Her er et par opskrifter, du kan prøve:

Apollo + Graphcool + Next.js

Hvis du allerede er fortrolig med Next.js og React, vil dette eksempel lade dig opsætte dit GraphQL-slutpunkt ved hjælp af Graphcool og derefter spørge det ved hjælp af Apollo.

VulcanJS

Vulcan-tutorial tager dig gennem opsætning af et simpelt GraphQL-datalag, både på serveren og klienten. Da Vulcan er en alt-i-en-platform, er det en god måde at komme i gang uden opsætning. Hvis du har brug for hjælp, tøv ikke med at kigge forbi vores Slack-kanal!

Guide til GraphQL & React

Chroma-bloggen har en seksdelig tutorial om at opbygge en React / GraphQL-app efter en komponentdrevet udviklingsmetode.

Konklusion

GraphQL kan virke komplekse i starten, fordi det er en teknologi, der når ud over mange områder af moderne udvikling. Men hvis du tager dig tid til at forstå de underliggende begreber, tror jeg, du finder ud af, at meget af det bare giver mening.

Så hvad enten du ender med at bruge det eller ej, tror jeg det er værd at tage sig tid til at gøre dig bekendt med GraphQL. Flere og flere virksomheder og rammer vedtager det, og det kan meget vel ende med at blive en af ​​de vigtigste byggesten i Internettet i løbet af de næste par år.

Enig? Være uenig? Spørgsmål? Bare lad mig vide her i kommentarerne. Og hvis du har nydt denne artikel, kan du overveje at dele den!