de Leonardo Maldonado

Un ghid pentru începători pentru GraphQL

Un ghid pentru incepatori pentru GraphQL

Unul dintre termenii cei mai des discutați astăzi este API. Mulți oameni nu știu exact ce este un API. Practic, API înseamnă Interfața de programare a aplicației. Este, așa cum spune numele, o interfață cu care oamenii – dezvoltatori, utilizatori, consumatori – pot interacționa cu datele.

Vă puteți gândi la un API ca la un barman. Îi ceri barmanului o băutură și ei îți dau ceea ce ți-ai dorit. Simplu. Deci, de ce este asta o problemă?

De la începutul web-ului modern, crearea API-urilor nu a fost atât de grea pe cât pare. Dar învățarea și înțelegerea API-urilor au fost. Dezvoltatorii formează majoritatea persoanelor care vor folosi API-ul dvs. pentru a construi ceva sau doar pentru a consuma date. Deci, API-ul dvs. ar trebui să fie cât mai curat și cât mai intuitiv posibil. Un API bine conceput este foarte ușor de utilizat și de învățat. Este, de asemenea, intuitiv, un punct bun de reținut atunci când începeți să vă proiectați API-ul.

Folosim REST pentru a construi API-uri de mult timp. Odată cu asta, apar și câteva probleme. Când creați un API folosind designul REST, veți întâmpina câteva probleme precum:

1) veți avea o mulțime de puncte finale

2) va fi mult mai greu pentru dezvoltatori să învețe și să înțeleagă API-ul dvs.

3) există supra-și sub-preluarea informațiilor

Pentru a rezolva aceste probleme, Facebook a creat GraphQL. Astăzi, cred că GraphQL este cel mai bun mod de a construi API-uri. Acest articol vă va spune de ce ar trebui să începeți să îl învățați astăzi.

În acest articol, veți afla cum funcționează GraphQL. Vă voi arăta cum să creați un API foarte bine conceput, eficient și puternic folosind GraphQL.

Probabil ați auzit deja despre GraphQL, deoarece o mulțime de oameni și companii îl folosesc. Deoarece GraphQL este open-source, comunitatea sa a crescut enorm.

Acum, este timpul să începeți să învățați în practică cum funcționează GraphQL și totul despre magia sa.

Ce este GraphQL?

GraphQL este un limbaj de interogare open-source dezvoltat de Facebook. Ne oferă un mod mai eficient de a proiecta, crea și consuma API-urile noastre. Practic, este înlocuitorul REST.

GraphQL are o mulțime de caracteristici, cum ar fi:

  1. Scrii datele pe care le dorești și obții exact datele pe care le dorești. Gata cu preluarea excesivă a informațiilor așa cum suntem obișnuiți cu REST.
  2. Ne oferă o punct final unic, nu mai există versiunea 2 sau versiunea 3 pentru același API.
  3. GraphQL este puternic tastat, și cu aceasta puteți valida o interogare în cadrul sistemului de tip GraphQL înainte de execuție. Ne ajută să construim API-uri mai puternice.

Aceasta este o introducere de bază în GraphQL – de ce este atât de puternic și de ce câștigă multă popularitate în zilele noastre. Dacă doriți să aflați mai multe despre aceasta, vă recomand să mergeți la Site-ul GraphQL și verifică-l.

Noțiuni de bază

Obiectivul principal al acestui articol nu este să învățăm cum să configurăm un server GraphQL, așa că nu ne adâncim în acest moment. Obiectivul este să aflăm cum funcționează GraphQL în practică, așa că vom folosi un server GraphQL cu configurare zero numit ☄️ Graphpack.

Pentru a începe proiectul nostru, vom crea un folder nou și îl puteți numi oricum doriți. Am de gând să-l numesc graphql-server:

Deschideți terminalul și tastați:

mkdir graphql-server

Acum, ar trebui să ai npm sau fire instalat în aparatul dvs. Dacă nu știi ce sunt acestea, npm și fire sunt administratori de pachete pentru limbajul de programare JavaScript. Pentru Node.js, managerul de pachete implicit este npm.

În folderul creat, tastați următoarea comandă:

npm init -y

Sau dacă utilizați fire:

yarn init 

npm va crea un package.json fișier pentru dvs. și toate dependențele pe care le-ați instalat și comenzile dvs. vor fi acolo.

Deci, acum, vom instala singura dependență pe care o vom folosi.

