TIL 23.03.28

오늘은 GraphGL에 대해서 공부하였다.

 

많이 들어는 봤지만, 정확하게 어떤 기술인지 몰랐는데 이번 기회를 통해 새롭게 알게 되었다.

 

GraphQL

오픈 소스로 제공된 쿼리 언어

Server API 를 통해 정보를 주고받기 위해 사용하는 Query Language를 뜻함

 

사용 이유는?

GraphQL은 그래프 형태로 관계를 생각하는 것에서 출발하여,

클라이언트 요청에 따라 유연하게 트리 구조의 JSON 데이터를 응답하는 방식으로 구성되었기 때문에

고정된 자원이 아닌 클라이언트 요청에 따라 유연하게 자원을 가져올 수 있다는 점이 가장 큰 이유

 

GraphQL VS REST API

REST API의 한계

 

- Overfetch: 필요 없는 데이터까지 제공함

- Underfetch: endpoint 가 필요한 정보를 충분히 제공하지 못함

- 클라이언트 구조 변경 시 엔드포인트 변경 또는 데이터 수정이 필요함

 

GraphQL의 장단점

장점

- 하나의 endpoint 요청

- No! under & overfetching

- 클라이언트 구조 변경에도 지장이 없음

 

단점

- 학습하는 데 시간이 필요

- 캐싱이 REST보다 훨씬 복잡

- 고정된 요청과 응답만 필요할 경우에는 Query 로 인해 요청의 크기가 RESTful API 의 경우보다 더 커짐

 

---

github에서 제공하는 GraphQL API를 이용하여,

필요한 데이터를 받아오는 실습을 진행해보았다.

 

graphQL의 쿼리를 로컬 환경에서 쉽게 수행할 수 있게 도와주는 라이브러리를 설치 한 뒤 실행하였다.

npm install @octokit/graphql

agora-states-fe 레포지토리의 정보를 받아오는 실습이다.

쿼리를 이용하여, dicussions 내의 정보들을 원하는 대로 선택해서 가져올 수 있었다.

(글의 제목, 아바타 이미지, 로그인 주체, 생성일자,dbId 등)

import logo from "./logo.svg";
import "./App.css";
import { graphql } from "@octokit/graphql";
import { useState, useEffect } from "react";

//graphql 헤더 설정
const graphqlWithAuth = graphql.defaults({
  headers: {
    authorization: `token 개인 토큰입력`,
  },
});

//날짜 포멧 변경
const convertDate = (date) => {
  return date.toISOString().slice(0, 10);
};

//클릭시 원본 페이지 열기
const openPage = (link) => {
  window.open(link, "_blank");
};

function App() {
  const [discussions, setDiscussions] = useState([]);
  const [loading, setLoading] = useState(true);

  async function repo() {
    //쿼리 보내기
    const { repository } = await graphqlWithAuth(`
  query Discussions{
    repository(name: "agora-states-fe", owner: "codestates-seb") {
      discussions(first: 10) {
        edges {
          node {
            title
            url
            author {
              avatarUrl
              login
            }
            createdAt
            databaseId
          }
        }
      }
    }
  }
`);
    return repository;
  }
  useEffect(() => {
    repo()
      .then((res) => res.discussions.edges)
      .then((res) => {
        setDiscussions(res);
        setLoading(false);
      });
  }, []);

  return (
    <div className="App">
      <h1>Agora States</h1>
      <ul>
        {loading ? (
          <div>Lodaing...</div>
        ) : (
          discussions.map((data) => (
            <li
              key={data.node.id}
              className="Discussion"
              onClick={() => openPage(data.node.url)}
            >
              <div className="img-container">
                <img src={data.node.author.avatarUrl} />
                <div className="user-name">{data.node.author.login}</div>
              </div>
              <div className="item-container">
                <div className="title">{data.node.title}</div>
                <div className="created-date">
                  {convertDate(new Date(data.node.createdAt))}
                </div>
              </div>
            </li>
          ))
        )}
      </ul>
    </div>
  );
}

export default App;

 

구현 화면

정보들을 정상적으로 받아오는 것을 볼 수 있다.