GraphQL oktatóanyag kezdőknek: Mi az, szolgáltatások és példa

Mi az a GraphQL?

GraphQL egy alkalmazásrétegbeli szerveroldali technológia, amelyet a Facebook (ma Meta) fejlesztett ki lekérdezések végrehajtására meglévő adatokkal. 2015-ben jelent meg nyilvánosan, és a GraphQL szabályozza. Foundation 2018 óta. A GraphQL képes optimalizálni a RESTful API hívásokat. Deklaratív módot biztosít az adatok lekérésére és frissítésére. A GraphQL segít az adatok szerverről kliensre való betöltésében. Lehetővé teszi a programozók számára, hogy kiválasszák a kívánt kéréstípusokat.

Mit kell megtanulnod a GraphQL elsajátítása előtt?

Ez a GraphQL oktatóanyag a expressz és a NodeJs. Ezért nagyon könnyen megtanulhatja a GraphQL-t a NodeJS alapvető ismereteivel.

Miért használja a GraphQL-t?

A GraphQL használatának okai a következők:

• Ember által olvasható lekérdezést biztosít.
• A GraphQL-ben nagyon könnyű kezelni számos adatbázist.
• Alkalmas mikroszolgáltatásokhoz és összetett rendszerekhez.
• Egyetlen API-hívással lekérheti az adatokat.
• Segít a lekérdezések kötegelésénél és gyorsítótárazásánál.
• Nem kell szembenéznie a túl- és alulhívási problémákkal.
• A kéréseket az Ön igényeihez igazítjuk.
• Segít megtalálni a sémát a megfelelő formátumban.
• A GraphQL automatikusan szinkronban tartja a dokumentációt az API-módosításokkal.
• Az API evolúciója verziószámítás nélkül is lehetséges.
• A GraphQL-mezőket több lekérdezésben használják, amelyek megoszthatók magasabb komponensszinten újrafelhasználás céljából.
• Kiválaszthatja, hogy mely funkciókat jelenítse meg, és hogyan működjenek.
• Gyors prototípus alkalmazáshoz használhatóping.

A GraphQL alkalmazásai

Íme a GraphQL fontos alkalmazásai:

• Relay és egyéb kliens keretrendszereket biztosít
• A GraphQL segít a mobilalkalmazás teljesítményének javításában.
• Csökkentheti a túlzott letöltési problémát, és csökkentheti a szerveroldali felhőszolgáltatást, és csökkentheti az ügyféloldali hálózathasználatot.
• Akkor használható, ha az ügyfélalkalmazásnak meg kell adnia, hogy mely mezőkre van szükség hosszú lekérdezési formátumban.
• A GraphQL teljes mértékben kihasználható, ha funkcionalitást kell hozzáadnia a régi vagy meglévő API-jához.
• Akkor használatos, ha összetett API-t kell egyszerűsítenie.
• Keverje össze és keverje össze a homlokzati mintát, amelyet gyakran használnak az objektum-orientált programozásban.
• Amikor egynél több helyről kell adatokat összesítenie egyetlen kényelmes API-ba.
• Használhatod a GraphQL-t hasizmokkénttracegy meglévő API-n a felhasználói igények alapján meghatározott válaszstruktúra meghatározásához.

Ezek az előnyök mind három mozgó alkatrész együttműködésén alapulnak.

GraphQL kulcskomponensek

Most ebben a GraphQL oktatóanyagban tanuljuk meg a GraphQL legfontosabb összetevőit:

Amint a fenti ábrán látható, a GraphQL három kulcsfontosságú összetevője van: 1) Query, 2) Resolver és 3) Schema.

Kérdés

A lekérdezés egy API-kérelem, amelyet az ügyfélgép-alkalmazás küld. Támogatja a bővítéseket és a tömbökre mutat. A lekérdezés értékek olvasására vagy lekérésére szolgál.

A lekérdezés részei:

Az alábbiakban a Query fontos részei találhatók

1. Mező:

Egy mező egyszerűen azt jelzi, hogy a szervertől kérünk egy adott információt. A következő GraphQL példa egy mezőre egy GraphQL lekérdezésben.

query {
    team {
        id
        name
    }
}

A szerver egy JSON dokumentummal válaszol, amelynek alakja tükrözi a lekérdezést:

{
    "data": {
        "team": [
            {
                "id": 1,
                "name": "Avengers"
            }
        ]
    }
}

