뭐 일단은 가벼운 추상화로는 assert & error boundary 같은 패턴도 있구용

export function required<T>(v: T): asserts v {
  if (v == null) {
    throw new Error(`Expected non nullable, but got ${v}`);
  }
}

export default function MyComponent() {
  const data = useQuery(...);

  required(data.item.field);

  return (
    ...
  );
}

<ErrorBoundary
  renderFallback={({ resetError }) => {
    return <>...</>
  }}
>
  <MyComponent />
</ErrorBoundary>

음 아니면~~

Apollo Client 나 Urql 같은경우는 구문 확장할 수 있는 레이어가 존재하니 (각각 Link, Exchange) 직접 Client controlled nullability 구현해보시는것도 좋은 옵션일거같고

사실 fragment 를 잘게 쪼개다보면 nullability control 이 지저분해진다 싶을 정도로 길게 들어가는 경우가 드물어지는 것 같긴 해요

적당한 예시 바로 보여드릴게 있을지 모르겠는데, 대략 이런느낌으로 갑니다 https://github.com/daangn/websites/blob/main/_packages/%40karrotmarket/gatsby-theme-team-website/src/pages/index.tsx