RESUMAC

📖 React + Relay: 타입 안전성과 성능을 모두 잡는 GraphQL 클라이언트

Relay는 Meta(facebook)에서 개발한 Rceact용 GraphQL 데이터 관리 라이브러리이다. meta에서 개발한 만큼 React에 최적화되어 있으며, 타입 안전성, 성능, 자동 캐싱 및 정합성 유지에 중점을 둔 *엔터프라이즈급 GraphQL 데이터 관리 도구이며, 러닝커브는 다소 높지만 그만큼 높은 사용성을 제공한다고 알려져있다.

1. 프래그먼트 중심 개발 (Colocation)- 데이터 쿼리를 컴포넌트와 함께 정의하여 유지보수가 쉬움- 쿼리가 자동으로 병합됨 → 중복 없는 최적화된 네트워크 요청 생성

const fragment = graphql'
		fragment UserProfile_user on User {
				name
				avatarUrl
				}';

2. 정적 분석 기반 컴파일 (relay-compiler)- 개발 중에 GraphQL 문법 오류를 사전에 잡아줌- 실제 서버 스키마를 기준으로 타입이 자동 생성됨 → 타입 안정성 극대화

yarn relay
# → artifacts/*.graphql.js 및 *.graphql.ts 파일 자동 생성

3. 자동 캐싱 + 데이터 정합성 유지- 응답 데이터를 정규화된 형태로 캐싱- 뮤테이션 이후 관련된 쿼리를 자동으로 업데이트 (store.update)- 동일 객체에 대해 중복 요청 없이 관리

4. Pagination, Refetch, Mutation 지원usePaginationFragment, useRefetchableFragment, useMutation 등의 훅 제공복잡한 GraphQL 작업도 패턴화된 방식으로 관리 가능

Relay vs Apollo

항목	Relay	Apollo
데이터 구조	정규화 강제	유연
타입 안전성	컴파일 기반, 매우 강력	비교적 약함 (옵션)
학습 난이도	높음	낮음
쿼리 병합	자동	수동
캐시 정합성	보장됨	설정에 따라 다름
사용 사례	Meta, Shopify 등 대규모 앱	다양한 중소/대규모 앱

Relay 환경 설정 (기본 구성)Install

yarn add react-relay
or
yarn add --dev relay-compiler babel-plugin-relay

relay.config.js

module.exports = {
  src: "./src",
  schema: "./schema.graphql", // GraphQL SDL 스키마 파일
  language: "typescript",
  artifactDirectory: "./src/__generated__",
};

babel.config.js

module.exports = {
  plugins: ["relay"],
};

RelayEnvironment.ts

import {
  Environment,
  Network,
  RecordSource,
  Store,
} from "relay-runtime";

function fetchQuery(operation, variables) {
  return fetch("https://your-api/graphql", {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
    },
    body: JSON.stringify({
      query: operation.text,
      variables,
    }),
  }).then((res) => res.json());
}

export default new Environment({
  network: Network.create(fetchQuery),
  store: new Store(new RecordSource()),
});

Relay를 쓰면 좋은 상황- 대규모 앱에서 컴포넌트별 데이터 정의가 중요한 경우 : 프래그먼트 중심 개발이 적합- API 스키마가 크고 복잡하며 협업이 필요한 경우 : 정적 타입과 자동 컴파일로 오류 방지- 프론트엔드에서 데이터 일관성을 철저히 유지해야 하는 경우 : 강력한 정규화 캐싱- 트래픽 최적화가 중요한 경우 : 쿼리 병합, 중복 제거 기능 내장

주석* 엔터프라이즈급(Enterprise-grade): 대기업 또는 복잡한 요구사항을 가진 조직에서도 사용할 수 있을 정도로, 안정성과 확장성, 보안, 성능 등을 갖춘 수준을 의미

참조 사이트https://relay-ko.github.io/https://velog.io/@2ast/Graphql-Relay%EB%8A%94-%EC%96%B4%EB%96%A4-%EB%AC%B8%EC%A0%9C%EB%A5%BC-%ED%95%B4%EA%B2%B0%ED%95%B4%EC%A4%84%EA%B9%8C https://velog.io/@juno7803/thinking-in-relay https://devowen.com/500 https://www.back4app.com/docs-kr/react-native/graphql/get-started-relay-graphql https://emewjin.github.io/relay-style-graphql/