Ръководство за начинаещи по GraphQL

Един от най-често обсъжданите термини днес е API. Много хора не знаят какво точно представлява API. По принцип API означава интерфейс за програмиране на приложения. Това е, както казва името, интерфейс, с който хората - разработчици, потребители, потребители - могат да взаимодействат с данни.

Можете да мислите за API като барман. Питаш бармана за питие и той ти дава това, което си искал. Simple. Така че защо това е проблем?

От началото на съвременната мрежа изграждането на API не е толкова трудно, колкото звучи. Но API за учене и разбиране беше. Разработчиците формират по-голямата част от хората, които ще използват вашия API за изграждане на нещо или просто консумиране на данни. Така че вашият API трябва да бъде възможно най-чист и интуитивен. Добре проектираният API е много лесен за използване и научаване. Освен това е интуитивен, добър момент, който трябва да имате предвид, когато започвате да проектирате своя API.

Ние използваме REST за създаване на API за дълго време. Заедно с това възникват и някои проблеми. Когато създавате API с REST дизайн, ще се сблъскате с някои проблеми като:

1) ще имате много крайни точки

2) за разработчиците ще бъде много по-трудно да научат и разберат вашия API

3) има прекомерно и недостатъчно извличане на информация

За да реши тези проблеми, Facebook създаде GraphQL. Днес мисля, че GraphQL е най-добрият начин за изграждане на API. Тази статия ще ви каже защо трябва да започнете да го научавате днес.

В тази статия ще научите как работи GraphQL. Ще ви покажа как да създадете много добре проектиран, ефективен и мощен API с помощта на GraphQL.

Вероятно вече сте чували за GraphQL, тъй като много хора и компании го използват. Тъй като GraphQL е с отворен код, неговата общност стана огромна.

Сега е време да започнете да научавате на практика как работи GraphQL и всичко за неговата магия.

Какво е GraphQL?

GraphQL е език за заявки с отворен код, разработен от Facebook. Той ни предоставя по-ефективен начин да проектираме, създаваме и консумираме нашите API. По принцип това е заместителят на REST.

GraphQL има много функции, като:

  1. Вие пишете данните, които искате, и получавате точно тези, които искате. Няма повече претоварване на информация, както сме свикнали с REST.
  2. Дава ни една единствена крайна точка, не повече версия 2 или версия 3 за същия API.
  3. GraphQL е силно въведен и с това можете да валидирате заявка в системата от тип GraphQL преди изпълнението. Помага ни да изградим по-мощни API.

Това е основно въведение в GraphQL - защо е толкова мощен и защо набира голяма популярност в наши дни. Ако искате да научите повече за него, препоръчвам ви да отидете на уеб сайта на GraphQL и да го проверите.

Приготвяме се да започнем

Основната цел в тази статия не е да научим как да настроите GraphQL сървър, така че засега не се задълбочаваме в това. Целта е да научим как GraphQL работи на практика, така че ще използваме GraphQL сървър с нулева конфигурация, наречен Graphpack.

За да стартираме нашия проект, ние ще създадем нова папка и можете да я наречете каквото искате. Ще го нарека graphql-сървър:

Отворете терминала и въведете:

mkdir graphql-сървър

Сега трябва да имате инсталирани npm или прежда във вашата машина. Ако не знаете какво са това, npm и прежда са мениджъри на пакети за езика за програмиране на JavaScript. За Node.js стандартният мениджър на пакети е npm.

Вътре в създадената папка въведете следната команда:

npm init -y

Или ако използвате прежда:

прежда инит

npm ще създаде файл package.json за вас и всички зависимости, които сте инсталирали и вашите команди ще са там.

Така че сега ще инсталираме единствената зависимост, която ще използваме.

Graphpack ви позволява да създадете GraphQL сървър с нулева конфигурация. Тъй като едва сега започваме с GraphQL, това ще ни помогне много да продължим и да научим повече, без да се притесняваме от конфигурацията на сървъра.

Във вашия терминал, вътре в основната папка, го инсталирайте така:

npm install - save-dev graphpack

Или, ако използвате прежда, трябва да отидете така:

прежда добавете --dev graphpack

След инсталиране на Graphpack, отидете на нашите скриптове във файла package.json и поставете следния код там:

