GraphQL 사용 이유 (Feat. GraphQL 장점)

이번 글에서는 GraphQL 사용 이유와 GraphQL이 가지는 장점에 대해 알아보겠습니다. Apollo Supergraph에 대해서는 아래 글에서 설명 드린 바 있으니 먼저 참고하셔도 좋습니다.

최신 애플리케이션에서 데이터를 관리하는 것은 어려운 일입니다. 대부분의 애플리케이션에는 아래와 같은 것들이 필요하기 때문입니다..

각기 다른 데이터 요구 사항을 가진 여러 플랫폼(웹, iOS 등)에 대한 고유한 프런트 엔드 클라이언트
여러 소스(Postgres, Redis 등)에서 클라이언트에 데이터를 제공하는 백엔드
프런트엔드와 백엔드 모두에 대한 복잡한 상태 및 캐시 관리

GraphQL과 Apollo를 채택하면 이러한 문제를 상당히 줄일 수 있습니다. GraphQL의 선언적 모델은 모든 클라이언트에서 사용할 수 있는 일관되고 예측 가능한 API를 만드는 데 도움이 됩니다. 백엔드 데이터 저장소를 추가, 제거 및 마이그레이션할 때 해당 API는 클라이언트 관점에서 변경되지 않습니다.

다른 많은 이점에도 불구하고 GraphQL의 가장 큰 이점은 그것이 제공하는 개발자 경험입니다. API에 새 유형과 필드를 추가하는 것은 간단하며 클라이언트가 해당 필드를 사용하기 시작하는 것도 마찬가지로 간단합니다. 이를 통해 기능을 신속하게 설계, 개발 및 배포할 수 있습니다.

Apollo 오픈 소스 라이브러리와 결합하면 캐싱, 데이터 정규화 및 낙관적 UI 렌더링과 같은 복잡한 고려 사항도 간단해집니다.

Table of Contents

선언적 & 효율적 데이터 Fetching

데이터 가져오기에 대한 GraphQL의 선언적 접근 방식은 REST API에 비해 상당한 성능 및 삶의 질 향상을 제공합니다. REST를 사용하면 아래와 같은 복잡한 일들이 필요한데요.

/api/shelters 엔드포인트에서 보호소 및 해당 pet_id 목록을 가져옵니다.
/api/pets/PET_ID에 별도의 요청을 통해 개별 애완 동물의 세부 정보(이름, 사진 URL 등)를 GET합니다.

이 솔루션에는 여러 종속 네트워크 요청이 필요하므로 모바일 장치에서 페이지 로드 속도가 느려지고 배터리가 추가로 소모될 수 있습니다. 이 논리는 약간 다른 데이터를 표시하는 다른 페이지에서도 재사용하기 어렵습니다.

페이지는 GraphQL을 사용하여 단일 엔드포인트에 대한 단일 쿼리로 이 모든 데이터를 얻을 수 있습니다. 해당 쿼리는 다음과 같습니다.

query GetPetsByShelter {
  shelters {
    name
    pets {
      name
      photoURL
    }
  }
}

이 쿼리는 GraphQL 서버에서 수신하려는 데이터의 모양을 설명합니다. 서버는 백엔드 데이터를 결합하고 필터링하여 우리가 요청한 것을 정확하게 반환합니다. 이것은 특히 수백 개의 불필요한 필드를 반환할 수 있는 REST 엔드포인트와 비교할 때 페이로드 크기를 작게 유지합니다.

위와 같은 쿼리를 실행하기 위해 페이지는 다음과 유사한 코드(React 앱의 경우)와 함께 Apollo Client와 같은 GraphQL 클라이언트를 사용합니다.

// Define the query
const GET_PETS_BY_SHELTER = gql`
  query GetPetsByShelter {
    shelters {
      name
      pets {
        name
        photoURL
      }
    }
  }
`;

function MainPage() {
  // Execute the query within the component that uses its result
  const { loading, error, data } = useQuery(GET_PETS_BY_SHELTER);

  if (error) return <Error />;
  if (loading || !data) return <Fetching />;

  // Populate the component using the query's result
  return <PetList shelters={data.shelters} />;
}

Apollo 클라이언트의 useQuery 후크는 로드 및 오류 상태 추적을 포함하여 처음부터 끝까지 요청 수명 주기를 처리합니다. 첫 번째 요청을 하기 전에 설정할 미들웨어나 작성해야 할 상용구가 없습니다. 구성 요소에 필요한 데이터를 설명하고 Apollo 클라이언트가 무거운 작업을 수행하도록 하기만 하면 됩니다.

GraphQL 장점

GraphQL의 강력한 타이핑과 내부 검사에 대한 기본 제공 지원 덕분에 GraphQL용 개발자 도구는 매우 강력합니다. 이러한 도구를 사용하면 다음과 같은 작업을 수행할 수 있습니다.

독스트링으로 완성된 스키마의 전체 구조 탐색
실시간 유효성 검사 및 자동 완성으로 새로운 작업 작성
변경 사항을 추적하고 확인하는 관리 서비스에 스키마를 등록

GraphQL = Production-ready

GraphQL의 채택은 Facebook이 2015년에 원래 사양을 발표한 이후로 꾸준히 증가했습니다. 점점 더 많은 조직에서 GraphQL의 이점은 호기심 많은 엔지니어의 해킹 주간 실험에서 엔터프라이즈 데이터 계층의 핵심으로 옮겨졌습니다.

GraphQL은 주로 강력한 도구와 연합 아키텍처와의 호환성으로 인해 대규모 조직의 요구 사항에 따라 확장됩니다.

연합 아키텍처(슈퍼 그래프라고도 함)에서 단일 GraphQL 스키마는 여러 백엔드 서비스로 분할됩니다. 그러면 조직의 각 팀이 서비스(및 스키마의 해당 부분)를 정확히 소유할 수 있습니다.

선언적 & 효율적 데이터 Fetching

GraphQL 장점

GraphQL = Production-ready

Related