☄️Graphpack vă permite să creați un server GraphQL cu configurare zero. Deoarece abia începem cu GraphQL, acest lucru ne va ajuta foarte mult să continuăm și să aflăm mai multe fără să ne îngrijorăm de configurația serverului.

În terminal, în folderul rădăcină, instalați-l astfel:

npm install --save-dev graphpack

Sau, dacă folosiți fire, ar trebui să mergeți astfel:

yarn add --dev graphpack

După instalarea Graphpack, accesați scripturile noastre din package.json și puneți următorul cod acolo:

"scripts": {
    "dev": "graphpack",
    "build": "graphpack build"
}

Vom crea un dosar numit src, și va fi singurul folder din întregul nostru server.

Creați un folder numit src, după aceea, în dosarul nostru, vom crea doar trei fișiere.

În interiorul nostru src folder creați un fișier numit schema.graphql. În acest prim fișier, introduceți următorul cod:

type Query {
  hello: String
}

In acest schema.graphql fișierul va fi întreaga noastră schemă GraphQL. Dacă nu știți ce este, vă explic mai târziu – nu vă faceți griji.

Acum, în interiorul nostru src folder, creați un al doilea fișier. Spune-i resolvers.js și, în interiorul acestui al doilea fișier, puneți următorul cod:

import { users } from "./db";

const resolvers = {
  Query: {
    hello: () => "Hello World!"
  }
};

export default resolvers;

Acest resolvers.js fișierul va fi modul în care oferim instrucțiunile pentru transformarea unei operații GraphQL în date.

Și în cele din urmă, în interiorul tău src folder, creați un al treilea fișier. Sună asta db.js și, în interiorul acestui al treilea fișier, puneți următorul cod:

export let users = [
  { id: 1, name: "John Doe", email: "john@gmail.com", age: 22 },
  { id: 2, name: "Jane Doe", email: "jane@gmail.com", age: 23 }
];

În acest tutorial nu folosim o bază de date din lumea reală. Deci asta db.js fișierul va simula o bază de date, doar în scopuri de învățare.

Acum src dosarul ar trebui să arate astfel:

src
  |--db.js
  |--resolvers.js
  |--schema.graphql

Acum, dacă executați comanda npm run dev sau, dacă folosiți fire, yarn dev, ar trebui să vedeți această ieșire în terminal:

Un ghid pentru incepatori pentru GraphQL

Acum puteți merge la localhost:4000 . Aceasta înseamnă că suntem gata să începem să scriem primele noastre interogări, mutații și abonamente în GraphQL.

Vedeți GraphQL Playground, un IDE GraphQL puternic pentru fluxuri de lucru mai bune de dezvoltare. Dacă doriți să aflați mai multe despre GraphQL Playground, Click aici.

Schemă

GraphQL are propriul tip de limbaj folosit pentru a scrie scheme. Aceasta este o sintaxă schemă lizibilă de om numită Schema Definition Language (SDL). SDL va fi același, indiferent de tehnologia pe care o utilizați – puteți utiliza acest lucru cu orice limbă sau cadru doriți.

Acest limbaj schemă este foarte util deoarece este simplu de înțeles ce tipuri va avea API-ul dvs. Îl poți înțelege doar uitându-l corect.

Tipuri

Tipurile sunt una dintre cele mai importante caracteristici ale GraphQL. Tipurile sunt obiecte personalizate care reprezintă modul în care va arăta API-ul dvs. De exemplu, dacă creați o aplicație de socializare, API-ul dvs. ar trebui să aibă tipuri precum Posts, Users, Likes, Groups.

Tipurile au câmpuri, iar aceste câmpuri returnează un anumit tip de date. De exemplu, vom crea un tip de utilizator, ar trebui să avem câteva name, email, și age câmpuri. Câmpurile de tip pot fi orice și returnează întotdeauna un tip de date ca Int, Float, Șir, Boolean, ID, o listă de tipuri de obiecte sau tipuri de obiecte personalizate.

Deci, acum, pentru a scrie primul nostru tip, mergeți la schema.graphql fișier și înlocuiți tipul Interogare care există deja cu următoarele:

type User {
  id: ID!
  name: String!
  email: String!
  age: Int
}

Fiecare User va avea o ID, așa că i-am dat un ID tip. User va avea, de asemenea, un name și email, așa că i-am dat un String tip și un age, pe care le-am dat un Int tip. Destul de simplu, nu?

