Relay

공식문서와 번역기를 참고했습니다. :)

Relay는 너와 함께 확장되는 GraphQL 클라이언트이다.

규모에 맞게 제작

Relay는 어떠한 규모에도 높은 성능을 위해서 제작되었다. 여러분의 App의 component가 수십 개, 수백 개, 수천 개라도 상관없이, Relay는 data-fetching을 쉽게 관리해줍니다. 그리고 Relay의 컴파일러 덕분에 여러분의 App이 커지더라도 빠른 속도를 유지시켜줍니다.

빠르게 반복을 유지시킵니다.

Relay는 선언적으로 data-fetching이 됩니다. 어떻게 data를 fetching할 걱정 없이 Comoponent가 데이터 의존성을 선언합니다. Relay는 각 component가 필요로 하는 데이터를 가져오고 사용헐 수 있도록 보장합니다. 이렇게하면 component들이 분리되지 않고 재사용하기 수월해집니다.
Relay를 사용하면, component와 component들의 의존성 data들이 다른 부분를 수정하지 않고도 빠르게 수정할 수 있습니다. 즉, App을 수정할때나 만들때 실수로 다른 component를 망가뜨리지 않습니다.

자동 최적화

Relay의 컴파일러는 전체 앱에 대한 데이터 요구 사항을 종합하고 최적화하여 단일 GraphQL 요청으로 효율적으로 가져올 수 있습니다.
Relay는 무거운 리프팅을 처리하여 구성요소에 의해 선언된 데이터를 가장 효율적인 방법으로 가져올 수 있도록 합니다. 예를 들어, 동일한 필드를 중복 제거하고 런타임에 사용되는 정보를 미리 계산하여 최적화할 수 있습니다.

데이터 일관성

Relay는 영향을 미치는 데이터가 변경되면 모든 component를 자동으로 최신 상태로 유지하고, 필요한 경우에만 component를 효율적으로 업데이트합니다. 이는 불필요한 리렌더링이 없음을 의미합니다.
또한 Relay는 GraphQL Mutations의 실행을 지원하며, 선택적인 업데이트와 로컬 데이터에 대한 업데이트를 지원합니다.

Fetching Query Data

가장 간편하게 가져오는 방법은 loadQuery를 사용하는것 입니다.
나중에 usePreloadedhook을 호출하여 함수형 component의 store에서 데이터를 읽을 수 있습니다.
Relay는 유저가 특정 페이지로 이동하기 위해 링크를 누르거나 버튼를 누를 때와 같은 이벤트에 대한 응답으로 loadQuery를 호출하도록 권장합니다. 자세한 내용은 Queries에서 안내된 둘러보기 섹션을 참조하십시오.

import React from "react";
import { graphql, usePreloadedQuery, /* ... */ } from "react-relay";

const artistsQuery = graphql`
 query ArtistQuery($artistID: String!) {
   artist(id: $artistID) {
     name
     ...ArtistDescription_artist
   }
 }
`;
const artistsQueryReference = loadQuery(
 environment,
 artistsQuery,
 {artistID: "1"}
);

export default function ArtistPage() {
 return (
   <EnvironmentProvider environment={environment}>
     <React.Suspense fallback={<LoadingIndicator />}>
       <ArtistView />
     </React.Suspense>
   </EnvironmentProvider>
 )
}

function ArtistView() {
 const data = usePreloadedQuery(artistsQuery, artistsQueryReference);
 return (
   <>
     <Name>{data?.artist?.name}</Name>
     {data?.artist && <ArtistCard artist={data?.artist} />}
   </>
 );
}

Fragments

2단계는 Relay로 구동되는 React component 트리를 렌더링하는 것이다.
component는 fragments를 사용해서 받아올 데이터를 선언하고, Relay스토어에서 useFragment를 사용함으로써 데이터를 읽어온다.
fragment는 GraphQL type에 연결된 GraphQL의 일부이다. 그리고 그 타입의 항목에서 읽을 데이터를 지정한다.
useFragment는 두개의 파라미터를 받는다. 하나는 fragment literal, 다른 하나는 fragment reference이다. fragment reference는 데이터를 읽을것을 지정한다.
Fragment는 스스로 데이터를 가져올 수 없다. 대신에 부모 query에 포함되어 있어야 한다. Relay 컴파일러는 fragments에서 선언된 데이터를 부모 query의 일부로 가져오도록 한다.

import React from "react";
import { graphql, useFragment} from "react-relay";

export default function ArtistCard(props) {
  const {href, image, bio} = useFragment(
    graphql`
      fragment ArtistHeader_artist on Artist {
        href
        bio
        image {
          url
        }
      }
    `,
    props.artist
  );
  const imageUrl = image && image.url;

  return (
    <Card>
      <Link href={href}>
        <Image imageUrl={imageUrl} />
        <Bio>{bio}</Bio>
      </Link>
    </Card>
  );
}

