GraphQL-react

GraphQL Explorer

https://docs.github.com/en/graphql/overview/explorer

GitHub id로 로그인

React App 설치

npx create-react-app graph-ql-react

@octokit/graphql 설치

npm install @octokit/graphql

import 하기

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

function App() {

  return (
    <div className="App">
      start!
    </div>
  );
}

export default App;

Personal access tokens 발급

Select scopes 에서 repo 체크

query 추가

GraphQL Explorer에서 확인 가능

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

function App() {
  
   async function getRepo() {
    const { repository, viewer } = await graphql(
      `
        {
          repository(name: "이름", owner: "소유") {
            discussions(first: 10) {
              edges {
                node {
                  id
                  title
                  url
                  createdAt
                  author {
                    resourcePath
                  }
                }
              }
            }
            issues(first: 10) {
              edges {
                node {
                  id
                  title
                }
              }
            }
            pullRequests(first: 10) {
              edges {
                node {
                  id
                  title
                }
              }
            }
          }
          viewer {
            login
          }
        }
      `,
      {
        headers: {
          authorization: `token 발급된 토큰`,
        },
      }
    );
    return { repository, viewer };
  }

  return (
    <div className="App">
      start!
    </div>
  );
}

export default App;

데이터 확인

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

function App() {
  const [data, setData] = useState([]);
  const [issue, setIssue] = useState([]);
  const [pull, setPull] = useState([]);

  async function getRepo() {
    const { repository, viewer } = await graphql(
      `
        {
          repository(name: "agora-states-fe", owner: "codestates-seb") {
            discussions(first: 10) {
              edges {
                node {
                  id
                  title
                  url
                  createdAt
                  author {
                    resourcePath
                  }
                }
              }
            }
            issues(first: 10) {
              edges {
                node {
                  id
                  title
                }
              }
            }
            pullRequests(first: 10) {
              edges {
                node {
                  id
                  title
                }
              }
            }
          }
          viewer {
            login
          }
        }
      `,
      {
        headers: {
          authorization: `token 토큰`,
        },
      }
    );
    return { repository, viewer };
  }

  useEffect(() => {
    getRepo().then((res) => {
      setData(res.repository.discussions.edges);
      setIssue(res.repository.issues.edges);
      setPull(res.repository.pullRequests.edges);
    });
  }, []);

  return (
    <div className="App">
      <div>
        {data.map((el) => {
          return (
            <>
              <div key={el.node.id}>{el.node.title}</div>
            </>
          );
        })}
      </div>

      <h3>Issue</h3>
      <div>
        {issue.map((el) => {
          return <div key={el.node.id}>{el.node.title}</div>;
        })}
      </div>

      <h3>Pull Request</h3>
      <div>
        {pull.map((el) => {
          return <div key={el.node.id}>{el.node.title}</div>;
        })}
      </div>
    </div>
  );
}

export default App;