# Relay `@defer`

## 무엇을 위한 기능인가?

- 기존의 GraphQL 쿼리는 단일 응답으로만 구성되어 있었기에, 가장 느린 필드의 응답이 준비되기 전까지 이미 준비된 데이터조차도 전달받을 수 없었음
- 흔히 그냥 페이지 전체를 담당하는 `useLazyLoadQuery()`나 `usePreloadedQuery()`를 하나 사용하면 최상단 Suspense만 트리거되는 이유
- `@defer`를 쓰면 특정 fragment의 데이터가 전체 응답을 blocking하는 일이 없도록 데이터를 lazy하게 전달받을 수 있음
- `@defer` 처리된 fragment는 별도의 로딩(suspend) 상태를 가지게 되기 때문에, Suspense 바운더리를 좀 더 잘게 쪼갤 수 있게 됨
- 정확히는 Suspense 바운더리를 안 쪼개면 데이터를 일찍 받아봤자 보여줄 방법이 없기 때문에(...) 대부분의 경우에는 `@defer`를 쓰는 경우 Suspense 바운더리를 따로 쪼개줘야 합니다

## 어떻게 쓰는가?

- 일단 Relay Network 레이어에 이것저것 세팅을 해야 하는데... port-console에는 제가 해 두었습니다
- defer시키고 싶은 fragment spread를 찾아서 `@defer`를 붙이기 (주로 기획 특성이나 성능 등의 이유로 별도의 로딩 상태가 필요한 녀석)
- 
- 해당 fragment reference를 전달받는 컴포넌트(fragment reference 가지고 `useFragment()`를 부를 컴포넌트)를 `<Suspense>`로 감싸고, 추가한 Suspense에 적절한 fallback 요소를 붙이기
-