[GraphQL] GraphQL 사용하기

❓What Is GraphQL

GraphQL(Graph Query Language)은 FaceBook에서 만든 Query언어입니다.
👉Query Language는 서버 API를 통해 정보를 주고받기 위해 사용되는 언어로 웹 클라이언트가 데이터를 서버로부터 효율적으로 주고 받는 것에 목적을 두고 있습니다.

데이터를 다루고 처리하는데 있어서 gql의 비율이 계속해서 상위권에 위치하고 있다는 것을 알 수 있습니다.

인식률이 굉장이 높기 때문에 다시 하고 싶은 비율이 상당히 높습니다.

 

🔎GraphQL의 기초

GraphQL은 서로 복잡하게 얽히고설켜있는 그래프형 자료구조로 구성된 데이터를 효율적으로 연결하기 위해 사용됩니다.

GraphQL은 두가지 자료형 구조 스키마와 리졸버로 구정되어 있습니다.
👉GraphQL을 효율적으로 이해하기 위해서는 이 두 구성요소를 잘 이해해야 합니다.

📝스키마

스키마는 데이터의 상호작용을 글로 표현한 것입니다.
👉GraphQL은 스키마 내에서 정의된 데이터만 반환하고 상호작용할수 있습니다.

대부분의 스키마의 기본 구성요소는 다음과 같이 객체 자료형으로 되어 있습니다.

type Profile{
    ID: 1
    Name : "samsamgo"
    Number : Int
    Job : [String]
}

각각의 Profile에는 고유한 ID와 Name, Number, Job값이 존재합니다.
❓ - 만약 필수적으로 요구하는 필드값이 있다면 (!)를 사용해서 스키마를 수정할 수 있습니다.

type Profile{
    ID: 1!//필수적으로 필요한 필드값
    Name : "samsamgo"!
    Number : Int!
    Job : [String]//선택적 입력가능한 필드값
}

 

🧹리졸버

리졸버는 말 그대로 API사용자가 요청한 데이터를 해결하는 역활을 한다.
👉리졸버를 작성하기 위해서는 먼저 스키마에서 리졸버를 정의한 다음 자바스크립트 코 내에서 로직을 구현해야 합니다.

리졸버에는 Query와 Mutation(돌연변이) 두가지 자료형이 존재한다.

📘Query

Query는 특정 데이터를 원하는 형식으로 요청할 수 있습니다.
👉데이터의 목록 전체를 반환하는 쿼리와 단일 데이터에 대한 자세한 정보를 반환하는 쿼리를 작성할 수 있습니다.
❗데이터의 수정이 불가하고 오직 접근만 가능합니다.

📕Mutation

Mutation은 API에서 데이터를 수정할 때에 사용합니다.
👉데이터를 수정과 추가 또는 삭제하는 것이 가능합니다. 수정한 결과는 객체의 형태로 반환됩니다.

 

💻apollo-sever-express

'apollo-server-express'는 Apollo Server와 Express 웹 프레임워크 간의 통합을 제공하는 패키지입니다
👉Apollo Server는 GraphQL API를 구축하는 데 사용할 수 있는  GraphQL 서버입니다.

 API 개발의 첫 단계로, apollo-sever-express패키지를 사용하여 익스프레스 서버를 그래프 QL서버로 전환하는 과정이 필요합니다.

apollo-sever-express패키지 모듈 설치

npm install apollo-server graphql express --save

스키마 작성

typeDefs변수에 저장하는 기본 스키마를 작성해 줍니다.
👉문자열을 반환하는 hello라는 Query작성

const typeDefs = gql`
  type Query {
    hello: String
  }
`;

리솔버 작성

스키마에 설정한 Query를 바탕으로 'Hello world'라는 문자열을 반환하는 간단한 함수입니다.

const resolvers = {
  Query: {
    hello: () => "Hello world!",
  },
};

index.js파일 완성본

