Query 란 ?
select 문 이라고 생각하면 된다.
Case 01 - Query 의 형태
|
1
2
3
4
5
|
{
hero {
name
}
}
|
cs |
이런식으로 요청 하면?
|
1
2
3
4
5
6
7
|
{
"data": {
"hero": {
"name": "R2-D2"
}
}
}
|
cs |
이렇게 나온다.
즉 Query 와 결과가 동일한 형태이다.
Case 02 - 인자값을 받아서 결과 구하기
|
1
2
3
4
5
6
|
{
human(id: "1000") {
name
height
}
}
|
cs |
이런식으로 () 안에 인자값을 설정할수 있다.
|
1
2
3
4
5
6
7
8
|
{
"data": {
"human": {
"name": "Luke Skywalker",
"height": 1.72
}
}
}
|
cs |
id 가 1000인 human의 name 과 height를 보여준다.
Case 03 - 프래그먼트 사용하기
프래그먼트란?
비슷한 필드를 중복해서 사용한다면, 쿼리가 복잡해지는것을 방지하기 위해 필드를 담고있는 변수라고 생각하면 된다.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
{
leftComparison: hero(episode: EMPIRE) {
...comparisonFields
}
rightComparison: hero(episode: JEDI) {
...comparisonFields
}
}
fragment comparisonFields on Character {
name
appearsIn
friends {
name
}
}
|
cs |
프래그먼트 안에서 변수도 사용이 가능하다.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
|
query HeroComparison($first: Int = 3) {
leftComparison: hero(episode: EMPIRE) {
...comparisonFields
}
rightComparison: hero(episode: JEDI) {
...comparisonFields
}
}
fragment comparisonFields on Character {
name
friendsConnection(first: $first) {
totalCount
edges {
node {
name
}
}
}
}
|
cs |
Case 04 - Query 명칭 부여하기
Query 에 HeroNameAndFriends 라는 명칭을 부여한 예제이다.
|
1
2
3
4
5
6
7
8
|
query HeroNameAndFriends {
hero {
name
friends {
name
}
}
}
|
cs |
인자는 변수에 담아서 전달한다.
|
1
2
3
4
5
6
7
8
|
query HeroNameAndFriends($episode: Episode) {
hero(episode: $episode) {
name
friends {
name
}
}
}
|
cs |
Case 05 - 지시어 사용하기
- @include(if: Boolean): 인자가 true 인 경우에만 이 필드를 결과에 포함합니다.
- @skip(if: Boolean) 인자가 true 이면 이 필드를 건너뜁니다.
|
1
2
3
4
5
6
7
8
9
|
query Hero($episode: Episode, $withFriends: Boolean!) {
hero(episode: $episode) {
name
friends @include(if: $withFriends) {
name
}
}
}
|
cs |
'Apollo GraphQL Prisma' 카테고리의 다른 글
| 인스타그램 클론코딩 BACKEND 만들기 #6 - Prisma Setup (0) | 2021.06.16 |
|---|---|
| 인스타그램 클론코딩 BACKEND 만들기 #5 - POC API : 객체 타입과 필드, 인자 (0) | 2021.06.16 |
| 인스타그램 클론코딩 BACKEND 만들기 #4 - POC API : Mutation (0) | 2021.06.16 |
| 인스타그램 클론코딩 BACKEND 만들기 #2 - Babel (0) | 2021.06.15 |
| 인스타그램 클론코딩 BACKEND 만들기 #1 - apollo-server 와 graphql 설치 (0) | 2021.06.15 |
