GraphQL과 Apollo 세번째 이야기 - GraphQL의 정보 주고 받는 방식

 

카카오페이 | 마음 놓고 금융하다

 

 

GraphQL과 타입스크립트로 개발하는 웹 서비스:설계부터 개발·배포까지 따라 하며 완성하는 웹 풀

"이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다."

 

🗂 목차

✅ GraphQL과 Apollo 첫번째 이야기 - 개념 익히기
✅ GraphQL과 Apollo 두번째 이야기 - REST API란?
✅ GraphQL과 Apollo 세번째 이야기 - GraphQL의 정보 주고 받는 방식
✅ GraphQL과 Apollo 네번째 이야기 - Apollo란?
✅ GraphQL과 Apollo 다섯번째 이야기 - GraphQL을 간단하게 구현해 보아요 😀
✅ GraphQL과 Apollo 여섯번째 이야기 - GraphQL Module화에 대해 알아보아요 😀
✅ GraphQL과 Apollo 일곱번째 이야기 - GraphQL Data Type에 대해 알아보아요 😀
✅ GraphQL과 Apollo 여덟번째 이야기 - GraphQL Union과 Interface 그리고 인자와 인풋 타입에 대해 알아보아요 😀
✅ GraphQL과 Apollo 아홉번째 이야기 - Java + Spring Boot에서 GraphQL 사용해 보기 - 실습 환경 구성
✅ GraphQL과 Apollo 열번째 이야기 - Java + Spring Boot에서 GraphQL 사용해 보기 - 실습 해보기
✅ GraphQL과 Apollo 열 한번째 이야기 - TypeScript + Nest.js에서 GraphQL 사용해 보기 - 실습 환경 구성
✅ GraphQL과 Apollo 열 두번째 이야기 - TypeScript + Nest.js에서 GraphQL 사용해 보기 - 실습 환경 테스트
✅ GraphQL과 Apollo 열 세번째 이야기 - TypeScript + Nest에서 GraphQL 사용해 보기 - 실습 해보기
✅ GraphQL과 Apollo 열 네번째 이야기 - React와 Apollo Client
✅ GraphQL과 Apollo 열다섯번째 이야기 - React와 Apollo Client - Query와 Mutation 사용하여 웹 페이지 만들기
✅ GraphQL과 Apollo 열 여섯번째 이야기 - Kotlin + Spring Boot에서 GraphQL 사용해 보기 - 실습 환경 구성
✅ GraphQL과 Apollo 열 일곱번째 이야기 - Kotlin + Spring Boot에서 GraphQL 사용해 보기 - 실습 해보기

🤔 내가 만난 문제

⚠️ [Nest.js] TypeORM Table 관계가 맺어졌을 때, Seeding (feat. Migration)
⚠️ [Spring Boot 3.0] Could not resolve org.springframework.boot:spring-boot-gradle-plugin
⚠️ [Spring Boot 3] Spring Doc(Swagger) White Label Error

📋 부록

🔍 [Nest.js] 초기 환경 구성 (feat. TypeORM, QueryBuilder, GraphQL, Apollo)
🔍 [SOLID][Nest.js][Java + Spring] Interface를 활용한 결합도 분리 (Interface를 이용한 Dependency Injection - DI)

 

 

 

 

🚀 GraphQL의 정보 주고 받는 방식

    🔽 GraphQL

        📦 정보 받는 방식

이번에는 GraphQL을 직접 사용해서 정보를 주고 받는 방식에 대해 알아보도록 할게요.

GraphQL은 REST API와 마찬가지로 데이터를 주고 받는 하나의 형식이고, 방식이에요.

apollo playgroud

Backend 코드에 apllo를 추가하게 되면 위와 같이 Playground를 이용할 수 있는데, 이건 REST API에서 많이 사용하는 Postman이라고 생각하면 된답니다.