Ще създадем папка, наречена src, и тя ще бъде единствената папка в целия ни сървър.

Създайте папка, наречена src, след което вътре в нашата папка ще създадем само три файла.

Вътре в нашата папка src създайте файл, наречен schema.graphql. Вътре в този първи файл поставете следния код:

В този schema.graphql файл ще бъде цялата ни GraphQL схема. Ако не знаете какво е, ще обясня по-късно - не се притеснявайте.

Сега, в нашата папка src, създайте втори файл. Обадете се на resoluvers.js и вътре във втория файл поставете следния код:

Този файл resoluvers.js ще бъде начинът, по който предоставяме инструкциите за превръщане на операция GraphQL в данни.

И накрая, вътре в папката си src, създайте трети файл. Обадете се на този db.js и вътре в този трети файл поставете следния код:

В този урок не използваме база данни в реалния свят. Така че този db.js файл ще симулира база данни, само за целите на обучението.

Сега нашата src папка трябва да изглежда така:

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

Сега, ако стартирате командата npm run dev или, ако използвате прежда, prev dev, трябва да видите този изход във вашия терминал:

Вече можете да отидете на localhost: 4000. Това означава, че сме готови да започнем и да започнем да пишем първите си заявки, мутации и абонаменти в GraphQL.

Виждате GraphQL Playground, мощен GraphQL IDE за по-добри работни процеси. Ако искате да научите повече за GraphQL Playground, щракнете тук.

схема

GraphQL има собствен тип език, който се използва за писане на схеми. Това е читаем от човека синтаксис на схема, наречен Schema Definition Language (SDL). SDL ще бъде същият, без значение каква технология използвате - можете да използвате това с всеки език или рамка, които искате.

Този език на схемата е много полезен, тъй като е лесно да се разбере какви типове ще има вашият API. Можете да го разберете само като го погледнете правилно.

Видове

Типовете са една от най-важните характеристики на GraphQL. Типовете са персонализирани обекти, които представят как ще изглежда вашият API. Например, ако създавате приложение за социални медии, вашият API трябва да има типове като публикации, потребители, харесвания, групи.

Типовете имат полета и тези полета връщат конкретен тип данни. Например, ще създадем потребителски тип, трябва да имаме полета за име, имейл и възраст. Полетата за тип могат да бъдат всякакви и винаги връщат тип данни като Int, Float, String, Boolean, ID, Списък на типове обекти или типове на персонализирани обекти.

Затова сега, за да напишем нашия първи тип, отидете на вашия файл schema.graphql и заменете типа Query, който вече е там, със следното:

Всеки Потребител ще има идентификационен номер, затова му дадохме вид на идентификационен номер. Потребителят също ще има име и имейл, така че ние му дадохме тип String и възраст, която дадохме тип Int. Доста проста, нали?

Но какво ще кажете за тези! в края на всеки ред? Удивителят означава, че полетата не са нулируеми, което означава, че всяко поле трябва да връща някои данни във всяка заявка. Единственото нулируемо поле, което ще имаме в нашия потребителски тип, ще бъде възрастта.

В GraphQL ще се справите с три основни понятия:

  1. заявки - начинът, по който ще получите данни от сървъра.
  2. мутации - начинът, по който ще променяте данни на сървъра и да получавате актуализирани данни обратно (създавайте, актуализирайте, изтривайте).
  3. абонаменти - начинът, по който ще поддържате връзка в реално време със сървъра.

Ще ви обясня всичките. Да започнем със заявки.

Заявки

За да обясните това по прост начин, заявките в GraphQL са как ще получите данни. Едно от най-красивите неща за заявките в GraphQL е, че просто ще получите точните данни, които искате. Нито повече, нито по - малко. Това има огромно положително въздействие в нашия API - няма повече прекалено извличане или недостатъчно извличане на информация, както имахме с REST API.

Ще създадем първата си заявка в GraphQL. Всички наши запитвания ще приключат в този тип. За да започнем, ще отидем на нашата schema.graphql и ще напишем нов тип, наречен Query:

Много е просто: заявката на потребителите ще ни върне масив от един или повече Потребители. Няма да върне нула, защото ние поставяме в! , което означава, че това е заявка, която не е нулирана. Винаги трябва да връща нещо.

