> ## Documentation Index
> Fetch the complete documentation index at: https://docs.chainstream.io/llms.txt
> Use this file to discover all available pages before exploring further.

# 쿼리 에디터

> Monaco 기반 GraphQL 에디터 — 자동완성, 구문 강조, 패널, 실시간 쿼리 실행

## Monaco Editor

쿼리 에디터는 VS Code와 동일한 엔진인 [Monaco](https://microsoft.github.io/monaco-editor/)를 기반으로 하며, GraphQL language worker가 다음을 제공합니다.

* GraphQL operation, 필드, 인자, 디렉티브에 대한 **구문 강조**
* **스키마 기반 자동 완성** — `Ctrl+Space`로 라이브 스키마에 맞는 필드·인자·타입 제안
* **실시간 오류 표시** — 잘못된 필드명, 누락된 인자, 타입 불일치에 대한 빨간 밑줄·마커
* 중괄호, 괄호, 문자열에 대한 **괄호 짝 맞춤** 및 **자동 닫기**
* 일괄 수정을 위한 **멀티 커서 편집**

<Tip>
  자동 완성은 스키마를 인식합니다. Cube(예: `DEXTrades`) 안에서 입력할 때 해당 Cube에 유효한 필드와 인자만 제안 목록에 나타납니다.
</Tip>

***

## 에디터 패널

에디터 영역은 하단에 세 개의 탭으로 나뉩니다. 요청의 각 부분을 설정하려면 탭을 전환하세요.

### Query 패널

GraphQL 쿼리를 작성하는 주 편집 영역입니다. Monaco의 자동 완성, 강조, 오류 검사가 여기서 동작합니다.

```graphql theme={null}
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 값만 바꿔 재사용할 수 있습니다.

<Tabs>
  <Tab title="Query">
    ```graphql theme={null}
    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 }
          }
        }
      }
    }
    ```
  </Tab>

  <Tab title="Variables">
    ```json theme={null}
    {
      "limit": 20
    }
    ```
  </Tab>
</Tabs>

### Headers 패널

모든 요청과 함께 보낼 HTTP 헤더를 설정합니다. Headers 패널은 **기본으로 표시**되며 `X-API-KEY` 헤더가 미리 구성되어 있습니다.

```json theme={null}
{
  "X-API-KEY": "your_api_key"
}
```

필요하면 추가 사용자 정의 헤더를 넣을 수 있습니다. 모든 헤더는 GraphQL 엔드포인트로의 POST 요청에 포함됩니다.

<Note>
  `Content-Type: application/json` 헤더는 자동으로 붙습니다 — 수동으로 설정할 필요가 없습니다.
</Note>

***

## 툴바

툴바는 에디터 상단에 있으며 빠른 작업을 제공합니다.

| 버튼              | 동작          | 설명                                        |
| :-------------- | :---------- | :---------------------------------------- |
| **Execute** (▶) | 쿼리 실행       | 현재 쿼리(variables·헤더 포함)를 GraphQL 엔드포인트로 전송 |
| **Prettify**    | 쿼리 포맷       | 들여쓰기와 줄바꿈을 맞춰 쿼리 자동 포맷                    |
| **Copy**        | 쿼리 복사       | 현재 쿼리 텍스트를 클립보드에 복사                       |
| **Merge**       | fragment 병합 | 인라인 fragment를 하나의 평탄한 쿼리로 병합              |
| **Save Query**  | 로컬 저장       | 제목·선택 태그와 함께 현재 쿼리 저장                     |
| **Export Code** | 스니펫 보내기     | 선택한 언어로 현재 쿼리의 코드 스니펫 생성                  |

***

## 쿼리 실행

쿼리를 실행하려면:

1. 에디터에 쿼리를 작성하거나 불러옵니다.
2. Headers 패널에 `X-API-KEY`를 설정합니다.
3. 툴바의 **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 |

<Info>
  Credit Unit(CU)은 쿼리의 계산 비용을 나타냅니다. 더 많은 데이터를 스캔하거나 더 큰 결과를 반환하는 쿼리는 더 많은 CU를 사용합니다. 자세한 내용은 [Billing & Credits](/ko/graphql/billing/graphql-billing)를 참고하세요.
</Info>

***

## 키보드 단축키

<div style={{ overflowX: 'auto', width: '100%' }}>
  | 단축키                    | 동작            |
  | :--------------------- | :------------ |
  | `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`        | 줄 위/아래로 이동    |
</div>

<Tip>
  macOS에서는 `Ctrl` 대신 `Cmd`를 사용합니다. IDE가 OS를 감지해 적절한 수정 키를 표시합니다.
</Tip>