---

GraphQL 모범 사례

Relay는 GraphQL 모범 사례를 적용하고 사용한다. Relay의 기능을 최대한 활용하려면 GraphQL 서버가 이러한 표준을 따르도록 해야한다.

Fragments

GraphQL Fragment는 주어진 GraphQL type에 대해 재새용 가능한 필드 선택이다. 다른 Fragments에 포함시켜 구성할 수 있다. 또는 GraphQL Queries의 일부로 포함한다.
Relay는 Fragments를 사용하여 component에 대한 필요한 데이터를 선언한다. 그리고 필요한 데이터를 함께 구성한다.

Connections

GraphQL Connections는 관계되어있는 많은 데이터를 암호화할 수 있을뿐만 아니라 어느 방향으로든 쉽게 페에지를 매김할 수 있는 GraphQL의 데이터 목록을 표현하기 위한 모델이다.
GraphQL Connections는 GraphQL에서 페이지 분할을 위한 모범 사례로 간주된다. 그리고 Relay는 서버가 지원하는 한 이러한 기능을 지원한다.

Global Object Identification

Relay는 신뢰할 수 있는 caching과 refetching을 제공하기 위해서 Global Object Identification를 사용한다. 그리고 자동으로 업데이트를 시킨다.
Global Object Identification은 Node GraphQL 인터페이스를 사용하여 구축된 모든 유형에 대해 전체 schema에 걸쳐 전역적으로 고유한 id를 제공하는 것으로 구성된다.

---

유연한 Mutations

데이터 변경 설명

GraphQL Mutations를 사용하면, single round trip에서 Mutations를 실행함으로써 영향 받을 데이터를 선언적으로 정의하고 요청할 수 있다. 그리고 Relay는 이러한 변경 사항을 자동으로 병합하고 전파한다.

자동 업데이트

Global Object Identification를 사용하여 Relay는 영향을 받는 개체에 대한 mutation 업데이트를 자동으로 병합하고 영향을 받는 component만 업데이트할 수 있다.
업데이트를 자동으로 병합할 수 없는 복잡한 경우에는 Relay는 mutation에 대한 응답으로 로컬 Relay 데이터를 수동으로 업데이트하는 API를 제공한다.

뛰어난 UX를 위한 설계

Relay의 mutation API는 유저에게 즉각적인 피드백을 표시하기 위해 낙관적인 업데이트를 지원하고 mutation이 실패할 때 오류 처리 및 변경 사항을 자동으로 되돌리는 것을 지원한다.

---

사전 안전

마음의 평화

Relay 프로젝트에서 작업하는 동안 Relay 컴파일러는 GraphQL 스키마에 대해 프로젝트 전체의 일관성과 정확성을 보장하도록 안내한다.

최적화된 런타임

Relay는 브라우저나 장치의 런타임을 최대한 효율적으로 만들기 위해 빌드 시간 동안 많은 작업(쿼리 처리 및 최적화 등)을 미리 계산한다.

Type 안정성

Relay는 수신하는 데이터를 나타내는 component에 Flow 또는 TypeScript 유형을 생성하므로 정확성이 보장됨을 알면서 더 빠르고 안전하게 변경할 수 있다.

---

Relay가 나를 위해 일할 수 있을까 ?

점진적으로 채택

이미 React component를 렌더링할 수 있다면 거의 다 된 것이다. Relay를 사용하려면 Babel plugin이 필요하며 Relay 컴파일러도 실행해야한다.
CRA(Create React App) 및 Next.js와 함께 즉시 Relay를 사용할 수 있다.

복잡성을 명확하게 하기

Relay는 팀 및 앱 복잡성에 따라 확장할 수 있는 고립된 component의 아키텍처를 지원하기 위해 좀 더 사전 설정 및 도구가 필요하다.
이러한 원칙을 한 번 배운 다음 파이프라인 데이터 대신 비즈니스 논리에 더 많은 시간을 투자해야한다.

facebook 규모에서 사용

Relay는 facebook에서 중요한 인프라이며 이를 사용한 component가 수만개이다. Relay는 GraphQL과 함께 만들어졌으며 이를 개선하기 위해 일하는 직원이 있다.

큰 앱 뿐만 아니라

Flow 또는 TypeScript를 사용하여 오류 감지를 개발 시간으로 옮기는 것을 믿는 팀이라면 Relay가 적합할 것이다. 그렇지 않다면 Relay의 많은 캐싱과 UI 모범 사례를 독립적으로 다시 만들 가능성이 높다.

잘못된 부분이 있다면 알려주시면 감사하겠습니다 :)