Эта статья поможет вам начать работу с graphql и keystonejs на основе примера, который я загрузил на Github + демо на Heroku. Для проекта я повторно использовал старый клон hackernews, который я собираю с обратной связью и реагирую. Поэтому я просто настроил код реакции для подключения к graphql и настроил keystonejs для работы с graphql.

Спецификации функций, необходимых клону hackernews:

  • Auth (вход / выход)
  • Размещение сообщений
  • Голосование за посты вверх / вниз
  • Выделите свои сообщения
  • (удалено) Комментарий

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

Основные используемые технологии / библиотеки: graphql, react, keystone, ava, firebase. В этом разделе я просто рассмотрю graphql, keystone, ava и firebase. Начнем с firebase.

Firebase - это служба Google, которая предлагает базу данных в реальном времени и аутентификацию как услугу. В настоящее время аутентификация очень важна, люди хотят входить в систему / регистрироваться с помощью Google, пароля и т. проекты. В бесплатном плане достаточно места, так что зачем возиться с настройкой паспорта.

KeystoneJs - это nodejs cms, если вы привыкли к nodejs, то начать с ним несложно. Мне нужна была база данных для сохранения постов, а keystonejs предлагает приятный интерфейс администратора для добавления / удаления неподходящих постов за считанные секунды. С firebase я мог бы иметь базу данных в реальном времени, что неплохо, но мне нужно было бы создать какой-то интерфейс администратора, который требует времени ...

Ava после написания логики выборки данных я почувствовал, что мне нужен какой-то тест, чтобы упростить расширение и повысить отказоустойчивость в будущем. Ava - это фреймворк для тестирования, похожий на mocha, но более крутой, потому что он поддерживает es6 из коробки и делает написание теста менее адским обратным вызовом. Mocha также имеет некоторые проблемы с es6, что ограничивает написание тестов.

Graphql - это круто, если вы работаете в фоновом режиме REST. Graphql - это фреймворк facebook для запроса данных только на одной конечной точке. В первый раз, когда я прочитал об этом, я подумал, вау, не более 100 конечных точек, наборов для моделей, и вы просто получаете нужные данные - идеально. Я выбрал graphql, потому что хотел получить опыт работы с ним, я бы тоже мог выбрать grpc, может быть, скоро. Чтобы использовать graphql с nodejs и браузером, есть 2 способа: либо вы используете библиотеку graphql-js непосредственно через facebook, что немного многословно на сервере клиент + сервер, либо вы используете apollo-stack, как это сделал я, который делает вещи намного проще.

Apollo-Stack сделан метеором и чем-то похож на реле. Он предлагает, например, функции декоратора для запроса данных на клиенте в реакции. И упрощает написание схем graphql на сервере.

Перейдем к мелочам. Я выполнил следующие шаги, чтобы завершить проект. (Я добавил ссылки на соответствующие кодовые части на github)

добавить babel-регистр в индексный файл (keystone.js)

Я больше не хочу упускать возможности ES6 в любой кодовой базе JS.

добавить базу огня

модуль firebase nodejs будет проверять, что пользователи аутентифицированы и имеют право выполнять определенные действия. Firebase работает с JWT (JSON Webtokens), которые должны быть декодированы серверной частью, чтобы проверить, аутентифицирован ли пользователь. Создайте Учетную запись службы, чтобы серверная часть могла аутентифицироваться снова на серверах Google.

Pro:

  • документы firebase хороши
  • ты можешь быстро прогрессировать

Минусы:

  • эффект входа в систему
  • кто знает, что Google делает с вашими данными

Добавить модели в keystonejs

скажите keystonejs, какая у вас структура данных, в моем случае у нас всего 3 модели: User, Post, Like. Модель User предопределена keystonejs, мы этого не касались. У сообщений может быть много лайков. Ознакомьтесь с полным описанием моделей на github.

войдите в интерфейс администратора и проверьте, хорошо ли он работает

теперь вы можете добавлять записи в админку и удалять посты, если кто-то обиделся. Интерфейс администратора доступен по адресу localhost: 3000 / keystone / пароль по умолчанию может быть установлен в кодовой базе, но его следует изменить после первого развертывания.

