<div id="readability-page-1" class="page"><div>Relay 15.0.0가 <a href="https://github.com/facebook/relay/releases/tag/v15.0.0">릴리즈</a>되었다. 엄청나게 큰 변경점이 있다기보단 breaking change가 있어서 (아마도 TS를 사용하는 일반 유저들은 큰 차이를 느끼지 못할 듯한) 메이저 버젼이 올라간 것 같고, 아직 정리된 announcement가 없어 어떤 변경점들이 있는지 눈에 띄는 것만 간단히 살펴보고자 한다.
<h3 id="fragment-argument-syntax-지원-커밋">fragment argument syntax 지원 <a href="https://github.com/facebook/relay/commit/b497aa36305621750c5d351bdf2be3d318f6e646">커밋</a></h3>
기존 Relay에서 <code>@arguments</code> <a href="https://relay.dev/docs/api-reference/graphql-and-directives/#arguments">directive</a>로 표현하던 것이 표준으로 <a href="https://github.com/graphql/graphql-spec/pull/1010">제안</a>된 것으로 보인다.
<pre><code>
# 이전 
fragment TodoList_list on TodoList @argumentDefinitions(
 count: {type: "Int", defaultValue: 10},
 userID: {type: "ID"},
) {
 title
 todoItems(userID: $userID, first: $count) {
 ...TodoItem_item
 }
}
query TodoListQuery($userID: ID) {
 ...TodoList_list @arguments(count: $count, userID: $userID)
}</code></pre>
공식 예제의 위 코드가 현재 제안된 표준대로 변경된다면,
<pre><code># 예시
fragment TodoList_list(
 count: Int = 10,
 userID: ID,
) on TodoList {
 title
 todoItems(userID: $userID, first: $count) {
 ...TodoItem_item
 }
}
query TodoListQuery($userID: ID) {
 ...TodoList_list(count: $count, userID: $userID)
}</code></pre>
위와 같이 사용할 수 있을 것으로 보인다.
Relay 컴파일러에 AST가 실험적으로 구현됐긴 하나, 서버 구현 등도 지원을 해야 하기에 당장 사용은 어려울 것으로 보인다.
업데이트: envelop <a href="https://github.com/n1ru4l/envelop/blob/main/packages/plugins/fragment-arguments/README.md">플러그인</a> 등을 이용하면 사용이 가능하다고 한다. (thanks to 혜성님)
<h3 id="relay-resolvers">Relay Resolvers</h3>
Relay Live Resolver 구현이 추가되었다고 하는데, Apollo의 local resolver와 비슷하면서 좀 더 강력한 기능인 것 같다. <a href="https://github.com/facebook/relay/tree/main/packages/relay-runtime/store/experimental-live-resolvers">구현</a>과 (준)공식 <a href="https://github.com/alunyov/relay-resolvers-example">예제</a>가 있으니 살펴보면 좋을 것 같다.
<h3 id="vs-code-relay-extension-관련-업데이트"><a href="https://marketplace.visualstudio.com/items?itemName=meta.relay">VS Code Relay extension</a> 관련 업데이트</h3>
Relay 컴파일러가 변경이 되어야 LSP에 반영이 되기 때문에 함께 추가된 것으로 보인다.
<ul>
<li>field reference (Go to References) 기능 추가, deprecated field warning, 자동 완성 추가 등.</li>
<li>사실 rescript-relay 위주로 쓰다보니 이 익스텐션을 써 본 적은 없어 어느정도 사용성의 강화가 되었는지는 확실히 모르겠다.</li>
</ul>
<h3 id="flightrsc-관련-예제-코드-제거">Flight(RSC) 관련 예제 코드 제거</h3>
<a href="https://github.com/facebook/relay/commit/689dcb170a7500f99cf9ee04e5be91ee0c4925cb">커밋</a>
<blockquote>
As we look forward to the future of Flight (server components), we don't believe it will be as tightly integrated into GraphQL/Relay, but rather integrated closer to SSR.
</blockquote>
... 라고 한다.
<h4 id="마무리">마무리</h4>
일단은 이정도인 것 같다! 작년 하반기의 커밋도 포함되어 있을 정도로 Relay가 그다지 자주 릴리즈를 하는 편이 아니기 때문에, 현재는 버그픽스 등 위주로 판올림이 되며 메인터넌스 위주로, 기능상의 큰 변화는 없는 상태라고 봐도 무방할 듯 하다.
최근 Relay에 관련된 트윗들이 많이 올라오고 있는데, 위의 VS Code 익스텐션 관련 업데이트를 보면 문서 측면에서의 보강도 아주 조금...? 기대해볼 수 있을지도 모르겠다.</div></div>

