Github GraphQL API로 Live Data 받아오기

Rest API vs GraphQL API

Rest API 캐시가 지원 HTTP 캐싱을 사용하여 응답을 저장,캐시를 지울땐 수동적으로 해야한다.

이미 정보가 정해져 있어서 추가적으로 정보가 필요하면 서버쪽에서 만들어줘야한다.

 

GraphQL 캐시 지원 X ,아폴로와 같은 라이브러리를 사용

클라이언트단에서 추가적으로 정보 수정을 하면 된다.

 

github에서 토큰을 받아오기 보안을 위해서

env를 전역파일로 저장한다.

REACT_APP_GITHUB_TOKEN = xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

 

 

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_GITHUB_TOKEN;

  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;

Explorer - GitHub Docs

Explorer - GitHub Docs

explore를 참고해서 코드를 작성해야한다.

간단하게 데이터를 받아와서 화면에 그 데이터가 보이게 한다.