vulcanJS - 5. graphQL 도구 사용해보기.

지난 번 글에서 열심히 Posts 모델을 만들어 보았습니다.
이것들을 실제로 graphQL을 사용하여 다루기 위해 graphQL 도구를 사용해봅니다.
http://localhost:3000/graphiql 를 한번 열어봅시다.

뭔가 깔끔한 것이 떴습니다.
GraphQL은 듣기로 JSON 같은 걸로 지지고 볶는 구조라고 들었습니다.
한번 본능에 이끌려 이것저것 해봅니다.
{} 를 한번 치고 자동완성을 위해 중간중간 ctrl+space도 눌러보고 해봅시다.

http://imgur.com/0c9BkRK 새창에서 열기

의식에 흐름에 따라 query와 mutation이라는게 오른쪽 Documentation Explorer에 있고 자동완성한 내용을 cmd+click해서 내용을 보고 인자를 아무거나 넣고 ctrl+enter로 실행하는 것까지 해봤습니다.
실제로 Full로 Query를 쓰고 Query Variables(아래쪽 Query Variables 클릭하면 확장됨)까지 넣으려면

query postsListQuery($terms: JSON) {
  PostsList(terms: $terms ) {
    _id
    title
    body
    userId
    createdAt
  }
}
* Query Variable
{
  "terms": {
  }
}

위와 같이 하면 됩니다.

오른쪽 결과 창을 보면 내용물이 없습니다.
당연합니다. 모델만 만들었기 때문이죠.
오른쪽 Documentation Explorer를 한번 살펴봅시다.

친절한 익플띵

ROOT TYPES 에 query하고 mutation이 보입니다.
query는

SiteData: Site
UsersList(
  terms: JSON
  offset: Int
  limit: Int
): [User]
UsersSingle(documentId: Stringslug: String): User
UsersTotal(terms: JSON): Int
currentUser: User
PostsList(
  terms: JSON
  offset: Int
  limit: Int
): [Posts]
PostsSingle(documentId: String, slug: String): Posts
PostsTotal(terms: JSON): Int

요런 것들이 있습니다.
SiteData, UsersList, UsersSingle, UsersTotal, currentUser는 VulcanJS 자체 내장 Query입니다. 물론 중요합니다. 체크해야합니다만 우리는 Posts 시리즈에 주목할 필요가 있습니다.
PostsList는 해당조건(terms)에 맞는 [Posts]. 즉, Posts의 배열을 반환하고 PostsSingle은 조건과 일치하는 Posts 하나를 반환합니다.
물론 PostsTotal은 조건에 해당하는 Posts의 갯수를 반환합니다.
List, Single, Total은 주로 많이 쓰는 Query입니다. 아닌 것들은 Custom이라고 보면 됩니다.

다음으로 Mutation을 봅시다.

usersNew(document: UsersInput): User
usersEdit(
  documentId: String
  set: UsersInput
  unset: UsersUnset
): User
usersRemove(documentId: String): User
PostsNew(document: PostsInput): Posts
PostsEdit(
  documentId: String
  set: PostsInput
  unset: PostsUnset
): Posts
PostsRemove(documentId: String): Posts

단촐합니다.
usersNew, usersEdit, usersRemove도 기본 내장 Mutation입니다. 내부적으로 admin 만 접근할 수 있도록 권한을 설정한 상태입니다.
그리고 PostsNew, PostsEdit, PostsRemove 가 보입니다.
우리는 당장 필요한 것이 PostsNew이므로 이것 먼저 해봅니다.
Mutation은 조금 복잡합니다만 많이 복잡하진 않으므로 힘내봅시다

mutation postsNew($document: PostsInput) {
  PostsNew(document: $document) {
    body
    title
  }
}
* Query Variable
{
  "document": {
    "body": "Booo",
    "title": "first thing"
  }
}

PostsInput 타입의 인자를 받아놓고 PostsNew mutation의 인자로 넘겨줍니다.
필드명을 확인하고 실행을 하면?

{
  "data": {
    "PostsNew": null
  },
  "errors": [
    {
      "message": "{\"id\":\"app.operation_not_allowed\",\"value\":\"\"}",
      "locations": [
        {
          "line": 2,
          "column": 3
        }
      ],
      "path": [
        "PostsNew"
      ]
    }
  ]
}

어라? 오류가 나는군요.

app.operation_not_allowed라고 합니다.
그렇습니다. 권한이 없기 때문입니다.
권한을 만들기 위해선 무엇을 해야할까요.
멤버여야하고 멤버권한을 획득하려면 로그인부터 해야합니다.

브라우저 콘솔에서 Meteor.user()를 쳐서 확인해봅니다.
null이 나온다면 로그인이 안되있는 상태입니다.

일단 계정부터 만듭니다. UI를 구현하려면 이것저것 해야하므로

Accounts.createUser({username: "tester1", password: "justtester"})

라고 쳐서 tester1 사용자를 만들어봅니다.

이렇게 나오면 안심.

똑같이 graphiQL로 돌아와서 cmd+enter로 다시 실행합니다.

{
  "data": {
    "PostsNew": {
      "_id": "ve6pEfkGzr6YpwbKY",
      "title": "first thing",
      "body": "Booo",
      "createdAt": "2017-08-28T17:57:27.415Z"
    }
  }
}

잘 되었군요!
graphiQL 툴은 매우 사용빈도가 높은 도구입니다.
요렇게 조렇게 여러가지로 시도해 봅시다.
다음엔 직접 입력/조회 UI 요소를 갖는 Component들을 만들어보겠습니다.