Monaco Editor
쿼리 에디터는 VS Code와 동일한 엔진인 Monaco를 기반으로 하며, GraphQL language worker가 다음을 제공합니다.- GraphQL operation, 필드, 인자, 디렉티브에 대한 구문 강조
- 스키마 기반 자동 완성 —
Ctrl+Space로 라이브 스키마에 맞는 필드·인자·타입 제안 - 실시간 오류 표시 — 잘못된 필드명, 누락된 인자, 타입 불일치에 대한 빨간 밑줄·마커
- 중괄호, 괄호, 문자열에 대한 괄호 짝 맞춤 및 자동 닫기
- 일괄 수정을 위한 멀티 커서 편집
에디터 패널
에디터 영역은 하단에 세 개의 탭으로 나뉩니다. 요청의 각 부분을 설정하려면 탭을 전환하세요.Query 패널
GraphQL 쿼리를 작성하는 주 편집 영역입니다. Monaco의 자동 완성, 강조, 오류 검사가 여기서 동작합니다.Variables 패널
파라미터화된 쿼리에 JSON variables를 넘깁니다. 쿼리 텍스트를 수정하지 않고 variable 값만 바꿔 재사용할 수 있습니다.- Query
- Variables
Headers 패널
모든 요청과 함께 보낼 HTTP 헤더를 설정합니다. Headers 패널은 기본으로 표시되며X-API-KEY 헤더가 미리 구성되어 있습니다.
Content-Type: application/json 헤더는 자동으로 붙습니다 — 수동으로 설정할 필요가 없습니다.툴바
툴바는 에디터 상단에 있으며 빠른 작업을 제공합니다.쿼리 실행
쿼리를 실행하려면:- 에디터에 쿼리를 작성하거나 불러옵니다.
- Headers 패널에
X-API-KEY를 설정합니다. - 툴바의 Execute 버튼(▶)을 클릭하거나 Ctrl/Cmd+Enter를 누릅니다.
결과 패널
결과 패널은 GraphQL 엔드포인트의 JSON 응답을 다음과 함께 보여 줍니다.- JSON 키, 문자열, 숫자, 불리언에 대한 구문 강조
- 깊게 중첩된 응답 탐색을 위한 접을 수 있는 노드
- 우클릭 컨텍스트 메뉴를 통한 응답 복사
data 객체와, 과금 정보를 담은 extensions.credits 객체가 포함됩니다.
상태 표시줄
IDE 하단 상태 표시줄은 쿼리 실행에 대한 실시간 피드백을 제공합니다.Credit Unit(CU)은 쿼리의 계산 비용을 나타냅니다. 더 많은 데이터를 스캔하거나 더 큰 결과를 반환하는 쿼리는 더 많은 CU를 사용합니다. 자세한 내용은 Billing & Credits를 참고하세요.

