2022.08.02(Tues)

[TIL] Day68
[SEB FE] Day69

오늘은 아침 8시부터 집 이사하는 날이여서 9시부터 카페로 피신했다..
게다가 비도 주륵주륵 😭
자취방 2번 이사할 때마다 모조리 비 왔었는데 본가 이사할 때도 또또또 비라니.. ☔️
집 와이파이도 페어 2시 전에 겨우 연결하구, 페어 시간에 우당탕탕 너무 소란스러워서 페어님께 너무 죄송,, •᷄⌓•᷅
얼른 방 정리하고 새로운 마음으로 다시 열심히 공부하자ㅏ 🦾

☑️ GraphQL

: Graph + Query Language. 페이스북에서 만든 오픈 소스 쿼리 언어 ⇒ API를 위한 쿼리 언어

👉트리 구조로 쿼리 결과를 받기 위해 그래프를 탐색하는 쿼리 언어

📎 GraphQL 특징

• HTTP를 통해 API 서버로 요청을 보내고 응답 받음
• 응답 받을시, 데이터 결과를 JSON 형식으로 받음
• 각 필드에 대응하는 resolver 함수로 각 필드 데이터 조회 가능
• GraphQL 라이브러리는 조회 대상 schema가 유효한지 검사

🔹 Graph: 여러 개의 점들이 서로 복잡하게 연결되어 있는 관계를 표현한 자료구조

• Node / 정점(vertex): 하나의 점
• 간선(edge): 하나의 선

• 각 노드간의 간선을 통해 특정 순서에 따라 그래프를 재귀적으로 탐색 가능
• 클라이언트 요청에 따라 유연하게 트리 구조의 JSON 데이터를 응답으로 전송 가능 👍

🔸 엔티티(Entity): 사물의 구조나 상태, 동작 등을 모델로 표현하는 경우, 그 모델의 구성요소

🔹 Tree: 방향성 존재 ⭕️, 사이클 존재 ❌ ⇒ 비순환 그래프

ㄴ 루트 & 모서리를 통해 노드를 따라 순회가능하나 동일 노드로 돌아올 수 없는 속성의 특별한 그래프

📎 REST API 한계

• Overfetch: 필요없는 데이터까지 제공
• Underfetch: endpoint가 필요한 정보를 충분히 제공 못함
  • 필요한 정보를 모두 확보하기 위해 추가 요청을 보내야 함
• 클라이언트 구조 변경시 endpoint 변경 / 데이터 수정 필요
  • 자원크기&형태를 서버에서 결정하므로 클라이언트가 직접 데이터 형태 결정 불가능

📎 REST API vs GraphQL

REST API	GraphQL
Resource에 대한 형태 정의 & 데이터 요청 방법 연결	Resource에 대한 형태 정의 & 데이터 요청 방법 분리
Resource 크기&형태를 서버에서 결정	Resource 정보만 정의,
필요한 크기&형태는 클라이언트 단에서 요청시 결정
URL가 Resource를 나타내며, Method가 작업 유형을 나타냄	GraphQL Schema가 Resource를 나타내며, Query, Mutation type이 작업 유형을 나타냄
여러 Resource에 접근시 여러번의 요청 필요	한번의 요청으로 여러 Resource에 접근 가능
각 요청은 해당 endpoint에 정의된 핸들링 함수를 호출하여 작업 처리	요청 받은 각 필드에 대한 resolver를 호출하여 작업 처리

👍 GraphQL 장점

• 하나의 endpoint 요청
  • 하나의 endpoint인 /graphql로 요청을 받고, 이에 따라 query, mutation을 resolver 함수로 전달해서 요청에 응답 (모든 클라이언트 요청은 POST 메소드 사용)
• No Under & OverFetching ❌
  • 하나의 endpoint에서 쿼리를 이용해 원하는 데이터를 정확하게 API에 요청하고 응답으로 받을 수 있음
• 강력한 playground
  • playground GUI를 이용해 resolver & schema를 한눈에 보고 테스트 가능
