Автор оригинала: FreeCodeCamp Community Member.
Михаил Говори
После второго раунда матчей на чемпионате мира заканчивается чемпионат 2018 года, мы хотели создать Легкий способ Для людей, чтобы ответить на все свои вопросы о вовлеченных командах.
TL; доктор
Мы создали API Backed GraphQL Neo4j для чемпионата мира 2018 года. Вы можете играть с этим здесь Отказ
Строительство API GraphQL поддерживается Neo4J
Мы бы уже создали База данных с Все данные чемпионата мира Для людей использовать и запросить, но мы хотели сделать данные доступными людям, которые не знают язык запроса Neo4j, Cypher.
Graphql к спасению!
Прежде чем мы доберемся до этого, давайте сначаем посмотрим на модель графики Neo4j, которую мы создали.
Worldcup Узел сидит в середине нашего графа, и все остальные части модели вращаются вокруг этого. У нас есть один Worldcup Node для каждого турнира.
В ближайшее время у нас есть хост Страна который подключен к узеру Worldcup A Hosted_by отношение. Матчи Также принадлежат к Worldcup , и каждый Страна имена Отряд игроков Это будет представлять их в Worldcup турнир .
Игрок подключен к Внешний вид Узел для каждого матча, который они участвуют в стартеру или замене. Если они забивают Цель, Узел внешнего вида будет подключаться к этому узлу цели.
Стартовый комплект GrandStack
Хорошо, это достаточно Neo4j, давайте вернемся к GraphQL.
GrandStack сочетает в себе G Рафакль, R eact, А Полс а также N EO4J D Atabase в легко использовать пакет для быстрого здания API и приложений. Он использует схему GraphQL для автоматического транситирования запросов GraphQL в одинокий Neo4j queries и способен автоматически генерировать все запросы, мутации и поля из аннотированной схемы.
Мы использовали Grandstack.io стартовый комплект Чтобы создать API GraphQL в верхней части нашей существующей базы данных Neo4J.
Это состоит из двух частей: бэкэнда API и интерфейс Ui Отказ Бэкэнда обслуживает API GraphQL, а также игровую площадку GraphQL (действительно аккуратный браузер и редактор для запросов GraphQL), который также предоставляет схему данных, документы и автоматическое завершение.
Мы развесили его на наш собственный репозиторий, а затем объединили его обратно на филиал Кубок мира для вас использовать.
Первый шаг – создать Схема GraphQL . Вы можете посмотреть, что мы придумали ниже, что близко соответствует тому, что мы имеем выше в нашей модели графа.
Минимальная схема выглядит так:
Мы продлили его совсем немного с некоторыми расширениями GradStack Neo4j, чтобы иметь некоторые альтернативные сопоставления и так далее.
Гранд-стек/Grand-Stack-Starter Гранд-стек -starter – простой стартовый проект для GrandStack Full Stack Apps github.com
После того, как мы определим схему, мы обновили наш файл .env, чтобы указать на наш Neo4j Cloud (https://neo4j.com/cloud/) размещенной базы данных.
NEO4J_URI=bolt://c27d992b.databases.neo4j.ioNEO4J_USER=worldcupNEO4J_PASSWORD=worldcup
Вы можете запустить это локально, выполняя Пряжа и начинается пряжа . Это запускает детскую площадку в http://localhost: 4000, Где вы можете начать играть с некоторыми запросами.
Мы можем написать некоторые запросы, чтобы найти лучший мировой игрок.
Конечно, мы можем узнать гораздо больше о нем.
Развертывание в Zeit.Now.
Теперь мы готовы развернуть. Мы могли бы развернуть наш сервис в любом месте, где размещаются приложения Node.js, но @will. Лион рекомендовал Zeit ныне – отличный и простой в использовании сервис для проведения вашего приложения, у которого прост в использовании бесплатный план для небольших проектов.
Мы просто устанавливаем сервис, а затем запускаем сейчас Команда в нашем каталоге для развертывания. Для стабильных URL-адресов вы можете псевдоним проектом фиксированным именем.
Сервер GraphQL развернут в https://worldcup-2018.now.sh/ и готов к использованию сейчас. Давайте посмотрим на типы запросов, которые мы можем работать против набора данных.
Португалия против Марокко
Как я пишу этот пост, Португалия играет Марокко. Мы можем проверить последний балл, выполнив этот запрос GraphQL на детской площадке, определенной выше.
Португалия наступает на 1-0 на данный момент, и не удивительно, чтобы узнать, что Криштиану Роналду был бомбардиром.
Кто Криштиано?
Если мы хотим узнать больше о Cristiano, мы можем также запросить игроков. Например, следующий запрос покажет нам свою дату рождения и сколько целей он когда-либо забил в чемпионате мира, а также сколько целей он забил на этот раз:
Таким образом, у него есть 4 гола в Кубке мира 2018 года и 7, что означает, что у него больше целей в этом турнире, чем предыдущие комбинированные!
Оценка Германии в 1990 году
Хотя Германия не вышла к отличному старту на этом чемпионате мира, мы можем написать ностальгический запрос, чтобы узнать счет финала Кубка мира 1990 года:
Плохие времена в 1966 году:(
Или мы могли бы оглянуться на 1966, так как мой коллега заставил меня сделать:
Сохранение данных свежей
База данных обновляется через задание лямбда каждые несколько минут, а матчи воспроизводятся, поэтому данные должны быть достаточно свежими, когда вы его запрашиваете.
Реагировать UI
Интерфейс Ui в основном просто приложение React, которое использует клиент APOLLO для запроса наших API и визуализации результатов в компонентах.
Обратите внимание, что текущий код RACT REACT действительно уродливы и ужасны. Мы оставляем это как вызов вам построить красивые веб-сайты и/или мобильные приложения, используя Кубок мира GraphQL API .:)
Конечно, вы также можете использовать Vue или угловые или другие UI-каркасы, которые вы любите.
Он подключается к URL-адресу, указанному в .env Файл, где мы просто поставили наших местных http://localhost: 4000 Или наш сейчас.
REACT_APP_GRAPHQL_URI=https://worldcup-2018.now.sh/
Опять же, один сейчас Команда развертывает наш пользовательский интерфейс. В нашем случае нам это не нужно, но Zeit теперь имеет поддержку, если у вас есть какие-либо секретные полномочия.
Grandstack Hackhathon
К счастью, Grandstack Hackhathon это все еще продолжается собирать отличные идеи И есть некоторые действительно крутые призы для ваших представлений.
Оригинал: “https://www.freecodecamp.org/news/building-the-2018-world-cup-graphql-api-fab40ccecb9e/”