GraphQL: Що це за звір? Вивчаємо мову, її застосування, переваги та особливості з Sigma Software University

Що таке GraphQL?

1 березня 2024 року в рамках програми прокачки скілів Learn On відбувся мітап “Від Frontend до Fullstack”. Найбільший інтерес серед учасників викликала тема GraphQL — сучасна мова запитів для API, яка стрімко набирає популярності у світі розробників. Ми вирішили детально розглянути цю мову, її можливості, переваги та особливості. Тож… пристібайтесь, та поїхали🚘

GraphQL що це? Якщо ви все частіше ставите собі або колегам таке питання, то в нас є відповідь. Сьогодні GraphQL — це не просто новий інструмент у веброзробці. Це революційний підхід до взаємодії між клієнтом і сервером, який змінює уявлення про те, як вебзастосунки отримують та надсилають дані. На відміну від традиційних REST API, де кожен запит визначається сервером, GraphQL дає контроль клієнту, дозволяючи йому точно вказати, які дані потрібно отримати.

Уявіть, що GraphQL — це мова, яка дозволяє вам розмовляти з вашим сервером, як з особистим помічником. Ви можете вказати, які саме поля вам потрібні, уникнувши надлишкової інформації, або здійснювати складні запити з одного місця, що зменшує кількість необхідних запитів.

Починаючи роботу з GraphQL, варто розглянути його як ключ до розблокування потужності вашого вебзастосунка. Це інструмент, що створений для того, щоб допомогти вам впроваджувати нові функції швидше, ефективніше та з більшою гнучкістю, ніж будь-коли раніше.

Коротка історія розвитку GraphQL

Подорож GraphQL починається в компанії Facebook, де він був розроблений як внутрішній інструмент для розв’язання проблем з великою кількістю запитів на дані, які виникали при розробці мобільних застосунків. Відповідно, у 2012 році відбулася перша презентація GraphQL перед розробниками.

Однак справжня масова популярність GraphQL почалася, коли Facebook вирішив відкрити свій інструмент для громадськості у 2015 році. Це призвело до того, що GraphQL став відкритим стандартом з відкритим вихідним кодом для розробки API. В той самий час було створено GraphQL Foundation, щоб забезпечити його довгостроковий розвиток і підтримку.

З того часу GraphQL отримав значну популярність у спільноті розробників. Він став невід’ємною частиною багатьох великих проєктів, включаючи GitHub, Shopify, Twitter, та інші. І хоча він не без своїх вад, GraphQL став справжнім витонченим інструментом для створення потужних, ефективних та гнучких API.

Ми знаємо, це не так прикольно, як котики із TikTok, але все одно варто вашої уваги! Читаймо далі👇

Основи

Щоб зрозуміти, чому GraphQL настільки потужний, потрібно ознайомитися з його основними концепціями. GraphQL дозволяє клієнту описати структуру даних, які він хоче отримати, використовуючи спеціальну мову запитів. Це означає, що замість отримання фіксованих відповідей від сервера, клієнт може запитувати конкретні поля та структури.

Запити (Queries) 

Запити — це основний спосіб отримання даних з сервера за допомогою GraphQL. Вони дозволяють клієнту визначити, які саме дані потрібні, і сервер повертає результат відповідно до цього запиту. Це схоже на те, як ви замовляєте їжу в ресторані: ви обираєте конкретні страви з меню, а не отримуєте все, що є на кухні (хоча, впевнені, що такі ресторани теж існують 😋).

Мутації (Mutations)

Мутації використовуються для внесення змін до даних на сервері. Вони дозволяють клієнту створювати, оновлювати або видаляти записи. Уявіть, що мутації — це спосіб сказати серверу: “Зміни це”, і сервер виконає ваші інструкції.

Схема (Schema)

Схема визначає, які дані доступні через GraphQL API і як вони взаємопов’язані. Можна сказати, що це серце GraphQL сервера, оскільки вона визначає, які запити та мутації можна виконувати. Схема також визначає типи даних, які можна запитувати, включаючи об’єкти, списки та інші структури.

Резолвери (Resolvers)

Це функції, які відповідають за обробку запитів і мутацій. Резолвери отримують запити від клієнта, звертаються до бази даних або інших ресурсів і повертають необхідні дані. Вони є мостом між запитами клієнта і фактичними даними на сервері. 

Як розпочати роботу з GraphQL

Крок 1: Встановлення середовища

• Вибір платформи: Найпопулярніші сервери для GraphQL створені на Node.js, але ви можете використовувати будь-яку мову програмування, яку знаєте. Почнемо з Node.js
• Встановлення Node.js: Якщо у вас ще немає Node.js, завантажте його з офіційного сайту і встановіть

Початок проєкту: Створіть нову теку для вашого проєкту і відкрийте її в командному рядку. Виконайте команду:

Це створить файл package.json, який буде керувати вашими залежностями.

Крок 2: Встановлення необхідних пакетів

