Relay에 대하여

230128 ver.

1. 참고 문서 & 영상

■ 문서

1. https://relay.dev/docs/ - 공식문서
2. https://relay-ko.github.io/ - 공식문서, 한국
3. https://relay.dev/docs/tutorial/intro/ - 튜토리얼
4. https://velog.io/@juno7803/thinking-in-relay - 블로그

■ 참고 영상

1. https://youtu.be/YP7d9ae_VzI - Relay, 그리고 Declarative에 대해 다시 생각하기
   https://drive.google.com/file/d/11LBgG_UFmrGNDQHCsL4ane42rLOvWqjN/view - 위 영상의 발표자
2. https://youtu.be/D9Y1jkdnD98 -  React와 함께 진화해온 GraphQL 클라이언트 

---

2. Relay를 이해하기 위해 알아야 할 용어

■ 스키마(Schema)

- GraphQL안에서 타입을 정의하는 것
- 어떤 종류의 노드가 있는지, 어떻게 연결되어 있는지, 각 노드에 어떤 정보가 포함되어 있는지 설명한다.

■ 뮤테이션(Mutation)

 

■ 쿼리(Queries)

 

■ 프래그먼트(Fragment)

- Relay의 특징 중 하나

- They let each component declare its own data needs independently, while retaining the efficiency of a single query.

- 단일 쿼리의 효용성을 유지하면서, 각각의 컴포넌트가 독립적으로 자체 데이터의 요구 사항을 선언하도록 한다.

- 데이터 의존성 조각 

• 컴포넌트의 데이터 의존성을 표현하는 문법
• UI를 그리는데 필요한 데이터들의 집합을 프래그먼트들의 집합으로 표현 가능
• 특정 타입에 대한 객체에서 필요한 필드들을 지정하는 GraphQL의 스니펫

▶ GraphQL 리터럴 안에서 작성된다.

// UserInfo.react.js
const userInfoFragment = graphql`
  fragment userInfo_user on user {
    name
    photo {
      url
      alt
    }
  }
`;

컴포넌트는 모델에 포함된 값을 필요로 한다.

 

■ 데이터 마스킹

- 데이터 캡슐화와 시스템적으로 캡슐화를 깨지지 않게 보완해주는 릴레이

 

■ 스칼라

- 정보 단위를 검색한다.

■ 페이지네이션(Pagination)

■ Refetching

■ optimistic updates

■ rollbacks

■ 스니펫

■ 코-로케이션(Co-location), 컴포넌트와 프래그먼트를 같은 파일에 작성하기 / 같은 목적의 코드를 같은 곳에 위치시키기 / 

---

3. 소개

• - Mata에서 만들었다.
• - GraphQL의 라이브러리
• - GraphQL로 데이터를 가져오고 업데이트 할 수 있는 React용 데이터 관리 라이브러리

■ 목적

• 코드를 안정적이고 유지 관리 가능하게 하면서 뛰어난 성능을 제공
• 선언적으로 코드를 작성하여
  개발자들은 UI가 무엇을 보여줄지만 결정하고, 어떻게 보여줄지는 React의 내부에서 처리

---

4. 특징

• Declarative data: Just declare what data each component needs and Relay will handle the loading states.
• Co-location and composability: Each component declares its own data needs; Relay combines them into efficient queries. When you re-use a component on a different screen, your queries are automatically updated.
• Pre-fetching: Relay analyses your code so you can start fetching queries before your code even downloads or runs.
• UI patterns: Relay implements loading states, pagination, refetching, optimistic updates, rollbacks, and other common UI behaviors that are tricky to get right.
• Consistent updates: Relay maintains a normalized data store, so components that observe the same data stay in sync even if they reach it by different queries.
• Streaming and deferred data: Declaratively defer parts of your query and Relay will progressively re-render your UI as the data streams in.
• Great developer experience: Relay provides autocompletion and go-to-definition for your GraphQL schema.
• Type safety: Relay generates type definitions so that mistakes are caught statically, not at runtime.
• Manage local data: Use the same API for server data and local client state.
• Hyper-optimized runtime: Relay is relentlessly optimized. Its JIT-friendly runtime processes incoming data faster by statically determining what payloads to expect.

- 선언적 데이터 : 각 구성 요소에 필요한 데이터를 선언하기만 하면 Relay가 로딩 상태를 처리한다.

- 데이터 프레임워크 : 릴레이 컴파일러가 프래그먼트의 모음을 단일 GraphQL 쿼리로 생성 / 릴레이 컴파일러가 타입 체크 등 오류가 발생할 여지를 줄여줌 / 컨벤션 확인 / 릴레이 런타임은 최적화된 쿼리를 런타임에 수행하고 자동으로 상태 관리를 해준다. 

- 

 

- React 뿐만 아니라 React Native와도 잘 작동한다.

- Flow 유형 시스템과 함께, 또는 유형 시스템 없이 사용할 수도 있다.

- 프레임워크에 구애받지 않는다.

- TypeScript와 Flow 모두에서 작동한다.

 

- fragment 문법을 통해 선언적으로 각 컴포넌트에 사용되는 데이터 필드들을 작성하여 어떤 데이터를 의존하고 있는지를 명확하게 드러내도록 강제한다.

 

 

- GraphQl 쿼리를 사용하여 데이터를 가져온다.

 

- 하나의 큰 쿼리에서 모든 데이터를 가져오도록 권장한다.

 

- 데이터 정규화(Data Normalization)을 통해 전역 상태 관리를 사용하고, 데이터 중복을 최소화한다.

 

 

GraphQL

1. 약속을 정한다 -> 2. 약속을 통한 정규화 -> 3. 더 쉬운 상태 관리

약속 = 언어

- 타입 시스템을 통한 자연스러운 데이터 정규화 / 모델 타입을 정의함으로써, JSON을 정의에 따라 쉽게 정규화

- ID 값을 통해 자동적으로 데이터/뷰 일관성 달성 / id 필드를 통해 GraphQL 클라이언트가 자동적으로 상태 관리 / 데이터/뷰 일관성을 위해 따로 리소스가 필요 없음

 

 

Q. Flow 유형 시스템?

 

===

공부해보려는 영상

https://youtu.be/Vo2HX86gGL8 - Build A TODO App with Relay

 

==

GraphQL is a language for modeling data as a graph and querying that data from a server (as well as updating the data). Relay is a React-based client library for GraphQL that lets you build up queries from individual fragments that are co-located with each React component. Once the data has been queried, Relay maintains consistency and re-renders components as the data is updated.

 

==

Queries are the foundation of fetching GraphQL data. We’ve seen:

• How to define a GraphQL query within our app using the graphql`` tagged literal
• How to use the useLazyLoadQuery hook to fetch the results of a query when a component renders.
• How to import Relay's generated types for type safety.

In the next section, we’ll look at Fragments, one of the most core and distinctive aspects of Relay. Fragments let each individual component define its own data requirements, while retaining the performance advantages of issuing a single query to the server.