Підручник GraphQL для початківців: що таке, функції та приклад

Що таке GraphQL?

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

Що потрібно вивчити перед вивченням GraphQL?

Цей навчальний посібник із GraphQL базується на Express та NodeJs. Тому ви можете легко вивчити GraphQL, маючи базове розуміння NodeJS.

Навіщо використовувати GraphQL?

Нижче наведено причини використання GraphQL:

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

Застосування GraphQL

Ось важливі програми GraphQL:

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

Усі ці переваги базуються на трьох рухомих частинах, що працюють разом.

Ключові компоненти GraphQL

У цьому посібнику з GraphQL давайте вивчимо ключові компоненти GraphQL:

Як показано на малюнку вище, є три ключові компоненти GraphQL: 1) Запит, 2) Резолвер і 3) Схема.

Запит

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

Частини запиту:

Нижче наведено важливі частини запиту

1. Поле:

Поле просто вказує на те, що ми запитуємо у сервера певну інформацію. Нижче наведено приклад поля в запиті GraphQL.

query {
    team {
        id
        name
    }
}

Сервер відповідає JSON-документом, форма якого відображає запит:

{
    "data": {
        "team": [
            {
                "id": 1,
                "name": "Avengers"
            }
        ]
    }
}

У наведеному вище прикладі GraphQL ми запитуємо у сервера поле з назвою team та його підполя, такі як id та name. Сервер GraphQL повертає саме ті дані, які ми запитували.

2. Аргументи

In REST, ми можемо передавати лише один набір аргументів як URL сегменти та параметри запиту. Щоб отримати певний профіль, типовий REST-виклик виглядатиме так:

GET /api/team?id=2
Content-Type: application/json

{
    "id": 2,
    "name": "Justice League"
}

Вирішити

Резолвери надають вказівки для перетворення операції GraphQL у дані. Вони вирішують запит до даних, визначаючи функції резолвера.

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

схема

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

Особливості GraphQL

Ось важливі функції GraphQL:

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

Клієнти GraphQL

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

Цей JavaБібліотека скриптів розроблена Facebook для створення програм React з GraphQL. Клієнтами GraphQL можуть бути CMS, наприклад Drupal, односторінкова програма, мобільна програма тощо.

Сервери GraphQL

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

Шлюзи GraphQL

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

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

1. Замініть статичне значення в запиті на ім’я змінної.
2. Оголошіть назву змінної як одну зі змінних, які приймаються запитом GraphQL.
3. Передайте значення в словнику змінних для транспортного засобу.

Ось як це виглядає разом. Спочатку запит, який оголошує змінну:

query HeroNameAndFriends($episode: Episode) {
    hero(episode: $episode) {
        name
        friends {
            name
        }
    }
}

Потім окремий словник значень змінних, що надсилається разом з ним:

{
    "episode": "JEDI"
}

І відповідь, яку повернув сервер:

{
    "data": {
        "hero": {
            "name": "R2-D2",
            "friends": [
                { "name": "Luke Skywalker" },
                { "name": "Han Solo" },
                { "name": "Leia Organa" }
            ]
        }
    }
}

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

Що таке мутація?

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

Пункти, які слід враховувати під час розробки мутацій GraphQL

Ось важливі моменти при проектуванні GraphQL:

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

Запити на читання та мутації на запис. Третій тип операцій охоплює дані, які змінюються, поки клієнт ще підключений.

Що таке підписка в GraphQL?

A передплата — це третій тип операції в специфікації GraphQL, поряд із запитом та мутацією. Запит та мутація виконуються в одному запиті та відповіді. Підписка натомість підтримує довготривале з'єднання відкритим, зазвичай через WebSockets, тому сервер надсилає клієнту новий результат щоразу, коли відбувається певна подія.

Синтаксис відображає запит, де ключове слово subscription замінює query:

subscription OnCommentAdded($postId: ID!) {
    commentAdded(postId: $postId) {
        id
        content
        author {
            name
        }
    }
}

Три моменти відрізняють підписки на практиці.

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

Різниця між GraphQL і REST

Наступна таблиця показує важливу різницю між GraphQL і REST.

Програми та інструменти з відкритим кодом, які використовує GraphQL

Нижче наведено важливі програми та інструменти з відкритим кодом, які використовує GraphQL:

• ГетсбіGatsby — це застосунок на базі GraphQL, який може використовувати дані, отримані з кількох джерел GraphQL API. Ви можете використовувати його для розробки статичних та клієнтських застосунків React.
• GraphiQL: Це IDE, яке інтегрується з браузером, а також взаємодіє з API GraphQL. Деякі з функцій, які включає GraphiQL, це мутації, запити даних та автозаповнення запитів.
• Ігровий майданчик GraphQL: Це потужне IDE з вбудованим редактором для обробки мутацій, валідації, запитів GraphQl, підписок тощо. Розробник може використовувати це IDE для візуалізації структури схеми. Проект зараз закрито, а його функції повернуто в GraphiQL.
• Prisma: Prisma — це база даних ABStracшар tion, який тепер постачається як типобезпечна ORM, що широко поєднується із сервером GraphQL для доступу до операцій CRUD (створення, читання, оновлення та видалення).
• Біт: Це інструмент і платформа з відкритим кодом, яка перетворює багаторазовий код на компоненти. Розробники можуть використовувати їх для спільного використання та розробки різноманітних проектів.

Поширені запитання