[네트워크] 🌸GraphQL 사용법

▷ GraphQL

Graph + Query Language

Server API를 통해 정보를 주고받기 위해 사용하는 쿼리 언어이다.

GraphQL은 모든 데이터가 그래프 형태로 연결되어 있다고 본다.
(모든 데이터가 서로 연결되어 있어서 상호작용한다는 것을 의미)

GraphQL에서는 이러한 그래프 구조를 트리 구조로 쿼리 결과를 받기 위해 탐색한다. 즉, 클라이언트에서 요청한 쿼리를 기반으로 서버는 해당 데이터를 찾아서 트리 형태로 반환한다. 이렇게 트리 구조로 반환되는 결과는 클라이언트에서 필요한 부분만 선택적으로 받을 수 있기 때문에, 불필요한 데이터를 전송하지 않아도 되고, 데이터 전송 시간과 대역폭을 절약할 수 있다.

❗️GraphQL의 특징
− HTTP를 통해 API 서버로 요청을 보내고 응답을 받는다.
− 응답을 받을 시, 데이터 결과를 JSON 형식으로 받는다.
− 서버 개발자가 작성한 각 필드에 대응하는 resolver 함수로 각 필드의 데이터를 조회할 수 있다.
− GraphQL 라이브러리가 조회 대상 schema가 유효한지 검사한다.

---

▷ GraphQL 사용법

Query : 저장된 데이터 가져오기
Mutation : 저장된 데이터 수정하기
      → Create: 새로운 데이터 생성
      → Update: 기존의 데이터 수정
      → Delete: 기존의 데이터 삭제
Subscription : 특정 이벤트가 발생 시 서버가 대응하는 데이터를 실시간으로 클라이언트에게 전송

🌸 쿼리 - query, 데이터 조회

필드(field)

// 요청
{
  hero {
    name
  }
}

-------
// 얻은 결과
{
  "data": {
    "hero": {
      "name": "R2-D2"
    }
  }
}

중첩 필드

# 요청
{
  hero {
    name
    # 이런 식으로 GraphQL 내에서 주석도 작성 가능
    friends {
      name
    }
  }
}

-------
# 얻은 결과
{
  "data": {
    "hero": {
      "name": "R2-D2",
      "friends": [
        {
          "name": "Luke Skywalker"
        },
        {
          "name": "Han Solo"
        },
        {
          "name": "Leia Organa"
        }
      ]
    }
  }
}

---

전달인자(Arguments)

필드에 인수를 전달하여 원하는 데이터만 선택적으로 받아올 수 있다.

// 요청
// id가 1000인 human의 name과 height를 쿼리
{
  human(id: "1000") {
    name
    height
  }
}

-------
// 얻은 결과
// id가 1000인 human의 이름과 키를 쿼리해 옴
{
  "data": {
    "human": {
      "name": "Luke Skywalker",
      "height": 1.72
    }
  }
}

---

별명(Aliases)

필드 이름 중복 시, 별명을 사용해 쿼리한다.

// 요청
{
  empireHero: hero(episode: EMPIRE) {
    name
  }
  jediHero: hero(episode: JEDI) {
    name
  }
}

-------
// 얻은 결과
// hero가 아닌 empireHero와 jediHero로 바뀜
{
  "data": {
    "empireHero": {
      "name": "Luke Skywalker"
    },
    "jediHero": {
      "name": "R2-D2"
    }
  }
}

---

오퍼레이션 네임(Operation name)

실제로는 지금까지의 위의 코드와는 다르게
아래처럼 query keyword와 query name을 적어주어야 한다.

// 요청
// query는 오퍼레이션 타입이다.
// 오퍼레이션 타입 종류: query, mutation, subscription, describes 등..
query HeroNameAndFriends {
  hero {
    name
    friends {
      name
    }
  }
}

-------
// 얻은 결과
{
  "data": {
    "hero": {
      "name": "R2-D2",
      "friends": [
        {
          "name": "Luke Skywalker"
        },
        {
          "name": "Han Solo"
        },
        {
          "name": "Leia Organa"
        }
      ]
    }
  }
}

---

변수(Variables)

실제 앱을 사용할 때는 고정된 인수를 받는 것보다는
동적으로 인수를 받아 쿼리 한다.

// 변수를 써서 작성된 쿼리
// $episode: Episode 뒤에 !가 붙는다면
// episode는 반드시 Episode여야 한다는 뜻이다.
query HeroNameAndFriends($episode: Episode) {
  hero(episode: $episode) {
    name
    friends {
      name
    }
  }
}

---

🌸 뮤테이션 - mutation, 데이터 수정

mutation CreateReviewForEpisode($ep: Episode!, $review: ReviewInput!) {
  createReview(episode: $ep, review: $review) {
    stars
    commentary
  }
}

---

🌸 스키마 / 타입 - Schema / Type

스키마는 서비스에서 가져올 수 있는 객체의 종류와
해당 객체가 가지는 필드들을 정의한다.

// 각 객체 유형과 필드들의 데이터 타입, 인자, 반환값 등을 정의할 수 있다.
// !를 붙이면, 반드시 값을 받는다는 의미이다.
// []배열에 !가 붙으면 null값을 허용하지 않는다는 뜻!
type Character {
  name: String!
  appearsIn: [Episode!]!
}

---

🌸 리졸버 - Resolver

