1. 설치

---

• @octokit/graphql 라이브러리는 graphQL의 쿼리를 로컬 환경에서 쉽게 수행할 수 있게 도와주는 라이브러리다.

• 해당 라이브러리를 사용하면 fetch, axios를 사용하지 않아도 라이브러리가 이 역할을 수행한다.

@octokit/graphql 라이브러리 GitHub 페이지

2. import

---

import { graphql } from "@octokit/graphql";

3. 데이터 조회

---

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

function App() {
  const [data, setData] = useState([]);
  const TOKEN = process.env.REACT_APP_TOKEN;

  useEffect(() => {
    const getAgoraData = async () => {
      // const { repository } = await graphql({ 구조 분해 할당
      const res = await graphql({
        owner: "codestates-seb",
        repo: "agora-states-fe",
        headers: {
          authorization: `token ${TOKEN}`,
        },
        query: `query getAgoraData($owner: String!, $repo: String!) {
      repository(owner: $owner, name: $repo) {
        discussions(first: 20) {
          edges {
            node {
              title
              url
              createdAt
              author {
                login
                resourcePath
              }
            }
          }
        }
      }
    }`
      });
      setData(res.repository.discussions.edges);
    };
    getAgoraData();
  }, []);

  return (
    <div className="App">
      {data.map((value, index) => {
        return <li key={index}>
          <div className="title">
            <h3>{index + 1}. <a href={value.node.url}>{value.node.title}</a></h3>
          </div>
          <div className="author">
            {value.node.author.resourcePath}
          </div>
          <div className="createdAt">
            {value.node.createdAt}
            {value.node.author.avatarUrl}
          </div>
          <div className="avatarUrl">
            {value.node.author.avatarUrl}
          </div>
        </li>
      })}
    </div>
  );
}

export default App;