[GraphQL] 무작정 시작하기 (4) - Relay와 Connection이란?

2020/04/13 - [Back-end/Python] - [GraphQL] 무작정 시작하기 (1) - Schema & Query

2020/04/14 - [Back-end/Python] - [GraphQL] 무작정 시작하기 (2) - Mutation

2020/04/20 - [전체글] - [GraphQL] 무작정 시작하기 (3) - Object를 이용한 Pagination

 

 

 

0.서론

 지난 포스트에서 ObjectField를 이용하여 Pagination을 구현해보았다. 그러나, GraphQL에서는 Connection Field를 통해 Pagination을 처리할 수 있도록 기능을 지원한다. 하기때문에 시작하기 전에 Relay에 대해서 간략하게 알아보자.

 

 

1. Relay란?

  Relay는 GraphQL 기반의 데이터 중심 React 애플리케이션을 구축하기위한 JavaScript 프레임워크이다. React의 컴포넌트는 각 컴포넌트마다 비동기적으로 렌더링되고 필요로하는 데이터의 구조가 천차만별이다. 만약, REST API로 데이터를 요청한다면, 서버는 각 컴포넌트를 위한 URI를 생성해야하고, 클라이언트는 필요한 데이터를 받기위해 N+1의 요청을 시도해야한다. 받은 데이터 마저도 일부만 사용하는 경우가 많다. 하지만, Relay는 미리 정의된 데이터 구조에서 쿼리를 통해 필요한 데이터만 탐색할 수 있게 해준다.

  예를 들어, '상품 목록'을 포함하는 '구매 목록'을 포함하는 '고객 정보'가 있다. 그리고, 최종적으로 '고객 정보'를 포함하는 '고객 목록'이 있다고 가정해보자. ( 상품 목록 < 구매 목록 < 고객 정보 < 고객 목록 )
이 때, 컴포넌트에서 '고객 목록'에서 고객 정보만 조회하려면 어떻게 해야할까? 아주 간단하게 '고객 목록'만 조회하는 쿼리를 사용하여 데이터를 요청하면 된다. 여기서 구매 목록까지 필요하다면 구매 목록까지 조회하는 쿼리를 만들면 된다. 따라서, 기존에 많이 사용하던 REST API 방식처럼 불필요한 데이터는 제외하고 필요한 데이터만 조회할 수도 있어서 매우 효율적이다.

 

[ 고객별 구매 목록 조회 쿼리 ]

 

 

 

2. Connection이란?

 

  Graph에 분산되어 있는 각 점들을 Node라고하며, 데이터 구조를 구성하는 하나의 개체를 의미한다. 그리고, 서로 연관된 Node를 연결하는 선을 Edge라고 하는데, 위 그림처럼 '사용자'와 '게시글'이라는 Node가 있을 때, '게시글'과 '사용자'는 '작성자'라는 Edge로 연결될 수 있고, '사용자' 끼리는 '친구'라는 Edge로 연결될 수 있다. 그리고 GraphQL에서 각 Node의 주소를 Cursor라고 한다.

  Connection은 Cursor를 기반으로한 Pagination 디자인 패턴이다. 이 패턴에서 페이지는 Edge로 연결된 Node들의 집합이며, 이를 Edges라고 한다. 각 Node가 연결되어있는 특징 때문에 이전이나 다음 페이지가 존재하는지에 대한 여부를 쉽게 파악할 수 있다. Connection에서는 페이지에 대한 정보를 담은 'pageInfo' 필드와 기본적인 검색조건들을 제공한다. 이는 가장 많이 사용되는 Offset/Limit 기반의 Pagination보다 편하고 빠르다고 볼 수 있다.

 

  하지만, 두 패턴에는 큰 차이점이 있으니, 상황에 맞게 잘 사용해야 한다. Offset/Limit 기반의 Pagination은 조회된 결과를 나열하여 특정 위치(Offset)에서부터 제한된 건수(Limit)를 추출하고 이를 하나의 페이지를 구성하는데, 새로운 글이 추가되면 현재 구성된 페이지의 목록이 변경된다. 하지만, Cursor 기반의 Pagination은 Node에 대한 주소(Cursor)를 통해 서로 연결되어 있기 때문에 새로운 글이 추가되어도 현재 페이지에는 아무런 영향을 끼치지 않는다.

 

 

  그렇다면 Relay와 Connection은 어떤 관계일까? 앞서 정리한 것처럼 Relay는 미리 정의된 데이터 구조에서 쿼리를 통해 필요한 데이터만 탐색할 수 있게 해준다고 하였는데, 이 때 '데이터 구조'를 Connection 디자인 패턴으로 정의할 수 있는 것이다. 또한 이 데이터 구조는 Connection에 국한된 것이 아니기 때문에 Object를 이용한 디자인 패턴도 혼합하여 만들 수 있다. 따라서, 상황에 맞는 디자인 패턴을 적용하는 것이 바람직하다고 볼 수 있다.

 

 

 

마치며

- 이번 포스트에서 Connection을 이용한 Pagination을 구현하는 방법을 다루어보려고 했는데, 배경지식이 부족하다고 생각하여 Relay와 Connection에 대해서 찾아보고 정리를 해보았다.
- 덕분에 Cursor-Based Pagination과 Offset-Based Pagination의 차이점도 덤으로 알게되었고, GraphQL에 대해서 좀 더 깊게 알게된 것 같다.
- 다음 포스트에서는 Connection을 이용한 Pagination을 구현해보도록 하겠다.