배경

• 라이브러리는 본인이 가장 잘하는 한가지에 집중하는 편이 좋다고 생각하는데요.

• 그렇다면 제품 개발자는 이러한 라이브러리들을 잘 조합해서 사용할 수 있어야 해요.

• 그 일례로 SSR과 라우팅을 도와주는 React Router와 데이터 페칭과 UI 일관성 유지를 도와주는 Relay를 함께 연동해보려고 해요.

• 각 라이브러리의 특성과 통합 포인트들을 살펴보고, React Router와 Relay를 함께 쓸 수 있도록 셋팅해봐요.

간단 Relay 셋팅

1. Relay Compiler 셋팅

2. Relay를 위한 번들러 셋팅 (Babel Plugin 또는 Vite Plugin 사용)

3. Relay 런타임 셋팅

1. Relay Compiler 셋팅

$ yarn add --dev relay-compiler

{
  "$schema": "https://gist.githubusercontent.com/tonyfromundefined/fbbf9facd07b25410263c3643223ed71/raw/5e40425ad8a6a474b8a20d2f1490a3634e89484c/relay-config-schema.json",
  "src": "./src/web",
  "schema": "./src/graphql/__generated__/schema.graphql",
  "language": "typescript",
  "artifactDirectory": "./src/web/__relay__",
  "eagerEsModules": true,
  "exclude": ["**/__relay__/**"]
}

$ yarn relay-compiler