GRANDstack으로 GraphQL 기반 CMS 구축하기

• GraphQL

Neo4j의 그래프 예제 포털 (일명 Graph Gist 포털)을 Ruby on Rails에서 GRANDstack(GraphQL, React, Apollo, Neo4j 데이터베이스)로 바꿨어요. 어떻게 바꿨는지 한번 살펴볼까요?

저는 React와 GraphQL 조합, 그리고 Graph Database를 정말 좋아해서 이번 프로젝트가 너무 흥미로웠어요.

GRAND스택.io

포털에 대해

이 포털은 Neo4j Graph 예제를 위한 셀프 서비스 콘텐츠 관리 시스템(CMS)이에요. 'GraphGists'라고도 불리는 그래프 예제는 실제 데이터 설정과 해당 도메인 관련 개념을 보여주기 위한 `Query`를 포함해서, 그래프 사용 사례를 작고 독립적으로 설명하는 자료랍니다.

여기에서 라이브로 실행 중인 포털을 확인할 수 있어요: Portal.graphgist.org

그래프 예시 포털

아키텍처

포털은 비교적 가벼운 콘텐츠 관리 시스템(CMS)이에요. 작성자는 포털의 웹 앱과 상호 작용해서 콘텐츠를 업로드하고 편집하죠. 관리자는 포털을 사용해서 콘텐츠를 검토하고 승인하고요.

대부분의 사용자는 Neo4j Desktop을 통해 그래프 예제와 상호 작용하는데, 그래프 앱이나 Neo4j.com을 통해서죠. 다시 말해, 그래프 예제를 읽는 대부분의 독자는 포털의 존재 자체를 모를 수도 있다는 거예요.

포털의 아키텍처

도메인 모델

Node:

User: 포털의 인증된 사용자를 나타내요. 개인 `Node`를 통해 콘텐츠를 추가 및 편집하고 기존 콘텐츠를 평가할 수 있어요.

GraphGist: Neo4j.com에 게시된 그래프 예제에요.

GraphGistCandidate: 사용자가 제출했지만 아직 승인되지 않은 콘텐츠를 말해요.

Use Case, Challenge, Industry: 관련 콘텐츠를 주제별로 묶을 수 있도록 GraphGist 및 GraphGistCandidate에 할당된 카테고리랍니다.

Relationship:

IS_PERSON: 사용자와 콘텐츠를 작성하는 사람 간의 관계를 나타내요.

작성: Person과 GraphGistCandidate 간의 연관성

IS_VERSION : GraphGistCandidate와 '최종' GraphGist 간의 연결

RATES: 사용자와 사용자가 평가한 GraphGist 간의 관계

FOR_INDUSTRY, FOR_USE_CASE, FOR_CHALLENGE: GraphGist와 해당 주제 카테고리 간의 관계

사용자, 자산(그래프 예) 및 다양한 카테고리가 포함된 도메인

예: 그래프 예, 관련 Use Case 및 산업

다음은 스포츠 및 레크리에이션 '산업'의 몇 가지 그래프 예와 다양한 Use Case에 대한 예시예요.

예: 그래프 예, 관련 Use Case 및 산업

기능 요약

익명 사용자: 콘텐츠 소비

는 다음을 할 수 있어요:

• 소스에서 슬라이드 형식으로 렌더링된 대화형 가이드로 Neo4j 브라우저의 그래프 예제(콘텐츠)를 확인하세요.
• 그래프 예시는 Neo4j 워드프레스 사이트의 GraphQL API 기반으로 확인할 수 있어요.
• 포털 자체의 그래프 예 React 앱에서 검색하고 찾아볼 수 있어요.
• 계정을 만들고 인증된 사용자가 되어보세요.

인증된 사용자: 콘텐츠 만들기

는 다음을 할 수 있어요:

• 인라인으로 미리 볼 수 있는 그래프 예시 후보 생성 및 편집
• 승인을 위해 제출하기 전에 작업 내용을 저장하세요.
• 후보자를 산업, Use Case 및 과제에 할당
• 승인된 그래프 예시를 수정하여 새로운 그래프 예시 후보를 만들 수 있어요.

관리자 사용자: 콘텐츠 관리

는 다음을 할 수 있어요:

• 그래프 후보 보기 및 편집
• 후보자를 그래프 예시로 승격
• 산업, Use Case 및 과제에 그래프 예제 할당
• 산업, Use Case, 과제 생성 및 관리
• 자동 이메일을 통해 검토하고 승인할 새 콘텐츠가 있음을 관리자에게 알리는 작업을 처리합니다.

관리자는 그래프 예제를 편집할 수 있어요. 메타데이터, 요약, 이미지, 관련 Use Case, 산업 및 과제를 포함해서요.

관리자가 콘텐츠에 만족하면 관리자는 다음을 수행할 수 있어요. 후보자를 대중이 보고 검색할 수 있도록 홍보합니다.

코드

CMS 포털의 코드는 모두 GitHub에서 사용할 수 있어요. 직접 사용하거나 학습해 보세요.

neo4j-contrib/graphgist-portal-v3

GRANDstack 구현

왜 GRANDstack으로 마이그레이션해야 할까요?

Rails 구현은 훌륭했고 5년 동안 우리에게 서비스를 제공했지만 적극적으로 지원되는 스택(Javascript, GraphQL, React)으로 마이그레이션하면 포털을 더 쉽게 관리할 수 있으며 데이터베이스 업그레이드가 예정되어 있었어요. 이전 포털의 데이터가 완전 관리형 4.x로 전송되었어요. Neo4j Aura 데이터베이스.

