GraphQL 맛보기

🌎·2023년 12월 25일
0

스프링 공부

목록 보기
11/11

동기와 함께 작은 프로젝트를 시작하는데 (내가 볼 땐) 엄청난 문제가 생겼다.
API 를 만들었는데, READ 부분에서 너무 한 번에 많은 데이터를 가져오는 것 같았다.

위 데이터를 기준으로 모바일 어플리케이션에서 리스트를 뿌려주려고 했는데 저 변수 하나하나를 입력하기가 너무 귀찮았다.(내 기준 정말 엄청난 문제임)

쓰다가 포기한 상태 ...
그리고 일단 무엇보다 필요 없는 데이터들이 너무 많았다. 예를 들어 creationDate 같은 값은 모바일에서 전혀 쓰일 일이 없다. 그렇다고 백엔드에서 메소드를 하나 더 짜기에는 그것도 너무 귀찮았...
그래서 찾은 방법이!

GraphQL!!!!
예전에 다른 동기가 프로젝트에서 사용하는데 옆에서 힐끗힐끗 구경했던 기억이 있는데, 그 때 나한테 프론트엔드(리액트) 부분에 대해서 이것저것 물어보길래 저도 같이 GraphQL이 뭐냐고 역으로 꼬치꼬치 캐물었다. 어렴풋이 듣기로는 백엔드에서 리턴해준 모든 값을 읽는게 아니라 내가 원하는 값만 받아낼 수 있다고 했던 것 같아 한 번 찾아봤고, 이거다! 싶었다. 그래서 바로 세팅 ㄱㄱ

개발의 세팅은 반이라고 ... 세팅하면서 엄청난 오류들을 마주할 마음의 준비를 하고 세팅에 들어갔다.

1. Setting

먼저 build.gradle 에 아래와 같은 dependency 를 추가해준다.

implementation 'org.springframework.boot:spring-boot-starter-graphql'

그리고 application.properties 에 아래와 같이 설정을 넣어준다.

#/graphql/schema HTTP를 통해 스키마 조회 가능 여부
spring.graphql.schema.printer.enabled=true
#graphiql 페이지 사용 여부
spring.graphql.graphiql.enabled=true
#graphiql 페이지 경로(기본이 /graphiql임)
spring.graphql.graphiql.path=/graphiql

여기서 graphiql 페이지가 무엇이냐면!

이렇게 데이터 통신을 테스트해볼 수 있는 페이지이다.
그래서 위처럼 세팅을 해두면 http://localhost/grqphiql 로 접속하면 저 페이지로 들어갈 수 있다.

2. Scheme

생각보다 세팅은 너무 허무하게 끝났고, 이제 Scheme을 등록해주면 된다.
일단 맨 처음 보여줬던 사진들처럼 많은 변수들을 넣어야 하지만, graphql은 Date 형 같은 Variable을 제공하지 않아서 이 부분은 나중에 추가하기로 하고, 정말 테스트를 위해 간단한 값들만 넣어봤다.
resources/graphql/schema.graphqls 경로에 넣으면 된다. (없으면 생성)

type Query {
    findCultureNearby: [Culture]
}

type Culture {
    id: ID
    seq: Int
    typeCode: String
    title: String
    thumbnail: String
}

그리고 Controller를 생성해준다.

@Controller
public class CultureGraphqlTestController {

    @Autowired
    private CultureService cultureService;

    @QueryMapping
    public List<CultureVO> findCultureNearby() {
        return cultureService.findAll();
    }

}

graphql은 메소드명과 Query안의 명칭을 매핑해서 해당 메소드를 호출해주기 때문에 명칭을 제대로 맞췄는지 확인해주어야 한다.(위 코드에서는 findCultureNearBy 메소드명을 사용하였다.)

3. Test

아직 뭐가 뭔지 모를 수도 있다. 하지만 http://localhost:8080/graphiql?path=/graphql 여기를 들어가서 이제 내가 불러오고 싶은 쿼리를 작성해보면 대충 감이 올 것이다.

query {
  findCultureNearby {
    id
    title
  }
}

findCultureNearBy 쿼리를 호출할 것인데 idtitle 값만 필요하다는 의미이다.
위처럼 호출하하면 아래와 같이 정말 필요한 값만 보여준다.

만약에 쿼리를 아래처럼 바꾸면 돌려주는 값도 당연히 달라진다.(API를 추가하지 않았지만 말이다!!)

query {
  findCultureNearby {
    title
    thumbnail
  }
}

분명 단점도 존재한다.
앱 개발할 때 편하려고 백엔드 개발할 때 한 번 더 고생해야된다는 점? (앱에서 변수 입력하기 싫어서 한 짓인데 결국 백엔드에서 한 번 더 입력했음...ㅋㅋㅋㅋㅋㅋ 알아서 Model 읽어다 세팅해주면 안되겠니..? ㅠㅠ)
그리고 graphqls 에서 작성할 때 사용할 수 있는 데이터형이 너무 한정적이라는 점

  • Int: 부호가 있는 32비트 정수.
  • Float: 부호가 있는 부동소수점 값.
  • String: UTF-8 문자열.
  • Boolean: true 또는 false.
  • ID: ID 스칼라 타입은 객체를 다시 요청하거나 캐시의 키로써 자주 사용되는 고유 식별자를 나타냅니다. ID 타입은 String 과 같은 방법으로 직렬화되지만, ID 로 정의하는 것은 사람이 읽을 수 있도록 하는 의도가 아니라는 것을 의미합니다.

이게 전부임... 그래서 새로운 데이터를 사용하려면 생성해줘야함(아까 말한 Date 형 같은 경우가 이에 해당)
아마 이 때문에 첨부파일 형태도 지원이 안되지 않을까 싶은데 ...

일단 테스트 용으로 해본 것이기 때문에 효율은 어떨지는 써봐야 알 것 같다. 기회가 된다면 알아서 graphql이 생성되는 방식으로 개발을 한 번 해보고 싶다.

끝 -*

[참고사이트]
https://graphql-kr.github.io/learn/schema/
https://www.graphql-java.com/tutorials/getting-started-with-spring-boot/

profile
영차영차

0개의 댓글