A fenti GraphQL példában a szervertől a csapat nevű mezőt és annak almezőit, például az azonosítót és a nevet kérjük. A GraphQL szerver pontosan a kért adatokat adja vissza.

2. érvek

In REST, csak egyetlen argumentumkészletet adhatunk át, mivel URL szegmensek és lekérdezési paraméterek. Egy adott profil lekéréséhez egy tipikus REST hívás a következőképpen néz ki:

GET /api/team?id=2
Content-Type: application/json

{
    "id": 2,
    "name": "Justice League"
}

rezolverhez

A feloldók útmutatást adnak a GraphQL-művelet adatokká konvertálásához. Feloldófüggvények meghatározásával oldják fel az adatok lekérdezését.

Megjeleníti a szervernek a folyamatot, valamint az adatok lekérésének helyét egy adott mező szerint. A feloldó az adatbázissémát és az API-sémát is elválasztja egymástól. Az elkülönített információ segít az adatbázisból nyert tartalom módosításában.

Séma

A GraphQL séma a GraphQL megvalósításának központja. Leírja a hozzá csatlakozó ügyfelek számára elérhető funkciókat.

A GraphQL jellemzői

Íme a GraphQL fontos funkciói:

• Deklaratív lekérdezési nyelvet biztosít, ami nem feltétlenül szükséges.
• Hierarchikus és termékközpontú.
• A GraphQL erősen begépelt. Ez azt jelenti, hogy a lekérdezéseket egy adott rendszer kontextusában hajtják végre.
• A GraphQL lekérdezései a kliensben vannak kódolva, nem a szerverben.
• Az OSI modell alkalmazási rétegének minden funkciójával rendelkezik.

GraphQL kliensek

A GraphQL kliens egy olyan kód, amely POST kéréseket küld a megfelelő GraphQL kiszolgálóhoz. A GraphQL API-t közvetlenül is lekérdezheti, de a jó megközelítés egy dedikált klienskönyvtár kihasználása a Relay használatával.

Ez a JavaA szkriptkönyvtárat a Facebook fejlesztette ki, hogy React alkalmazásokat készítsen GraphQL-lel. A GraphQL kliensek lehetnek CMS-ek, például Drupal, egyoldalas alkalmazás, mobilalkalmazás stb.

GraphQL szerverek

A GraphQL szerverek a GraphQL specifikációjának szerveroldali implementációi. Az adatait GraphQL API-ként ábrázolja, amelyet a kliensprogram lekérdezhet a következőkért: adatbázis.

GraphQL átjárók

Az átjáró egy mikroszolgáltatás-minta, ahol különálló szolgáltatást hozhat létre más háttérszolgáltatásokkal való együttműködéshez. Működőképes dokumentációt kínál, és kényelmes módot biztosít az adatok több forrásból történő gyűjtésére egyetlen kéréssel.

A GraphQL-nek van egy jó módja a dinamikus értékek faktorizálására a lekérdezésből. Külön szótárként adja át őket. Ezeket az értékeket változóknak nevezzük. Amikor változókkal dolgozunk, a következő három dolgot kell tennünk:

1. Cserélje le a statikus értéket a lekérdezésben egy változónévre.
2. Deklarálja a változó nevét a GraphQL lekérdezés által elfogadott változók közé.
3. Adja át az értéket a változók szállítás-specifikus szótárában.

Így néz ki összességében. Először a lekérdezés, amely deklarálja a változót:

query HeroNameAndFriends($episode: Episode) {
    hero(episode: $episode) {
        name
        friends {
            name
        }
    }
}

Ezután a változóértékek különálló szótárát küldjük el vele együtt:

{
    "episode": "JEDI"
}

És a szerver által visszaadott válasz:

{
    "data": {
        "hero": {
            "name": "R2-D2",
            "friends": [
                { "name": "Luke Skywalker" },
                { "name": "Han Solo" },
                { "name": "Leia Organa" }
            ]
        }
    }
}

Amint a fenti GraphQL-példában is látható, egyszerűen egy másik változót adtunk át, amely nem szükséges egy új lekérdezés létrehozásához.

Mi az a mutáció?

A mutáció az adatkészlet megváltoztatásának módja a GraphQL-ben. Módosítja az adatokat az adattárban, és értéket ad vissza. A mutációk segítenek az adatok beszúrásában, frissítésében vagy törlésében. A mutációkat általában sémarészként definiálják.

