kode24 sin serie «Hva er greia med..?» stiller de dumme spørsmålene, så du slipper. Denne gangen lurer vi på hva GraphQL egentlig er for noe.
«GraphQL is a query language for your API, and a server-side runtime for executing queries by using a type system you define for your data» forklarer dokumentasjonen, men hva er vitsen? Og hvordan kommer man i gang?
kode24 ringer utvikleren Michael Gunnulfsen i det London-baserte startup-selskapet Finimize for å bli klokere. Han utvikler akkurat nå Finimize sin iPhone-app, som bruker nettopp GraphQL og React Native for å hente dataen sin. Tidligere har han laget GraphQL-API-er hos Finn.
Gunnulfsen er frelst, og håper å overbevise deg, også.
Så Michael; hva er GraphQL? 🤔
De fleste apper henter data fra et API, og den klassiske tilnærmingen har vært med REST-spørringer til ulike API-endepunkter. Men det er en ganske gammel spesifikasjon, og det har skjedd ganske mye i dataverdenen.
Facebook så at de hadde enorme krav til deres databehov, begynte å se annerledes på det, og utviklet GraphQL. Tesen er at man i stedet for å hente data fra forskjellige tjenester og endepunkter, heller har et spørrespråk som lar deg definere nøyaktig de dataene du trenger. QL står for «query language».
Med REST henter man jo ofte altfor mye, bare for å hente nok data. Eller så henter man altfor lite, som gir mange spørringer. Det er veldig lite effektivt.
// eksempel på en GraphQL-spørring
{
hero {
name
friends {
name
}
}
}
// responsen kan da bli noe slikt
{
"data": {
"hero": {
"name": "R2-D2",
"friends": [
{
"name": "Luke Skywalker"
},
{
"name": "Han Solo"
}
]
}
}
}Og hva er de viktigste grunnene til at dere bruker GraphQL?
GraphQL er kjempebra for ytelsen, selvfølgelig. Og GraphQL er veldig opinionated, med føringer på hvordan ting skal lages, som gjør at det blir god kode av det. Men for vår del handlet det mest om at vi var en tidlig-fase start-up, som ikke helt hadde funnet rett produkt til vårt marked, og trengte å gjøre ekstremt hyppig iterasjon med ulike prototyper.
Vi starta med et REST-API og en Redux/React-app, med utrolig mange spørringer, masse parsing av props nedover treet og state-behandling som ble vanskelig å vedlikeholde.
Nå bruker vi kun React og GraphQL, med mye mindre kode, som er utrolig konsis og ekspressiv. Det blir så tydelig hva slags data hver komponent trenger, og man får en veldig ren arkitektur. Det har gjort det mye lettere for oss å kaste vekk «feilede eksperimenter», og endre eller legge til funksjoner.
Men er GraphQL bare for React? Og hvilke teknologier kan man bruke på serveren? 🛠️
Man kan bruke GraphQL i hva man vil på frontend. Du kan skrive en vanilla Javascript-frontend, eller bruke løsninger for blant annet React, Vue eller Angular. Selv bruker vi React Relay for vår React Native-app.
På serversida kan man bruke hvilke databaser man ønsker, og det finnes GraphQL-biblioteker til de fleste populære språk, som Node, Python og Java. Selv bruker vi Python med Django.
// eksempel på en GraphQL-server i Node, fra howtographql.com
const { GraphQLServer } = require('graphql-yoga')
// the typeDefs constant defines your GraphQL schema
const typeDefs = `
type Query {
info: String!
}
`
// the resolvers object is the actual implementation of the GraphQL schema
const resolvers = {
Query: {
info: () => `Jeg elsker kode24.`
}
}
// the schema and resolvers are bundled and passed to the GraphQLServer
const server = new GraphQLServer({
typeDefs,
resolvers,
})
server.start(() => console.log(`Server is running on http://localhost:4000`))
// spørringen 'query {info}' gir responsen '"data": {"info": "Jeg elsker kode24."}'Trenger man gjøre mye endringer på frontend-sida for å gå over til GraphQL? Utover nye spørringer?
Ja. I alle fall med React og Relay så er det en litt annerledes flyt i appen din med GraphQL.
Vanligvis, med REST, så er dataen mer adskilt fra komponentene som rendres. Du har data som flyter nedover fra toppen til komponentene dine. Men med GraphQL får du ikke det samme skillet; der flyter alt mer sømløst sammen, på en ny, sexy og elegant måte.
Hvorfor heter det JavaScript?
Og den største endringer ligger i hvordan du muterer dataen du har henta. Med Redux må du manuelt skrive hva som skal skje med dataen etter oppdateringer, som gir mer kode og potensielt flere bugs. Med Relay definerer du alt dette én gang, også blir all data du henter oppdatert automagisk. Det er helt fantastisk.
Du virker rimelig frelst! 👼 Men bør alle tjenester bruke en GraphQL-API?
Nei, nei, det vil jeg ikke si. Alle applikasjoner har forskjellige behov.
Om man ikke har avanserte behov for dataen man henter fra fra serveren, blir det kanskje litt overkill. Og i tjenester med mye sanntidsdata er det kanskje ikke alltid like optimalt å bruke GraphQL – selv om jeg er ganske sikker på at den lar deg gjøre dette, også.
// eksempel på mutasjon av data med GraphQL
// fra howtographql.com, i form av en Hacker News-klone
let links = [{
id: 'link-0',
url: 'www.howtographql.com',
description: 'Fullstack tutorial for GraphQL'
}]
let idCount = links.length
const resolvers = {
Query: {
info: () => `This is the API of a Hackernews Clone`,
feed: () => links,
},
Mutation: {
post: (root, args) => {
const link = {
id: `link-${idCount++}`,
description: args.description,
url: args.url,
}
links.push(link)
return link
}
},
}
// for å poste en lenke sender man denne spørringen
mutation {
post(
url: "www.kode24.no"
description: "Verdens beste internettside. <3"
) {
id
}
}Hvordan kommer man best i gang med GraphQL?
Et av hovedproblemene er dokumentasjonen; den er grusom å forholde seg til, uten tutorialer for nybegynnere. Da kan det være en fordel å bruke Apollo-rammeverket, som har en helt fantastisk dokumentasjon.
Min måte å lære meg native-GraphQL var å finne gode kodeeksempler, som jeg leste, kjørte og lekte meg med. Først etter det leste jeg dokumentasjonen, så jeg hadde en bedre kontekst.
Du finner mange gode eksempler på selve Github-prosjektene til GraphQL og Relay, og på Github-sida awsome-graphql. Også er howtographql.com en veldig bra side.
Wes Bos til kode24: - Disse teknologiene velger jeg!
Jeg har hørt om noe som heter Prisma i GraphQL-sammenheng. Hva er det, egentlig? 😵
Prisma er en tjeneste som lar deg definere datafelter og automatisk lager en GraphQL-server for deg. Når du skal bygge noe så fort som overhodet mulig, for å lansere raskt og få tilbakemeldinger, så er Prisma helt kurant.
Jeg har en fyr på teamet som er markedsføringsnerd uten backend-erfaring, men han bygger Prisma-baserte apper hele tida. Det krever ingen kode, og du kan veldig lett deploye serveren hvor du vil.
Jøss! Hvorfor bruker ikke dere Prisma, da?
Hadde jeg kunne gått tilbake i tid, så hadde jeg gjort det med én gang. Helt seriøst.
