React 개발자를 위한 GraphQL 기초

REST는 형태가 고정된 엔드포인트를 노출합니다. GET /users/:id는 클라이언트에 필요한 내용과 관계없이 전체 사용자 객체를 반환합니다. GraphQL을 사용하면 클라이언트가 원하는 필드를 정확히 지정할 수 있어 과다 조회(데이터가 너무 많음)와 과소 조회(데이터가 부족하여 여러 요청이 필요함)를 없앨 수 있습니다.

하나의 GraphQL 쿼리로 사용자와 사용자의 게시물, 각 게시물의 작성자를 한 번의 왕복으로 가져올 수 있습니다.

모든 GraphQL API는 스키마 정의 언어(SDL)로 작성된 스키마로 정의됩니다. 스키마는 타입과 해당 필드, 그리고 클라이언트가 사용할 수 있는 루트 Query, Mutation, Subscription 타입을 선언합니다.

스키마는 클라이언트와 서버 사이의 계약입니다. 스키마에 합의하면 프론트엔드 팀과 백엔드 팀이 병렬로 작업할 수 있습니다.

GraphQL 쿼리는 필드를 선택합니다: { user(id: "1") { name email posts { title } } }. 중첩 필드는 한 번의 요청으로 관계를 따라 이동합니다. 별칭을 사용하면 필드 이름을 바꿀 수 있습니다: { me: user(id: "1") { name } }. 프래그먼트를 사용하면 여러 쿼리에서 필드 선택을 재사용할 수 있습니다.

변수를 사용하면 쿼리를 재사용할 수 있습니다: query GetUser($id: ID!) { user(id: $id) { name } }, 변수는 { id: "1" }입니다.

GraphQL 스키마의 각 필드에는 서버의 리졸버 함수가 있습니다. 클라이언트가 user.name을 쿼리하면 사용자 리졸버가 사용자 객체를 가져오고, name 리졸버(또는 기본 리졸버)가 name 필드를 반환합니다.

이러한 필드 단위의 해결 방식 덕분에 GraphQL은 요청된 데이터만 정확하게 가져올 수 있습니다.

게시물 100개가 있는 목록을 쿼리하고 각 게시물에 작성자가 포함되어 있다면, 단순한 구현에서는 작성자를 가져오기 위해 데이터베이스 쿼리 100개를 별도로 실행합니다. 이 N+1 문제는 최적화하지 않은 GraphQL API를 느리게 만듭니다.

DataLoader는 요청별 캐시와 일괄 처리 함수를 사용하여 모든 작성자 조회를 하나의 데이터베이스 쿼리로 묶음으로써 N+1 문제를 해결합니다.

Apollo Studio와 GraphQL Playground는 GraphQL API를 대화형으로 탐색할 수 있는 브라우저 기반 사용자 인터페이스입니다. 스키마의 필드를 자동 완성하고, 쿼리 결과를 표시하며, 타입 문서를 인라인으로 보여 줍니다.

플레이그라운드를 사용하면 클라이언트 코드를 작성하기 전에 익숙하지 않은 GraphQL API를 가장 빠르게 이해할 수 있습니다.

GraphQL API는 인트로스펙션 쿼리를 통해 자체 스키마를 공개합니다: { __schema { types { name } } }. 클라이언트는 스키마 자체를 쿼리하여 사용 가능한 타입, 필드 및 인수를 확인할 수 있습니다.

graphql-codegen과 같은 코드 생성 도구는 인트로스펙션을 사용하여 API 스키마와 일치하는 TypeScript 타입을 자동으로 생성합니다.

GraphQL 변이는 데이터를 수정합니다: mutation CreatePost($input: PostInput!) { createPost(input: $input) { id title } }. 구독은 지속적인 연결(일반적으로 WebSocket)을 설정하고 업데이트를 푸시합니다: subscription { postAdded { id title } }.

세 가지 루트 타입(Query, Mutation, Subscription)은 모두 동일한 필드 선택 구문을 사용합니다.

GraphQL은 복잡하고 중첩된 데이터 요구 사항이 있는 애플리케이션, 서로 다른 필드 하위 집합이 필요한 여러 클라이언트 유형(모바일, 웹, TV), 또는 엔드포인트 버전 관리보다 필드 사용 중단이 선호되는 빠르게 변화하는 API에서 특히 강점을 보입니다.

REST는 예측 가능한 평면 리소스 구조를 사용하는 CRUD API에 더 단순하며, ETag와 캐시 헤더를 통한 뛰어난 HTTP 캐싱 특성을 제공합니다.

Apollo Client는 정규화된 캐시, 로컬 상태 관리, 구독 및 오류 처리 링크를 제공하는 가장 기능이 풍부한 GraphQL 클라이언트입니다. URQL은 문서 캐시와 더 단순한 API를 제공하는 경량 클라이언트입니다. graphql-request와 함께 사용하는 React Query는 정교한 캐싱 없이 기본적인 쿼리와 변이만 처리할 때 가장 단순한 접근 방식입니다.

캐싱 요구 사항을 기준으로 선택하십시오. 여러 쿼리에서 공유되는 엔터티에는 정규화된 캐시(Apollo)를 사용하고, 서로 독립적인 쿼리에는 더 단순한 문서 캐시(URQL 또는 React Query)를 사용하십시오.

간단한 SDL은 다음과 같습니다: type User { id: ID! name: String! posts: [Post!]! } type Post { id: ID! title: String! author: User! } type Query { user(id: ID!): User users: [User!]! }. 느낌표는 null이 아닌 필드를 나타냅니다.

이 스키마는 각 타입에 어떤 필드가 존재하고 어떤 쿼리를 사용할 수 있는지 클라이언트에 정확히 알려 주므로, 타입 안전 코드 생성을 가능하게 합니다.

REST와 GraphQL의 맥락에서 "과다 조회"란 무엇을 의미합니까?

GraphQL을 사용하면 스키마로 정의된 쿼리 언어를 통해 클라이언트가 필요한 필드를 정확히 요청할 수 있으므로 과다 조회나 과소 조회가 발생하지 않습니다. 리졸버는 각 필드에 응답하고, DataLoader는 N+1 문제를 해결합니다. 인트로스펙션을 사용하면 TypeScript 타입을 위한 코드를 생성할 수 있습니다. Apollo Client, URQL 및 React Query는 React와 호환되는 주요 GraphQL 클라이언트입니다.

복잡하고 중첩된 다중 클라이언트 데이터 요구 사항에는 GraphQL을 선택하고, 예측 가능한 구조의 단순한 CRUD에는 REST를 선택하십시오.