아폴로 서버 관련 설정과 미들웨어를 추가하고 app.listen코드를 업데이트하면 코드는 다음과 같습니다.

const express = require("express");
const { ApolloServer, gql } = require("apollo-server-express");

const port = process.env.PORT || 4000;

const typeDefs = gql`
  type Query {
    hello: String
  }
`;

const resolvers = {
  Query: {
    hello: () => "Hello world!",
  },
};

const app = express();

const server = new ApolloServer({ typeDefs, resolvers });

async function start() {
  await server.start();
  server.applyMiddleware({ app });
  app.listen({ port }, () =>
    console.log(
      `GraphQL Server ready at http://localhost:${port}${server.graphqlPath}`
    )
  );
}
start();

그래프 QL 플레이그라운드에서 쿼리 작성하여 확인해 보기

nodemon을 활용해서 서버를 열게 되면  http://localhost:4000/graphql을 클릭하여 브라우저로 바로 이동할 수 있습니다.
👉이동후 nav 바에서 스키마 탭을 클리하면 api에 대해 자동으로 작성된 문서에 접근하여 쿼리를 작성할 수 있습니다. 그래프 QL 플레이그라운드에 다음과 같이 입력해 주세요

query  {
  hello
}

[run] 버튼을 클릭하게 되면 반환된 데이터를 확인할 수 있습니다.

{
  "data": {
    "hello": "Hello world!"
  }
}

GraphQL 애플리케이션은 GQL로 작성된 쿼리를 입력받아 결과를 다시 클라이언트로 돌려줍니다.

 

💽API 적용해 보기

아래와 같은 객체 데이터 'notes'를 생성해서 그래프 QL API를 적용해 보자

let notes = [
  { id: "1", content: "this is a note", author: "Adam Scott" },
  { id: "2", content: "this is author note", author: "Harlow Everly" },
  { id: "3", content: "Oh hey look, another note!", author: "Riley Harrison" },
];

스키마 작성하기

먼저 filed(id content, author)를 확인하고 이에 해당하는 노트 자료형을 typeDefs 그래프QL 스키마 내에 작성해 주세요

const typeDefs = gql`
  type Note {//filed의 자료형
    id: ID!
    content: String!
    author: String!
  }
`;

다음으로 모든 노트 목록을 검색할 수 있는 쿼리를 추가해 주면 됩니다. 

const typeDefs = gql`
  type Note {
    id: ID!
    content: String!
    author: String!
  }

  type Query {
    hello: String!
    notes: [Note!]!
  }
`;

리졸버 작성

데이터 배열을 반환하도록 리졸버를 작성해 주어야 합니다. 
👉원시 데이터 객체를 반환하는 notes리졸버를 포함하도록 Query 코드를 업데이트해주세요

const resolvers = {
  Query: {
    hello: () => "Hello world!",
    notes: () => notes,
  },
};

그래프 QL 플레이 라운드에서 notes쿼리 테스트 하기

http://localhost:4000/graphql에서 실행 중인 그래프 QL 플레이 라운드로 이동하여 다음과 같이 입력해 주세요

query  {
  notes{
    id
    content
    author
  }
}

/*출력*/
{
  "data": {
    "notes": [
      {
        "id": "1",
        "content": "this is a note",
        "author": "Adam Scott"
      },
      {
        "id": "2",
        "content": "this is author note",
        "author": "Harlow Everly"
      },
      {
        "id": "3",
        "content": "Oh hey look, another note!",
        "author": "Riley Harrison"
      }
    ]
  }
}

전송되는 데이터를 클라이언트의 요청으로 제어하는 것도 가능합니다. 

/*content만 요청했을때의 출력*/
query  {
  notes{
    content
  }
}

/*출력*/
{
  "data": {
    "notes": [
      {
        "content": "this is a note"
      },
      {
        "content": "this is author note"
      },
      {
        "content": "Oh hey look, another note!"
      }
    ]
  }
}