Graphql(apollo-server) Queries and Mutations

graphql을 사용법을 익히는게 주 목적이기 때문에 graphql의 메뉴얼을 보고 연습해보자.

 

아래 메뉴얼 참고

[graphql 메뉴얼] graphql.org/learn/queries/

GraphQL: A query language for APIs.

- Fields

1. 메뉴얼을 참조하면 [참고 1]과 같은 결과 화면이 출력되는 것을 확인할 수 있다. 같은 출력문구가 되기 위한 구성은 아래와 같다.

[참고 1] 메뉴얼 graphql query 결과화면

[참고 2] apollo-server query 구성 내용

[참고 2]의 1, 2, 3의 대한 내용 설명

→ 1 : type schema 정의

→ 2 : hero의 값 저장

→ 3 : resolvers를 명시하여 쿼리 요청에 대한 전달 값 명시

 

위와 같이 설정하고 localhost:4000에서 query { hero { name} } 를 작성 후 재생표시를 클릭하면 결과 값이 똑같이 출력되는 것을 확인할 수 있다.

 

[참고 3] query 결과 값

 

2. 메뉴얼의 두번째 쿼리문

[참고 4] 메뉴얼 graphql query 결과화면 2

[참고 5] apollo-server query 구성 내용 2

 

[참고 6] query 결과 값 2

 

- Arguments

3. 메뉴얼의 세번째 쿼리문

[참고 7] 메뉴얼 graphql query 결과화면 3

[참고 8] apollo-server query 구성 내용 3

→ Query에서 human(id: ID!) 로 하여 ID 값은 무조건 받기로 되어있고 받은 인자는 resolvers의 human(args)에서 전달 받아 args.id인 값과 일치하는 값을 human에서 찾아서 출력!

 

[참고 9] query 결과 값 3

 

4. 메뉴얼의 네번째 쿼리문

[참고 10] 메뉴얼 graphql query 결과화면 4

이부분은 여러번 시도 해봤지만 아직 잘 이해가 안된다. 다음에 다시 해보자...

 

 

- Aliases

5. 메뉴얼의 다섯번째 쿼리문

[참고 11] 메뉴얼 graphql query 결과화면 5

[참고 12] apollo-server query 구성 내용 5

[참고 13] graphql query 결과 값 5

 

- Fragments

6. 메뉴얼의 여섯번째 쿼리문

[참고 14] 메뉴얼 graphql query 결과 화면 6

[참고 15] apollo-server query 구성 내용 6

[참고 16] graphql query 결과 값 6

 

메뉴얼을 하는 도중 너무 재미없다.. 

실제로 써보면서 익히도록 하는게 더 빨리 배울 것 같아 공부 방법을 바꾸기로 했다.

다음 챕터부터는 프론트(앵귤러-graphql) - 백(express-graphql) - DB와 연동하여 실제 사용 할 수 있는 실전용으로 해보자!