Но бихме могли да върнем и конкретен потребител. За това ще създадем нова заявка, наречена потребител. Вътре в нашия тип заявка поставете следния код:

Сега нашият тип заявки трябва да изглежда така:

Както виждате, с заявки в GraphQL също можем да предаваме аргументи. В този случай, за да поискаме конкретен потребител, ще предадем идентификационния му номер.

Но може би се чудите: как GraphQL знае откъде да вземете данните? Ето защо трябва да имаме файл resolutionvers.js. Този файл казва на GraphQL как и къде ще вземе данните.

Първо, отидете на нашия файл resoluvers.js и импортирайте db.js, който току-що създадохме преди няколко минути. Вашият файл резолюции.js трябва да изглежда така:

Сега, ние ще създадем първата си заявка. Отидете до вашия файл резолюции.js и заменете функцията здравей. Сега типът на Вашето запитване трябва да изглежда така:

Сега, за да обясня как ще работи:

Всяка резолюция на заявка има четири аргумента. В потребителската функция ще предадем идентификатора като аргумент и след това ще върнем конкретния потребител, който съответства на предадения идентификатор. Доста проста.

Във функцията на потребителите просто ще върнем потребителския масив, който вече съществува. Винаги ще се връща към всички наши потребители.

Сега ще тестваме дали нашите заявки работят добре. Отидете на localhost: 4000 и поставете следния код:

Той трябва да се върне към вас на всички наши потребители.

Или, ако искате да върнете конкретен потребител:

Сега ще започнем да научаваме за мутациите, една от най-важните характеристики в GraphQL.

Мутациите

В GraphQL мутациите са начинът, по който ще променяте данни на сървъра и да получавате актуализирани данни обратно. Можете да мислите като CUD (Създаване, актуализиране, изтриване) на REST.

Ще създадем своя първи тип мутация в GraphQL и всички наши мутации ще се окажат вътре в този тип. Така че, за начало, отидете на нашата schema.graphql и напишете нов тип, наречен мутация:

Както виждате, ще имаме три мутации:

createUser: трябва да предадем идентификационен номер, име, имейл и възраст. Той трябва да върне нов потребител към нас.

updateUser: трябва да предадем идентификационен номер и ново име, имейл или възраст. Той трябва да върне нов потребител към нас.

deleteUser: трябва да предадем идентификационен номер. Той трябва да върне нов потребител към нас.

Сега, отидете на нашия файл резолюции.js и под обекта Query, създайте нов мутиращ обект като този:

Сега нашият файл на резолюции.js трябва да изглежда така:

Сега ще тестваме дали нашите мутации работят добре. Отидете на localhost: 4000 и поставете следния код:

Той трябва да върне нов потребител към вас. Ако искате да опитате да правите нови мутации, препоръчвам ви да опитате сами! Опитайте да изтриете същия този потребител, който сте създали, за да видите дали работи добре.

И накрая, ще започнем да научаваме за абонаментите и защо те са толкова мощни.

Абонаменти

Както вече казах, абонаментите са начинът, по който ще поддържате връзка в реално време със сървър. Това означава, че всеки път, когато се случи събитие в сървъра и всеки път, когато това събитие бъде повикано, сървърът ще изпрати съответните данни на клиента.

Работейки с абонаменти, можете да поддържате приложението си актуализирано до най-новите промени между различни потребители.

Основен абонамент е такъв:

Ще кажете, че е много подобно на заявка и да. Но работи по различен начин.

Когато нещо се актуализира в сървъра, сървърът ще изпълни заявката GraphQL, посочена в абонамента, и ще изпрати ново актуализиран резултат на клиента.

В тази конкретна статия няма да работим с абонаменти, но ако искате да прочетете повече за тях, щракнете тук.

заключение

Както видяхте, GraphQL е нова технология, която е наистина мощна. Тя ни дава реална сила да изграждаме по-добри и добре проектирани API-та. Ето защо ви препоръчвам да започнете да го научавате сега. За мен това в крайна сметка ще замени REST.

Благодаря, че прочетохте статията, моля, дайте коментар по-долу!

Следвайте ме в Twitter!
Следвайте ме в GitHub!

Търся отдалечена възможност, така че ако имам нещо, което бих искал да чуя за това, така че, моля, свържете се с мен в моя Twitter!