graphQL 입문

정말 많이 헤맸다... 간신히 함
페어분 아녔으면 시간내에 못했을거같음.

아고라스테이츠에서 디스커션 가져오는 게 미션이었다.

1. graphQL 다운로드, import

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

2. token 받아오기(깃허브에서)

3. 쿼리 작성하기 전에 테스트

const { repository } = await graphql(`query문`,
      {
        headers: {
          authorization: token 내 깃허브 토큰 복붙,
        },
      }
    );

가장 기본적인 거라 하기에 위 코드를 복사해서 테스트해봤는데 오류가 떴다;
App() 함수 내에 복붙을 했는데 빨간줄이 나옴.
그래서 바깥으로 뺐더니 또 다른 오류가 뜸. 대략 상위에서 어쩌구~
자세히 보니 await이 있음.
그래서 async를 써서 감싸주었다.
그랬더니 오류는 면함!
근데 아무런 값도 오지 않았다...

다른사람들 어떻게 했나 찾아보니 useEffect를 해주어야했음.
글치 데이터 받아오는거니까 fetch를 해야지...

  useEffect(() => {
    getData()
      .then(data => {
        console.log(data)
        return data
      })
      .catch(error => console.log(Error, error))
  }, [])

이렇게 useEffect로 데이터를 받아 콘솔로 찍어보니 데이터를 받아오는 것을 확인할 수 있었다.
글로 쓰니까 진짜 간단한 거 같은데, 찾아봐도 잘 모르겠어서... 한참 헤맸다.

여턴 테스트를 해봤으면 이제 진짜 과제를 해봐야지.
근데 쿼리를 쓰는 게 또 문제...
이건 깃허브 API를 사용해서 결과를 도출했다.

4. 쿼리 작성하기

  const query = `
  {
    repository(name: "agora-states-fe", owner: "codestates-seb") {
      discussions(first: 10) {
        nodes {
          title
          createdAt
          bodyText
        }
      }
    }
  }
`

페어분이 이렇게저렇게 해서 알아내심.
API 쓰는데도 너무 어렵다...ㅠㅠ
세션때 강사분이 하신거랑 좀 다르긴 한데, 결과가 같으니까 뭐.

discussions -> edge -> nodes로 접근하더라.
근데 discussions -> nodes로 바로 해도 작동은 됐으니... 괜찮지않을까

repository에 접근하려면 이름과 오너가 기본적으로 필요하다.
(이때 권한이 없으면 접근이 불가능하다.)
팁이 있다면 url을 잘 보면 된다는 것...!

https://github.com/codestates-seb/agora-states-fe/discussions

https://깃허브/오너/레포지토리 네임/내가 원하는 정보가 있는 경로

전체 코드

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

const token = "token 내토큰"

function App() {
  const [repository, setRepository] = useState({});
  const query = `
  {
    repository(name: "agora-states-fe", owner: "codestates-seb") {
      discussions(first: 10) {
        nodes {
          title
          createdAt
          bodyText
        }
      }
    }
  }
`
  const getData = async () => {
    const { repository } = await graphql(query,
      {
        headers: {
          authorization: token,
        },
      }
    );
    return repository; //리턴해주어야함!
  }

  useEffect(() => {
    getData()
      .then(data => {
        return setRepository(data)
      })
      .catch(error => console.log(Error, error))
  }, [])

  return (
    <div className="App">
      <div>Hello agorastates</div>
      //이부분은 화면에 나타나게 하고 싶어서 작성해보았다.
      //repository.map하니까 안돼서 파고 들어가서 맵돌림.
      //구조분해할당으로 노드만 뽑아서 하면 더 직관적이고 좋을 것 같음.
      {repository.discussions.nodes.map(el => {
        return <div>{el.title}</div>;
      })}
    </div>
  );
}

export default App;