Graphql 기본기

GraphQL 소개

GraphQL은 API를 위한 쿼리 언어이며 타입 시스템을 사용하여 쿼리를 실행하는 서버사이드 런타입이다.

GraphQL은 프론트만 알고 있으면 안된다. 프론트가 서버에 데이터를 요청하는 방식이기 때문에 서버에서도 GraphQL을 인지하고 있어햐 한다.

GraphQL 서비스는 Type 과 field를 정의하고, 각 타입의 필드는 함수로 구현된다.

GraphQL 서비스 예시

GraphQL 서비스 예시
type Query {
	me: User
}
type User {
	id: ID
    name: String
}

데이터를 요청하고 다시 받아올 때, 어떤 데이터인지 어떤 형태의 데이터를 요청하는지 명확하게 알 수 있기 위해 위 코드와 같이 선언한다.
유효성 검사: 쿼리를 요청하는 곳에서 적정한 타입 또는 실제 존재하는 데이터를 요청했는지에 대한 검사이다.

쿼리 예제

  요청
{
	me {
    	name
    }
}

결과

  응답
{
	"me": {
  		"name": "Luke Skywalker"
  	}
}

---

GraphQL 사용법

이전에 GraphQL을 사용한 SWAPI이다.
GraphQL의 장점인 다중으로 요청해야 하는 데이터들을 한 번의 요청으로 데이터를 응답받을 수 있다. (쿼리의 필드는 객체를 참조 할 수 있다.)
Argument 인자 (ex personID)를 통해 특정 데이터에 대해 조회가 가능하다.

GraphQL에서 query를 조회할 때, ctrl+space bar를 누르면 조회 가능한 데이터 목록이 나온다.
#으로 주석 처리가 가능하다.

Alias(별칭)

쿼리의 필드 이름이 같은데 인자를 다르게 조회하고 싶을 경우에 사용한다.

person (personID: 1) {}
person (personID: 2) {}

위 코드와 같이 호출하게 되면
"Fields \"person\" conflict because they have differing arguments. Use different aliases on the fields to fetch both if this was intentional.", 이라는 오류가 발생한다.
이를 방지하기 위해 Person1, Person2라는 별칭을 주어서 두 가지 결과를 얻을 수 있다.

Fragment

반복되는 필드 셋 (재사용 가능한 단위)
선언: fragment [이름] on [필드 셋을 가진 객체]{}
이용시: ...[이름] (spread 연산자 사용)

React에서는 fragment를 여러 컴포넌트들을 감쌀 때, 하지만 그것이 특정한 태그로 치환되지 않는 묶음으로 쓸 때 사용했다.

Fragment 안에서 변수 사용

지금까지 쿼리 앞에 query와 쿼리 이름을 생략한 익명 쿼리를 사용해 왔다.
하지만 Fragment 안에 변수를 사용하려면 query와 이름을 선언해주어야 한다.
위 쿼리는 first라는 인자에 $amount 값을 넣어 해당 film data를 몇개 불러 온지 정해주는 쿼리이다. amount에 2를 주면 값이 2개씩 나온다.

작업 이름 (operation)

query 키워드와 query이름을 생략한 단출 문법을 사용했지만, 쿼리 이름을 명시해주는 것이 디버깅이나 서버 측에서 로깅하는데 매우 유용하다.
작업 타입에는 query, mutation, subscription이 될 수 있다
작업 이름은 함수명처럼 지어주자.

변수 (variables)

• 쿼리는 문자열로 전달된다.
  (어떻게 전달되는지 알고 싶으면 프로젝트 폴더 안에 index.html 파일에 graphQLFetcher 함수에서 graphQLParams를 alert로 찍어보자)
  
• GraphQL은 동적으로 쿼리를 조회할 필요가 있다
  • ex) 사용자가 어떤 스타워즈 에피소드에 관심이 있는지 선택할 수 있는 동적 방식인 드롭다운 방식, 검색 필드, 필터링 등이 있다.
• GraphQL은 동적 값을 별도로 전달할 방법인 변수 제공한다(기본값 할당 가능)
• GraphQL에서는 하단에 query variables가 있다.
  query문에서 변수 값을 지정하는 것이 아닌 QUERY VARIABLES에서 변수의 값을 넣을 수 있다.

지시어

if문이 false 인 경우 filmConnetion의 데이터가 보여지지 않는다.
withFilm의 값을 true로 변경 시, film 데이터까지 나오는 것을 확인 할 수 있다.

@include(if: Boolean): 인자가 true인 경우에만 이 필드를 결과에 포함한다.
@skip(if: Boolean): 인자가 true이면 이 필드를 건너뜁니다.

정리

/	GraphQL
쿼리	요청과 결과가 JSON형태의 동일한 포맷
쿼리	필드 객체 참조(다중 요정 X) / 인자 / 별칭 사용
Fragment	반복되는 필드 셋 / 변수 전달 가능
변수 / 지시어	동적 쿼리 방법 / @inclue, @skip