GraphQL-opetusohjelma aloittelijoille: Mikä on, ominaisuudet ja esimerkki

Mikä on GraphQL?

GraphQL on sovelluskerroksen palvelinpuolen teknologia, jonka kehitti Facebook, nykyinen Meta, kyselyiden suorittamiseen olemassa olevalla datalla. Se julkaistiin julkisesti vuonna 2015, ja sitä on hallinnoitu GraphQL:n avulla. Foundation vuodesta 2018. GraphQL voi optimoida RESTful API -kutsuja. Se tarjoaa deklaratiivisen tavan hakea ja päivittää dataa. GraphQL auttaa lataamaan dataa palvelimelta asiakkaalle. Se antaa ohjelmoijille mahdollisuuden valita, minkä tyyppisiä pyyntöjä he haluavat tehdä.

Mitä sinun täytyy oppia ennen GraphQL:n oppimista?

Tämä GraphQL-opetusohjelma perustuu Ilmaista ja SolmuJs. Siksi voit oppia GraphQL:n erittäin helposti NodeJS:n perusymmärryksellä.

Miksi käyttää GraphQL:ää?

Seuraavat syyt GraphQL:n käyttöön:

• Se tarjoaa ihmisen luettavissa olevan kyselyn.
• GraphQL:ssa on erittäin helppo käsitellä useita tietokantoja.
• Se sopii mikropalveluihin ja monimutkaisiin järjestelmiin.
• Voit hakea tietoja yhdellä API-kutsulla.
• Se auttaa sinua kyselyjen erässä ja välimuistissa.
• Et kohtaa yli- tai alilatausongelmia.
• Toiveiden räätälöinti tarpeidesi mukaan.
• Se auttaa sinua löytämään skeeman sopivassa muodossa.
• GraphQL pitää dokumentaation automaattisesti synkronoituna API-muutosten kanssa.
• API-kehitys on mahdollista ilman versiointia.
• GraphQL-kenttiä käytetään useissa kyselyissä, jotka voidaan jakaa korkeammalle komponenttitasolle uudelleenkäyttöä varten.
• Voit valita, mitkä toiminnot näkyvät ja miten ne toimivat.
• Sitä voidaan käyttää nopeaan prototyyppisovellukseenping.

GraphQL:n sovellukset

Tässä ovat GraphQL:n tärkeät sovellukset:

• Se tarjoaa Relay- ja muut asiakaskehykset
• GraphQL auttaa sinua parantamaan mobiilisovelluksen suorituskykyä.
• Se voi vähentää ylihaku-ongelmaa alentamaan palvelinpuolen pilvipalvelua ja vähentämään asiakaspuolen verkon käyttöä.
• Sitä voidaan käyttää, kun asiakassovelluksen on määritettävä, mitä kenttiä tarvitaan pitkän kyselyn muodossa.
• GraphQL:ää voidaan hyödyntää täysimääräisesti, kun joudut lisäämään toimintoja vanhaan tai olemassa olevaan API:hen.
• Sitä käytetään, kun sinun on yksinkertaistettava monimutkainen API.
• Sekoita ja sekoita julkisivukuvio, jota käytetään yleisesti olio-ohjelmoinnissa.
• Kun sinun on koottava tiedot useammasta kuin yhdestä paikasta yhdeksi käteväksi API:ksi.
• Voit käyttää GraphQL:ää vatsalihasliikeharjoituksessatracolemassa olevaan API:in perustuen vastausrakenteen määrittämiseksi käyttäjän tarpeiden perusteella.

Nämä hyödyt perustuvat kaikki kolmeen liikkuvaan osaan, jotka toimivat yhdessä.

GraphQL:n avainkomponentit

Tässä GraphQL-opetusohjelmassa opitaan GraphQL:n avainkomponentit:

Kuten yllä olevasta kuvasta näkyy, GraphQL:ssä on kolme avainkomponenttia: 1) Query, 2) Resolver ja 3) Schema.

Kysymys

Kysely on asiakaskonesovelluksen tekemä API-pyyntö. Se tukee lisäyksiä ja osoittaa taulukoihin. Kyselyä käytetään arvojen lukemiseen tai hakemiseen.

Kyselyn osat:

Seuraavassa on kyselyn tärkeät osat

1. Ala:

Kenttä yksinkertaisesti osoittaa, että pyydämme palvelimelta tiettyä tietoa. Seuraavassa on GraphQL-esimerkki kentästä GraphQL-kyselyssä.

query {
    team {
        id
        name
    }
}

Palvelin vastaa JSON-dokumentilla, jonka muoto peilaa kyselyä:

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

