Github GraphQL API로 Live Data 받아오기

GraphQL이란?

Graph + Query Language의 줄임말로 Query Language 중에서도 Server API 를 통해 정보를 주고받기 위해 사용하는 Query Language를 뜻한다. GraphQL은 모든 데이터가 그래프 형식으로 연결되어있다고 전제하는데, 이 덕분에 클라이언트 요청에 따라 유연하게 트리 구조의 JSON 데이터를 응답으로 전송할 수 있다.
다시 말해 GraphQL은 REST API 방식의 고정된 자원이 아닌, 클라이언트의 요청에 따라 유연하게 자원을 가져올 수 있다는 이점이 있다.

Bare Minimum

• GraphQL 쿼리를 이용해 아고라 스테이츠에 접근하여 1개 이상의 데이터를 조회해보기
• Issues, Pull requests 등에 접근하여 데이터를 조회하기
• 현재 내가 로그인 되어 있는지 확인할 수 있는 쿼리를 짜보기

참고 사항

• github graphql API 공식 문서는 여기를 참고하기

• 해당 API를 사용하기 위해서는 Personal access token이 필요함. 여기에서 발급 받기!

  • 토큰의 access 범위의 경우 나는 repo에 해당하는 것만 / 페어분은 전체 다 체크했는데 과제 진행에 크게 문제 없었음. 어떻게 하든 상관 없을 듯
  • 토큰은 발급 직후 한 번밖에 보여주지 않기 때문에 바로 다른 곳에 옮겨 적어 놓아야 함!
    

• 발급 받은 토큰은 환경 변수 파일을 사용하여 따로 분리해놓았음.

  • 환경 변수 파일 (.env)는 프로젝트 폴더 최상위에 놓았음

  • 리액트 환경에서 환경 변수를 사용할 때 반드시 변수명 앞에 REACT_APP_을 붙여야 함
    

  • 다른 파일에서 환경 변수를 불러올 때에는 process.env.REACT_APP_${어쩌고} 이런 식으로 사용하면 됨

• 쿼리를 어떻게 작성할지는 GraphQL Explorer를 참고하기. Explorer 버튼을 누르면 좌측에 사용할 수 있는 field 목록이 뜬다.
  

App.js

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

function App() {
  const [data, setData] = useState({});
  const [isLoading, setIsLoading] = useState(true);
  const [isLogin, setIsLogin] = useState();
  const accessSecret = process.env.REACT_APP_ACCESS_SECRET;

  async function repo() {
    const { repository, viewer } = await graphql(
      `
        {
          repository(owner: "codestates-seb", name: "agora-states-fe") {
            discussions(first: 10) {
              edges {
                node {
                  title
                  url
                  author {
                    resourcePath
                  }
                }
              }
            }
          }

          viewer {
            login
          }
        }
      `,
      {
        headers: {
          authorization: `token ${accessSecret}`,
        },
      }
    );
    return { repository, viewer };
  }

  useEffect(() => {
    repo().then((res) => {
      setIsLoading(false);
      setData(res.repository.discussions.edges);
      setIsLogin(res.viewer);
    });
  }, []);

  console.log(isLogin);

  return (
    <div className="App">
      {isLoading
        ? "loading..."
        : data.map((el, index) => {
            return (
              <li key={index}>
                <a href={el.node.url}>{el.node.title}</a>
                <span>{el.node.author.resourcePath}</span>
              </li>
            );
          })}
      <br />
      <div>{isLogin ? "로그인 상태입니다" : "로그아웃 상태입니다"}</div>
    </div>
  );
}

export default App;

결과 화면

참고 링크

1. https://velog.io/@tai/GraphQL-GraphQL%EA%B3%BC-%ED%95%A8%EA%BB%98-%EB%96%A0%EB%82%98%EB%8A%94-github-%ED%83%90%ED%97%98
2. https://github.com/y0ungg/first-practice-graphql/blob/main/src/App.js
3. https://github.com/codestates-seb/agora-states-fe/discussions/228

(정말 많은 도움을 얻었습니다. 이 자리를 빌어 감사의 인사를 전합니다. 선배님들... 🥲)