GraphQL Query 기초

🚀 GraphQL Query어

GraphQL은 쿼리어입니다. 쿼리어하면 생각나는 대표적인게 있을겁니다. 바로 SQL입니다. 이 둘은 무슨 연관성이 있을까요?

• SQL은 데이터베이스 한정으로 쓰입니다. 그리고 SQL 데이터는 데이터 테이블 안에 저장되어 있고, 조작하기 위해서는 SELECT, INSERT, UPDATE, DELETE가 대표적입니다.

• GraphQL은 API에서 쓰입니다. 그리고 GraphQL 데이터는 DB에도 저장되어있을 수도 있고, 다른 파일시스템, REST API로부터 데이터를 받아올 수도 있습니다.

정리해서 보면 쓰이는 목적도 다르고, 구문자체도 다르고, 데이터가 저장되는 공간도 다릅니다. 그냥 별개로 보고 GraphQL을 학습하면 될 거 같습니다.

공용 GraphQL API

옆에 사이트를 들어가서 간단한 쿼리를 전송해보겠습니다. ( http://snowtooth.moonhighway.com/ )

{
  allLifts {
    name
  }
}

사이트 구조를 보면 왼쪽은 Query문을 작성할 수 있는 공간, 가운데는 실행결과, 가장 오른쪽은 SCHEMA를 볼 수 있습니다. 위에처럼 쿼리문을 보냈더니 JSON응답이 넘어왔고 data에 보면 제가 요청한 모든 스키장 리프트 이름이 나왔습니다.

이런식으로 공용 GraphQL API를 이용해서 쿼리 작성 방법에 대해 연습해볼 수 있습니다. 저번시간에 본 스타워즈 API도 한가지 예입니다.

여러 공용 GraphQL API 목록 : https://github.com/APIs-guru/graphql-apis

GraphQL 플레이그라운드

위에서 본 사이트가 바로 GraphQL 플레이그라운드를 이용한 사이트입니다. 여기서 URL ENDPOINT만 입력해주면 쓸 수 있습니다. 웹 사이트에서 바로 쓸 수도 있고 데스크탑 애플리케이션으로 설치해서 쓸 수도 있습니다.

웹사이트 : https://www.graphqlbin.com/v2/new
데스크탑 애플리케이션(일렉트론) : https://github.com/prisma-labs/graphql-playground/releases

✨ 쿼리 실습

1. 필드(Field)

다시 위 Snowtooth 사이트를 이용해서 이번에는 리프트와 경로정보를 불러오고 싶습니다.

query lifts {
  allLifts {
    name
  }
}

query trails {
  allTrails {
    name
    difficulty
  }
}

query는 이름을 생략해서 쓸 수 있습니다. 다만 위에처럼 query가 여러개 있는경우 무엇을 실행할지 구분하기 위해 query 이름을 정해줘야 합니다. 이렇게 각각 쓰는 방법도 있지만 동시에 불러오고 싶은 경우도 있을 수 있습니다. 그 경우는 아래와 같이 쓰면 됩니다.

query liftsAndTrails {
  allLifts {
    name
  }
  allTrails {
    name
    difficulty
  }
}

그렇다면 쿼리에서 필드가 뭐가 있는지 알고 작성하고 요청하는 걸까요? 그건 스키마를 보면 됩니다. (스키마에 대해서는 나중에 자세히 다룰거지만 천천히 익숙해지는것도 나쁘지 않을거 같아서 여기에 넣었습니다)

쿼리라는 타입을 보면 위에서 요청했던 allLifts도 있고, allTrails도 있습니다. 그리고 : 뒤에는 반환하는 타입이 정의되어있습니다. 한번 Lift를 찾아보겠습니다.

오.. Lift를 보니 name도 있고 status도 있고 여러가지가 있습니다. 이런것들도 호출할 수 있었네요.

2. 인자(arguments)

스키마에 정의된 type Query를 보면 allLifts뒤에 (status: LiftStatus)라는게 눈에 보일겁니다.

LiftStatus를 보니 역시 정의 되어있었습니다. 3가지 상태가 정의되어있네요.

LiftStatus에 정의된 정보를 이용해서 한번 아래처럼 호출해보겠습니다. 즉, 쿼리를 사용할때 스키마에 (괄호)가 있다면 여기에다가 해당 타입에 맞는 값을 넣어서 호출할 수 있게됩니다.

query liftsAndTrails {
  allLifts(status: OPEN) {
    name
    status
  }
  allTrails {
    name
    difficulty
  }
}

그랬더니 status가 OPEN된 리프트 정보가 1개밖에 나오지 않았습니다. 쿼리 결과를 필터링하고 싶다면 인자를 이용하면 되겠네요.

3. 별칭(Alias)

보면 알겠지만, 요청을 allLifts에서 id, name, status를 보냈다면 응답도 json 형태로 동일한 이름이 생성됩니다. 응답 객체 필드명을 다르게 받고 싶다면 어떻게 해야할까요??

만약 아래와 같이 쿼리를 실행하면 에러가 납니다. 동일한 Lift를 두번 호출했으니까요.

query lift {
  Lift(id: "jazz-cat") {
    capacity
  }
  Lift(id: "snowtooth-express") {
    capacity
  }
}

에러를 해결하려면 별칭을 다르게 부여하면 됩니다.

query lift {
  jazzCatLift: Lift(id: "jazz-cat") {
    capacity
  }
  expressLift: Lift(id: "snowtooth-express") {
    capacity
  }
}

4. 연결관계

이번에는 특정 Lift에서 접근할 수 있는 경로를 반환받아보겠습니다.

query liftToAccessTrail {
  Lift(id: "jazz-cat") {
    capacity
    trailAccess {
      name
      difficulty
    }
  }
}

Lift의 인자로 jazz-cat을 줬고, capactity 필드와 trailAccess라는 필드를 입력했습니다. trailAccess는 Trail이라는 객체 타입입니다. trailAccess는 부모 객체인 jazz-cat Lift 의 정보를 활용해 특정 경로만 필터링 가능합니다.

관계를 보자면 1대다 관계인것을 알 수 있습니다. 물론, 스키마를 보면 반대에 경우인 경로에 대한 리프트 정보를 호출할 수도 있습니다.

query liftToAccessTrail {
  Trail(id: "dance-fight") {
    groomed
    accessedByLifts {
      name
      capacity
    }
  }
}

마침

다음시간에는 프래그먼트와 뮤테이션에 대해 알아보도록 하겠습니다.

참고자료 및 사이트

• Learning GraphQL by Eve Porcello and Alex Banks, published by O'Reilly. Copyright 2018 Moon Highway, LLC, 978-1-492-03071-3
• 한국어번역 공식 소개 사이트 : https://graphql-kr.github.io/learn/
• 튜토리오를 통한 학습 사이트 : https://www.howtographql.com/
• cadenzah님 velog(위 사이트 번역) : https://velog.io/@cadenzah/graphql-01-introduction