REST API의 GET Method는 서버에 정보를 달라고 요청하는 것이에요.
GraphQL은 query라는 질의어를 통해 데이터를 달라고 요청할 수 있어요.

위 내용은 서버에 데이터를 요청하는데, teams 즉, 팀 정보를 모두 얻고 싶다고 하고, 필요한 정보는 id, manager, office 등등의 정보가 필요하다고 서버에 요청을 보내는 부분이에요.

그랬더니 결과가 오른쪽과 같이 전달되는 걸 볼 수 있어요.


그렇다면 REST API의 Overfetching 문제를 GraphQL은 어떻게 해결했는지 우리 눈으로 확인해 보아야겠죠?

전제 상황은 현재 클라이언트는 관리자 사무실 정보만 필요한 상황이에요.

위와 같이 요청을 보낼 때 필요한 정보만 딱! 요청을 하면 서버는 그 정보만 딱! 보내주게 되는걸 확인할 수 있어요.
이렇게 Overfetching 문제를 해결했네요!

 

728x90

 

이번에는 팀의 아이디로 구분해서 특정 팀만 한번 받아와 볼게요.
REST API로 이런 정보를 받아와야 한다면 URI의 해당 팀 Index 번호를 넣어 GET 요청을 보내면 돼요.

위와 같이 항목 이름을 team으로 바꾸고, id를 지정해서 요청을 보내보았어요.

즉 위 질의문을 해석해 보면 index 번호가 2인 팀 정보를 받고 싶은데, 해당 정보는 관리자 정보와 사무실 정보만 받고 싶어! 에요.

이 때, REST API의 Underfetching 문제를 어떻게 해결 했는지 확인해 보고 싶어요.
만약 해당 팀 정보와 그 팀의 소속된 팀원들의 정보를 받고 싶을 때, REST API는 두 번 요청을 날려야 한다는 한계를 갖고 있는 걸 확인 했었어요.

그렇다면 GraphQL을 이용한다면 어떻게 이를 해결할 수 있을까요?

위의 질의문을 보면 Index 번호가 2번인 팀의 id, manager,extension_number,mascot 정보를 가져오고, 해당 팀의 소속된 팀원 (members) 정보를 갖고 오는데, 팀원 정보에는 first_name과 last_name을 전달 받고 싶어! 라고 요청을 하는 거고, 서버는 한번의 요청으로 원하는 정보를 전달해 주는걸 확인할 수 있어요.

 

