Основы языка запросов GraphQL и практические примеры с Vue

Основы языка запросов GraphQL и практические примеры с Vue

От автора: GraphQL – это язык запросов для вашего API и серверный runtime для выполнения запросов. Одна точка может вернуть данные о множестве ресурсов, из-за чего он отлично подходит для одностраничных приложений Vue.js. В статье будет показано, как создать GraphQL API с нуля, а также как определить и реализовать запросы и мутации с пользовательскими типами. Я буду использовать Node.js для сервера GraphQL, а делать запросы и показывать результат с помощью одностраничного приложения Vue.js

Исходный код для статьи.

Введение

Сервис GraphQL создается путем определения типов и полей. Далее определяются функции для каждого поля каждого типа. Каноничный пример из документации GraphQL:

Профессия Frontend-разработчик PRO

Готовим Frontend-разработчиков с нуля

На курсе вы научитесь создавать интерфейсы веб-сервисов с помощью языков программирования и дополнительных технологий. Сможете разрабатывать планировщики задач, мессенджеры, интернет-магазины…

До 10 проектов в портфолио для старта карьеры
Подходит для новичков без опыта в программировании
Практика на вебинарах с разработчиками из крупных компаний

Выше показано, как реализовывать запросы, пользовательские типы и точки с помощью GraphQL. Соответствующий запрос на стороне клиента выглядит так:

И возвращает:

У GraphQL замечательная официальная документация, но в ней не хватает примеров того, как запрашивать данные с помощью стандартного HTTP клиента, а также как интегрировать это в мое приложение Vue.js. Этим я и займусь в статье. Создадим проект Vue с помощью нового vue-cli.

Начало

Установите vue-cli командой:

Создайте новый проект командой:

Оставьте настройки по умолчанию командой default (babel, eslint). Будет установлена масса модулей node. Также необходимо создать папку для сервера API. Для этого после cd в проекте запустите следующее (cd graphql-example)

Мы добавили graphql, express и express-graphql. Это тонкий слой, реализующий несколько лучших практик и руководств для подачи запросов через HTTP.

Базовый запрос

Создадим простой запрос, чтобы проверить работу, а также посмотрим, как выглядит сервер GraphQL. В server/index.js подключите пару модулей:

express и express-graphql позволят отвечать на HTTP запросы

buildSchema используется для определения типов (подробнее ниже)

cors позволит делать запросы из приложения Vue, которое будет работать на порту 8080, на сервер, запущенный на порту 4000.

Далее необходимо определить schema  — типы запросов и типы сервера, которые будем использовать. Наша первая схема – просто hello world от GraphQL:

Мы определяем тип Query language, который возвращает String. GraphQL статически типизирован – у полей есть типы, и если что-то не совпадает, будет выброшена ошибка.

В отличие от REST API, Graph API обладают одной точкой, которая отвечает на все запросы. Она называется resolver. Я назову свою rootValue и включу реализацию для запроса language:

Language просто возвращает String. Если вернуть другой тип, например, 1 или {}, будет выброшена ошибка, так как при объявлении language в схеме мы указали, что возвращается String. Последний шаг – создать приложение express и подключить resolver, rootValue и schema.

Теперь давайте реализуем клиентское приложение Vue, которое будет делать запросы.

Создание запроса

Перейдите в src/App.vue и удалите шаблон. Он должен выглядеть так:

Мы также импортируем axios, с помощью которого будем делать HTTP запросы.

По умолчанию graphqlHTTP следит за POST запросами. По рекомендациям к работе с HTTP мы должны включать query и variables в тело запроса. Это привело нас к запросу:

Запрос должен находиться внутри фигурных скобок. Добавим кнопку для отправки запроса и переменную для хранения ответа:

Давайте запустим. В терминале поднимите сервер GraphQL командой node server. В другом терминале запустите приложение Vue командой npm run serve. Откройте //localhost:8080. Если все пройдет хорошо, вы увидите:

Основы языка запросов GraphQL и практические примеры с Vue

Клик по Get Language должен вернуть и отрендерить результат. Хорошо. До сих пор мы:

определили схему

создали resolver, rootValue

сделали запрос с помощью axios, который включает строку запроса

Что еще можно делать с помощью GraphQL?

Пользовательские типы с моделями

GraphQL позволяет определять пользовательские типы и объекты для их представления в целевом языке. У нас это JS, но GraphQL клиенты есть для большинства серверных языков. Я создам в схеме тип Champion и соответствующий класс ES6 для хранения свойств и методов.

Сперва, обновите схему:

Помимо нового типа Float ничего необычного. Далее можно определить класс ES6 для представления этого типа и хранения любого метода объекта или дополнительных данных. Я создам это в новом файле server/champion.js.

Ничего особенного, просто класс ES6. Заметьте, у нас есть name и attackDamage – те же поля, что определены в схеме для Champion.

