Monaco Editor
쿼리 에디터는 VS Code와 동일한 엔진인 Monaco를 기반으로 하며, GraphQL language worker가 다음을 제공합니다.
- GraphQL operation, 필드, 인자, 디렉티브에 대한 구문 강조
- 스키마 기반 자동 완성 —
Ctrl+Space로 라이브 스키마에 맞는 필드·인자·타입 제안
- 실시간 오류 표시 — 잘못된 필드명, 누락된 인자, 타입 불일치에 대한 빨간 밑줄·마커
- 중괄호, 괄호, 문자열에 대한 괄호 짝 맞춤 및 자동 닫기
- 일괄 수정을 위한 멀티 커서 편집
자동 완성은 스키마를 인식합니다. Cube(예: DEXTrades) 안에서 입력할 때 해당 Cube에 유효한 필드와 인자만 제안 목록에 나타납니다.
에디터 패널
에디터 영역은 하단에 세 개의 탭으로 나뉩니다. 요청의 각 부분을 설정하려면 탭을 전환하세요.
Query 패널
GraphQL 쿼리를 작성하는 주 편집 영역입니다. Monaco의 자동 완성, 강조, 오류 검사가 여기서 동작합니다.
query {
Solana {
DEXTrades(
limit: {count: 10}
orderBy: {descending: Block_Time}
) {
Block { Time }
Transaction { Hash }
Trade {
Buy { Currency { MintAddress } Amount PriceInUSD }
Sell { Currency { MintAddress } Amount }
Dex { ProtocolName }
}
}
}
}
Variables 패널
파라미터화된 쿼리에 JSON variables를 넘깁니다. 쿼리 텍스트를 수정하지 않고 variable 값만 바꿔 재사용할 수 있습니다.
query LatestTrades($limit: Int!) {
Solana {
DEXTrades(
limit: {count: $limit}
orderBy: {descending: Block_Time}
) {
Block { Time }
Trade {
Buy { Currency { MintAddress } Amount PriceInUSD }
Sell { Currency { MintAddress } Amount }
}
}
}
}
모든 요청과 함께 보낼 HTTP 헤더를 설정합니다. Headers 패널은 기본으로 표시되며 X-API-KEY 헤더가 미리 구성되어 있습니다.
{
"X-API-KEY": "your_api_key"
}
필요하면 추가 사용자 정의 헤더를 넣을 수 있습니다. 모든 헤더는 GraphQL 엔드포인트로의 POST 요청에 포함됩니다.
Content-Type: application/json 헤더는 자동으로 붙습니다 — 수동으로 설정할 필요가 없습니다.
툴바는 에디터 상단에 있으며 빠른 작업을 제공합니다.
| 버튼 | 동작 | 설명 |
|---|
| Execute (▶) | 쿼리 실행 | 현재 쿼리(variables·헤더 포함)를 GraphQL 엔드포인트로 전송 |
| Prettify | 쿼리 포맷 | 들여쓰기와 줄바꿈을 맞춰 쿼리 자동 포맷 |
| Copy | 쿼리 복사 | 현재 쿼리 텍스트를 클립보드에 복사 |
| Merge | fragment 병합 | 인라인 fragment를 하나의 평탄한 쿼리로 병합 |
| Save Query | 로컬 저장 | 제목·선택 태그와 함께 현재 쿼리 저장 |
| Export Code | 스니펫 보내기 | 선택한 언어로 현재 쿼리의 코드 스니펫 생성 |
쿼리 실행
쿼리를 실행하려면:
- 에디터에 쿼리를 작성하거나 불러옵니다.
- Headers 패널에
X-API-KEY를 설정합니다.
- 툴바의 Execute 버튼(▶)을 클릭하거나 Ctrl/Cmd+Enter를 누릅니다.
응답은 에디터 오른쪽 결과 패널에 전체 JSON 구문 강조와 함께 표시됩니다. 쿼리에 오류가 있으면 오류 메시지와 위치 정보가 포함된 오류 응답이 표시됩니다.
결과 패널
결과 패널은 GraphQL 엔드포인트의 JSON 응답을 다음과 함께 보여 줍니다.
- JSON 키, 문자열, 숫자, 불리언에 대한 구문 강조
- 깊게 중첩된 응답 탐색을 위한 접을 수 있는 노드
- 우클릭 컨텍스트 메뉴를 통한 응답 복사
일반적인 성공 응답에는 쿼리 구조와 맞는 data 객체와, 과금 정보를 담은 extensions.credits 객체가 포함됩니다.
상태 표시줄
IDE 하단 상태 표시줄은 쿼리 실행에 대한 실시간 피드백을 제공합니다.
| 항목 | 값 | 설명 |
|---|
| State | Ready · Executing... · Success · Error | 현재 요청 생명주기 상태 |
| Latency | 예: 120ms | 요청 전송부터 응답 수신까지 왕복 시간 |
| Size | 예: 2.4 KB | 응답 본문 크기 |
| Credits | 예: 8 CU | 이 쿼리가 소비한 Credit Unit |
Credit Unit(CU)은 쿼리의 계산 비용을 나타냅니다. 더 많은 데이터를 스캔하거나 더 큰 결과를 반환하는 쿼리는 더 많은 CU를 사용합니다. 자세한 내용은 Billing & Credits를 참고하세요.
키보드 단축키
| 단축키 | 동작 |
|---|
Ctrl/Cmd + Enter | 쿼리 실행 |
Ctrl/Cmd + B | 사이드바 토글 |
Ctrl + Space | 자동 완성 트리거 |
Ctrl/Cmd + Shift + P | 커맨드 팔레트 |
Ctrl/Cmd + / | 줄 주석 토글 |
Ctrl/Cmd + D | 다음 일치 항목 선택 |
Ctrl/Cmd + Shift + F | 포맷 / Prettify |
Alt + Up/Down | 줄 위/아래로 이동 |
macOS에서는 Ctrl 대신 Cmd를 사용합니다. IDE가 OS를 감지해 적절한 수정 키를 표시합니다.