Tutorial GraphQL pentru începători: Ce este, caracteristici și exemplu

Ce este GraphQL?

GraphQL este o tehnologie server-side la nivelul aplicației, dezvoltată de Facebook, acum Meta, pentru executarea de interogări cu date existente. A fost lansată public în 2015 și a fost guvernată de GraphQL. Foundation din 2018. GraphQL poate optimiza apelurile API RESTful. Oferă o modalitate declarativă de preluare și actualizare a datelor. GraphQL vă ajută să încărcați date de pe server în client. Permite programatorilor să aleagă tipurile de solicitări pe care doresc să le facă.

Ce trebuie să înveți înainte de a învăța GraphQL?

Acest tutorial GraphQL se bazează pe Expres și NodeJs. Prin urmare, puteți învăța GraphQL foarte ușor cu o înțelegere de bază a NodeJS.

De ce să folosiți GraphQL?

Următoarele sunt motivele utilizării GraphQL:

• Oferă o interogare care poate fi citită de om.
• În GraphQL, este foarte ușor să lucrezi cu multe baze de date.
• Este potrivit pentru microservicii și sisteme complexe.
• Puteți prelua date cu un singur apel API.
• Vă ajută cu punerea în loturi a interogărilor și stocarea în cache.
• Nu te confrunți cu probleme de supraîncărcare și subîncărcare.
• Adaptarea cererilor la nevoile dvs.
• Vă ajută să descoperiți schema în formatul adecvat.
• GraphQL păstrează automat documentația sincronizată cu modificările API.
• Evoluția API este posibilă fără versiune.
• Câmpurile GraphQL sunt folosite în mai multe interogări care pot fi partajate la un nivel superior de componentă pentru reutilizare.
• Puteți alege ce funcții să expuneți și cum funcționează.
• Poate fi folosit pentru prototipuri cu aplicații rapideping.

Aplicații ale GraphQL

Iată aplicațiile importante ale GraphQL:

• Oferă relay și alte cadre pentru clienți
• GraphQL vă ajută să îmbunătățiți performanța aplicației mobile.
• Poate reduce problema de preluare excesivă pentru a reduce serviciul cloud de pe partea de server și poate reduce utilizarea rețelei de partea clientului.
• Poate fi folosit atunci când aplicația client trebuie să specifice ce câmpuri sunt necesare în format de interogare lungă.
• GraphQL poate fi utilizat pe deplin atunci când trebuie să adăugați funcționalități la API-ul dvs. vechi sau existent.
• Este folosit atunci când trebuie să simplificați API complexe.
• Combinați și amestecați modelul de fațadă, care este utilizat în mod obișnuit în programarea orientată pe obiecte.
• Când trebuie să agregați date din mai multe locuri într-un singur API convenabil.
• Poți folosi GraphQL ca un abdomentracțiune pe o API existentă pentru a specifica structura răspunsului pe baza nevoilor utilizatorului.

Toate aceste beneficii se bazează pe trei componente mobile care lucrează împreună.

Componentele cheie GraphQL

Acum, în acest tutorial GraphQL, să învățăm componentele cheie ale GraphQL:

După cum se arată în figura de mai sus, există trei componente cheie ale GraphQL: 1) Interogare, 2) Resolver și 3) Schema.

Întrebare

Interogarea este o solicitare API făcută de aplicația mașină client. Suportă creșteri și puncte către matrice. Interogarea este utilizată pentru a citi sau a prelua valori.

Părți ale interogării:

Următoarele sunt părțile importante din Query

1. Camp:

Un câmp indică pur și simplu faptul că solicităm serverului anumite informații. În continuare este prezentat un exemplu GraphQL al unui câmp dintr-o interogare GraphQL.

query {
    team {
        id
        name
    }
}

Serverul răspunde cu un document JSON a cărui formă reflectă interogarea:

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

În exemplul GraphQL de mai sus, solicităm serverului câmpul numit team și subcâmpurile sale, cum ar fi id și name. Serverul GraphQL returnează exact datele pe care le-am solicitat.

2. Argumente

In REST, putem transmite doar un singur set de argumente ca URL segmente și parametri de interogare. Pentru a obține un anumit profil, un apel REST tipic va arăta astfel:

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

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

rezolvitorului

Rezolvatorii oferă instrucțiuni pentru conversia operațiunii GraphQL în date. Ei rezolvă interogarea la date prin definirea funcțiilor de rezoluție.

Acesta afișează serverului procesul, precum și locația pentru a prelua datele în funcție de un anumit câmp. Resolverul separă, de asemenea, schema bazei de date și schema API. Informațiile separate ajută la modificarea conținutului obținut din baza de date.

Schemă

O schemă GraphQL este centrul implementării GraphQL. Descrie funcționalitatea disponibilă clienților care se conectează la acesta.

Caracteristicile GraphQL

Iată caracteristicile importante ale GraphQL:

• Oferă un limbaj de interogare declarativ, care nu este imperativ.
• Este ierarhic și centrat pe produs.
• GraphQL este puternic tastat. Înseamnă că interogările sunt executate în contextul unui anumit sistem.
• Interogările din GraphQL sunt codificate în client, nu în server.
• Are toate caracteristicile stratului de aplicație al modelului OSI.

Clienții GraphQL

Clientul GraphQL este un cod care face cereri POST către un server GraphQL relevant. Puteți interoga direct un API GraphQL, dar abordarea bună este să folosiți o bibliotecă client dedicată folosind Relay.

Aceasta JavaBiblioteca de scripturi este dezvoltată de Facebook pentru a realiza aplicații React cu GraphQL. Clienții GraphQL pot fi un CMS precum Drupal, o aplicație cu o singură pagină, o aplicație mobilă etc.

