Вашій увазі пропоную переклад статті Sacha Greif “Що ж таке цей GraphQL?” Переклад українською виконав cryptoaxel#2921
Якщо ви такий же, як і я, ви зазвичай проходите через три етапи, коли дізнаєтеся про нову технологію:
- Заперечення: Ще одна JavaScript бібліотека ?! Навіщо? У мене вже є jQuery!
- Інтерес: Хм, напевно мені слід поглянути на цю бібліотеку …
- Паніка: Допоможіть! Мені потрібно вивчити цю бібліотеку прямо зараз , інакше мої знання застаріють!
Є одна хитрість для підтримки розсудливості в епоху швидко технологій: вивчати нові речі між другим і третім етапом, як тільки інтерес зачеплений, але поки технологія ще не поширена повсюдно.
Саме тому зараз саме час дізнатися, що ж таке цей GraphQL, про який ви всюди чуєте.
основи
У двох словах, GraphQL це синтаксис, який описує як запитувати дані , і, в основному, використовується клієнтом для завантаження даних з сервера. GraphQL має три основні характеристики:
- Дозволяє клієнту точно вказати, які дані йому потрібні.
- Полегшує агрегацію даних з декількох джерел.
- Використовує систему типів для опису даних.
Так з чого ж почати вивчення GraphQL? Як це виглядає на практиці? Як почати його використовувати? Читайте далі щоб дізнатися!
Задача
GraphQL був розроблений у великому старому Facebook, але навіть набагато більш прості програми можуть зіткнутися з обмеженнями традиційних REST API інтерфейсів.
Наприклад уявіть, що вам потрібно відобразити список записів( posts), і під кожним опублікувати список лайків( likes), включаючи імена користувачів і аватари. Насправді, це не складно, ви просто змініть API postsтак, щоб воно містило масив likes, в якому будуть об'єкти-користувачі.
Але потім, при розробці мобільного додатку, виявилося що через завантаження додаткових даних додаток працює повільніше. Так що вам тепер потрібно два endpoint, один повертає записи з лайками, а інший без них.
Додамо ще один фактор: виявляється, записи зберігаються в базі даних MySQL, а лайки в Redis! Що ж тепер робити?!
Екстраполюйте цей сценарій на те безліч джерел даних і клієнтських API, з якими має справу Facebook, і ви зрозумієте чому старий добрий REST API досяг своєї межі.
Рішення
Facebook придумав концептуально просте рішення: замість того, щоб мати безліч “дурних” endpoint, краще мати один “розумний” endpoint, який буде здатний працювати зі складними запитами і надавати даними таку форму, яку запитує клієнт.
Фактично, шар GraphQL знаходиться між клієнтом і одним або декількома джерелами даних; він приймає запити клієнтів і повертає необхідні дані відповідно до переданих інструкціями. Заплутані? Час метафор!
Користуватися старої REST-моделлю це як замовляти піцу, потім замовляти доставку продуктів, а потім телефонувати в хімчистку, щоб забрати одяг. Три магазину — три телефонні дзвінки.
GraphQL схожий на особистого помічника: ви можете передати йому адреси всіх трьох місць, а потім просто запитувати те, що вам потрібно ( «принеси мені мій одяг, велику піцу і два десятка яєць») і чекати їх отримання.
Іншими словами, GraphQL це стандартна мова для розмови з цим чарівним особистим помічником.
Згідно Google Images, типовий особистий помічник це прибулець з вісьмома руками
На практиці GraphQL API побудований на трьох основних будівельних блоках: на схемі (schema), запитах (queries) і розпізнавачів (resolvers).
Запити (queries)
(Query і request однаково перекладається як “запит”. Далі буде матися на увазі query, якщо не вказано інакше — прим. Пер.)
Коли ви про щось просите вашого персонального помічника, ви виконуєте запит . Це виглядає приблизно так:
query {
stuff
}Ми оголошуємо новий запит за допомогою ключового слова query, також питаючи про поле stuff. Саме чудове в запитах GraphQL є те, що вони підтримують вкладені поля, так що ми можемо піти на один рівень глибше:
query {
stuff {
eggs
shirt
pizza
}
}Як можна помітити, клієнту при формуванні запиту не потрібно знати звідки надходять дані. Він просто запитує про них, а сервер GraphQL піклується про іншому.
Також варто відзначити, що поля запиту можуть бути масивами . Наприклад ось загальний шаблон запиту списку повідомлень:
query {
posts { # это массив
title
body
author { # мы может пойти глубже
name
avatarUrl
profileUrl
}
}
}Поля запиту також можуть містити аргументи. Наприклад, якщо необхідно відобразити конкретний пост, можна додати аргумент idдо поля post:
query {
post(id: "123foo"){
title
body
author{
name
avatarUrl
profileUrl
}
}
}Нарешті, якщо потрібно зробити аргумент idдинамічним, можна визначити змінну , а потім використовувати її в запиті (зверніть увагу, також ми зробили запит іменованих ):
query getMyPost($id: String) {
post(id: $id){
title
body
author{
name
avatarUrl
profileUrl
}
}
}Хороший спосіб спробувати все це на практиці — використовувати GraphQL API Explorer від GitHub. Наприклад, давайте спробуємо виконати наступний запит:
query {
repository(owner: "graphql", name: "graphql-js"){
name
description
}
}
GraphQL і автодоповнення в дії
Зверніть увагу, коли ви вводите ім’я поля, IDE автоматично пропонує вам можливі імена полів, отримані за допомогою GraphQL API. Спритно!
Анатомия запросов GraphQL (англ)
Ви можете дізнатися більше про запити GraphQL у відмінній статті “Анатомія запитів GraphQL” (англ) .
Розпізнавачі (resolvers)
Навіть найкращий в світі особистий помічник не зможе принести ваші речі з хімчистки якщо ви не дасте йому адресу.
Подібним чином, сервер GraphQL не може знати що робити з вхідним запитом, якщо йому не пояснити за допомогою засобу розв’язання ( resolver ).
Використовуючи распознаватель GraphQL розуміє, як і де отримати дані, відповідні запитуваній полю. Наприклад, распознаватель для поля запис може виглядати ось так (використовуючи генератор схеми (schema) з набору Apollo GraphQL-Tools ):
Query: {
post(root, args) {
return Posts.find({ id: args.id });
}
}Ми поміщаємо наш распознаватель в розділ Queryтому що ми хочемо отримувати запись( post) в корені відповіді. Але також ми можемо створити розпізнавачі для підполів, як наприклад для поля author:
Query: {
post(root, args) {
return Posts.find({ id: args.id });
}
},
Post: {
author(post) {
return Users.find({ id: post.authorId})
}
}Зверніть увагу що ваші розпізнавачі не обмежені в кількості об’єктів, що повертаються. Наприклад, ви захочете додати поле commentsCountдо об'єкту Post:
Post: {
author(post) {
return Users.find({ id: post.authorId})
},
commentsCount(post) {
return Comments.find({ postId: post.id}).count()
}
}Ключове поняття тут те, що схема запиту GraphQL і структура вашої бази даних ніяк не пов’язані . Іншими словами, в базі даних може не існувати полів authorабо commentsCount, але ми можемо "симулювати" їх завдяки силі розпізначів.
Як було показано вище, ви можете писати будь-який код всередині распознавателя. Так що ви можете змінювати вміст бази даних; такі розпізнавачі називають змінюють ( mutation ).
Схема (schema)
Все це стає можливим завдяки типизованою схемою даних GraphQL. Мета цієї статті дати скоріше короткий огляд, ніж вичерпне введення, так що в цьому розділі не буде подробиць.
Я закликаю вас заглянути в документацію GraphQL (англ) , якщо ви хочете дізнатися більше.
Поширені запитання
Зробимо перерву, щоб відповісти на кілька загальних питань.
Гей, ви там, на задніх рядах. Та ви. Я бачу, ви хочете щось запитати. Ідіть вперед, не соромтеся!
Що спільного у GraphQL і графових баз даних ?
Нічого спільного. Насправді, GraphQL не має нічого спільного з графові БД типу Neo4j . Частина “Graph” відображає ідею отримання контенту, проходячи крізь граф API, використовуючи поля і підполя; частина “QL” розшифровується як “query language” — “мова запитів”.
Мене повністю влаштовує REST, навіщо мені переходити на GraphQL?
Якщо ви не досягли больових точок REST API, рішенням яких є GraphQL, то можете не хвилюватися.
Використання GraphQL поверх REST найімовірніше не змусить вас робити якісь складні зміни в іншому API і ламати накопичився призначений для користувача досвід, так що перехід не буде питанням життя і смерті в будь-якому випадку. Так що дійсно необхідно спробувати GraphQL в невеликої частини проекту, якщо це можливо.
Чи можу я використовувати GraphQL без React / Relay / імя_бібліотекі?
Звісно! GraphQL це тільки специфікація, ви можете використовувати його з будь-якою бібліотекою на будь-якій платформі, використовуючи готовий клієнт (наприклад, у Apollo є клієнти для web, iOS, Angular і інші) або вручну відправляючи запити на сервер GraphQL.
GraphQL був створений Facebook, а я не довіряю Facebook.
Ще раз, GraphQL є всього лише специфікацією, це означає що ви можете використовувати його не використовуючи жодного рядка коду, написаної Facebook.
Наявність підтримки Facebook це безумовно хороший плюс для екосистеми GraphQL. Але на даний момент спільнота досить велика щоб підтримувати GraphQL, навіть якщо Facebook перестане його використовувати.
Якось “дозволити клієнту просити про тих даних, які йому потрібні” не виглядає безпечним
Так як ви пишете свої розпізнавачі, ви можете вирішувати будь-які проблеми безпеки на цьому рівні.
Наприклад, якщо ви дозволите клієнтові використовувати параметр limitдля зазначення кількості документів, які він запитує, ви швидше за все захочете контролювати це число для уникнення атак типу "відмова в обслуговуванні" коли клієнт буде запитувати мільйони документів знову і знову.
Так що ж потрібно щоб почати?
Насправді, необхідно всього два компонента щоб почати:
- Сервер GraphQL для обробки запитів до API
- Клієнт GraphQL, який буде підключатися до endpoint.
Тепер, коли ви розумієте як працює GraphQL, можна поговорити про головні гравців в цій області.
сервери GraphQL
Перше що вам потрібно для роботи, це сервер GraphQL. Сам GraphQL це просто специфікація, так що двері відкриті для конкуруючих реалізацій.
GraphQL-JS (Вузол)
Це посилання на оригінальну реалізацію специфікації GraphQL. Ви можете використовувати її з express-graphql для створення свого сервера API (англ) .
GraphQL-сервер (вузол)
Команда Apollo має свою власну реалізацію GraphQL-сервера. Вона ще не настільки сповнена як оригінал, але дуже добре документована, добре підтримується і швидко розвивається.
інші платформи
На офіційному сайті є список реалізацій специфікації GraphQL для різних платформ (PHP, Ruby та інші).
клієнти GraphQL
Звичайно ви можете працювати з API GraphQL безпосередньо, але спеціальна клієнтська бібліотека виразно може зробити ваше життя простіше.
Естафета
Relay це власний інструментарій Facebook. Він створювався з урахуванням потреб Facebook і може бути трохи надлишковим для більшості користувачів.
клієнт Apollo
Швидко зайняв своє місце новий учасник в цій області — Apollo . Типовий клієнт складається з двох частин:
- Apollo-client , що дозволяє виконувати запити GraphQL в браузері (також є розширення для DevTools )
- Конектор для frontend-фреймворка ( React-Apollo , Angular-Apollo і інші)
За замовчуванням Apollo-client зберігає даних використовуючи Redux , який сам є досить авторитетною бібліотекою управління станом з багатою екосистемою.
Розширення Apollo для Chrome DevTools
Додатки з відкритим вихідним кодом
Незважаючи на те, що GraphQL це досить нова концепція, вже є деякі перспективні додатки з відкритим вихідним кодом, які використовують її.
ВулканJS
Я (автор оригінальної статті — прим. Пер.) Є провідним розробником VulcanJS . Я створив його щоб дати людям можливість спробувати силу стека React / GraphQL без необхідності писати багато шаблонного коду. Ви можете сприймати його як “Rails для сучасної web-екосистеми” тому що він дозволяє створювати CRUD-додатки ( клон Instagram наприклад) протягом декількох годин.
Гетсбі
Gatsby це генератор статичних сайтів для React, який починаючи з версії 1.0 також використовує GraphQL. Незважаючи на те, що це можна здатися дивним поєднанням на перший погляд, це насправді досить потужна ідея. У процесі складання Gatsby може отримувати дані з декількох GraphQL API, потім використовуючи їх для створення повністю статичного клієнтського React-додатки.
Інші інструменти для роботи з GraphQL
GraphiQL
GraphiQL це дуже зручна браузерна IDE для створення і виконання запитів до endpoint-ам GraphQL.
DataLoader
Через вкладеної природи запитів GraphQL, один запит може легко викликати десятки звернень до бази даних. Для зниження навантаження ви можете використовувати інструменти кешування на зразок розробленої Facebook бібліотеці DataLoader.
Створіть сервер GraphQL
Create GraphQL Server це консольна програма, що дозволяє легко і швидко згенерувати сервер на базі Node, що використовує базу даних Mongo.
GraphQL-вгору
Аналогічно Create GraphQL Server, GraphQL-up дозволяє швидко створити GraphQL backend, але на базі сервісу Graphcool .
сервіси GraphQL
Нарешті, є цілий ряд компаній, що надають “GraphQL-backend-як-сервіс”; вони самі подбають про серверної частини для вас, і це може бути хорошим способом зануритися в екосистему GraphQL.
Graphcool
Гнучка backend-платформа, яка об’єднує GraphQL і AWS Lambda, що має безкоштовний тарифний план для розробки.
Scaphold
Інший GraphQL-backend-як-сервіс з безкоштовним тарифним планом. Він пропонує багато функцій, подібних Graphcool.
Уже є чимало ресурсів по GraphQL.
(Також пропонуйте ресурси російською мовою в коментарях — прим. Пер.)
GraphQL.org (англ)
На офіційному сайті GraphQL є чудова документація щоб почати.
LearnGraphQL (англ.)
LearnGraphQL це інтерактивний курс, створений в компанії Kadira .
LearnApollo (англ)
Гарне продовження LearnGraphQL, LearnApollo це безкоштовний курс, створений Graphcool .
Блог Apollo (Підсумок)
Блог Apollo має масу докладних добре написаних постів про Apollo і GraphQL в цілому.
GraphQL Weekly (англ)
Інформаційна розсилка про GraphQL, яку курирує командою Graphcool.
Hashbang Weekly (англ)
Ще одна велика новинна розсилка, яка крім GraphQL також охоплює React і Meteor.
Freecom (англ)
Серія посібників, що описує як створити клон Інтерком за допомогою GraphQL.
Awesome GraphQL (англ)
Досить вичерпний перелік посилань і ресурсів по GraphQL.
Як же ви можете застосувати знову придбані знання про GraphQL на практиці? Ось кілька рецептів, які можна спробувати:
Apollo + Graphcool + Next.js
Якщо ви вже знайомі з Next.js і React, цей приклад дозволить вам налаштувати GraphQL endpoint за допомогою Graphcool і потім відправляти їй запити за допомогою Apollo.
ВулканJS
Підручник Vulcan (англ) допоможе вам створити простий шар даних GraphQL на сервері і на клієнті. Оскільки Vulcan є платформою “все-в-одному”, це хороший спосіб почати роботу без будь-яких налаштувань. Якщо вам потрібна допомога, не соромтеся звернутися в наш канал Slack (англ) !
Підручник GraphQL & React
У блозі Chroma є керівництво з шести частин (англ) зі створення додатка React / GraphQL використовуючи компоненти-орієнтований підхід до розробки.
Висновок
GraphQL спочатку може здатися складним, тому що це технологія, яка зачіпає багато областей нового покоління. Але приділивши час щоб зрозуміти основні концепції, я думаю ви зрозумієте що багато що з цього має сенс.
Вирішіть ви використовувати це чи ні, я вважаю що варто витратити час щоб ознайомитися з GraphQL. Все більше і більше компаній і структур починають використовувати його, і він цілком може протягом наступних декількох років стати одним з ключових будівельних блоків в веб-розробці.
Чи згодні? Не згодні? Питання? Дайте мені знати, тут в коментарях.