Теперь создайте другую строку запроса, использующую тип Champion. Обновленная schema:

getChampions возвращает массив Champion. Отлично! Закончим пример некими данными и другой точкой:

Перезапустите сервер нажатием ctrl+c в терминале для сервера и заново запустите с помощью node server. Давайте проверим работу, послам запрос с клиента.

Запрос определенных полей

Запрос getChampions немного интереснее language. В этот раз результат будет содержать тип Champion, определенный пользователем – и запрошенные нами поля. GraphQL требует явно указывать поля. Например, запрос ниже:

Не сработает. Должно быть указано, как минимум, одно поле. Новый запрос:

Вернет:

Заметьте, вернулось только name! Если включить attackDamage, оно также вернется. Запрос:

И ответ:

Реализовать это в приложении Vue так же просто:

Не забудьте перезапустить сервер командой node server, если не сделали этого. Приложение Vue перезапускать не нужно. Это сделает горячая перезагрузка Webpack при сохранении.

Клик по Get Champions даст:

Основы языка запросов GraphQL и практические примеры с Vue

Передача аргументов

getChampions вернет всех чемпионов. GraphQL также поддерживает передачу аргументов для возврата подмножества данных. Для этого нужно:

дополнительный объект variables в теле POST

сказать клиентскому запросу тип аргументов, которые вы будете парсить в запрос из variables

Реализуем запрос getChampionByName. Как обычно, начните с определения строки запроса:

Заметьте, мы определили аргумент name и тип String!. Знак ! значит, что аргумент обязательный. Реализация:

Ничего удивительного – мы просто используем find для получения соответствующего чемпиона. Для улучшения можно добавить обработку ошибок и сравнить name с неучтенным случаем.

Перейдем к клиентской реализации. Здесь все становится немного интереснее. При передаче аргументов мы должны дать запросу имя и объявить аргументы с соответствующим типом:

Построчно:

query GetChampionByName – имя, присвоенное запросу. Это может быть что угодно, но оно должно описывать, что делает запрос. В нашем случае мы вызываем getChampionByName, поэтому я решил сделать имя запроса и запрос на сервере одинаковыми за исключением первой заглавной буквы. В реальном приложении один вызов API может содержать множество операций. Имя запроса упростит понимание кода.

($championName: String!) значит, что variables должен содержать championName, и он обязательный.

getChampionByName(name: $championName) – выполняемый на сервере запрос. Первый аргумент name должен использовать значение championName в объекте variables.

Мы запрашиваем name и attackDamage в ответ.

Дополнительная разметка позволит показать результат в приложении Vue (не забудьте перезапустить сервер GraphQL):

Основы языка запросов GraphQL и практические примеры с Vue

Обновление записей

До сих пор мы только вытаскивали данные. Часто хочется обновить данные. У GraphQL для этого есть мутации. Синтаксис и реализация не далеко ушли от того, что мы уже изучили. Начнем с определения мутации:

Мутации идут с типом Mutation. Остальной синтаксис должен быть знаком. Мы возвращаем обновленную запись типа Champion. Реализация простая:

В более реалистичном примере вы можете выполнить SQL запрос для обновления записи в базе данных или провести валидацию. Мы должны вернуть тип Champion, так как это объявлено в мутации. GraphQL автоматически выберет правильные поля для возврата на основе запроса – мы запросили name и обновили attackDamage:

Единственное реальное различие – мы определили, что имя операции должно быть типа mutation, а не query. Полный пример:

Как обычно, перезапустите GraphQL сервер. Результат:

Основы языка запросов GraphQL и практические примеры с Vue

Можете кликнуть на Get Champion и проверить сохранение данных (должно вернуться обновленное attack damage).

Основы языка запросов GraphQL и практические примеры с Vue

Тестирование

Я не проводил тестирование. Однако тестировать серверные точки легко, так как это просто чистый JS. Просто экспортируйте объект rootValue и тестируйте функции, как обычно. Я расскажу о тестировании GraphQL API в следующей статье.

Заключение

GraphQL способен на множество других операций. Более подробно читайте на официальном сайте. Надеюсь, в будущем рассказать больше. Это свежая альтернатива REST, и инструмент хорошо подходит для одностраничных приложений Vue.js.

Автор: Lachlan Miller

Источник: //medium.com/

Профессия Frontend-разработчик PRO

Готовим Frontend-разработчиков с нуля

На курсе вы научитесь создавать интерфейсы веб-сервисов с помощью языков программирования и дополнительных технологий. Сможете разрабатывать планировщики задач, мессенджеры, интернет-магазины…

До 10 проектов в портфолио для старта карьеры
Подходит для новичков без опыта в программировании
Практика на вебинарах с разработчиками из крупных компаний

Редакция: Команда webformyself.

Метки:

Похожие статьи:

Комментарии Вконтакте: