Задний план

Я рискнул создать графический редактор социальных сетей, используя Neo4J и GraphQL. Именно тогда я наткнулся на стек GRAND . Начать работу с Neo4J было довольно просто, но другое дело - заставить Neo4j работать с React, GraphQL и Typescript.

Я надеюсь, что эта статья поможет тем, кто интересуется стеком GRAND , и немного упростит им процесс установки. У меня есть полностью рабочий проект на моем Github ( здесь ), на который вы можете ссылаться.

Технологии

1. GraphQL + Apollo
2. Экспресс JS
3. React JS
4. Neo4j
5. Neovis (клиентский визуализатор neo4J)
6. Машинопись
7. Webpack

Самой сложной частью настройки сервера была ограниченная документация по использованию GRAND с Typescript. Особенно настройки веб-пакета. Это мои последние настройки:

как видите, у меня есть несколько переменных окружения, которые я использую во внешнем интерфейсе для Neo4J. Вам также понадобится файл tsconfig.

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

Конфигурация сервера

Для своего сервера я использовал сервер Apollo, GraphQL, Express и драйвер Neo4J. Существует бесчисленное количество руководств о том, как настроить GraphQL с Neo4j, но я нашел две библиотеки наиболее полезными.

1. neo4j-graphql-js
2. Аполлон-сервер-экспресс

Определив мою схему таким образом, я получил доступ к таким запросам и изменениям, как:

1. Получить пользователей
2. Получать твиты
3. Добавить пользователя в твиты
4. Добавить твит пользователям
5. Получайте твиты пользователей

Реагировать

Мы рассмотрели G, A и ND (база данных Neo4J ) GRAND, но мы не можем забыть о R. Это, в конце концов, все, что имеет значение для наших пользователей. Чтобы визуализировать свой бэкэнд Neo4j, я использовал библиотеку Neovis, которая, конечно, не была оптимизирована для использования с React.

Но прежде чем я смог что-то показать, мне пришлось создать некоторые данные. Я сделал простую форму, в которой пользователь может ввести свое имя, а также написать твит. Затем я бы сделал мутацию, которая сохранит эти данные в моей базе данных Neo4j.

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

И CreateTweet, и AddUserTweets были автоматически сгенерированы для меня нашими библиотеками Neo4j-GraphQL.

Резюме

Самой большой проблемой было настроить все это И использовать с ним Typescript. Мне нравится этот стек, и я надеюсь снова использовать его в будущем. Потенциал огромен, даже для такого небольшого проекта, как мой, я не могу придумать другого стека, который сочетал бы в себе графические базы данных и запросы, а также стек GRAND .

Как я упоминал ранее, у меня есть полностью рабочий пример на моем Github. Спасибо за чтение и удачного кодирования!