GraphQL 실습 (3)

김민아·2022년 10월 6일

API JavaScript graphql

GraphQL 실습

GitHub GraphQL playground

GitHub GraphQL API에서 제공하는 Explorer로 GraphQL을 연습해 보자. Explorer 상단의 초록 버튼으로 github 로그인을 하면 별도의 토큰없이 쿼리를 보내고 응답을 받을 수 있다.

explorer 깃허브 로그인

실행 버튼 옆에 prittier, History, Explorer 버튼은 각각 코드를 정렬하고, 보낸 쿼리들을 확인하고, 어떤 필드가 있는지 볼 수 있다.

React에서 GraphQL 세팅

실습을 위해 react 앱을 만든다. (선택)
```
npx create-react-app 'fe-sprint-graphql'
```
@octokit/graphql 라이브러리를 설치한다.
로컬 환경에서 graphQL의 쿼리를 쉽게 수행할 수 있게 도와주는 라이브러리이다.
```
npm install @octokit/graphql
```
쿼리를 작성할 *.js에 graphql을 import한다.
@octokit/graphql 사용 방법은 여기를 참고하여 작성한다.
```
import { graphql } from "@octokit/graphql";
```
github token을 발급받는다.
github에서 상단 프로필에서 setting 메뉴 >
왼쪽 사이드에서 Developer settings >
Personal access tokens > generate token 버튼

🛑 주의! 토큰은 발행될 때 한번만 노출된다. 다른 곳에 복사해 둔다.
token을 환경변수로 설정했다.
레퍼런스 참고 | 환경변수 우선순위는?
```
// .env.local
REACT_APP_GHP_TOKEN="ghp_로 시작하는 토큰"
```

여기까지 세팅이 끝났다. 😇

React에서 GraphQL 실습

.env.local에 저장해둔 토큰을 가져와 header에 넣어준다.
처음에 레퍼런스없이 헤맸던 부분인데, token 처럼 스키마 타입을 넣지 않으면 제대로 인식되지 않았다. 검색해본 결과 Bearer 를 넣어서 성공했지만, 나중에 레퍼런스처럼 token 으로 수정하였다.

{
	headers: {
		authorization: `token ${token}`,
	},
}

📍 query

가장 난이도가 빡?셌던 부분! 😇 ~~들여쓰기 지옥~~ Explorer에서 실습한대로 적용했다고 생각했는데, syntax 에러가 나서 시간이 오래 걸렸다.💀

async를 위해 getRepository 함수를 선언하고 app.js에 작성했다. 쿼리만 작성하면 아직 햇갈릴 것 같아서 전체 코드를 넣었다.

여러 repository를 검색할 일은 없겠지만, discussions의 갯수는 달라질 수 있을 것 같아서 변수로 변경했다. query가 길어지다보니 header를 상단에 배치하는 것이 가독성이 좋아보였다.

// app.js > getRepository

async function getRepository() {
  const GHP_TOKEN = process.env.REACT_APP_GHP_TOKEN;

  const { repository, viewer } = await graphql({
    headers: {
      authorization: `token ${GHP_TOKEN}`,
    },
    owner: "codestates-seb",
    name: "agora-states-fe",
    num: 5,
    query: `query repository($owner: String!, $name: String!, $num: Int!) {
        repository(name: $name, owner: $owner) {
          discussions(first: $num) {
            edges {
              node {
                category {
                  name
                }
                author {
                  login
                  avatarUrl
                }
                createdAt
                title
                id
                url
                answer {
                  author {
                    login
                    avatarUrl
                  }
                  bodyHTML
                  createdAt
                  id
                }
              }
            }
          }
        },
        viewer {
          login
          avatarUrl
        }
      }`,
    },);
    return {repository, viewer};
}