Servere GraphQL

Serverele GraphQL sunt implementări pe partea de server ale specificației GraphQL. Acestea reprezintă datele dvs. ca API GraphQL, pe care programul dvs. client îl poate interoga pentru Baza de date.

Gateway-uri GraphQL

Gateway este un model de microservicii în care puteți construi un serviciu separat pentru a gestiona alte servicii backend. Acesta oferă documentație funcțională și oferă o modalitate convenabilă de a colecta date din mai multe surse cu o singură solicitare.

GraphQL are o modalitate bună de a factoriza valorile dinamice din interogare. Le transmite ca un dicționar separat. Aceste valori sunt cunoscute sub numele de variabile. Ori de câte ori lucrăm cu variabile, trebuie să facem următoarele trei lucruri:

1. Înlocuiți valoarea statică din interogare cu un nume de variabilă.
2. Declarați numele variabilei ca una dintre variabilele care sunt acceptate de interogarea GraphQL.
3. Transmiteți valoarea în dicționarul de variabile specific transportului.

Iată cum arată totul per total. Mai întâi interogarea, care declară variabila:

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

Apoi, dicționarul separat de valori variabile trimis alături de acesta:

{
    "episode": "JEDI"
}

Și răspunsul returnat de server:

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

După cum puteți vedea în exemplul GraphQL de mai sus, pur și simplu am trecut o variabilă diferită, în afară de necesitatea de a construi o nouă interogare.

Ce este Mutația?

O mutație este o modalitate de a schimba setul de date în GraphQL. Modifică datele din depozitul de date și returnează o valoare. Mutațiile vă ajută să introduceți, să actualizați sau să ștergeți date. În general, mutațiile sunt definite ca o parte a schemei.

Puncte de luat în considerare la proiectarea mutațiilor GraphQL

Iată punctele importante în timpul proiectării GraphQL:

• Denumire: În primul rând, trebuie să-ți numești verbul mutațiilor. Apoi substantivul sau „obiect”, dacă este cazul. Utilizați camelCase în timp ce denumiți mutațiile.
• Specificitate: Trebuie să faceți cât mai mult posibil mutații specifice. Mutațiile ar trebui să reprezinte acțiuni semantice întreprinse de utilizator.
• Obiect de intrare: Utilizați un tip de obiect de intrare unic, obligatoriu, ca argument pentru executarea mutației pe client.
• Tip unic de sarcină utilă: Ar trebui să utilizați un tip unic de sarcină utilă pentru fiecare mutație. De asemenea, puteți adăuga rezultatul mutației ca câmp la acel tip de sarcină utilă.
• Cuibărire: Folosește cuibărirea la mutația ta oriunde are sens. Vă permite să utilizați pe deplin API-ul GraphQL.

Citire interogări și scriere mutații. Un al treilea tip de operațiune acoperă datele care se modifică în timp ce clientul este încă conectat.

Ce este un abonament în GraphQL?

A abonament este al treilea tip de operație din specificația GraphQL, alături de interogare și mutație. O interogare și o mutație se finalizează fiecare într-o singură cerere și un singur răspuns. Un abonament menține deschisă o conexiune de lungă durată, de obicei prin WebSockets, astfel încât serverul trimite un nou rezultat către client de fiecare dată când are loc un eveniment specificat.

Sintaxa oglindește o interogare, cuvântul cheie `subscription` înlocuind `query`:

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

Trei puncte disting abonamentele în practică.

• Bazat pe evenimente, nu sondat: Clientul își înregistrează interesul o singură dată. Nu se trimite nimic suplimentar până când serverul nu publică un eveniment corespondent, ceea ce este mult mai ieftin decât interogarea repetată.
• Un câmp rădăcină per abonament: Specificația permite un singur câmp de nivel superior, spre deosebire de o interogare care poate solicita mai multe simultan.
• Cel mai bine păstrate mici: Apăsați doar câmpurile pe care interfața trebuie să le actualizeze. Chatul live, notificările și indicatorii de preț sunt utilizările tipice.

Diferența dintre GraphQL și REST

Următorul tabel arată diferența importantă între GraphQL și REST.

Aplicații și instrumente open source utilizate de GraphQL

Aplicațiile și instrumentele open source importante utilizate de GraphQL sunt următoarele:

• GatsbyGatsby este o aplicație bazată pe GraphQL care poate utiliza date derivate din mai multe surse API GraphQL. O puteți folosi pentru a dezvolta o aplicație React statică și bazată pe client.
• GraphiQL: Este un IDE care se integrează cu browserul și interacționează și cu API-ul GraphQL. Printre funcțiile incluse în GraphiQL se numără mutațiile, interogarea datelor și interogările de autocompletare.
• Locul de joacă GraphQL: Este un IDE puternic, care are un editor încorporat pentru gestionarea mutațiilor, validării, interogărilor GraphQl, abonamentelor etc. Dezvoltatorul poate utiliza acest IDE pentru a vizualiza structura schemei. Proiectul este acum retras, iar funcționalitățile sale au fost reintegrate în GraphiQL.
• prismă: Prisma este o bază de date abstracstratul de tion, livrat acum ca un ORM sigur pentru tipuri, care este asociat pe scară largă cu un server GraphQL pentru a expune operațiunile CRUD (Creare, Citire, Actualizare și Ștergere).
• Pic: Este un instrument și o platformă open-source care convertește codul reutilizabil în componente. Dezvoltatorii le pot folosi pentru a partaja și dezvolta diverse proiecte.

Întrebări frecvente