Yllä olevassa GraphQL-esimerkissä pyydämme palvelimelta kenttää nimeltä team ja sen alikenttiä, kuten id ja name. GraphQL-palvelin palauttaa täsmälleen pyytämämme tiedot.

2. argumentit

In REST, voimme välittää vain yhden argumenttijoukon, koska URL segmentit ja kyselyparametrit. Tietyn profiilin hakemiseksi tyypillinen REST-kutsu näyttää seuraavalta:

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

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

resolveri

Resolverit tarjoavat ohjeet GraphQL-toiminnan muuntamiseen tiedoiksi. Ne ratkaisevat kyselyn tietoihin määrittämällä ratkaisijafunktiot.

Se näyttää palvelimelle prosessin sekä sijainnin tietojen hakemiseksi tietyn kentän mukaan. Ratkaisija erottaa myös tietokantaskeeman ja API-skeeman. Erotetut tiedot auttavat muokkaamaan tietokannasta saatua sisältöä.

Malli

GraphQL-skeema on GraphQL-toteutuksen keskus. Se kuvaa toiminnallisuutta, joka on käytettävissä siihen muodostavien asiakkaiden käytettävissä.

GraphQL:n ominaisuudet

Tässä on GraphQL:n tärkeitä ominaisuuksia:

• Se tarjoaa deklaratiivisen kyselykielen, mikä ei ole välttämätöntä.
• Se on hierarkkinen ja tuotekeskeinen.
• GraphQL on vahvasti kirjoitettu. Se tarkoittaa, että kyselyt suoritetaan tietyn järjestelmän puitteissa.
• GraphQL:n kyselyt on koodattu asiakkaaseen, ei palvelimeen.
• Siinä on kaikki OSI-mallin sovelluskerroksen ominaisuudet.

GraphQL-asiakkaat

GraphQL-asiakas on koodi, joka tekee POST-pyynnöt asiaankuuluvalle GraphQL-palvelimelle. Voit tehdä kyselyn suoraan GraphQL API:sta, mutta hyvä tapa on hyödyntää omaa asiakaskirjastoa Relayn avulla.

Tämä JavaSkriptikirjasto on Facebookin kehittämä React-sovellusten tekemiseen GraphQL:n avulla. GraphQL-asiakkaat voivat olla sisällönhallintajärjestelmiä, kuten Drupal, yksisivuinen sovellus, mobiilisovellus jne.

GraphQL-palvelimet

GraphQL-palvelimet ovat GraphQL-spesifikaation palvelinpuolen toteutuksia. Se kuvaa datasi GraphQL API:na, jota asiakasohjelmasi voi kysellä tietokanta.

GraphQL-yhdyskäytävät

Yhdyskäytävä on mikropalvelumalli, jossa voit rakentaa erillisen palvelun selviytymään muista taustapalveluista. Se tarjoaa toimivan dokumentaation ja antaa kätevän tavan kerätä dataa useammasta kuin yhdestä lähteestä yhdellä pyynnöllä.

GraphQL:lla on yksi hyvä tapa jakaa kyselyn dynaamiset arvot tekijöihin. Se välittää ne erillisenä sanakirjana. Näitä arvoja kutsutaan muuttujiksi. Aina kun työskentelemme muuttujien kanssa, meidän on tehtävä seuraavat kolme asiaa:

1. Korvaa kyselyn staattinen arvo muuttujan nimellä.
2. Ilmoita muuttujan nimi yhdeksi muuttujista, jotka GraphQL-kysely hyväksyy.
3. Välitä arvo kuljetuskohtaisessa muuttujien sanakirjassa.

Näin se näyttää kokonaisuudessaan. Ensin kysely, joka määrittää muuttujan:

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

Sitten sen mukana lähetetty erillinen muuttujien arvojen sanakirja:

{
    "episode": "JEDI"
}

Ja palvelimen palauttama vastaus:

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

Kuten yllä olevasta GraphQL-esimerkistä näet, olemme yksinkertaisesti välittäneet toisen muuttujan kuin uuden kyselyn luomisen.

Mikä on mutaatio?

Mutaatio on tapa muuttaa datajoukkoa GraphQL:ssä. Se muokkaa tietovaraston tietoja ja palauttaa arvon. Mutaatiot auttavat sinua lisäämään, päivittämään tai poistamaan tietoja. Yleensä mutaatiot määritellään skeemaosiksi.

Huomioitavaa GraphQL-mutaatioita suunniteltaessa

Tässä ovat tärkeät kohdat GraphQL:n suunnittelussa:

