Майкл Голод

После того как начался второй раунд матчей ЧМ-2018, мы хотели создать легкий путь чтобы люди могли ответить на все их вопросы о привлеченных командах.

TL; DR

Мы создали API GraphQL с поддержкой Neo4j для Чемпионата мира 2018 года. Вы можете поиграть с ним здесь.

Создание GraphQL API при поддержке Neo4j

Мы уже создали базу данных с все данные чемпионата мира для людей, которые могут использовать и делать запросы, но мы хотели сделать данные доступными для людей, не знающих язык запросов Neo4j, Cypher.

GraphQL в помощь!

Прежде чем мы перейдем к этому, сначала посмотрим на созданную нами модель графика Neo4j.

The Мировой кубок узел находится внутри нашего графика, и все остальные части модели вращаются вокруг него. У нас есть один узел Кубка мира для каждого турнира.

Дальше у нас есть хозяин Страна который соединен с узлом WorldCup с помощью a ОРГАНИЗОВАНО отношения. Спички также принадлежит к чемпионату мира, и каждый Страна имена а Команда Игроков который будет представлять их на чемпионате мира турнир.

Проигрыватель подключен к Внешний вид узел для каждого матча, в котором они участвуют либо в качестве стартера, либо на замене. Если они получают гол, узел Внешний вид соединится с этим узлом цели.

Стартовый набор GRANDstack

Ладно, достаточно Neo4j, вернемся к GraphQL.

GRANDstack комбинирует ГraphQL, Рдействовать, Аpollo и Нeo4j датабаза в простой в использовании пакет для быстрого создания API и приложений. Он использует схему GraphQL для автоматической переноски запросов GraphQL одиночный Neo4j запрашивает и может автоматически генерировать все запросы, мутации и поля по аннотированной схеме.

Мы использовали стартовый набор GRANDstack.io для создания API GraphQL поверх нашей существующей базы данных Neo4j.

Он состоит из двух частей: бэкенда api и передний край ui. Бекенд обслуживает API GraphQL, а также GraphQL Playground (действительно аккуратный браузер и редактор для запросов GraphQL), который также предоставляет схему данных, документы и автозаполнение.

Мы разделили его на наше собственное хранилище, а затем объединили его обратно в ветку worldcup для использования.

Первым шагом является создание a Схема GraphQL. Вы можете увидеть, что мы придумали ниже, что очень совпадает с тем, что у нас есть выше в нашей модели графика.

Минимальная схема выглядит так:

Мы немного расширили его с помощью некоторых специфических для GRANDstack расширений Neo4j, чтобы иметь альтернативные отображения и т.д.

grand-stack/grand-stack-starter
grand-stack-starter – простой стартовый проект для программ GRANDstack с полным стекомgithub.com

После того, как мы определили схему, мы обновили наш файл .env, чтобы он указывал на наше облако Neo4j (размещена база данных).

NEO4J_URI=bolt://c27d992b.databases.neo4j.ioNEO4J_USER=worldcupNEO4J_PASSWORD=worldcup

Вы можете запустить это локально, выполнив yarn && yarn start. Это запустит Playground, где вы можете начать играть с некоторыми запросами.

Мы можем написать несколько запросов, чтобы найти лучший игрок мира.

Конечно, мы можем узнать о нем гораздо больше.

Разверните на zeit.now

Теперь мы готовы к развертыванию. Мы могли бы развернуть наш сервис в любом месте, где размещаются программы Node.js, но @Will.Lyon рекомендовал Zeit Now — отличную и простую в использовании службу для размещения программы, которая имеет простой в использовании бесплатный план для небольших проектов.

Мы просто устанавливаем службу, а затем запускаем now команду в нашем каталоге для развертывания. Для стабильных URL-адресов можно создать псевдоним проекта на фиксированное название.

Сервер GraphQL развернут и готов к использованию. Давайте посмотрим типы запросов, которые мы можем выполнять до набора данных.

Португалия против Марокко

Пока я пишу этот пост, Португалия играет Марокко. Мы можем проверить последнюю оценку, выполнив этот запрос GraphQL на игровой площадке, указанной выше.

На данный момент у Португалии счет 1:0, и не удивительно, что Криштиану Роналду был бомбардиром.

Кто такой Криштиану?

Если мы хотим узнать больше о Криштиане, мы также можем спросить об игроках. К примеру, следующий запрос покажет нам его дату рождения и сколько мячей он когда-нибудь забил на чемпионате мира, а также сколько мячей он забил на этот раз:

Итак, он забил 4 гола на чемпионате мира 2018 года и 7 в общей сложности, что означает, что он забил больше голов в этом турнире, чем на предыдущих вместе взятых!

Итог Германии 1990 года

Хотя Германия не очень хорошо начала этот чемпионат мира, мы можем написать ностальгический запрос, чтобы узнать счет финала чемпионата мира 1990:

Плохие времена 1966 года 🙁

Или мы можем оглянуться на 1966 год, как заставил меня сделать мой коллега Марк:

Хранение данных свежими

База данных обновляется через задание Lambda каждые несколько минут во время игры, поэтому данные должны быть достаточно свежими, когда вы спрашиваете их.

Интерфейс React

Передняя часть ui по сути это просто приложение React, которое использует Apollo Client для запроса нашего API и воспроизведения результатов в компонентах.

Обратите внимание, что текущий код React действительно безобразен и ужасен. Мы оставляем это как задачу для вас создать красивые веб- и/или мобильные приложения с помощью API GraphQL Кубка мира. 🙂

Конечно, вы также можете использовать Vue или Angular или другие фреймворки, которые вам нравятся.

Он подключается к URL-адресу, приведенному в .env файл, куда мы просто помещаем или наш локальный или наш URI now.sh.

REACT_APP_GRAPHQL_URI=

Снова одинокий now команда также развертывает наш пользовательский интерфейс. В нашем случае это нам не нужно, но Zeit теперь имеет поддержку, если у вас есть какие секретные учетные данные.

GRANDstack Хакатон

К счастью, GRANDstack Hackathon есть все еще продолжается сбор замечательных идей и есть очень крутые призы за вашу работу.

Большое спасибо моему коллеге Марку Нидхэму за всю тяжелую работу по возведению данных и модели.