Учебное пособие по GraphQL для начинающих: что такое, возможности и пример

Что такое GraphQL?

GraphQL GraphQL — это серверная технология прикладного уровня, разработанная компанией Facebook (ныне Meta) для выполнения запросов к существующим данным. Она была выпущена в 2015 году и регулируется протоколом GraphQL. Foundation С 2018 года. GraphQL позволяет оптимизировать вызовы RESTful API. Он предоставляет декларативный способ получения и обновления данных. GraphQL помогает загружать данные с сервера на клиент. Он позволяет программистам выбирать типы запросов, которые им удобнее выполнять.

Что нужно изучить, прежде чем приступать к изучению GraphQL?

Это руководство по GraphQL основано на экспресс и 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 ОТДЫХТаким образом, мы можем передать только один набор аргументов. 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. Вы можете напрямую запросить API GraphQL, но лучше всего использовать выделенную клиентскую библиотеку с помощью 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:

• Нейминг: Прежде всего, вам нужно назвать глагол мутации. Затем существительное или «объект», если применимо. Используйте CamelCase при именовании мутаций.
• Специфичность: Вы должны сделать мутацию максимально специфичной. Мутации должны представлять семантические действия, предпринимаемые пользователем.
• Входной объект: Используйте один уникальный обязательный тип входного объекта в качестве аргумента для выполнения мутации на клиенте.
• Уникальный тип полезной нагрузки: Вы должны использовать уникальный тип полезных данных для каждой мутации. Вы также можете добавить выходные данные мутации в виде поля для этого конкретного типа полезных данных.
• Вложенность: Используйте вложение в свою мутацию везде, где это имеет смысл. Это позволяет вам полностью использовать GraphQL API.

Запросы читаются, а изменения записываются. Третий тип операций охватывает данные, которые изменяются, пока клиент еще подключен.

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

A подписка Это третий тип операций в спецификации GraphQL, наряду с запросом и мутацией. Запрос и мутация выполняются в рамках одного запроса и одного ответа. Подписка же поддерживает долговременное открытое соединение, обычно через WebSockets, поэтому сервер отправляет новый результат клиенту каждый раз, когда происходит указанное событие.

Синтаксис аналогичен запросу, только вместо слова «query» используется ключевое слово «subscription»:

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

На практике существуют три отличительные черты подписок.

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

Разница между GraphQL и REST

В следующей таблице показаны важные различия между GraphQL и REST.

Приложения и инструменты с открытым исходным кодом, используемые GraphQL

Важными приложениями и инструментами с открытым исходным кодом, используемыми GraphQL, являются следующие:

• ГэтсбиGatsby — это приложение, работающее на основе GraphQL, которое может использовать данные, полученные из нескольких источников GraphQL API. Вы можете использовать его для разработки статических и клиентских приложений React.
• ГрафиQL: Это интегрированная среда разработки (IDE), которая интегрируется с браузером и взаимодействует с API GraphQL. Среди функций GraphiQL — мутации, запросы к данным и автозаполнение запросов.
• Площадка для GraphQL: Это мощная IDE со встроенным редактором для обработки мутаций, валидации, GraphQL-запросов, подписок и т. д. Разработчик может использовать эту IDE для визуализации структуры схемы. Проект в настоящее время закрыт, и его функции были интегрированы обратно в GraphiQL.
• Prisma: Prisma — это база данных.tracСлой управления, теперь предоставляемый в виде типобезопасного ORM, широко используется в паре с сервером GraphQL для предоставления доступа к операциям CRUD (создание, чтение, обновление и удаление).
• Немного: Это инструмент и платформа с открытым исходным кодом, которая преобразует повторно используемый код в компоненты. Разработчики могут использовать их для обмена и разработки различных проектов.

Часто задаваемые вопросы (FAQ)