배경

Neo4J와 GraphQL을 사용하여 소셜 미디어 그래퍼 를 만들려고했습니다. 이것은 내가 GRAND 스택을 발견했을 때 입니다. Neo4J를 시작하는 것은 매우 간단했지만 Neo4j가 React, GraphQL 및 Typescript와 함께 작동하도록 만드는 것은 다른 이야기였습니다.

이 기사가 GRAND 스택에 관심이있는 사람들에게 도움이 되고 설정 프로세스가 조금 더 쉬워 지기를 바랍니다 . 제 Github ( 여기 ) 에 완벽하게 작동하는 프로젝트 가 있습니다.

기술

1. GraphQL + 아폴로
2. 익스프레스 JS
3. React JS
4. Neo4j
5. Neovis (neo4J 클라이언트 시각화 도우미)
6. 타이프 스크립트
7. 웹팩

서버 설정에서 가장 어려운 부분은 Typescript와 함께 GRAND 를 사용하는 것에 대한 제한된 문서였습니다 . 특히 웹팩 설정. 다음은 내 최종 설정입니다.

보시다시피 Neo4J의 프런트 엔드에서 사용중인 환경 변수가 있습니다. tsconfig 파일도 필요합니다.

위의 설정은 시행 착오의 조합이며 다른 사람들이 과거에 한 작업을 사용하지만 모든 기반을 다룹니다.

서버 구성

내 서버에는 Apollo 서버, GraphQL, Express 및 Neo4J 드라이버를 사용했습니다. Neo4j로 GraphQL을 설정하는 방법에 대한 수많은 자습서가 있지만 두 개의 라이브러리가 가장 유용하다는 것을 알았습니다.

1. neo4j-graphql-js
2. 아폴로 서버 익스프레스

이와 같이 내 스키마를 정의함으로써 다음과 같은 쿼리 및 변형에 액세스 할 수있었습니다.

1. 사용자 가져 오기
2. 트윗 가져 오기
3. 트윗에 사용자 추가
4. 사용자에게 트윗 추가
5. 사용자 트윗 받기

반응

GRAND 의 G, A, ND (Neo4J Database )를 다루었 지만 R은 잊을 수 없습니다. 결국 사용자에게 중요한 모든 것입니다. Neo4j 백엔드를 시각화하기 위해 Neovis라는 라이브러리를 사용했습니다. 물론 React와 함께 사용하도록 최적화되지 않았습니다.

하지만 무언가를 보여주기 전에 데이터를 만들어야했습니다. 사용자가 자신의 이름과 트윗을 입력 할 수있는 간단한 양식을 만들었습니다. 그런 다음 해당 데이터를 Neo4j 데이터베이스에 저장하는 변형을 만듭니다.

백엔드 라이브러리에서 생성 한 ' 매직 '방법 덕분에 사용자와 트윗을 쉽게 생성하고 서로에게 할당 할 수 있습니다. 다음은 새 트윗을 만들고 사용자에게 할당하는 데 사용한 변형의 예입니다.

CreateTweet 와 AddUserTweets 는 모두 Neo4j-GraphQL 라이브러리에 의해 자동 생성되었습니다.

요약

가장 큰 도전은이 모든 것을 설정하고 Typescript를 사용하는 것이 었습니다. 나는 스택을 좋아하고 나중에 다시 사용하기를 희망합니다. 잠재력은 엄청납니다. 저와 같은 작은 프로젝트에서도 GRAND 스택 과 마찬가지로 그래프 데이터베이스와 쿼리를 결합한 다른 스택을 생각할 수 없습니다 .

앞서 언급했듯이 Github에서 완전히 작동하는 예제가 있습니다. 읽어 주셔서 감사합니다.