Relay 15.0.0가 릴리즈되었다. 엄청나게 큰 변경점이 있다기보단 breaking change가 있어서 (아마도 TS를 사용하는 일반 유저들은 큰 차이를 느끼지 못할 듯한) 메이저 버젼이 올라간 것 같고, 아직 정리된 announcement가 없어 어떤 변경점들이 있는지 눈에 띄는 것만 간단히 살펴보고자 한다.
fragment argument syntax 지원 커밋
기존 Relay에서 @arguments directive로 표현하던 것이 표준으로 제안된 것으로 보인다.
# 이전 
fragment TodoList_list on TodoList @argumentDefinitions(
  count: {type: "Int", defaultValue: 10},
  userID: {type: "ID"},
) {
  title
  todoItems(userID: $userID, first: $count) {
    ...TodoItem_item
  }
}
query TodoListQuery($userID: ID) {
  ...TodoList_list @arguments(count: $count, userID: $userID)
}
공식 예제의 위 코드가 현재 제안된 표준대로 변경된다면,
# 예시
fragment TodoList_list(
  count: Int = 10,
  userID: ID,
) on TodoList {
  title
  todoItems(userID: $userID, first: $count) {
    ...TodoItem_item
  }
}
query TodoListQuery($userID: ID) {
  ...TodoList_list(count: $count, userID: $userID)
}
위와 같이 사용할 수 있을 것으로 보인다.
Relay 컴파일러에 AST가 실험적으로 구현됐긴 하나, 서버 구현 등도 지원을 해야 하기에 당장 사용은 어려울 것으로 보인다.
업데이트: envelop 플러그인 등을 이용하면 사용이 가능하다고 한다. (thanks to 혜성님)
Relay Resolvers
Relay Live Resolver 구현이 추가되었다고 하는데, Apollo의 local resolver와 비슷하면서 좀 더 강력한 기능인 것 같다. 구현과 (준)공식 예제가 있으니 살펴보면 좋을 것 같다.
VS Code Relay extension 관련 업데이트
Relay 컴파일러가 변경이 되어야 LSP에 반영이 되기 때문에 함께 추가된 것으로 보인다.
field reference (Go to References) 기능 추가, deprecated field warning, 자동 완성 추가 등.
사실 rescript-relay 위주로 쓰다보니 이 익스텐션을 써 본 적은 없어 어느정도 사용성의 강화가 되었는지는 확실히 모르겠다.
Flight(RSC) 관련 예제 코드 제거
커밋
As we look forward to the future of Flight (server components), we don't believe it will be as tightly integrated into GraphQL/Relay, but rather integrated closer to SSR.
... 라고 한다.
마무리
일단은 이정도인 것 같다! 작년 하반기의 커밋도 포함되어 있을 정도로 Relay가 그다지 자주 릴리즈를 하는 편이 아니기 때문에, 현재는 버그픽스 등 위주로 판올림이 되며 메인터넌스 위주로, 기능상의 큰 변화는 없는 상태라고 봐도 무방할 듯 하다.
최근 Relay에 관련된 트윗들이 많이 올라오고 있는데, 위의 VS Code 익스텐션 관련 업데이트를 보면 문서 측면에서의 보강도 아주 조금...? 기대해볼 수 있을지도 모르겠다.

Relay 15 변경점 살펴보기

댓글