Где ты держишь шутки? В Dadabase конечно! Давайте представим, что вы являетесь постановлением сайта в базе данных лучшей папы в мире. Ваше приложение общается с базой данных, используя API REST, который позволяет вам получать шутки и публиковать рейтинги для этих шуток. Посетители вашего сайта могут оценить каждую шутку, которую они видят через простой пользовательский интерфейс.
Недавно вы слышали о новой модной технологии, которая называется GraphQL, которая обеспечивает гибкость для запроса только тех данных, которые вам нужны, используя одну конечную точку API. Это звучит аккуратно, и вы хотели бы начать использовать его в своем приложении. Но вы действительно предпочтете не вносить никаких нарушающих изменений в существующем API REST. Можно ли поддержать как API REST, так и API GraphQL в вашем приложении? Ты собираешься узнать!
В этой статье мы рассмотрим, что нужно для реализации API GraphQL поверх существующего API REST. Эта стратегия позволяет вам начать использовать GraphQL в устаревших частях вашего приложения, не разбивая какие -либо существующие контракты с функциональностью, которые все еще могут полагаться на исходный API REST.
Если вы хотите увидеть конечный результат, вы можете найти Код для остальных API здесь и Код для API Frontend и GraphQL здесь Анкет Не забудьте Посетите приложение а также стонать от некоторых шуток.
Первоначальная архитектура
Бэкэнд приложения был первоначально построен с использованием Узел и JSON Server . JSON Server использует Экспресс Чтобы предоставить полный API REST для макетной базы данных, сгенерированной из простого файла JSON. Отдельный экспресс -сервер заботится о обслуживании статических активов HTML, CSS и JavaScript для фронта. Frontend реализован в Vanilla JS и использует встроенный браузер Fetch API Чтобы сделать запросы API. Приложение размещено на Хероку Чтобы сделать развертывание и мониторинг ветра.
Наш файл JSON содержит информацию для нескольких шуток, а также некоторых рейтингов. Он воспроизведен в полном объеме:
JSON Server принимает этот файл в качестве отправной точки для базы данных, а затем реализует API REST, который включает поддержку запросов GET, POST, POLT, PATCH и DELETE. Магия сервера JSON заключается в том, что использование этого API действительно изменяет базовый файл JSON, поэтому база данных полностью интерактивна. Сервер JSON может быть запущен непосредственно из сценария NPM без какой -либо дополнительной настройки, но для того, чтобы обеспечить немного больше конфигурации и динамического порта, мы можем вместо этого написать несколько строк кода, как SO:
Вы можете проверить нашу макетную базу данных, клонируя Репо для API , бег NPM Установка , а затем бег NPM запускается . Если вы перемещаетесь в http://localhost: 3000/jokes Вы увидите все шутки. Навигация на http://localhost: 3000/рейтинги будет отображать все рейтинги.
Замечательно! Мы можем запустить бэкэнд наше приложения на локальном уровне в браузере. Теперь давайте примем наш API на Heroku. Во -первых, нам нужно Установите Heroku Cli Анкет После этого мы можем войти в систему, создать приложение, подтолкнуть его к Heroku и открыть новое приложение в нашем браузере на четыре простых шага:
# log in to your Heroku account heroku login # create the Heroku app heroku create dad-joke-dadabase-rest-api # deploy the code to Heroku git push heroku master # open the Heroku app on your machine heroku open
И посмотрите, теперь у нас есть общедоступный API в Интернете!
Создание пользовательского интерфейса
Теперь, когда у нас есть работающий API REST, мы можем построить Frontend, чтобы потреблять этот API и отобразить пользовательский интерфейс для просмотра и оценки шуток. HTML предоставляет оболочку страницы с контейнерами, в которые JavaScript будет вставлять контент для каждой шутки.
JavaScript показан ниже. Ключевые кусочки, которые взаимодействуют с API REST, – это два запроса выбора. Первые извлекают все шутки из базы данных, достигнув /шутки? _embed = рейтинги конечная точка. Второй делает запрос сообщения в /рейтинги Конечная точка, чтобы отправить новый рейтинг для каждой шутки, которую вы оцените.
Настройка сервера Apollo
Итак, это существующая архитектура приложения: простой фронт, который взаимодействует с базой данных через API REST. Теперь, как мы можем начать использовать GraphQL? Мы начнем с установки Apollo-Server-Express , который является пакетом, который позволяет нам использовать Apollo Server с экспрессом. Мы также установим Apollo-Datasource-Rest Пакет, чтобы помочь нам интегрировать API REST с Apollo Server. Затем мы настроим сервер, написав следующий код:
Как вы можете видеть, мы настроим сервер Apollo с определениями типа ( typedefs ), Резолюры и DataSources Анкет typedefs содержать схема Для нашего API GraphQL. В нем мы определим типы для наших шуток и рейтингов, а также как запросить и мутировать. Резолюры Расскажите серверу, как обрабатывать различные запросы и мутации и как они ссылаются на наши Источники данных Анкет И, наконец, DataSources Определите, как API GraphQL относится к API REST.
Вот определения типа для Шутка и Рейтинг Типы и как запрашивать и мутировать:
Источник данных Jokes определяет методы вызова исходной конечной точки API REST для создания, чтения, обновления и удаления шуток из базы данных:
Источник данных о рейтингах выглядит почти идентичным, но с «рейтингом» заменена «шуткой» в каждом случае. ( См. Github Repo Если вы хотите увидеть код для этого.)
Наконец, мы настроили наши резолюры, чтобы показать, как использовать источники данных:
При этом у нас есть все, что нам нужно, чтобы начать использовать наш API GraphQL через Apollo Server. Чтобы разместить наш новый Frontend и GraphQL API на Heroku, мы создадим и развертываем второе приложение, как SO:
# create the Heroku app heroku create dad-joke-dadabase # deploy the code to Heroku git push heroku master # open the Heroku app on your machine heroku open
Замена конечной точки на шутки
Вы вспомните, что у нас есть две конечные точки, используемые Frontend: одна, чтобы взять шутки и одна для публикации рейтингов. Давайте поменяем API REST для нашего API GraphQL, когда мы заставляем шутки. Код ранее выглядел так:
Теперь, чтобы использовать конечную точку GraphQL, мы можем написать это вместо этого:
Теперь мы можем запустить приложение локально и проверить, что пользовательский опыт все еще работает должным образом. На самом деле, с точки зрения пользователя, ничего не изменилось вообще. Но если вы посмотрите на запросы сети в инструментах разработчика вашего браузера, вы увидите, что теперь мы заставляем наши шутки из /graphql конечная точка. Удивительно!
Замена конечной точки для отправки рейтингов
Один запрос API вниз, один, чтобы пойти! Давайте сейчас поменяем функциональность подчинения рейтингов. Код, чтобы опубликовать новый рейтинг шутки ранее выглядел так:
Чтобы использовать наш API GraphQL, теперь мы будем использовать следующее:
Быстрый тест дает нам несколько многообещающих результатов. Еще раз, пользовательский опыт остается неизменным, но теперь мы полностью используем /graphql Конечная точка для обоих наших запросов!
Вывод
Мы сделали это! Мы успешно написали конечную точку API GraphQL поверх существующего API REST. Это позволяет нам использовать GraphQL для содержания нашего сердца, не нарушая существующую функциональность и без изменения исходного API REST. Теперь мы можем установить API остальных или полностью избавиться от него позднее.
В то время как наша база данных шуток папы полностью вымышленна, почти каждая технологическая компания, которая существовала до выпуска GraphQL в 2015 году, окажется в той же позиции в миграции в GraphQL, если и когда они решат это сделать. Хорошей новостью является то, что Apollo Server достаточно гибкий, чтобы извлечь данные из различных источников, включая существующие конечные точки API REST.
Оригинал: “https://dev.to/thawkin3/how-to-implement-a-graphql-api-on-top-of-an-existing-rest-api-2g9l”