• Nimeäminen: Ensinnäkin sinun on nimettävä mutaatioverbi. Sitten substantiivi tai "objekti" tarvittaessa. Käytä camelCasea mutaatioiden nimeämisessä.
• Tarkkuus: Sinun on tehtävä mutaatiospesifisiä niin paljon kuin mahdollista. Mutaatioiden tulee edustaa käyttäjän suorittamia semanttisia toimia.
• Syöteobjekti: Käytä yhtä, ainutlaatuista, pakollista syöteobjektityyppiä argumenttina mutaation suorittamiseksi asiakkaalla.
• Ainutlaatuinen hyötykuormatyyppi: Sinun tulee käyttää ainutlaatuista hyötykuormatyyppiä jokaiselle mutaatiolle. Voit myös lisätä mutaatiotulosteen kenttään kyseiseen hyötykuormatyyppiin.
• Pesiminen: Käytä sisäkkäisyyttä mutaatioosi missä se on järkevää. Sen avulla voit hyödyntää täysimääräisesti GraphQL API:ta.

Kyselyt lukevat ja mutaatiot kirjoittavat. Kolmas operaatiotyyppi kattaa tiedot, jotka muuttuvat asiakkaan ollessa vielä yhteydessä.

Mikä on tilaus GraphQL:ssä?

A tilaus on GraphQL-spesifikaation kolmas operaatiotyyppi queryn ja mutationin ohella. Sekä kysely että mutaatio suoritetaan yhdellä pyynnöllä ja vastauksella. Tilaus sen sijaan pitää pitkäikäisen yhteyden auki, yleensä WebSocketsin kautta, joten palvelin lähettää uuden tuloksen asiakkaalle joka kerta, kun määritetty tapahtuma tapahtuu.

Syntaksi peilaa kyselyä, jossa avainsana subscription korvaa kyselyn:

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

Käytännössä tilaukset eroavat toisistaan ​​kolmella tavalla.

• Tapahtumapohjainen, ei kyselyyn perustuva: Asiakas ilmoittaa kiinnostuksestaan ​​kerran. Mitään ei lähetetä enempää, ennen kuin palvelin julkaisee vastaavan tapahtuman, mikä on paljon halvempaa kuin toistuva kysely.
• Yksi juurikenttä tilausta kohden: Määritys sallii vain yhden ylimmän tason kentän, toisin kuin kysely, joka voi pyytää useita kerralla.
• Parhaimmillaan pieninä pidettyinä: Täytä vain ne kentät, jotka käyttöliittymän on päivitettävä. Tyypillisiä käyttötarkoituksia ovat live-chat, ilmoitukset ja hintatiedotteet.

Ero GraphQL:n ja REST:n välillä

Seuraava taulukko näyttää tärkeän eron GraphQL ja REST.

GraphQL:n käyttämät avoimen lähdekoodin sovellukset ja työkalut

GraphQL:n käyttämät tärkeät avoimen lähdekoodin sovellukset ja työkalut ovat seuraavat:

• gatsbyGatsby on GraphQL:ään perustuva sovellus, joka voi käyttää useammasta kuin yhdestä GraphQL API -lähteestä peräisin olevaa dataa. Voit käyttää sitä staattisen ja asiakaspohjaisen React-sovelluksen kehittämiseen.
• GraphiQL: Se on IDE, joka integroituu selaimeen ja on myös vuorovaikutuksessa GraphQL:n API:n kanssa. Joitakin GraphiQL:n sisältämiä toimintoja ovat mutaatiot, datakyselyt ja automaattisesti täydentävät kyselyt.
• GraphQL leikkikenttä: Se on tehokas IDE, jossa on sisäänrakennettu editori mutaatioiden, validoinnin, GraphQl-kyselyiden, tilausten jne. käsittelyyn. Kehittäjä voi käyttää tätä IDE:tä skeeman rakenteen visualisointiin. Projekti on nyt poistettu käytöstä, ja sen ominaisuudet on palautettu GraphiQL:ään.
• Prisma: Prisma on tietokanta-abstraction-kerros, joka toimitetaan nyt tyyppiturvallisena ORM:nä ja jota käytetään laajalti yhdessä GraphQL-palvelimen kanssa CRUD-toimintojen (Create, Read, Update ja Delete) paljastamiseksi.
• Bitti: Se on avoimen lähdekoodin työkalu ja alusta, joka muuntaa uudelleenkäytettävän koodin komponenteiksi. Kehittäjät voivat käyttää niitä erilaisten projektien jakamiseen ja kehittämiseen.

UKK