Relay 버전 13 릴리즈 및 @requied directive

Relay 13 버전이 이틀 전에 릴리즈 되었다. Rust로 완전히 리뉴얼된 컴파일러를 적용한 버전이라 기대감을 가지고 hackatalk에 적용해보았다. 13버전은 컴파일러 내부 아키텍쳐가 달라졌을 뿐 API가 달라진 것은 딱히 없기 때문에 부담없이 버전업을 진행할 수 있었다.

yarn add react-relay relay-runtime 
yarn add -D babel-plugin-relay relay-compiler relay-test-utils

버전 업을 완료하고 컴파일을 돌려보니 과연 속도가 남달랐다. 거의 실행과 동시에 완료되는 수준. 앞으로 이런 빠른 속도를 기반으로 얼마나 발전할 지 기대되는 부분이다.

Our vision for the compiler is that it provides even more high-level tools for shipping features and avoiding boilerplate, gives developers real-time assistance and insights, and is made up of parts that can be used by other tools for working with GraphQL.

A primary goal of this project was that the rewritten compiler’s architecture should set us up to achieve this vision over the coming years.

-in the relay posts-

Required directive (@required)

버전13에서 새롭게 공개된 몇 가지 기능 중에서 눈에 띄는 것은 @required 지시어였다. query 및 fragment 내부에서 사용할 수 있으며 해당 지시어가 붙은 필드의 데이터가 반환되지 않으면 해당 쿼리 자체를 null 로 만들어버린다. 즉 필수 필드를 지정할 수 있게 만들어주는 것이다. 이 지시어를 사용하면 하단에 반드시 필요한 필드를 명확히 하기 위해 수행해왔던 수많은 null check 작업들을 줄여줄 수 있다는 것을 의미한다. 사용법은 아래와 같다. 다음은 해커톡 코드의 일부를 고친 것이다.

MessageListItem 이라는 컴포넌트는 sender 라는 연관 필드가 반드시 필요하다고 가정해보자. sender @required(action: NONE) 의 형식으로 필수 필드를 지정할 수 있다. 이제 useFragment 에서 데이터를 받아올 때 sender 가 null일 경우 전체 데이터가 null 이 될 것이다.

relay에서는 required 지시어가 붙은 필드의 데이터가 없을 경우 해당 상황을 연결된 부모 필드까지 bubble 시켜서 해당 fragment/query 자체가 null을 반환하게 한다. 쉽게 말하면 sender 가 없으면 message 데이터가 의미 없다고 선언하는 것이다.

action

required 지시어는 3가지 종류의 인자를 받을 수 있다.

• NONE : 필드가 때때로 null일 것으로 예상된다는 의미
• LOG : 필드가 null일 경우 relay logger에서 이벤트를 수신할 수 있다.
• THROW: 필드가 null일 경우 렌더링이 더 이상 진행되지 않고 에러를 던져준다.

이쯤에서 스키마 혹은 서버에서 필수 필드 여부를 결정하면 되는 것 아니냐는 의문이 생길 수 있다. 그러나 개별 컴포넌트는 스스로 필수 필드에 대해 핸들링할 수 있어야 한다는 것이 relay의 입장이다. 상황에 따라서 반드시 필요한 필드가 달라질 수 있는데 그때 마다 스키마 혹은 서버에 의존하는 것은 상황을 더 어렵게 만들 수 있기 때문이다.

결론

버전 13으로 업데이트를 하면서 드라마틱한 변화는 없었지만 분명한 컴파일 속도 증가는 체감할 수 있었다. 또한 리팩토링을 진행할 때 required 지시어를 사용하면 코드가 좀 더 깔끔해 질 수 있겠다는 생각도 든다. 릴레이 블로그에서 말하길, 새로운 컴파일러를 만듦으로써 앞으로 나아갈 발판을 마련했다고 하니 앞으로가 기대된다.