{
  "data": {
    "teams": [
      {
        "id": "1",
        "manager": "Mandy Warren",
        "office": "101A",
        "extension_number": "#5709",
        "mascot": "Panda",
        "members": [
          {
            "first_name": "Nathan",
            "last_name": "Jenkins"
          },
          {
            "first_name": "Isabella",
            "last_name": "Martin"
          },
          {
            "first_name": "Kate",
            "last_name": "Owen"
          },
          {
            "first_name": "Byron",
            "last_name": "Barnes"
          },
          {
            "first_name": "Brian",
            "last_name": "Hunt"
          },
          {
            "first_name": "Violet",
            "last_name": "Pearson"
          },
          {
            "first_name": "Sally",
            "last_name": "Fox"
          },
          {
            "first_name": "Russ",
            "last_name": "Lawrence"
          },
          {
            "first_name": "Leroy",
            "last_name": "Elliott"
          },
          {
            "first_name": "Ned",
            "last_name": "Butler"
          }
        ]
      },
      {
        "id": "2",
        "manager": "Stewart Grant",
        "office": "101B",
        "extension_number": "#4012",
        "mascot": "Tadpole",
        "members": [
          {
            "first_name": "Alex",
            "last_name": "Davidson"
          },
          {
            "first_name": "Page",
            "last_name": "Adams"
          },
          {
            "first_name": "Dennis",
            "last_name": "Marshall"
          },
          {
            "first_name": "Eleanor",
            "last_name": "Smith"
          },
          {
            "first_name": "Zelda",
            "last_name": "Hall"
          },
          {
            "first_name": "Brooke",
            "last_name": "Evans"
          },
          {
            "first_name": "Victoria",
            "last_name": "Brown"
          },
          {
            "first_name": "Nancy",
            "last_name": "Brooks"
          },
          {
            "first_name": "Oliver",
            "last_name": "Simpson"
          },
          {
            "first_name": "Simon",
            "last_name": "Henderson"
          }
        ]
      },
      {
        "id": "3",
        "manager": "Smantha Wheatly",
        "office": "102A",
        "extension_number": "#3852",
        "mascot": "Falcon",
        "members": [
          {
            "first_name": "Lindsay",
            "last_name": "West"
          },
          {
            "first_name": "Noelle",
            "last_name": "Holmes"
          },
          {
            "first_name": "Shirley",
            "last_name": "Grant"
          },
          {
            "first_name": "Toby",
            "last_name": "Lewis"
          },
          {
            "first_name": "Jamie",
            "last_name": "Reynolds"
          },
          {
            "first_name": "Raymond",
            "last_name": "Cook"
          },
          {
            "first_name": "Russel",
            "last_name": "Jones"
          },
          {
            "first_name": "Grant",
            "last_name": "Cole"
          },
          {
            "first_name": "Amber",
            "last_name": "Russel"
          },
          {
            "first_name": "Pansy",
            "last_name": "Moore"
          }
        ]
      },
      {
        "id": "4",
        "manager": "Francis Buckley",
        "office": "103B",
        "extension_number": "#1039",
        "mascot": "Beaver",
        "members": [
          {
            "first_name": "Christine",
            "last_name": "Harris"
          },
          {
            "first_name": "Alfred",
            "last_name": "Clarke"
          },
          {
            "first_name": "Priscilla",
            "last_name": "Walker"
          },
          {
            "first_name": "Barbara",
            "last_name": "White"
          },
          {
            "first_name": "Arnold",
            "last_name": "Armstrong"
          },
          {
            "first_name": "Myrtle",
            "last_name": "Hamilton"
          },
          {
            "first_name": "Edgar",
            "last_name": "Willson"
          },
          {
            "first_name": "Naomi",
            "last_name": "Taylor"
          },
          {
            "first_name": "Chloe",
            "last_name": "Bailey"
          },
          {
            "first_name": "Peter",
            "last_name": "Payne"
          }
        ]
      },
      {
        "id": "5",
        "manager": "Blake Smith",
        "office": "104A",
        "extension_number": "#7750",
        "mascot": "Wildcat",
        "members": [
          {
            "first_name": "Herbert",
            "last_name": "Ford"
          },
          {
            "first_name": "Tyler",
            "last_name": "Philips"
          },
          {
            "first_name": "Nina",
            "last_name": "Dawson"
          },
          {
            "first_name": "Katherine",
            "last_name": "Bennett"
          },
          {
            "first_name": "Margaret",
            "last_name": "Davies"
          },
          {
            "first_name": "Garth",
            "last_name": "Roberts"
          },
          {
            "first_name": "Will",
            "last_name": "McDonald"
          },
          {
            "first_name": "Audrey",
            "last_name": "Fisher"
          },
          {
            "first_name": "Margot",
            "last_name": "Watson"
          },
          {
            "first_name": "Barbara",
            "last_name": "Murphy"
          }
        ]
      }
    ]
  }
}

위와 같이 특정 팀이 아닌 전체 팀 정보에서 소속된 팀원들의 정보를 요청하면 요청 한번으로 두 정보를 적절하게 가져올 수 있는걸 확인할 수 있어요.

 

 

 

 

 

        📦 정보 주는 방식

REST API에서 서버에 정보를 입력할 때 POST Method를 사용한다는 것을 이 전 글에서 공부해 보았어요.
그렇다면 GraphQL은 어떻게 정보를 서버에 전달하여 입력 시킬 수 있을까요?