A GraphQL mutációk tervezése során figyelembe veendő szempontok

Íme a GraphQL tervezésének fontos pontjai:

• Elnevezés: Először is meg kell nevezned a mutációid igét. Ezután a főnév, vagy adott esetben a „tárgy”. Használja a camelCase-t a mutációk elnevezéséhez.
• Részletesség: Mutáció-specifikussá kell tenni, amennyire csak lehetséges. A mutációknak a felhasználó szemantikai műveleteit kell képviselniük.
• Beviteli objektum: Használjon egyetlen, egyedi, kötelező bemeneti objektumtípust argumentumként a mutáció végrehajtásához az ügyfélen.
• Egyedi rakománytípus: Minden mutációhoz egyedi rakománytípust kell használni. A mutáció kimenetét mezőként is hozzáadhatja az adott rakománytípushoz.
• Fészkelődés: Használja a beágyazást a mutációjához, ahol annak van értelme. Lehetővé teszi a GraphQL API teljes körű kihasználását.

A lekérdezések olvasnak, a mutációk írnak. Egy harmadik művelettípus azokat az adatokat fedi le, amelyek akkor változnak, amikor a kliens még csatlakoztatva van.

Mi az az előfizetés a GraphQL-ben?

A előfizetés a GraphQL specifikáció harmadik művelettípusa a lekérdezés és a mutáció mellett. A lekérdezés és a mutáció egyetlen kérésben és válasszal fejeződik be. Egy előfizetés ehelyett egy hosszú élettartamú kapcsolatot tart nyitva, általában WebSockets-en keresztül, így a szerver minden alkalommal új eredményt küld a kliensnek, amikor egy megadott esemény bekövetkezik.

A szintaxis egy lekérdezést tükröz, ahol a „subscription” kulcsszó helyettesíti a „query”-t:

subscription OnCommentAdded($postId: ID!) {
    commentAdded(postId: $postId) {
        id
        content
        author {
            name
        }
    }
}

A gyakorlatban három pont különbözteti meg az előfizetéseket.

• Eseményvezérelt, nem lekérdezett: A kliens egyszer regisztrálja az érdeklődését. További küldés nem történik, amíg a szerver nem tesz közzé egyező eseményt, ami sokkal olcsóbb, mint az ismételt lekérdezés.
• Egy gyökérmező előfizetésenként: A specifikáció csak egyetlen legfelső szintű mezőt engedélyez, ellentétben egy lekérdezéssel, amely egyszerre többet is kérhet.
• Legjobb kis méretben tartani: Csak azokat a mezőket kell kitölteni, amelyeknek a felületnek frissülnie kell. Az élő chat, az értesítések és az árlistázók a tipikus felhasználási módok.

A GraphQL és a REST közötti különbség

Az alábbi táblázat fontos különbséget mutat be GraphQL és REST.

A GraphQL által használt nyílt forráskódú alkalmazások és eszközök

A GraphQL által használt fontos nyílt forráskódú alkalmazások és eszközök a következők:

• GatsbyA Gatsby egy GraphQL-alapú alkalmazás, amely több GraphQL API-forrásból származó adatokat is képes felhasználni. Használható statikus és kliensalapú React alkalmazások fejlesztésére.
• GraphiQL: Ez egy IDE, amely integrálódik a böngészővel, és a GraphQL API-jával is kommunikál. A GraphiQL olyan függvényeket tartalmaz, mint a mutációk, az adatlekérdezés és az automatikus kiegészítésű lekérdezések.
• GraphQL játszótér: Ez egy hatékony IDE, amely beépített szerkesztővel rendelkezik a mutációk, validáció, GraphQl lekérdezések, előfizetések stb. kezeléséhez. A fejlesztő ezt az IDE-t használhatja a séma szerkezetének vizualizálására. A projektet már nem támogatják, és funkcióit visszaépítették a GraphiQL-be.
• Prizma: A Prisma egy adatbázis-abszolút rendszer.tracciós réteg, amely mostantól típusbiztos ORM-ként érhető el, és széles körben párosítva van egy GraphQL szerverrel a CRUD (létrehozás, olvasás, frissítés és törlés) műveletek elérhetővé tételéhez.
• Bit: Ez egy nyílt forráskódú eszköz és platform, amely az újrafelhasználható kódot komponensekké alakítja. A fejlesztők felhasználhatják őket különféle projektek megosztására és fejlesztésére.

GYIK