스키마에서 정의된 타입(Query, Mutation, Subscription)에 대한
동작 방식을 정의하고, 데이터 소스에서 데이터를 가져와 적절한 응답을 반환한다.

const db = require("./../db")
const resolvers = {
  Query: { // **Query :** 저장된 데이터 가져오기 (REST 에 GET 과 비슷합니다.)
		getUser: async (_, { email, pw }) => {
			db.findOne({
				where: { email, pw }
			}) ... // 실제 디비에서 데이터를 가져오는 로직을 작성합니다. 
			...
		}
  },
  Mutation: { // **Mutation :** 저장된 데이터 수정하기 ( Create , Update , Delete )
		createUser: async (_, { email, pw, name }) => {
			...
		}
  }
  Subscription: { // **Subscription :** 실시간 업데이트
    newUser: async () => {
      ...
		}
  }
};

---

▷ GitHub GraphQL API

GitHub GraphQL API에서 제공하는 explorer는
일종의 playground라고 생각하면 된다.

GitHub 아이디로 로그인하면 자신이 만든 레포지토리와 이력,
다른 사람이 만든 레포지토리에도 접근할 수 있다.

🌸 playground 사용법

⒈ explorer에 접속 → https://docs.github.com/en/graphql/overview/explorer
⒉ 자신의 GitHub id로 로그인
⒊ GraphQL 쿼리를 이용하여 자신이 만들었던 repository들에 접근해 조회
⒋ 쿼리를 작성하기 어렵다면 Reference를 보고 작성 → https://docs.github.com/en/graphql/reference/queries
⒌ 또는 Explorer의 Explorer 버튼을 눌러 직접 관련된 field를 탐색할 수 있다.

---

🌸 GitHub GraphQL API 사용법

// 설치
// graphQL의 쿼리를 로컬 환경에서 쉽게 수행할 수 있게 도와주는 라이브러리임
npm install @octokit/graphql

@octokit/graphql의 사용법과
Graphql Queries-GitHub Docs를 보고 깃헙에서 데이터를 가져올 수 있다.

// graphql 가져오기
import { graphql } from "@octokit/graphql";
import React, { useState, useEffect } from "react";

async function myData() {
  const CLIENT_TOKEN = process.env.REACT_APP_GHP_TOKEN;
  const { repository, viewer } = await graphql(
    `
      {
        repository(name: "이름", owner: "소유자") {
          discussions(last: 10) {
            edges {
              node {
                id
                title
                url
                author {
                  resourcePath
                }
              }
            }
          }
          issues(last: 10) {
            edges {
              node {
                id
                title
              }
            }
          }
          pullRequests(last: 10) {
            edges {
              node {
                id
                title
              }
            }
          }
        }
        viewer {
          login
        }
      }
    `,
    {
      headers: {
        authorization: `token ${CLIENT_TOKEN}`,
      },
    }
  );
  return { repository, viewer };
}

const GetInfo = () => {
  const [data, setData] = useState([]);
  const [issues, setIssues] = useState([]);
  const [pull, setPull] = useState([]);

  useEffect(() => {
    myData().then((res) => {
      setData(res.repository.discussions.edges);
      setIssues(res.repository.issues.edges);
      setPull(res.repository.pullRequests.edges);
    });
  }, []);

  return (
    <>
      <div>
        {data.map((el) => {
          return <div key={el.node.id}>{el.node.title}</div>;
        })}
      </div>
      <br />

      <span>ISSUE</span>
      <div>
        {issues.map((el) => {
          return <div key={el.node.id}>{el.node.title}</div>;
        })}
      </div>
      <br />

      <span>PULL REQUEST</span>
      <div>
        {pull.map((el) => {
          return <div key={el.node.id}>{el.node.title}</div>;
        })}
      </div>
    </>
  );
};

export default GetInfo;

---

▷ GraphQL 정리

GraphQL의 장단점

장점	단점
하나의 endpoint로 모든 데이터 요청 가능	REST API에 익숙하지 않은 개발자들에게는 학습 곡선이 있음
데이터 오버페칭과 언더페칭 문제를 해결함	캐싱이 REST API보다 복잡함
Playground를 제공해 schema와 resolver를 쉽게 테스트	쿼리 크기가 고정된 요청의 경우 RESTful API보다 더 크게 될 수 있음
클라이언트 구조 변경에도 서버에 지장이 없음

---

🌸GraphQL vs 🌐REST API

	REST API	GraphQL
Resource 형태 정의	URI에 의해 정의	GraphQL Schema에 의해 정의
데이터 요청 방법	HTTP Method에 의해 정의	Query, Mutation 타입에 의해 정의
데이터 구조	서버에서 미리 정의됨	클라이언트에서 요청 시 결정됨
여러 Resource 요청	여러 번의 요청 필요	한 번의 요청에서 여러 Resource 접근 가능
데이터 핸들링	엔드포인트 핸들링 함수에 의해 처리	필드별 Resolver 함수에 의해 처리
클라이언트 요구사항	서버에서 제공하는 데이터 구조와 일치해야 함	클라이언트 요구사항에 맞게 데이터 구조 변경 가능

👉 GraphQL의 Learn 보러가기
👉 @octokit/graphql의 사용법
👉 유튜브 영상 - graphQL로 서버를 구축하고 데이터를 조회하는 방법