March 15, 2021 ( last updated : March 15, 2021 )
Graphql gql 그래프큐엘 김혜원

Abstract

김혜원이 배워가고 싶다고 해서 시작된 포스트

[GQL]Graphql 맨바닥에 부딪치기(1)

최근 회사에서 gql을 하게 되었다. 협력사가 gql을 써서 쓰게 되었는데 이전부터 신기술이라고 말이 많이 나와서 개념정도는 익혀두고 Docs도 읽어보고 간단한 gql서버도 만들어 봤지만 프론트엔드 입장에서 이렇게 실무에서 바로 써볼줄은 몰랐다.

웹 쪽 분야를 광범위하게 배우면서 웹 분야 전체에서 경력을 쌓기를 희망하고 있지만 그래도 요즘엔 서버쪽에 마음이 기울어서 서버쪽 공부만한 것이 화근이 된 것 같다. “미리 토이 프로젝트를 했으면 괜찮았을 텐데”라는 생각이든다.

Graphql에 대한 자세한 내용은 Graphql 한글 홈페이지를 참고 하면 될 것 같다.

Mutation 과 Query

Graphql를 익히는데 있어 가장 큰 분기점은 바로 Mutation과 Query이다. 모든 Graphql의 시작은 mutaion 혹은 query이기 때문에 가장 먼저 마주칠 수 밖에 없을 것이다.

Query

Query는 말그대로 쿼리로 데이터를 검색할 때 사용됩니다. CRUD중에서 Read 해당하는 역할을 전담마크 하고 있습니다.

그럼 gql로 쿼리를 써보겠습니다.

query {
  getMyProfile {
    id
    name
    profileImage
    height
    weight
    location
  }
}

서버에서 getMyProfile이라는 쿼리를 제공한다고 했을 때 우리는 getMyProfile이라는 쿼리에서 임의로 데이터를 정해서 가져올 수 있게 됩니다. 만약 현재 인기를 끌고 있는 react의 컴포넌트 방식에 따른다면 같은 쿼리가 필요한 컴포넌트라도 필요한 정보의 양은 다를 수 있습니다.
예를 들어서 다음과 같이 내용을 바꿔 봅시다.

query {
  getMyProfile {
    id
    name
    profileImage
    location
  }
}

이렇게 한다면 저는 이전 쿼리와는 다르게 이름과 사진, 위치 정보만 가져오게 되는 것이죠. 다른 필요 없는 정보들은 제외한체 말입니다.

그렇다면 필터 혹은 변수 전달은 어떻게 할까요?

query {
  getProfile(id: "100") {
    id
    name
    profileImage
    location
  }
}

이렇듯 변수를 주어서 원하는 프로필을 뽑아 낼 수 있게 되었습니다. 하지만 이렇게 되면 고정형으로 변수를 전달 할 수 밖에 없습니다. 다음 형태를 통해서 완벽히 변수를 받는 형태로 변화합니다.

query getProfile($id: string) {
  getProfile(id: $id) {
    id
    name
    profileImage
    location
  }
}

이를 통해서 우리는 변수를 받을 수 있습니다. 그렇다면 변수는 어떻게 전달할까요? 바로 json형태를 통해서 전달이 가능합니다. 현재 쿼리에서 이전과 같은 결과를 얻기 위해서는 다음과 같이 json형태를 구성해야합니다.

{
  "id": "100"
}

이제 필요한 구성품들(쿼리와 변수)은 다 모였습니다. 우리가 만든 쿼리와 변수들이 http로 어떻게 전송이 되는지 안다면 우리는 이를 통해 postman과 같이 유저 친화적으로 만들어진 툴 뿐만 아니라 curl을 이용해서도 쿼리 문을 보낼 수 있게 될 것 입니다.
해당 구성품들이 어떻게 전달되는지 포멧을 보도록 하겠습니다. 먼저 get방식으로 요청을 보낼 때 어떻게 되는지 입니다.

http://localhost:3000/graphql?query=getProfile($id: string){getProfile{id, name, profileImage, location}}&&variables={"id":"100"}

gql 홈페이지에는 쿼리 내용이 상당히 간단히 나와 있고 변수들은 예제 없이 설명으로 덧붙여 있어서 완벽히 실제 예와는 같지 않을 수도 있습니다. 하지만 대체적인 맥락은 비슷할 것입니다.
그리고 get 방식은 post에 비해 안전한 전송 방식이 아니기 때문에 대부분 post방식을 씁니다. 다음은 post방식을 이용했을 때 http body의 형태 입니다.

{
  "query": "query getProfile($id: string){
    getProfile{
      id
      name
      profileImage
      location
    }
  }",
  "operationName": "getProfile",
  "variables": {
    "id": "100"
  }
}

이런식으로 쿼리와 변수가 들어가게 되고 우리가 직접 이름 지워준 “getProfile”은 operationName에 들어가게 됩니다.

Originally published March 15, 2021
Latest update March 15, 2021

Related posts :

[GQL]Graphql 맨바닥에 부딪치기(1) - Query의 이해

Abstract

[GQL]Graphql 맨바닥에 부딪치기(1)

Mutation 과 Query

Query