• 클라이언트 구조 변경에도 지장 ❌
  • 필요한 데이터를 결정하고 받는 주체가 클라이언트이므로 서버에 지장없음
  • 클라이언트에선 무슨 데이터가 필요한지만 요구사항을 쿼리로 작성하면 됨

👎 GraphQL 단점

• 캐싱이 REST보다 훨씬 복잡
  • POST 메소드만 이용해 요청을 보내므로 각 메소드에 따른 캐싱을 지원받을 수 없음
• 고정된 요청과 응답만 필요할 경우엔 Query로 인해 요청 크기가 RESTful API보다 더 커짐 ⬆️

📎 GraphQL 구조

• Query: 저장된 데이터 가져오기 (REST의 GET과 유사)
• Mutation: 저장된 데이터 수정
  • Create: 새로운 데이터 생성
  • Update: 기존 데이터 수정
  • Delete: 기존 데이터 삭제
• Subscription: 특정 이벤트 발생시 서버가 대응하는 데이터를 실시간으로 클라이언트에게 전송
  • 발행/구독(pub/sub) 모델을 따름

✨ Query; 데이터 조회

🔹 Field

# query로 데이터 조회
{
	hero {
		name
		friends {
			name
		}
	}
}

# 필드를 중첩하여 쿼리하는 것도 가능!

# 위의 쿼리 실행 결과
{
  "data": {
    "hero": {
      "name": "Beanxx",
			"friends": [   # friends 필드 -> 배열 반환
				{
					"name": "Yollki"
				},
				{
					"name": "Zzanggu"
				}
			]
    }
  }
}

🔹 전달인자(Arguments)

# 필드에 인수전달 부분 추가 → 쿼리의 필드/중첩된 객체들에 전달 → 원하는 데이터만 받아올 수 있음
{
  human(id: "10") {
    name
    height
  }
}

# id가 10인 human의 name, height 쿼리
{
  "data": {
    "human": {
      "name": "Beanxx",
      "height": 1.70
    }
  }
}

🔹 별명(Aliases)

# 필드 이름 중복 사용 불가 -> 별명을 붙여서 쿼리 진행
{ 
  beanHero: hero(episode: BEAN) {
    name
  }
  zzangHero: hero(episode: ZZANG) {
    name
  }
}
# BeanHero, ZzangHero가 별명!

# 별명을 붙인 쿼리 결과
{
  "data": {
    "beanHero": {
      "name": "Beanxx"
    },
    "zzangHero": {
      "name": "Zzanggu"
    }
  }
}

# 다른 별명 지정 -> 1번의 요청으로 2개의 결과를 모두 얻어낼 수 있음

🔹 Operation name

# 축양형 구문 x -> 실제 앱에선 코드 모호하지 않게 작성하는게 중요!
# 맨 앞 'query'가 Operation name!
# query 외에도 mutation, subscription, describes 등 존재

query HeroNameAndFriends {
  hero {
    name
    friends {
      name
    }
  }
}

{
  "data": {
    "hero": {
      "name": "Beanxx",
      "friends": [
        {
          "name": "Yollki"
        },
        {
          "name": "Zzanggu"
        },
        {
          "name": "Jane"
        }
      ]
    }
  }
}

🔹 변수(Variables)

# 동적으로 인수를 받아 쿼리하는 경우 '변수' 사용
query HeroNameAndFriends($episode: Episode) {
  hero(episode: $episode) {
    name
    friends {
      name
    }
  }
}

# `$변수 이름: 타입`으로 작성
# `$ep: Episode` 뒤에 `!`가 붙으면 ep는 반드시 Episode여야 함을 의미 (Optional)

✨ Mutation; 데이터 수정

# server측 데이터 수정
mutation CreateReviewForEpisode($ep: Episode!, $review: ReviewInput!) {
  createReview(episode: $ep, review: $review) {
    stars
    commentary
  }
}

✨ Schema / Type

# GraphQL Schema 기본 구성 요소: 객체 종류, 객체 유형(포함하는 필드를 나타냄)
type Character {
  name: String!
  appearsIn: [Episode!]!
}