Express і GraphQL: Express – це популярний вебфреймворк для Node.js, а GraphQL – це мова запитів, яку ми будемо використовувати.

Крок 3: Налаштування сервера

• Створення сервера: Створіть файл server.js в кореневій теці проєкту. В цьому файлі ми будемо налаштовувати наш сервер
• Імпорт пакетів:

• Створення схеми GraphQL:

• Створення кореневого резолвера:

• Налаштування middleware:

Крок 4: Запуск сервера

• Перевірка: Відкрийте ваш браузер і перейдіть на адресу http://localhost:4000/graphql. Ви побачите інтерфейс GraphiQL

Крок 5: Виконання запиту

• Запит “Hello World”: У вікні GraphiQL виконайте наступний запит:

• Ви повинні побачити відповідь:

Крок 6: Додавання нових типів і запитів

Розширення схеми: Додайте більше типів і запитів до вашої схеми

• Додавання нових резолверів:

• Перезапуск сервера: Зупиніть сервер (Ctrl+C) і запустіть його знову командою node server.js.
• Новий запит: Тепер ви можете запитати дані про користувачів:

Вітаємо, ви щойно налаштували свій перший сервер GraphQL!

Читати довго і нудно? Реєструйтесь на курс JavaScript Advanced та отримайте знання швидко і легко! 😁

Мітап Від Frontend до Fullstack від Sigma Software University

Як вже було зазначено, на мітапі Від Frontend до Fullstack, тема GraphQL розкривалась у всій своїй красі. Захід зібрав понад 50 учасників офлайн та понад 40 онлайн.

Теми мітапу:

• Еволюція фронтенд-розробки: Обговорили перехід від традиційного фронтенду до фулл-стек підходу
• Використання патерну BFF: Богдан Штогрінець, Senior Software Developer Sigma Software та ментор на програмі Learn On від Sigma Software University, розповів, як Backend For Frontend (BFF) оптимізує взаємодію між фронтендом та бекендом
• Роль GraphQL в розробці BFF: Ознайомилися з роллю GraphQL як гнучкого та ефективного інструменту для побудови API та його застосування в архітектурі BFF
• Реальні кейси: Обговорили реальні приклади використання BFF та GraphQL у комерційних проєктах

На заході були присутні випускники першої програми прокачки скілів Learn On – Юрій Лаврів та Павло Кундіс, які нещодавно закінчили бекенд напрям .NET. Вони радо ділилися отриманим досвідом на проєкті, своїми враженнями, а також розповіли про співпрацю з менторами. Відгуки про програму незабаром будуть доступні на нашому сайті.

Сфери застосування GraphQL

Крім того, на нашому мітапі, ментор звернув увагу на найпоширеніші сфери застосування мови GraphQL, а саме:

Комерційні вебзастосунки

Багато компаній використовують GraphQL для покращення продуктивності своїх вебзастосунків. Shopify, наприклад, інтегрував GraphQL у свої API, що дозволяє розробникам точно запитувати необхідні дані та зменшувати кількість непотрібних запитів.

Мобільні застосунки

GraphQL забезпечує високу ефективність і зменшує споживання ресурсів, що особливо важливо для мобільних додатків. Airbnb впровадив GraphQL для оптимізації запитів, що дозволяє отримувати лише необхідні дані, знижуючи навантаження на мережу і покращуючи роботу застосунку.

Соціальні мережі

Соціальні мережі, такі як Facebook, активно застосовують GraphQL для управління великими обсягами даних і забезпечення швидкого доступу до них. Власне, нагадаємо, що Facebook і розробив GraphQL для своїх внутрішніх потреб, що дозволяє ефективно отримувати дані з різних джерел.

Електронна комерція

GraphQL допомагає об’єднувати дані з різних джерел, що є важливим для платформ електронної комерції. Amazon інтегрував GraphQL для роботи з даними про продукти, ціни та наявність товарів, що дозволяє зручно керувати асортиментом і надавати актуальну інформацію користувачам.

Інформаційні панелі та аналітика

GraphQL ідеально підходить для створення інформаційних панелей та аналітичних інструментів. New York Times застосував GraphQL для створення динамічних інформаційних панелей, що дозволяють журналістам і редакторам швидко отримувати необхідні дані та приймати обґрунтовані рішення.

Фінансовий сектор

Фінансові компанії використовують GraphQL для створення гнучких і надійних API. PayPal, наприклад, впровадив GraphQL для розробки інтерфейсів, які дозволяють швидко і безпечно обробляти фінансові транзакції та отримувати аналітичні дані.

Переваги та недоліки GraphQL

Переваги

• Клієнти отримують саме ті дані, які їм потрібні, що зменшує кількість запитів і поліпшує продуктивність
• Зменшується обсяг передачі даних, оскільки клієнти отримують лише потрібну інформацію
• GraphQL має багатий набір інструментів для розробників, що полегшує розробку та налагодження API
• Підтримка типізації даних дозволяє зменшити помилки та полегшити підтримку API
• Покращується продуктивність завдяки зменшенню обсягу передачі даних та швидшій відповіді сервера

