GraphQL: forespørgsler gjort let

Hvis du har læst om de nyeste tendenser inden for front-end-udvikling, har du måske hørt noget brummer om noget, der hedder GraphQL. I denne artikel vil vi dække, hvad GraphQL er (og ikke er), nogle af de bedste fremgangsmåder bag GraphQL, og vigtigst af alt, hvorfor det gør dit job som front-end-udvikler meget lettere.

Bemærk: Dette er ikke meningen at være en GraphQL-tutorial. Denne artikel er kun beregnet til at beskrive, hvorfor GraphQL gør dit job som en front-end udvikler lettere.

Hvad er GraphQL?

GraphQL er et forespørgselssprog oprettet af Facebook. Det giver dig mulighed for, front-end-udvikleren, at skrive forespørgsler, der har den nøjagtige dataform, du ønsker.

Det er vigtigt at bemærke, at det trods navnet "GraphQL" ikke er beregnet til at være et databasesprog. Faktisk har jeg brugt GraphQL med mange databaser, herunder SQL, MongoDB og endda et REST API, der er forbundet til en database (og jeg ved ikke engang, hvad databasesproget blev skrevet i).

I stedet giver GraphQL på serveren dig mulighed for at definere, hvordan du vil hente dine data. På klienten kan du derefter udføre en forespørgsel, der har den nøjagtige dataform, du ønsker, og de data, du får tilbage, vil have den samme form som forespørgslen.

For eksempel:

Det svar, du får tilbage, vil se noget lignende ud:

Der vil være andre metadata i svaret, men du kan allerede se, hvor magtfuld GraphQL er - ingen grund til at normalisere nogen af ​​dine data på klienten. Arbejdet skubbes til serveren.

Da denne artikel er mere orienteret mod front-end-udviklere, får jeg ikke for meget detaljeret information om, hvordan GraphQL fungerer på serveren. Det, der får den "magi" til at ske, er imidlertid GraphQL-skemaet, som giver dig mulighed for at definere typer, der bruges på tværs af server og klient. Her er et eksempel på et skema til en hypotetisk app:

Bare ved at se på skemaet, kan du allerede fortælle, hvad formen på dine data vil være, og hvilke typer der forventes. Dette gør det muligt for dig, front-end-udvikleren, at kende flere vigtige egenskaber ved en forespørgsel, såsom hvis den tager argumenter, hvis det er en liste eller bare en "enhed", og hvis det er en bestemt enhed, hvilke felter den enhed har ( i dette tilfælde har enhedsbrugeren feltnavn og e-mail).

I tilfælde af brugerforespørgsel kan vi se, at det indtager et argument kaldet brugernavn, som har en type streng. Det ! angiver, at feltet er påkrævet, så hvis det ikke leveres, kastes en fejl.

Som front-end-udvikler vil du sandsynligvis ikke arbejde for meget med skemaet, men det vil fungere som et vigtigt dokument, der giver dig mulighed for at vide, hvilke spørgsmål du har lov til at stille.

Sammenlign det med andre API-standarder, såsom Swagger for REST API'er - du er nødt til at stole på, at den, der skrev dokumentation, skrev den rigtig godt, med alle kantsager og -typer dokumenteret. Swagger "håndhæver" ikke nøjagtigt kontrol af typen for forskellige felter og sådan, så du kan have en gyldig Swagger YAML-fil, der stadig er utroligt svært at navigere.

Imidlertid vil ethvert gyldigt GraphQL-skema i sig selv være meget nyttigt for enhver at vide, hvilke slags data de har at gøre med, selvom det ikke korrekt kommenteres og dokumenteres.

Dette er ikke beregnet til at grave på Swagger eller sige det er forfærdeligt - brugt korrekt, Swagger kan være meget nyttigt. Men det er det advarsel - det skal bruges korrekt, og da udviklere har en tendens til at bevæge sig ekstremt hurtigt, kan korrekt dokumentation ofte tage baghovedet til at opbygge nye og spændende funktioner / API'er.

Sådan bruges GraphQL på klienten

Dette er sjovt. På klientsiden er der mange måder at bruge GraphQL på klienten.

En af de mest populære måder at bruge GraphQL er at bruge et bibliotek kaldet apollo-client. Apollo Client kan interface med React, Vue, Angular og mere.

Nu opdaterede Apollo Client for nylig til 2.0-udgivelsen. Det er absolut ikke bagudkompatibelt med 1.0-frigivelsen, hvor mange pakker skifter navne og hele API'er skifter. Jeg har langsomt gjort mig bekendt med 2.0-udgivelsen, men der er stadig nogle ting, jeg var i stand til at gøre i 1.0, som jeg ikke længere kan gøre i 2.0, såsom Redux-integration i mine React-apps. På grund af dette ville jeg betragte 1.0 og 2.0 som helt forskellige måder at bruge GraphQL på klienten.

Det overordnede koncept er imidlertid det samme: Indpak hele din app i en Apollo-udbyder (svarende til, hvordan du ville gøre med Redux), og nu har alle dine komponenter adgang til klienten og kan skrive forespørgsler og mutationer til serveren.

Apollo Client gør en masse cool “bag kulisserne” ting, som du forventer skal være standard, men tilsyneladende ikke er det. Et eksempel er "batching" -forespørgsler. Hvis jeg indlæser en komponent, der indlæser to forskellige forespørgsler, er standardindstillingen at sende to forskellige anmodninger. Apollo Client har dog muligheden for at "batches" disse forespørgsler, der placerer begge disse forespørgsler i en enkelt anmodning og sender det op til serveren og gemmer nogle HTTP-anmodninger.

Apollo Client har også en meget robust cache-funktion, der får komponenter til at hente fra cachen først. Derefter udsender den faktisk en anmodning, hvis cachen er uaktuel (normalt 100ms gammel, men kan konfigureres).

Her er et eksempel på at indstille en Apollo-klient og udstede en forespørgsel:

Dette bruger ikke engang React. Hvis du skulle implementere React, kunne du faktisk vedhæfte forespørgslen til React Component, så den modtager forespørgseldataene som rekvisitter.

Den anden måde at bruge GraphQL på klienten er ved at bruge Relay, der kun fungerer med React. Så ked af Vue devs, du kan ikke bruge Relay.

Jeg har ikke brugt Relay for meget, men det har bestemt en stejlere læringskurve end Apollo. Det ser ud til, at du er nødt til at "DIY" for en masse ting, såsom cache og endda skemaimplementering. Du kan se på nogle af eksemplerne her for at få et overblik over, hvordan Relay fungerer, og hvordan det ligner og adskiller sig fra Apollo.

Når du først har konfigureret Relay, fungerer det faktisk meget på samme måde som hvordan Apollo Client og react-apollo fungerer sammen, idet det sender dataene som rekvisitter til komponenten.

Indpakning af det

Jeg håber, at denne artikel var nyttig for dig i beslutningen om du skulle bruge GraphQL eller ej. For mig er det bare at kende formen på de data, der kommer ind, mit front-end-arbejde enormt lettere. Og hvis dataene ikke kommer korrekt ind, ændrer jeg dem i skemaet i back-end og opdaterer den nødvendige serverside-kode.

Hvis denne artikel har vakt din interesse i at lære GraphQL, foreslår jeg, at du tager et dybere kig på den officielle GraphQL-tutorial: Sådan GraphQL.

Ha det sjovt med forespørgsler!