클라이언트가 서버에 데이터를 요청할 땐 query라는 질의어를 사용한다고 했는데, 서버에 데이터 저장을 위한 요청을 보내거나, 수정, 삭제 요청을 보낼 때는 mutaion 이라는 질의어를 사용해 주면 돼요.

 

 

    🔽 정리

        📦 정리해볼게요!

GraphQL을 사용하면 REST API의 Overfetching, Underfetching 문제를 해결하여 필요한 정보들만 선택하여 받아올 수 있고, 필요한 정보를 딱! 한 번의 요청으로 깔끔하게 받아올 수 있어요. 이를 통해 데이터 전송량이 감소하게 되기 때문에 서버 자원이나, 네트워크 자원 측면에서 불 필요한 자원 낭비를 막을 수 있다는 장점이 있어요.

하나 참고할 사항은 REST API를 사용해도 위의 내용을 기술적으로 해결할 수 없는 것은 아닌 것이에요.
다만, REST API는 Framework 처럼 단단한 규칙이 있고, 그걸 지켜야 하기 때문에 데이터의 소통을 설계하는 데 있어서 제약을 겪을 수 있는 것이에요.

GraphQL은 이와는 다른 형식을 사용하고 있어 보다 자유롭다는 장점이 있어요.

그리고, GraphQL은 하나의 Endpoint에서 모든 요청을 처리할 수 있어요. 즉, 하나의 URI에서 POST로 모든 요청을 처리할 수 있답니다.

예를 들어 REST API에서는 어떤 요청인지를 알려주기 위해 요청마다 URI를 달리하고, Http Method(GET, POST, PUT/PATCH, DELETE) 를 선택하여 요청해 주어야 하는데, GraphQL은 전부 Post로 요청을 보내게 되고, 질의어를 통해 내가 어떤 종류의 정보를 요청하는지 서버에 알려주게 해 주는 방식이에요.

또 하나 현업에서 일하시는 분들이라면 접해 보았을 문제가 하나 있어요.

혹시 KISA에서 발행하는 주요정보통신기반시설 기술적 취약점 분석 평가 상세 가이드를 들어 보셨나요?
ISMS 인증을 받으려고 준비하려는 회사나, 받은 회사에 개발자 분들은 한번씩 경험해 보았을 문제를 이야기 하고 싶어요.

출처: https://www.gne.go.kr/upload_data/board_data/notice010/149921923252956.pdf

 

출처: https://www.gne.go.kr/upload_data/board_data/notice010/149921923252956.pdf

바로 이 내용이에요.

내용을 보면 HTTP Method에서 GET, POST 외에는 되도록 다른 Method를 사용하지 말라는 지침이에요.
사실 이 부분은 REST API의 규칙에 어긋하는 내용이기 때문에 굉장히 고민이 많이 되는 부분이고, Nginx 등을 통해 앞 단에서 이를 처리해 줄 수 있지만, 어쨋든 한 단계 더 어떤 작업을 해야 한다는 번거로움을 가지고 있어요.

특히 ISMS 인증 심사 때 이 부분은 조치 사항으로 걸리게 될 거에요.

그렇기 때문에 GraphQL을 사용하게 되면 POST Method만 사용하게 되므로 이 문제에서도 굉장히 유연하게 대처할 수 있겠다는 생각이 들었어요.

이 부분은 주니의 경험을 기반으로 한 생각임을 참고해 주세요.

 

반응형

 

 

GraphQL과 타입스크립트로 개발하는 웹 서비스:설계부터 개발·배포까지 따라 하며 완성하는 웹 풀

"이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다."

 

 

 

🧐 참고 자료

해당 내용은 아래 강의를 공부하면서 정리한 내용임을 알려 드립니다.

[무료] 얄팍한 GraphQL과 Apollo - 인프런 | 강의

 

https://www.gne.go.kr/upload_data/board_data/notice010/149921923252956.pdf

 

 

 

카카오페이 | 마음 놓고 금융하다