Недоліки

• GraphQL може бути складнішим у налаштуванні, особливо для новачків
• Реалізація кешування може бути складнішою через специфічність та різноманітність запитів
• Іноді клієнти можуть запитувати забагато даних, що може негативно вплинути на сервер
• Забезпечення належної авторизації для кожного запиту може бути складнішим порівняно з REST API
• Деякі інструменти і бібліотеки можуть не підтримувати GraphQL повністю, що потребує додаткових зусиль для інтеграції

Інструменти та бібліотеки 

Apollo Client

Одна з найпопулярніших бібліотек для роботи з GraphQL на стороні клієнта. Вона забезпечує зручний інтерфейс для виконання запитів і мутацій, а також для управління локальним станом застосунку. Apollo Client підтримує інтеграцію з різними фреймворками, такими як React (GraphQL React це інструмент для інтеграції GraphQL з React, про нього детальніше можна дізнатися, зареєструвавшись на наш курс Frontend), Angular і Vue.

Relay

Фреймворк від Facebook, який дозволяє ефективно працювати з GraphQL у React-застосунках. Relay оптимізує запити та забезпечує високу продуктивність застосунку, автоматично об’єднуючи запити та кешуючи дані.

GraphQL Yoga

Серверний фреймворк для швидкого створення GraphQL API. Він побудований на базі Apollo Server і надає зручний інтерфейс для налаштування серверів GraphQL.

Prisma

Це ORM (Object-Relational Mapping), який інтегрується з GraphQL для роботи з базами даних. Prisma дозволяє легко генерувати GraphQL схеми та запити на основі структури бази даних, що значно спрощує роботу з даними.

GraphQL Playground

Це інтерактивне середовище для тестування та налагодження GraphQL запитів. З ним, розробники можуть експериментувати з запитами, переглядати документацію та отримувати миттєві відповіді від сервера.

GraphiQL 

Інтерактивний інтерфейс для роботи з GraphQL API. Він дозволяє розробникам виконувати запити, переглядати документацію та отримувати відповіді від сервера в режимі реального часу. GraphiQL часто використовується для налагодження та тестування GraphQL-запитів.

AWS AppSync

Керований сервіс від Amazon, який дозволяє створювати GraphQL API з підтримкою реального часу та офлайн-режиму. Він інтегрується з іншими сервісами AWS, такими як DynamoDB, Lambda та Cognito, що робить його потужним інструментом для побудови масштабованих застосунків.

Безпека

Безпека — одна з найважливіших речей, про які варто подбати, коли ми працюємо з GraphQL, так само як і з будь-якою іншою технологією. Нижче описані основні способи та інструменти, які допоможуть зробити ваш GraphQL API безпечним:

• Аутентифікація та авторизація. По-перше, важливо, щоб до вашого API мали доступ тільки авторизовані користувачі. Для цього можна використовувати різні методи аутентифікації, такі як токени JWT (JSON Web Tokens) або OAuth. Також не забувайте про авторизацію, щоб користувачі могли бачити тільки ті дані, до яких вони мають доступ
• Валідація вхідних даних. Перевірка вхідних даних допомагає захиститися від атак типу SQL-ін’єкцій та інших вразливостей. Переконайтеся, що дані, які ви отримуєте, відповідають очікуваним типам та обмеженням, визначеним у схемі GraphQL
• Обмеження запитів (Rate Limiting). Обмеження кількості запитів, які користувач може виконати за певний проміжок часу, допомагає захиститися від DDoS-атак та зловживань. Це можна реалізувати за допомогою спеціальних бібліотек або налаштувань на рівні вебсервера
• Складність запитів. Запити з надмірною глибиною або складністю можуть створювати значне навантаження на сервер. Важливо обмежувати глибину вкладених запитів та контролювати складність запитів, щоб уникнути перевантаження системи. Інструменти, такі як graphql-depth-limit допоможуть вам це реалізувати
• Використання HTTPS. Завжди використовуйте HTTPS для захисту даних, що передаються між клієнтом та сервером. Це забезпечує шифрування даних і захист від атак типу “людина посередині” (MITM)

Висновки

Готові зробити свої застосунки більш ефективними та гнучкими? GraphQL допоможе вам із цим. Завдяки своїм перевагам, таким як запит лише необхідних даних, єдиний кінцевий пункт та підтримка реального часу, GraphQL допомагає розробникам створювати продуктивні застосунки.

Не забувайте про безпеку: аутентифікація, авторизація та валідація вхідних даних — це обов’язкові кроки для захисту вашого API. Використовуйте інструменти, такі як Apollo Client, Relay та Prisma, щоб легко інтегрувати GraphQL у свої проєкти.

Нагадаємо, що на нашому недавньому мітапі ми обговорювали практичні аспекти використання GraphQL. Якщо ви пропустили, не хвилюйтесь — буде ще багато цікавих подій попереду. Або, одразу реєструйтесь на програму та приходьте на мітапи як випускники😁, чого чекати?