Що таке GraphQL і як з ним працювати?

У сьогоднішньому матеріалі від компанії FoxmindED розбираємося, GraphQL що це за інструмент і як з ним працювати?

Це – мова запитів і маніпулювання даними для API. Її розробила компанія Facebook у 2012 році та випустила публічно у 2015 році. GraphQL є відкритим вихідним кодом і підтримується GraphQL Foundation, некомерційною організацією, створеною для просування і розвитку GraphQL.

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

Основи 

Запит є основним способом взаємодії із сервером GraphQL. Він визначає, які дані потрібно отримати від сервера.

Запит складається з таких частин:

1. Об’єкт запиту – визначає, які дані потрібно отримати від сервера. Він містить одне або кілька полів. Кожне поле визначає тип даних, який потрібно отримати.

query GetUsers {

  users {

    id

    name

    email

  }

}

Тут ми запитуємо дані про користувачів.

2. Аргументи запиту – дають змогу фільтрувати або сортувати дані, які повертаються сервером. Можуть бути додані до будь-якого поля об’єкта запиту.

query GetUsers {

  users(page: 1, limit: 10) {

    id

    name

    email

  }

}

Цей запит просить перші 10 користувачів.

3. Кортежі – визначають, як дані мають бути організовані. Вони дозволяють групувати дані разом або створювати ієрархічні структури.

query GetUsers {

  users {

    id

    name

    email

    posts {

      id

      title

      content

    }

  }

}

Тут ми запитуємо дані про користувачів та їхні пости.

GraphQL має низку переваг порівняно з традиційними API:

• Ефективність: можна точно вказати, які дані нам потрібні, уникаючи надлишкової передачі.
• Гнучкість: можна вибирати, як ми хочемо отримати дані, що дає більше свободи.
• Простота використання: наявність простого синтаксису, який підходить для розробників усіх рівнів.

Робота 

Щоб використовувати цей інструмент, вам необхідно встановити сервер (відповідає за обробку запитів і повертає дані) і клієнт (надсилає запити серверу й обробляє отримані дані).

Крок 1: Встановіть сервер (можна використовувати: Apollo Server, Hasura GraphQL Engine, NestJS GraphQL).

Крок 2: Встановіть клієнт (наприклад: Apollo Client, Relay, Relay Modern)

Крок 3: Створіть запит. Запит GraphQL складається з таких частин:

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

Ось приклад запиту, який запитує всі дані про користувачів:

query GetUsers {

  users {

    id

    name

    email

  }

}

Крок 4: Надішліть запит. Для цього ви можете використовувати клієнт Apollo Client. Ось, як це буде виглядати:

const client = new ApolloClient({

  uri: "http://localhost:4000/graphql",

});

const response = await client.query({

  query: "GetUsers",

});

Цей код створює екземпляр клієнта Apollo Client і надсилає запит “GetUsers” до сервера GraphQL, який запущений на localhost:4000.

Крок 5: Обробіть відповідь. Відповідь від сервера буде об’єктом JSON. Ви можете використовувати цей об’єкт для обробки отриманих даних. Наприклад:

const response = await client.query({

  query: "GetUsers",

});

const users = response.data.users;

for (const user of users) {

  console.log(user.id, user.name, user.email);

}

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

Розглянемо приклади маніпулювання даними через запити:

1. Додавання даних: ви можете використовувати запити для додавання нових даних у базу даних. Наприклад, наступний запит додає нового користувача:

mutation AddUser {

  addUser(input: {

    name: "John Doe",

    email: "johndoe@example.com",

  }) {

    id

    name

    email

  }

}

2. Оновлення даних: ви можете використовувати запити для оновлення наявних даних у базі даних. Наприклад, наступний запит оновлює ім’я користувача з ідентифікатором 1:

mutation UpdateUser {

  updateUser(input: {

    id: 1,

    name: "Jane Doe",

  }) {

    id

    name

    email

  }

}

Застосування в проєктах

Розглянемо області, де GraphQL найбільш ефективний:

• Веб-розробка 

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

• Соціальні мережі та новинні портали

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

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

Крім того, інші великі компанії та продукти, як-от Airbnb, GitHub, Pinterest, Shopify і New York Times, також обирають GraphQL. Для чого? Для різноманітних завдань, починаючи від створення динамічних інтерфейсів користувачів до управління великими обсягами даних і надання гнучких API.

GraphQL vs REST API

GraphQL і REST API – це два популярні підходи до розробки API. Обидва підходи мають свої переваги та недоліки. Перший – це мова запитів і маніпулювання даними для API. Вона дає змогу клієнту точно вказати, які дані йому потрібні від сервера. Другий – архітектурний стиль для створення API. Він добре підходить для простих додатків, де не потрібна висока гнучкість або ефективність.

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

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

Існує безліч інструментів і бібліотек, які можна використовувати для роботи з GraphQL. Ось деякі з них:

• Сервери (Apollo Server, Hasura GraphQL Engine, NestJS GraphQL).
• Клієнти (Apollo Client, Relay, Relay Modern).
• Інструменти для розробки (GraphQL Playground, GraphiQL, GraphQL Voyager).
• Інструменти для тестування (GraphQL Inspector, GraphQL Validator, GraphQL Code Generator).

Пропонуємо кілька рекомендацій щодо вибору інструментів для різних завдань:

• Для розробки сервера підійде: Apollo Server, Hasura GraphQL Engine або NestJS GraphQL.
• Для розробки клієнта краще використовувати: Apollo Client, Relay або Relay Modern.
• Для розробки та тестування запитів: GraphQL Playground, GraphiQL або GraphQL Voyager.
• Для тестування серверів: GraphQL Inspector, GraphQL Validator або GraphQL Code Generator.

Безпека та оптимізація 

Як і будь-який інший інструмент, GraphQL може бути використаний для нанесення шкоди, якщо він використовується небезпечно.

Що потрібно врахувати під час використання GraphQL:

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

Поради щодо оптимізації запитів і управління продуктивністю:

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

Майбутнє 

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

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

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

Загалом, майбутнє цього інструменту має перспективний вигляд, з потенціалом для подальшого розвитку і розширення в різних галузях розробки ПЗ.

Висновок

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