Dar, ce despre acele ! la sfârșitul fiecărei linii? Punctul de exclamare înseamnă că câmpurile sunt ne nulabile, ceea ce înseamnă că fiecare câmp trebuie să returneze unele date în fiecare interogare. Singurul anulabil pe care îl vom avea în domeniul nostru User tipul va fi age.

În GraphQL, vă veți ocupa de trei concepte principale:

  1. întrebări – modul în care veți obține date de la server.
  2. mutații – modul în care veți modifica datele de pe server și veți obține date actualizate înapoi (creați, actualizați, ștergeți).
  3. abonamente – modul în care veți menține o conexiune în timp real cu serverul.

Vă voi explica pe toate. Să începem cu interogări.

Întrebări

Pentru a explica acest lucru într-un mod simplu, interogările din GraphQL sunt modul în care veți obține date. Unul dintre cele mai frumoase lucruri despre interogările din GraphQL este că veți obține doar datele exacte pe care le doriți. Nici mai mult nici mai puțin. Acest lucru are un impact pozitiv uriaș în API-ul nostru – nu mai sunt preluate sau sub-preluarea informațiilor, așa cum am avut cu API-urile REST.

Vom crea primul nostru tip de interogare în GraphQL. Toate interogările noastre vor ajunge în acest tip. Deci, pentru a începe, vom merge la a noastră schema.graphql și scrieți un nou tip numit Query:

type Query {
  users: [User!]!
}

Este foarte simplu: users interogarea ne va întoarce o serie de una sau mai multe Users. Nu va reveni nul, pentru că am introdus ! , ceea ce înseamnă că este o interogare care nu poate fi anulată. Ar trebui să returneze întotdeauna ceva.

Dar am putea întoarce și un anumit utilizator. Pentru aceasta, vom crea o nouă interogare numită user. În interiorul nostru Query tastați, puneți următorul cod:

user(id: ID!): User!

Acum Query tipul ar trebui să arate astfel:

type Query {
  users: [User!]!
  user(id: ID!): User!
}

După cum vedeți, cu interogările din GraphQL putem transmite și argumente. În acest caz, pentru a interoga un anumit user, vom trece ID.

Dar, vă puteți întreba: cum știe GraphQL de unde obține datele? De aceea ar trebui să avem un resolvers.js fişier. Fișierul respectiv îi spune GraphQL cum și unde va prelua datele.

Mai întâi, du-te la resolvers.js fișier și importați fișierul db.js pe care tocmai l-am creat acum câteva clipe. Ta resolvers.js fișierul ar trebui să arate astfel:

import { users } from "./db";

const resolvers = {
  Query: {
    hello: () => "Hello World!"
  }
};

export default resolvers;

Acum, vom crea prima noastră interogare. Du-te la resolvers.js fișier și înlocuiți fișierul hello funcţie. Acum, tipul dvs. de interogare ar trebui să arate astfel:

import { users } from "./db";

const resolvers = {
  Query: {
    user: (parent, { id }, context, info) => {
      return users.find(user => user.id === id);
    },
    users: (parent, args, context, info) => {
      return users;
    }
  }
};

export default resolvers;

Acum, pentru a explica cum va funcționa:

Fiecare rezolvator de interogări are patru argumente. În user funcție, vom trece id ca argument și apoi returnează specificul user care se potrivește cu trecutul id. Destul de simplu.

În users funcție, vom returna doar users matrice care există deja. Întotdeauna ne va reveni tuturor utilizatorilor noștri.

Acum, vom testa dacă interogările noastre funcționează bine. Mergi la localhost:4000 și introduceți următorul cod:

query {
  users {
    id
    name
    email
    age
  }
}

Ar trebui să vă returneze toți utilizatorii noștri.

Sau, dacă doriți să returnați un anumit utilizator:

query {
  user(id: 1) {
    id
    name
    email
    age
  }
}

Acum, vom începe să aflăm despre mutații, una dintre cele mai importante caracteristici din GraphQL.

Mutații

În GraphQL, mutațiile sunt modul în care veți modifica datele de pe server și veți obține date actualizate înapoi. Puteți gândi ca CUD (Creați, actualizați, ștergeți) din REST.

Vom crea prima noastră mutație de tip în GraphQL și toate mutațiile noastre vor ajunge în interiorul acestui tip. Deci, pentru a începe, du-te la a noastră schema.graphql și scrieți un nou tip numit mutation:

