Logo

GraphQL API 간단하게 호출하기

GraphQL API를 별다른 라이브러리 없이 최대한 간단하게 호출하는 방법에 대해서 알아보겠습니다. 아래에 소개된 방법들로 GraphQL API 호출하는 방법에 대한 감을 잡는데 도움이 되셨으면 좋겠습니다.

내장 Web UI

많은 GraphQL 서비스는 GraphiQL이나 Playground와 같은 내장 UI를 제공합니다. 예를 들어, 가짜 데이터를 응답해주는 FakerQL의 경우 브라우저에서 열어보면 Playground가 나옵니다.

좌측 패널에 다음과 같이 쿼리를 입력하고 중간에 있는 실행 버튼을 누릅니다.

query {
  Todo(id: "cjkskilwt00422c10dezjgdhw") {
    id
    title
    completed
  }
}

그러면 우측 패널에 다음과 같이 쿼리에 대한 응답이 표시됩니다.

{
  "data": {
    "Todo": {
      "id": "cjkskilwt00422c10dezjgdhw",
      "title": "neural transmit firmware",
      "completed": false
    }
  }
}

터미널 CURL 커맨드

GraphQL API도 기본적으로 HTTP 프로토콜 기반으로 동작하기 때문에, 일반적인 REST API처럼 터미널에서 curl 커맨드로 호출이 가능합니다.

$ curl -X POST -H "Content-Type: application/json" \
-d '{ "query": "{ Todo(id: \"cjkskilwt00422c10dezjgdhw\") { id title completed } }" }' \
https://fakerql.com/graphql
  • 실행 결과
{"data":{"Todo":{"id":"cjkskilwt00422c10dezjgdhw","title":"Movies","completed":false}}}

curl 커맨드의 옵션을 간단히 살펴보면,

  • -X POST: 쿼리 문자열을 HTTP Body로 전송하기 위해서 POST 메소드를 사용합니다.
  • -H "Content-Type: application/json": 쿼리를 JSON 포맷으로 전송합니다.
  • -d '{ "query": "..." }': 전송할 쿼리 문자열을 query 속성의 값으로 세팅합니다.
  • https://fakerql.com/graphql: 호출을 받을 GraphQL Endpoint 주소입니다.

브라우저 Fetch 함수

브라우저에서도 fetch 함수를 사용하면 간단하게 GraphQL API를 호출할 수 있습니다.

<script type="text/javascript">
  const endpoint = 'https://fakerql.com/graphql'
  const query = `{
    Todo(id: "cjkskilwt00422c10dezjgdhw") {
      id
      title
      completed
    }
  }`

  fetch(
    endpoint,
    {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ query })
    }
  )
    .then(res => res.json())
    .then(json => console.log(JSON.stringify(json.data, null, 2)))
</script>
  • 콘솔 출력
{
  "Todo": {
    "id": "cjkskilwt00422c10dezjgdhw",
    "title": "Horizontal",
    "completed": false
  }
}

Graphql Request 패키지

NodeJS에는 GraphQL API를 호출을 도와주는 여러 가지 패키지들이 있습니다. 그 중 가장 간단하다고 생각하는 graphql-request 패키지를 사용해서 GraphQL API를 호출해보았습니다.

  • call-graphql.js
import { request } from "graphql-request";

const endpoint = "https://fakerql.com/graphql";
const query = `{
  Todo(id: "cjkskilwt00422c10dezjgdhw") {
    id
    title
    completed
  }
}`;

request(endpoint, query).then((data) =>
  console.log(JSON.stringify(data, null, 2))
);
  • 콘솔 출력
$ babel-node call-graphql.js
{
  "Todo": {
    "id": "cjkskilwt00422c10dezjgdhw",
    "title": "GB",
    "completed": true
  }
}

스크립트를 작성하거나 간단한 애플리케이션의 경우, GraphQL API를 호출하는데 위에 소개된 방법들로 충분할 수도 있겠지만, 좀 더 복잡한 애플리케이션을 개발할 때는 Apollo나 Relay와 같은 GraphQL 클라이언트 라이브러리의 사용을 고려해보시기 바랍니다.

This work is licensed under CC BY 4.0

messageCircle