3. GrpahQL 실습 - Schema 정의 및 Query 작성

이번 시간에는 GraphQL에서 Schema를 정의하고 Query를 날려 어떤 방식으로 동작하는지 직접 보겠습니다.

- Schema?

Schema는 간단하게 받거나, 줄 정보에 대한 설명 정도라고 생각하시면 됩니다.

(여기서의 Schema는 GraphQL을 이해하기 위한 간단한 설명이므로, 너무 복잡하게 생각하지 않으셔도 됩니다.)

* 여기서 가장 중요한 것은 무엇을 받을지 그리고 무엇을 줄 지에 대한 설명이라는 것입니다.

프로젝트에 graphql이란 폴더를 만들고, 그 안에 schema.graphql 파일을 만들겠습니다.

schema에는 데이터베이스에 어떠한 데이터를 받을지에 대한 Query를 작성해줍니다.

type Query {
name: String!
}

<schema.graphql>

-> type Query 는 여기에 Query를 정의하겠다고 명시하는 것입니다.

-> name: String! 은 name이라는 String형태의 데이터를 !(isRequired)로 받는다는 뜻입니다.

즉, 데이터베이스에서 어떠한 반응을 해야하는지에 대한 설명을 해주는 것입니다.

Query를 보내면, 어떠한 방식으로 데이터를 보내달라고 설명서(?)를 작성했습니다.

데이터베이스는 이 Query를 받으면 이 Query문제를 해결(resolve)해야 합니다.

어떠한 방식으로 해결할지 Resolver라는 파일을 만들어서 작성을 해줘야 합니다.

프로젝트의 graphql폴더 안에 resolvers.js파일을 만들겠습니다.

그리고, 다음과 같이 작성해줍니다.

const resolvers = {
  Query: {
    name: () => "Tora"
  }
};

export default resolvers;

<resolvers.js>

어떤 사용자가 name Query를 보내면 Tora를 반환하는 함수로 답한다는 뜻입니다.

다음으로 index.js에서 작성한 Query와 Resolver에 대해 명시를 해야합니다.

index.js를 다음과 같이 작성해줍니다.

import { GraphQLServer } from "graphql-yoga";
import resolvers from "./graphql/resolvers" // resolvers파일을 import하는 것입니다.

const server = new GraphQLServer({
  typeDefs: "graphql/schema.graphql", // typeDefs는 schema의 모든 type들에 대한 정의입니다.
  resolvers // resolver에 대한 정의입니다.
}); // GraphQL Server의 설정을 해주는 곳입니다.

server.start(() => console.log("GraphQL Server Running"));

<index.js>

이처럼 GraphQL에는 URL이나 View와 같은 것들은 없고, 오로지 Query 와 Resolver만 있습니다.

이제, 서버를 실행시키고 Query에 대한 응답을 보겠습니다.

yarn start

<GraphQL 서버 실행화면>

성공적으로 실행이 되었다면, localhost:4000에서 확인해볼 수 있습니다.

GraphQL PlayGround라는 곳에 접속이 되고, 다음과 같이 쿼리를 작성한 후 가운데 플레이 버튼을 누르면 오른쪽에 그 결과가 나옵니다.

여기까지 GraphQL 설치 및 실습 with GraphQL Yoga & Github 튜토리얼을 마치겠습니다.

(사실상 Github은 설정할 때만 언급했네요. GraphQL이 주 목적이니 Github은 넘겼습니다.)

GraphQL 튜토리얼은 노마드코더 아카데미 - 나의 첫 번째 GraphQL서버 만들기를 참고하여 작성하였습니다.