GraphQL: лесни запитвания, направени лесно

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

Забележка: Това не е предназначен да бъде урок по GraphQL. Тази статия е предназначена само да опише защо GraphQL улеснява работата ви като преден разработчик.

Какво е GraphQL?

GraphQL е език за заявки, създаден от Facebook. Тя ви позволява, разработчикът от предния край, да пишете заявки, които имат точно желаната форма на данни.

Важно е да се отбележи, че въпреки името „GraphQL“, не се разбира, че е език на базата данни. Всъщност използвах GraphQL с много бази данни, включително SQL, MongoDB и дори REST API, свързан с база данни (и дори не знам на какво е написан езикът на базата данни).

Вместо това GraphQL на сървъра ви позволява да определите как искате да получите данните си. След това върху клиента можете да изпълните заявка, която има точната форма на данни, която искате, а получените данни ще имат същата форма като заявката.

Например:

Полученият отговор ще изглежда нещо подобно на това:

В отговора ще има други метаданни, но вече можете да видите колко мощен е GraphQL - няма нужда да нормализирате някоя от вашите данни на клиента. Работата се бута към сървъра.

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

Само като разгледате схемата, вече можете да кажете каква ще бъде формата на вашите данни и какви типове се очаква. Това ви позволява, разработчикът от предния край, да знаете няколко важни свойства на заявка, например дали тя взема аргументи, ако е списък или просто „субект“, и ако това е конкретно образувание, какви полета има това образувание ( в този случай потребителят на субекта има име на полета и имейл).

В случай на потребителска заявка можем да видим, че тя се взема в аргумент, наречен потребителско име, който има тип String. The! означава, че полето е задължително, така че ако не е предоставено, ще бъде изхвърлена грешка.

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

Сравнете това с други стандарти на API, като Swagger за REST API - трябва да се доверите, че който е написал документация, я е написал наистина добре, с документирани всички крайни случаи и видове. Swagger не точно "налага" проверка на типа за различни полета и така, така че можете да имате валиден Swagger YAML файл, който все още е изключително труден за навигация.

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

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

Как да използвате GraphQL на клиента

Това е забавно. От страна на клиента има много начини за използване на GraphQL на клиента.

Един от най-популярните начини за използване на GraphQL е използването на библиотека, наречена apollo-client. Apollo Client може да взаимодейства с React, Vue, Angular и др.

Сега Apollo Client наскоро се актуализира до версия 2.0. Абсолютно не е обратно съвместим с изданието 1.0, като много пакети променят имена и цели API се променят. Бавно се запознавам с версията на 2.0, но все още има някои неща, които успях да направя през 1.0, които вече не мога да правя в 2.0, като например Redux интеграция в моите приложения React. Поради това бих считал 1.0 и 2.0 за съвсем различни начини за използване на GraphQL на клиента.

Въпреки това, цялостната концепция е една и съща: увийте цялото си приложение в доставчик на Apollo (подобно на начина, по който бихте направили с Redux) и сега всичките ви компоненти имат достъп до клиента и могат да пишат запитвания и мутации на сървъра.

Apollo Client прави много готини неща „зад кулисите“, които очаквате да са стандартни, но явно не са. Един пример е „партидни“ заявки. Ако заредя компонент, който зарежда две различни заявки, по подразбиране е да изпратя две различни заявки. Въпреки това, Apollo Client има възможност да „пакетира“ тези заявки, което поставя и двете заявки в една заявка и ги изпраща до сървъра, спестявайки някои HTTP заявки.

Apollo Client също има много здрава кешираща функция, която кара компонентите да извличат първо от кеша. Тогава той всъщност изпраща заявка, ако кешът е остарял (обикновено е стар 100ms, но може да бъде конфигуриран).

Ето пример за инстанциране на клиент на Аполон и издаване на заявка:

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

Другият начин за използване на GraphQL на клиента е с помощта на Relay, който работи само с React. За съжаление Vue devs, не можете да използвате Relay.

Не съм използвал Relay твърде много, но определено има по-стръмна крива на обучение от Аполон. Изглежда, че трябва да направите „Направи си“ за много неща, като кеширане и дори изпълнение на схемата. Можете да разгледате някои от примерите тук, за да получите преглед на това как работи релето и как е подобен и различен от Аполон.

След като настроите релето, то всъщност работи много подобно на това как Apollo Client и react-apollo работят заедно, като изпраща данните като реквизит към компонента.

Опаковане

Надявам се тази статия да ви е полезна при вземането на решение дали да използвате GraphQL или не. За мен само познаването на формата на данните, които постъпват, прави работата ми отпред-край изключително много по-лесна. И ако данните не влизат правилно, тогава го променям в схемата в задния край и актуализирам всеки необходим код от страна на сървъра.

Ако тази статия е предизвикала интереса ви към изучаването на GraphQL, предлагам да разгледате по-задълбочено официалния урок за GraphQL: Как да GraphQL.

Забавлявайте се със заявки!