Psát o výhodách samotného GraphQL je asi zbytečné. Stačí jen nekriticky říct, že: "Konečně máme smysluplný způsob jak získávat data z backendu na frontend."
GraphQL můžete implementovat v několika jazycích. Počínaje Javascriptem a třeba Javou konče. Nicméně, pokud to s GraphQL myslíte vážně, určitě bych se raději vydal cestou javascriptu. Důvod je čistě pragmatický a to ten, že v javascriptu budete mít nejlepší podporu a i samotní autoři tento jazyk berou jako výchozí.
Reálný projekt s GraphQL
V současné době naše firma ApiTree pracuje na projektu, který vyžaduje tvorbu veřejného API a také tvorbu uživatelského portálu, který používá právě zmíněné GraphQL API.Pro tento projekt jsme zvolili následující technologie:
- Typescript
- Next.js/React
- Apollo
- GraphQL
- Node.js
- Express
- CosmosDB/MongoDB
- Kubernetes
Tím, že na projektu pracuje více vývojářů, tak jsou rozděleni na své sféry vlivu. I přes to, že používáme jeden jazyk, tak je velice náročné nechat vývojáře stále přepínat mezi psaním backendu pomocí Mongoose a frontendu v podobě Next.js.
Pokud bychom vývoj rozdělili na backend a frontend, tak společným prvkem se stává samotné GraphQL schéma. Toto schéma potřebují znát obě strany.
Pro naše účely jsme tedy rozdělili projekt na několik systémů:
- Backend - Express, GraphQL Apollo server, Mongoose
- GraphQL - GraphQL schéma, GraphQL Apollo mock server
- Frontend - Next.js / React, GraphQL Apollo client
Strana backendu a frontendu je asi zřejmá, proto se pojďme spíše podívat, proč jsme zvolili samostatný projekt pro GraphQL API.
Projekt GraphQL schéma
Když jsme přemýšleli jak nejjednodušeji napsat GraphQL schéma, skončili jsme samozřejmě u toho, že píšeme čisté schéma v souborech s příponou *.graphql. Definice tohoto schématu obsahuje vše co potřebujeme. Definuje query, mutace, nabízí i jednoduchou dokumentaci v podobě description nad jednotlivými graphql objekty a atributy.Toto samotné schéma nic samo neumí, pouze definuje jak API bude vypadat.
Jelikož používáme Typescript, hodilo se nám, abychom z daného GraphQL schéma vygenerovali typovou definici, kterou poté použije jak backend, tak frontend. K tomuto účelu nám dobře posloužila knihovna GraphQL Code Generator. Poté jsme celý projekt vzali a vytvořili z něj NPM balík pomocí npm publish.
Nyní máme k dispozici GraphQL schéma s Typescript definicemi jak pro frontend tak pro backend.
Vedle toho jsme tento projekt využili ještě k jedné věci a tou je tvorba mock serveru. Tvorba tohoto mock serveru byla velice jednoduchá. Vzali jsme samotný soubor graphql a poslali ho do metody addMockFunctionsToSchema z knihovny graphql-tool. Pokud vezmeme samotné schéma, tak tato metoda nám nabízí výchozí mocky v podobě předem definovaného řetězce na string, number, apod. Nicméně tato volba je přepisovatelná, stejně jako implementování metody resolve. Zjednodušeně se dá říci, že napíšeme graphql schéma, pošleme do gitu a CircleCI nám zajistí jak tvorbu NPM balíčku pro frontend a backend, tak nám dále v Kubernetes vystaví mock server, který rovnou můžeme volat.
Závěr
Psát o tom, jak pomocí Apollo frameworku volat GraphQL v React komponentách je asi zbytečné, k tomu stačí jednoduchý tutoriál.Na straně backend serveru je to stejné. Vezmeme graphql definici a jen dopíšeme resolve metody. Ve spojení s Mongoose a samotnou typovou definicí z GraphQL schématu, máte vlastně hotové kontrolery a jen se dopisuje implementace.
Práce s GraphQL není jen velice rychlá a efektivní, ale i zábavná. Když k tomu připočteme takové věci jako je start Node.js serveru během několika milisekund, tak tvorba GraphQL API vlastně vzniká v realtime čase psaním graphql schéma souboru.
A co vy? Už jste na GraphQL přešli?
Žádné komentáře:
Okomentovat