type Mutation {
  createUser(id: ID!, name: String!, email: String!, age: Int): User!
  updateUser(id: ID!, name: String, email: String, age: Int): User!
  deleteUser(id: ID!): User!
}

După cum puteți vedea, vom avea trei mutații:

createUser: ar trebui să trecem un ID, name, email, și age. Ar trebui să ne returneze un nou utilizator.

updateUser: ar trebui să trecem un ID, și un nou name, email, sau age. Ar trebui să ne returneze un nou utilizator.

deleteUser: ar trebui să trecem un ID. Ar trebui să ne returneze un nou utilizator.

Acum, du-te la resolvers.js fișier și de mai jos Query obiect, creați un nou mutation obiect ca acesta:

Mutation: {
    createUser: (parent, { id, name, email, age }, context, info) => {
      const newUser = { id, name, email, age };

      users.push(newUser);

      return newUser;
    },
    updateUser: (parent, { id, name, email, age }, context, info) => {
      let newUser = users.find(user => user.id === id);

      newUser.name = name;
      newUser.email = email;
      newUser.age = age;

      return newUser;
    },
    deleteUser: (parent, { id }, context, info) => {
      const userIndex = users.findIndex(user => user.id === id);

      if (userIndex === -1) throw new Error("User not found.");

      const deletedUsers = users.splice(userIndex, 1);

      return deletedUsers[0];
    }
  }

Acum, a noastră resolvers.js fișierul ar trebui să arate astfel:

import { users } from "./db";

const resolvers = {
  Query: {
    user: (parent, { id }, context, info) => {
      return users.find(user => user.id === id);
    },
    users: (parent, args, context, info) => {
      return users;
    }
  },
  Mutation: {
    createUser: (parent, { id, name, email, age }, context, info) => {
      const newUser = { id, name, email, age };

      users.push(newUser);

      return newUser;
    },
    updateUser: (parent, { id, name, email, age }, context, info) => {
      let newUser = users.find(user => user.id === id);

      newUser.name = name;
      newUser.email = email;
      newUser.age = age;

      return newUser;
    },
    deleteUser: (parent, { id }, context, info) => {
      const userIndex = users.findIndex(user => user.id === id);

      if (userIndex === -1) throw new Error("User not found.");

      const deletedUsers = users.splice(userIndex, 1);

      return deletedUsers[0];
    }
  }
};

export default resolvers;

Acum, vom testa dacă mutațiile noastre funcționează bine. Mergi la localhost:4000 și introduceți următorul cod:

mutation {
  createUser(id: 3, name: "Robert", email: "robert@gmail.com", age: 21) {
    id
    name
    email
    age
  }
}

Ar trebui să vă returneze un nou utilizator. Dacă vrei să încerci să faci noi mutații, îți recomand să încerci singur! Încercați să ștergeți același utilizator pe care l-ați creat pentru a vedea dacă funcționează bine.

În cele din urmă, vom începe să aflăm despre abonamente, și de ce sunt atât de puternici.

Abonamente

După cum am spus mai devreme, abonamentele sunt modul în care veți menține o conexiune în timp real cu un server. Asta înseamnă că ori de câte ori apare un eveniment în server și ori de câte ori este chemat acel eveniment, serverul va trimite datele corespunzătoare clientului.

Lucrând cu abonamente, vă puteți menține aplicația actualizată la cele mai recente modificări între diferiți utilizatori.

1611243790 87 Un ghid pentru incepatori pentru GraphQL

Un abonament de bază este astfel:

subscription {
  users {
    id
    name
    email
    age
  }
}

Veți spune că este foarte asemănător cu o interogare și da, este. Dar funcționează diferit.

Când ceva este actualizat în server, serverul va rula interogarea GraphQL specificată în abonament și va trimite un rezultat nou actualizat clientului.

Nu vom lucra cu abonamente în acest articol specific, dar dacă doriți să citiți mai multe despre ele Click aici.

Concluzie

După cum ați văzut, GraphQL este o nouă tehnologie care este cu adevărat puternică. Ne oferă o putere reală pentru a construi API-uri mai bune și bine proiectate. De aceea îți recomand să începi să o înveți acum. Pentru mine, în cele din urmă va înlocui REST.

Vă mulțumim că ați citit articolul.

Urmărește-mă pe Twitter!
Urmăriți-mă pe GitHub!

Caut o oportunitate la distanță, așa că, dacă am vreunul, aș vrea să aud despre asta, așa că vă rog să mă contactați la Stare de nervozitate!