Apollo Studio는 GraphiQL의 입문부터 실무까지 사용할 수 있는 최고의 도구입니다.

이 글에서 소개한 기능은 아폴로 샌드박스로, 로그인 없이 사용할 수 있다.
https://studio.apollographql.com/sandbox/explorer
계기판으로 여러 단점을 관리하려면 이 글의 절차에 따라 로그인해서 사용하는 것이 편리하지만 먼저 조회를 발행하여 응답을 보고 싶습니다!이 경우 위의 Apollo Sandbox를 사용하는 것이 편리합니다.
Apollo Studio에서 Graph를 작성할 때 설정된 끝점을 옆 메뉴에서 설정합니다.

Apollo Studio?

브라우저에서 지정한 포트에 GraphiQL 조회를 발행하고 Response를 확인하는 무료 도구입니다. (유료 계획도 있습니다.)
Apollo 팀에서 개발한 것이지만 조회를 실행해서 Response를 볼 뿐이기 때문에 Apollo Server, Apollo Client 등 프로그램 라이브러리를 사용해서 프로그램을 쓰는지 여부와는 무관하다.
쉽게 사용할 수 있기 때문에 초보자는'어쨌든 그라피큐어를 만지고 싶다'는 말로 연습하는 것을 추천한다.
저는 실제 업무에서도 그래피QL의 움직임을 확인하면서 많은 배려를 받았습니다.
질의를 입력할 때 안내 기능과 프래그먼트의 자동 제작 기능 등도 있어 한 번 사용하면 손을 뗄 수 없는 편의성도 있다.

사용법

SignIn·Graph 제작

SignIn 작업을 수행하려면 아래를 클릭하십시오.
https://studio.apollographql.com
시그인은 그래프 제작 화면(화면 오른쪽 상단의[+ New Graph]도 클릭할 수 있다)을 보여준다.

입력 항목을 설정합니다.

Graph title: 임의의 이름

Graph type: 선택Development

Endpoint: 입력https://countries.trevorblades.com

이 단점은 Public GraphQL APIs에 실린 일반 공개된 단점이다.
세계 국명과 국기의 글자를 얻을 수 있다.
이번에는 제가 동작을 확인하는 것을 허락해 주십시오.
모두 가져온 후 [Greate Graph]를 클릭하여 Graph를 생성합니다.

질의 실행

그럼, 우리가 조회를 집행합시다.
처음 입력한 질의를 삭제하고 다음 질의를 붙여 넣으십시오[▷ ExampleQuery].
질의의 실행 결과를 확인할 수 있습니다.
query

query ExampleQuery {
  countries {
    code
    name
  }
}

검색에 emoji 을 추가해서 실행합니다.e를 입력할 때 입력 후보를 표시합니다.


조회를 입력할 때 입력[⌘ + K]해도 조회 모드를 찾을 수 있습니다.

또 다른 편리한 단축키는 조회 입력 영역의 오른쪽 아래에 있는 키보드 아이콘에서 확인하세요.

Veriables, Headers 구성

조회 입력 영역 아래에는 Variables, Headers의 설정 구역이 있습니다. 필요에 따라 여기에서 설정하십시오.
Variables?
예를 들어 질의에 전달되는 매개변수입니다.
예를 들어 다음 조회에서 지티허브의 이슈를 얻었지만 베리아블즈를 통해 누구의, 어느 창고의 이슈를 설정해 몇 개의 정보를 얻었는가.
Headers?
Variables와 마찬가지로 조회에 추가된 정보이지만 방문 영패를 전달하는 사용이 비교적 많다고 생각한다(이하 예시에서 GiitHub의 방문 영패를 설정했다).
Variables는 작성한 질의에 따라 설정된 내용도 다르며, Headers는 사전에'이렇게 설정해 주세요'라는 규칙을 정했다.(GiitHub API는 여기.에 기재되어 있습니다.)
예를 들어, GiitHub GraphiQL API에서 지정된 창고 Issue의 샘플을 가져옵니다.
다음 샘플을 실행하려면 GiitHub의 방문 영패가 필요합니다.
사전에 여기.의 절차에 따라 준비하세요.
토큰 발행 화면에서 Generate new token를 클릭합니다.
다음과 같이 Apollo Studio의 TOP[+ New Graph]를 클릭합니다.

Graph title: 임의의 이름

Graph type: 선택Development

Endpoint: https://countries.trevorblades.com를 입력한 후 Add header

를 클릭합니다.

header

header key: Authorization

value: bearer GitHubアクセストークン

query 발행 화면에서 아래 내용을 입력하고 [▷ GetRepository]를 누르면 실행합니다
query

query GetRepository($repositoryOwner: String!, $repositoryName: String!, $issuesFirst: Int) {
  repository(owner: $repositoryOwner, name: $repositoryName) {
    name
    issues(first: $issuesFirst){
      edges {
        node {
          id
          title
        }
      }
    }
  }
}

Variables

{
  "repositoryOwner": "octocat",
  "repositoryName": "Hello-World",
  "issuesFirst": 10
}

Headers

Authorization : bearer GitHubアクセストークン

실행 결과

편리한 기능

여기까지도 편리하지만 여러가지 편리한 기능들이 있으니 조금 소개할게요.

패턴 문서

왼쪽 상단의 아이콘을 누르면 모드 문서를 볼 수 있습니다.

curl 실행 명령 가져오기

쿼리 입력 영역의 오른쪽 상단에 있는 메뉴에서curl이 입력한 쿼리를 실행하는 명령을 복사할 수 있습니다.

브라우저 외부에서 동작을 확인하는 것이 편리합니다.

Fragment 자동 생성

질의에서 Fragment할 영역을 선택하고 마우스 오른쪽 버튼[Extract Fragment]을 클릭하면 Fragment가 자동으로 생성됩니다.

최후

공짜라고 상상할 수 없을 정도로 편리하다.
GraphiQL의 입문, 개발 시 사용하지 않으면 손해를 볼 수 있으니 꼭 사용하세요!