그래프 대신 컴포넌트 사용하기

Gato GraphQL은 데이터 모델을 표현하기 위해 그래프를 사용하지 않습니다. 대신 컴포넌트를 사용합니다.

이는 예상치 못한 접근 방식이 아닙니다. GraphQL 프로젝트는 Thinking in Graphs라는 제목으로 다음과 같이 말합니다(강조는 인용자):

그래프는 우리의 자연스러운 사고 모델 및 기저 프로세스에 대한 언어적 설명과 유사하기 때문에, 많은 실제 현상을 모델링하기 위한 강력한 도구입니다. GraphQL에서는 스키마를 정의함으로써 비즈니스 도메인을 그래프로 모델링합니다. 스키마 내에서 다양한 노드 유형과 그것들이 어떻게 연결되고 관련되는지를 정의합니다. 클라이언트 측에서는 객체 지향 프로그래밍과 유사한 패턴이 만들어집니다: 다른 유형을 참조하는 유형입니다. 서버 측에서는 GraphQL이 인터페이스만 정의하기 때문에, 모든 백엔드(신규 또는 기존!)와 자유롭게 사용할 수 있습니다.

이 정의에서 얻을 수 있는 핵심은 다음과 같습니다:

응답이 그래프의 형태를 갖는다고 해서, 서버 측에서 데이터를 처리할 때 데이터가 실제로 그래프로 표현된다는 것을 의미하지는 않습니다. 그래프는 어디까지나 _멘탈 모델_이며, 실제 구현이 아닙니다.

이것은 좋은 소식입니다. 그래프(또는 트리)를 다루는 것은 간단하지 않기 때문입니다. 반면 컴포넌트는 훨씬 구현이 쉽고 동일한 이점을 모두 제공합니다.

컴포넌트를 통한 데이터 모델 단순화

서버 측에서 데이터 구조를 표현하기 위해 컴포넌트를 사용하는 것은 단순성 측면에서 최적입니다. 데이터의 다양한 모델을 단일 구조로 통합할 수 있기 때문입니다. 다음과 같은 흐름 대신:

컴포넌트에 공급할 쿼리 작성 (클라이언트) => 데이터를 그래프/트리로 처리 (서버) => 컴포넌트에 데이터 공급 (클라이언트)

...흐름은 다음과 같이 됩니다:

컴포넌트 (클라이언트) => 컴포넌트 (서버) => 컴포넌트 (클라이언트)

이것이 가능한 이유는 GraphQL 요청이 「컴포넌트 계층 구조」 데이터 구조를 갖는다고 볼 수 있기 때문입니다. 각 객체 유형이 컴포넌트를 나타내고, 한 객체 유형에서 다른 객체 유형으로의 모든 관계 필드가 다른 컴포넌트를 감싸는 컴포넌트를 나타냅니다.

컴포넌트와 GraphQL 쿼리 간의 관계를 시각화하기 위해 예시를 사용해 보겠습니다. 다음과 같은 「주목받는 감독」 위젯을 만들고 싶다고 가정해 봅시다:

Vue나 React(또는 다른 컴포넌트 기반 라이브러리)를 사용한다면, 먼저 컴포넌트를 식별합니다. 이 경우 외부 컴포넌트 <FeaturedDirector>(빨간색)가 있고, 그것이 컴포넌트 <Film>(파란색)을 감싸며, 다시 그것이 컴포넌트 <Actor>(초록색)를 감쌉니다:

의사 코드는 다음과 같습니다:

<!-- Component: <FeaturedDirector> -->
<div>
  Country: {country}
  {foreach films as film}
    <Film film={film} />
  {/foreach}
</div>
 
<!-- Component: <Film> -->
<div>
  Title: {title}
  Pic: {thumbnail}
  {foreach actors as actor}
    <Actor actor={actor} />
  {/foreach}
</div>
 
<!-- Component: <Actor> -->
<div>
  Name: {name}
  Photo: {avatar}
</div>

다음으로 각 컴포넌트에 필요한 데이터를 식별합니다. <FeaturedDirector>에는 name, avatar, country가 필요합니다. <Film>에는 thumbnail과 title이 필요합니다. 그리고 <Actor>에는 name과 avatar가 필요합니다:

그리고 필요한 데이터를 가져오기 위한 GraphQL 쿼리를 작성합니다:

query {
  featuredDirector {
    name
    country
    avatar
    films {
      title
      thumbnail
      actors {
        name
        avatar
      }
    }
  }
}

보시다시피, 위의 컴포넌트 계층 구조와 이 GraphQL 쿼리 사이에는 직접적인 관계가 있습니다.

​컴포넌트를 통한 데이터 모델 단순화

컴포넌트를 통한 데이터 모델 단순화