написание решающих функций / классов + тестов (Like, Post, Tests)

например, когда вы создаете REST api, вы создаете функции для запроса / обновления данных в вашей базе данных / хранилище. Вы не хотите, чтобы они были тесно связаны с вашим api, возможно, вы захотите запросить данные с помощью cronjob, тогда вы можете повторно использовать свои функции преобразователя. Вы можете следовать подходу TDD и сначала написать свой тест, а затем свою реализацию.

Pro Ava:

  • поддержка es6
  • много репортер крана (модное дерьмо)
  • много вспомогательных функций для утверждения

Con Ava:

  • Раньше я использовал мокко, у которого по умолчанию время ожидания около 2 секунд. за тест, в ava у меня часто была проблема, тогда мой тест был отстойным из-за того, что обещания не разрешались. Затем мне нужно было вручную перезапустить тесты, хотя я проводил тесты. Пока не нашел решения.

Подключить graphql к expressjs + определить схему graphql

Это интересная часть, сначала нам нужно определить схему graphql. Здесь важно отметить:

  • вы можете определить недостающие типы с помощью ключевого слова scalar, как я сделал для Date
  • вы можете определять свои модели, как мы делали для публикации и лайка
  • экспортировать возможные запросы и мутации, имейте в виду, что функции запросов и мутаций могут иметь аргументы, функции запросов имеют некоторые предопределенные аргументы, такие как 'limit', 'offset', имеет смысл пересылать эти аргументы вашим преобразователям, иначе graphql запросит все данные а затем нарезать данные в соответствии с аргументами запроса
  • Соедините свои классы преобразователя с функциями преобразователя графа, важно отметить, что здесь вам необходимо передать экземпляр класса преобразователя на сервер apollo, чтобы они были в функции графического преобразователя в доступном контексте. Как видите, нам не нужно определять преобразователь для каждого ключа модели, только для сложных типов - сервер apollo сообщит вам, если функции преобразователя отсутствуют, это очень удобно.
  • наконец подключите apollo-server к экспрессу, у нас будет 2 конечных точки. / graphql - ›конечная точка graphql, все запросы отправляются на эту конечную точку, / graphiql -› графический интерфейс для тестирования ваших запросов graphql (очень удобно)

подключить graphql к реакции

Преимущество переноса приложения redux в apollo-stack заключается в том, что вам не нужно слишком много менять, если вы раньше использовали контейнеры. Вы просто заменяете свои функции подключения декораторами @graphql для получения данных. Документация apollo-stack довольно хороша, мне просто нужно было 1 раз проверить исходный код, чтобы узнать, как использовать фрагменты. Документы. Может быть немного многословно иметь все эти определения запросов в вашем файле-контейнере, я уже думал о том, чтобы поместить их в своего рода файл действий, а затем импортировать их.

Pro Apollo-stack:

  • хорошие документы
  • очень легко определить схему graphql
  • клиентские библиотеки для angular2, react и др.
  • Поддерживает оптимистичные обновления

Минусы:

  • нет состояния загрузки для мутаций (возможно, я просто плохо прочитал документацию)
  • иногда это не очевидно после мутации, что вам нужно обновлять запросы (это немного волшебно, что после мутаций что-то обновляется, а некоторые вещи - нет)

Вывод

Apollo-stack и keystone хорошо подходят друг другу, избавляют от необходимости писать и администрировать интерфейс и запрашивать данные с легкостью, с которой я никогда раньше не сталкивался. Если у вас действительно есть продвинутые модели, то трапеция в настоящее время, возможно, не лучший подход, давайте посмотрим, что принесет Keystone 4.0.0. Apollo-stack действительно прост в использовании, особенно вспомогательные функции, позволяющие ускорить процесс разработки. Для меня Firebase - это простая задача, работа с auth может быть довольно громоздкой и настолько опасной, если вы не знаете, что делаете, просто позвольте Google сделать это.

Подписывайтесь на меня в твиттере: @theotow