패스트캠퍼스 챌린지 20일차 (GraphQL 기본)

22.2.12 (토) +20days

 

배우기

https://graphql.org/learn/

Introduction to GraphQL | GraphQL

[번역] https://graphql-kr.github.io/learn/

GraphQL: API를 위한 쿼리 언어

GraphQL 은 API를 위한 쿼리 언어이며 타입 시스템을 사용하여 쿼리를 실행하는 서버사이드 런타임입니다. GraphQL은 특정한 데이터베이스나 특정한 스토리지 엔진과 관계되어 있지 않으며 기존 코드와 데이터에 의해 대체됩니다.

쿼리 & 뮤테이션

쿼리와 결과의 형태가 동일하다

{ person(personID: “1”) { name } }

쿼리에 주석을 추가 할 수 있다.

#주석

필드

GraphQL은 객체에 대한 특정 필드를 요청하는 것이 무척 간단합니다. 아주 간단한 쿼리를 실행하여 얻는 결과를 살펴 봅시다.

쿼리와 결과가 정확히 동일한 형태인 것을 볼 수 있습니다. 이것이 GraphQL의 핵심입니다. 항상 기대 한 결과를 얻을 수 있습니다. 서버에서 클라이언트가 요청하는 필드를 정확히 알고있기 때문입니다.

인자

객체와 필드를 탐색할 수 있는 것만으로도 GraphQL은 이미 데이터를 가져오는데 굉장히 유용한 언어가 될 것입니다. 하지만 필드에 인자를 전달하는 기능을 추가하면, 훨씬 다양한 일을 할 수 있습니다.

REST와 같은 시스템에서는 요청에 쿼리 파라미터와 URL 세그먼트같은 단일 인자들만 전달할 수 있습니다. 하지만 GraphQL에서는 모든 필드와 중첩된 객체가 인자를 가질 수 있으므로 GraphQL은 여러번의 API fetch를 완벽하게 대체할 수 있습니다. 필드에 인자를 전달하면, 모든 클라이언트에서 개별적으로 처리하는 대신 서버에서 데이터 변환을 한 번만 구현할 수도 있습니다.

별칭

눈썰미가 좋으신 분들은 알아차리셨겠지만, 결과 객체 필드가 쿼리의 필드 이름과 일치하지만 인자는 그렇지 않으므로 다른 인자를 사용하여 같은 필드를 직접 쿼리 할 수는 없습니다. 그렇기 때문에 필드의 결과를 원하는 이름으로 바꿀 수 있습니다. 이 것이 별칭 이 필요한 이유입니다.

프래그먼트

앱에서 상대적으로 복잡한 페이지가 있다고 가정해 봅시다. 친구(friends)를 가진 두 영웅(hero)을 순서대로 요청한다고 해봅시다. 그러면 쿼리가 복잡해질 수 있습니다. 이렇게되면 필드를 최소 두 번 반복해야합니다.

이것이 프래그먼트 라는 재사용 가능한 단위가 GraphQL에 포함된 이유입니다. 프래그먼트를 사용하면 필드셋을 구성한 다음 필요한 쿼리에 포함시킬 수 있습니다. 다음은 프래그먼트을 사용하여 위 상황을 해결하는 방법의 예제입니다.

변수

지금까지는 모든 인자를 쿼리 문자열 안에 작성했습니다. 그러나 대부분의 응용프로그램에서 필드에 대한 인자는 동적입니다. 예를 들어, 어떤 스타워즈 에피소드에 관심이 있는지를 선택할 수 있는 드롭다운, 검색필드, 필터 등이 있을 수도 있습니다.

클라이언트 측 코드는 쿼리 문자열을 런타임에 동적으로 조작하고 이를 GraphQL의 특정한 포맷으로 직렬화해야하기 때문에 이러한 동적 인자를 쿼리 문자열에 직접 전달하는 것은 좋은 방법이 아닙니다. 대신 GraphQL은 동적 값을 쿼리에서 없애고, 이를 별도로 전달하는 방법을 제공합니다. 이러한 값을 변수 라고 합니다.

변수를 사용하기 위해서는 다음 세 가지 작업을 해야 합니다.

1. 쿼리안의 정적 값을 $variableName 으로 변경합니다.
2. $variableName 을 쿼리에서 받는 변수로 선언합니다.
3. 별도의 전송규약(일반적으로는 JSON) 변수에 variableName: value 을 전달하세요.

다음과 같은 형태를 띄게됩니다.

지시어

위에서는 동적 쿼리를 구현하기 위해 변수를 사용하여 문자열 보간 작업을 피하는 방법에 대해 알아보았습니다. 인자에 변수를 전달하면 이러한 문제를 상당히 해결할 수 있지만, 변수를 사용하여 쿼리의 구조와 형태을 동적으로 변경하는 방법이 필요할 수도 있습니다.

정리

쿼리 ⇒ 요청, 결과 동일 / 주석 / 작업(타입/이름)

쿼리 ⇒ 필드 객체 참조(다중콜X) / 인자 / 별칭

Fragment ⇒ 반복되는 필드셋 / 변수 전달 가능

변수 / 지시어 ⇒ 동적 쿼리 방법 / @include @skip

뮤테이션 ⇒ 데이터의 수정을 가하는 방법

Apollo GraphQL ⇒ 다양한 기능이 추가된 라이브러리

뮤테이션 다중필드 ⇒ 순차 실행(쿼리는 병렬)

인라인 프래그먼트 ⇒ interface / union일 때 사용

 

 

 

 

 

22.2.12 +20days

 

 

 

 

https://bit.ly/37BpXiC

본 포스팅은 패스트캠퍼스 환급 챌린지 참여를 위해 작성되었습니다