GRANDstack은 React, GraphQL 및 Neo4j의 조합을 제공해요. 이전 경험이 거의 또는 전혀 없어도 새 앱을 쉽게 설정할 수 있어요. Cypher(Neo4j 쿼리 언어) GRANDstack은 다음을 통해 GraphQL에서 Cypher로의 번역을 처리해요. neo4j-graphql-js.

GRANDstack 스타터를 사용하면 개발자가 다음 작업을 쉽게 시작할 수 있어요.

npx create-grandstack-app

일부 구성을 안내하고 데이터베이스의 데이터에서 스키마를 추론할 수도 있어요.

시작하기 위해 실제로 필요한 것은 간단한 데이터를 정의하는 것이에요. GraphQL 유형 중 하나입니다. 스키마가 정의되면 자동 생성된 GraphQL API를 통해 모든 데이터를 조작할 수 있어요!

마이그레이션이 필요 없으며 많은 상용구 코드를 사용하여 API 메서드를 수동으로 노출하는 작업을 처리할 필요가 없어요.

GraphQL 쿼리 요청

GraphQL 쿼리에서 오는 요청이 Cypher로 변환되고 데이터베이스에 대해 실행되어 호출자에게 반환되는 방법은 다음과 같아요.

GraphQL 쿼리 번역 및 실행

구현: 그래프 예 찾아보기

익명 사용자는 검색 엔진을 통해 포털을 찾거나 친구가 포털을 추천해서, 포털에서 개별 그래프 예제를 찾아보고 검색하고 볼 수 있어요.

React Frontend를 통해 인증되지 않은 사용자로 단일 그래프 예제를 살펴봅니다. 보다

라이브 중:화장품의 화학물질

해당 뷰에 표시된 GraphGist 엔터티의 스키마 유형은 상당히 크지만, 그 중 일부는 레거시 필드 관리 때문이에요.

하지만 스키마를 정의하고 라이브러리에 알려주면 즉시 탐색할 수 있고 바로 사용할 수 있는 모든 강화된 GraphQL 유형과 API `쿼리` 및 `변형`이 생성됩니다. GraphiQL에서요!

그래프 예시에 대한 정보를 GraphQL API로 `쿼리`

사용 사례별로 필터링된 그래프 예시 목록 보기

단일 그래프 예제를 본 후 방문자는 동일한 업계 또는 사용 사례의 그래프 예제를 탐색할 수 있어요. 일부 고급 필터 옵션을 사용해서 이 작업을 수행할 수도 있었겠지만, @cypher 지시어를 사용하여 맞춤 `쿼리`를 구현하는 것이 더 쉬웠어요.

다시 API에서 바로 사용할 수 있다니, 정말 편리하죠?

그래프 예제가 특정 사용 사례에 속하는 경우 GraphQL API를 사용하여 목록 `쿼리`

다음은 Neo4j 브라우저의 `노드` 및 `관계`와 동일한 결과에요.

데이터베이스의 유사한 `쿼리` - UseCase "데이터 분석"과 연관된 그래프 예제는 무엇입니까?

게시된 그래프 평가 예시

포털에서 그래프 예제를 검색하는 동안 방문자는 항목에 별점을 부여하기로 결정할 수 있어요. 인증되지 않은 경우 방문자는 평가 기능을 사용하려면 로그인하거나 계정을 만들어야 해요.

그래프 예제를 평가하면 사용자와 그래프 예제 사이에 RATES `관계`가 생성됩니다. (GraphQL 스키마, GraphQL 돌연변이)

후보자 콘텐츠 만들기

기존 그래프 예제를 탐색하고 평가한 후 사용자는 처음에 "후보"인 자신의 콘텐츠를 만들기로 결정할 수 있어요. 그래프 예제 후보가 생성된 후 관리자는 업데이트를 알리는 이메일을 받고 콘텐츠 승인 여부를 결정합니다.

인증된 사용자는 일부 asciidoc을 사용하여 새로운 후보 그래프 예제를 만들 수 있습니다. 후보자를 생성하면 새 후보자가 생성되었다는 이메일이 관리자에게 전송됩니다. 실시간으로 확인하세요:

지금 시작하세요

인증된 사용자는 하나 이상의 산업, 사용 사례 또는 과제를 콘텐츠에 추가할 수도 있습니다.

GraphGistCandidate 유형은 게시 흐름의 콘텐츠 관리 측면을 허용하기 위해 자산의 몇 가지 필드와 `관계`를 추가합니다.

인증된 사용자는 API를 통해 후보 그래프 예제를 만들 수도 있습니다.

다음은 작성자, 사용자 및 업계가 포함된 GraphGist의 라이브 버전을 가리키는 GraphGistCandidate입니다.

후보가 생성되면 최종 그래프 예제도 생성되지만 인증되지 않은 사용자에게는 표시되지 않는 초안 상태입니다.

GRANDStack 리소스

이 블로그 게시물은 매우 실용적인 GRANDStack 애플리케이션에 대한 간략한 개요였어요. 아래 리소스를 사용하여 자신만의 GRANDStack 애플리케이션을 구축하고 GRANDStack의 다음 버전을 기다려 보세요.

• GRANDStack을 사용한 풀스택 GraphQL 애플리케이션 - 필수 발췌
• 손쉽게 풀스택 GraphQL 애플리케이션 구축 | GRANDstack
• Neo4j 및 GraphQL API 구축

---

• GraphQL
• React

---

에이치시스템즈의 LogTree는 Neo4j 기반 GraphRAG 플랫폼으로, 데이터를 자동으로 지식그래프화하고 자연어 질의로 즉시 답을 제공합니다.

👉 에이치시스템즈 홈페이지