GraphQL의 편리한 도구

GraphQL API를 쉽게 실행할 수 있는 도구가 오픈 소스로 개발되었습니다. 이러한 도구를 사용하면 자신이 만든 GraphQL API를 쉽게 실행하고 거동을 확인할 수 있습니다. 유명한 도구로 GraphiQL과 GraphQL Playground가 있습니다.

GraphiQL

htps : // 기주 b. 코 m / g 등 phql / g 등 p ql
GraphiQL은 Facebook이 개발한 브라우저에서 사용할 수 있는 통합 개발 환경입니다. 신택스 하이라이트, 입력 보완, 구문 에러 검출 등의 기능이 탑재되어 있습니다. REST의 과제와 GraphQL ~ GraphQL을 간단하게 사용해 본다 ~ 하지만 소개했지만, SWAPI와 같은 공개 API에는 GraphiQL이 호스팅되어 있을 수도 있습니다.
htps : // g 등 phql. 오 rg / suppi g et al phql
만든 GraphQL API를 게시하는 경우 위와 같이 GraphiQL 인터페이스를 제공하여 사용자에게 쉽게 시도 할 수 있습니다.

또한 호스팅 없이도 독립형으로 GraphQL API를 사용해 볼 수 있으며 아래에서 다운로드할 수 있습니다.
htps : // / ぇct 롱 js. 오 rg / ps / g 등 p ql

UI는 다음과 같이 간단합니다.
※ SWAPI의 GraphiQL을 이용합니다 (htps : // g 등 phql. 오 rg / 슈피-g 등 phql)


시도하려면 다음 쿼리를 실행해 보겠습니다. 검색어를 입력하고 재생 버튼을 클릭합니다.

오른쪽 창이 응답입니다. 쉽게 시도할 수 있습니다. 또한 쿼리 문서도 오른쪽 상단의 Docs에서 확인할 수 있습니다.

GraphQL Playground

htps : // 기주 b. 이 m / p s m-bs / g et phql-p ぁ yg 로운 d
Prisma 팀이 개발한 도구입니다. GraphiQL과 마찬가지로 브라우저에서 독립형 모두에서 사용할 수 있습니다. 독립형 버전은 다음에서 다운로드할 수 있습니다.
htps : // / ぇct 롱 js. rg / ps / g 등 phqlp ぁ yg 로운 d

GraphiQL과 마찬가지로 UI는 다음과 같이 간단합니다. 게시 된 Snowtooth API를 사용해보십시오 (htp : //s의 w와 th. 모온히 g후 y. 이 m/).


GraphiQL과의 차이점은 다음과 같습니다.

HTTP 헤더를 자유롭게 재기록할 수 있다

탭 기능으로 여러 개의 쿼리를 한 창에서 시도 할 수 있습니다.

curl 명령으로도 던질 수 있도록, curl copy 기능이 있다

에디터의 외관이나 폰트의 설정이 가능

그건 그렇고, curl copy는 다음과 같이 복사되었습니다.

curl 'http://snowtooth.moonhighway.com/' -H 'Accept-Encoding: gzip, deflate, br' -H 'Content-Type: application/json' -H 'Accept: application/json' -H 'Connection: keep-alive' -H 'DNT: 1' -H 'Origin: http://snowtooth.moonhighway.com' --data-binary '{"query":"# Write your query or mutation here\nquery {\n  allLifts {\n    name\n    status\n  }\n}"}' --compressed

이상입니다.

참고

최초의 GraphQL - 웹 서비스를 만들어 배우는 새로운 세대 API