# Character: GraphQL 객체 타입 => 즉, 필드가 있는 타입 의미 (스키마 대부분의 타입 - 객체 타입)
# name, appearIn: Character 타입의 필드
# String: 내장된 스칼라 타입 중 하나로, 단일 스칼라 객체 (쿼리에서 하위 선택 가질 수 없음)
# !: 해당 필드는 nullable하지 않고 반드시 값이 들어온다는 의미
# [ ]: 배열 의미. 배열에도 !가 붙을 수 있음. -> 항상 0개 이상의 요소를 포함한 배열 기대

✨ Resolver

: 요청에 대한 응답을 결정해주는 함수로써 로직을 작성함.
👉 해당 스키마 필드에 사용되는 함수의 실제 행동을 Resolver에서 정의

const db = require("./../db")
const resolvers = {
  Query: {   # 저장된 데이터 가져오기
		getUser: async (_, { email, pw }) => {
			db.findOne({
				where: { email, pw }
			}) ... # 실제 DB에서 데이터 가져오는 로직 작성하기
			...
		}
  },
  Mutation: {   # 저장된 데이터 수정하기
		createUser: async (_, { email, pw, name }) => {
			...
		}
  }
  Subscription: {   # 실시간 업데이트
    newUser: async () => {
      ...
		}
  }
};

📎 GraphQL Explorer로 실습

1. Github Explorer 접속: https://docs.github.com/en/graphql/overview/explorer
2. Github Login 후, 쿼리 작성해보기
3. Explorer 버튼 누른 후, 직접 field 탐색 가능

---

☑️ [pair] React에서 github GraphQL API 사용해보기

처음에 페어님과 GraphQL를 React에 적용해야할지 막막해서 거의 1시간동안 헤맨듯..
graphql.js 공식문서를 보고 그냥 App.js에 넣어봤는데도 Error 😱
알고 보니 github 내에서 access token도 발급받아야 하고, await로만 작성되어 있는 함수를 async로 감싸줘서 약간 수정해야 했었다..! 막판에 받아오는거 성공해서 여러 속성들을 console로 확인해보았다.
아래와 같이 data를 edges 내에 배열 내의 객체 형태로 받아오는 것을 확인할 수 있었다.

✨ 시작 하기 앞서 일단 라이브러리 설치부터!

# graphQL의 쿼리를 로컬 환경에서 쉽게 수행할 수 있게 도와주는 라이브러리

$ npm install @octokit/graphql

import { graphql } from "@octokit/graphql";
import { useEffect, useState } from "react";

async function getRepository() {
  const { repository } = await graphql(
    `
      {
        repository(name: "agora-states-fe", owner: "codestates-seb") {
          discussions(first: 100) { // 데이터 몇 개 출력할지
            edges {
              node {
                id
                title
                createdAt
                url
                author {
                  login
                  avatarUrl
                }
                category {
                  name
                }
                answer {
                  author {
                    login
                  }
                }
              }
            }
          }
        }
      }
    `,
    {
      headers: {
				// 꼭 앞에 'token' 문자열 붙여주기 (아니면 'bearer'도 가능!)
        authorization: `token ${MY_TOKEN_ID}`,
      },
    }
  );

  return repository;
}

function App() {
  const [repository, setRepository] = useState({});
  const { discussions } = repository;

	// 처음 한번만 실행되도록 useEffect 사용!
  useEffect(() => {
    getRepository()
      .then((data) => {
        setRepository(data);
      })
      .catch((error) => {
        console.log(Error, error);
      });
  }, []);

	// map으로 discussions.edges에 접근하여 데이터 뿌려주기
  return (
    <div className="main">
			<ul>
        {discussions.edges.map((edge) => {
          return (
            <li key={edge.node.id}>
                <img
                  src={edge.node.author.avatarUrl}
                  alt={`avatar of ${edge.node.author.login}`}
                />
                <div>
                  {`[${edge.node.category.name}]`}
                </div>
                  <a href={edge.node.url}>{edge.node.title}</a>
                <p>{edge.node.answer ? "☑" : "☒"}</p>
            </li>
          );
        })}
      </ul>
    </div>
  );
}

export default App;