Softonic

GraphQL 쿼리 빌더

단계 1 / 2
인수
쿼리 빌드

GraphQL 작업을 손으로 쓰려면 중괄호, 인자, 들여쓰기를 정확하게 유지해야 합니다. 이 빌더는 문서를 대신 조립해 줍니다. 쿼리, 뮤테이션, 서브스크립션 중에서 고르고 작업에 이름을 붙인 뒤 루트 필드를 설정하고 인자를 추가하고 필요한 필드를 나열하기만 하면 됩니다. 결과는 형식에 맞는 작업으로, Apollo, urql, GraphiQL에 바로 붙여 넣을 수 있습니다.

GraphQL 작업을 만드는 방법

  1. 1

    작업 유형 선택

    드롭다운에서 쿼리, 뮤테이션, 서브스크립션을 고릅니다. 서버가 실행할 작업의 종류가 여기서 정해집니다.

  2. 2

    작업 이름 지정

    서버가 로그와 캐시에서 식별할 수 있도록 GetUser 같은 이름을 붙입니다. 이름은 선택 사항이며 없어도 동작합니다.

  3. 3

    루트 필드 설정

    호출할 필드를 입력합니다. 예: user, createPost, orderUpdated.

  4. 4

    인자 추가

    id: "123" 또는 id: $id 같은 키-값 쌍을 추가합니다. 키가 빈 행은 건너뜁니다.

  5. 5

    필드 나열 후 복사

    한 줄에 하나씩 필드를 입력하고 쿼리를 만든 뒤 형식에 맞는 문서를 클립보드에 복사합니다.

GraphQL 문서 다루기

GraphQL 문서는 하나 이상의 작업과 그것이 참조하는 프래그먼트의 집합입니다. 각 작업은 Query, Mutation, Subscription 타입의 루트 필드를 지정하며, 서버는 요청한 셀렉션 세트를 처리합니다. 빌더가 작업 텍스트를 대신 만들어 주지만 스키마는 알지 못하므로, 작업을 실행하기 전에 모든 필드명과 인자명을 API와 대조하세요.

작업 구조

부분 용도 예시
작업 유형 쿼리, 뮤테이션, 서브스크립션 query, mutation, subscription
작업 이름 캐싱과 로그에 사용 GetUserById
인자 루트 필드에 전달하는 값 user(id: "123")
셀렉션 세트 필드와 중첩 셀렉션 { user(id: "123") { name posts { title } } }
변수 작업 이름과 함께 선언하는 타입 입력 query GetUser($id: ID!) { user(id: $id) { name } }

흔한 함정

  • 필수 변수는 !로 끝납니다. 스키마에서 NonNull로 표시된 인자에 이를 빠뜨리면 리졸버 실행 전에 검증 오류가 납니다.
  • 문자열 인자에는 따옴표가 필요합니다. 123 같은 값은 숫자입니다. 텍스트 값은 인자 행에서 "123"처럼 큰따옴표로 감싸야 합니다.
  • 유니온과 인터페이스 타입은 타입별 필드를 읽으려면 ... on TypeName 인라인 프래그먼트가 필요합니다.
  • 별칭은 같은 필드를 다른 인자로 두 번 요청할 때 필수입니다. 예: today: stats(period: DAY)와 week: stats(period: WEEK).
  • **커넥션(Relay 스펙)**은 edges { node { ... } }와 pageInfo { endCursor hasNextPage }를 노출하며, 둘 중 하나라도 빠뜨리면 페이지네이션이 깨집니다.

팁

  • Apollo Client가 개별적으로 캐싱할 수 있도록 작업을 작게 만들고 이름을 붙이세요.
  • 바뀌는 값은 리터럴 대신 변수로 전달하면 서버가 문서를 한 번 파싱해 재사용합니다. 변수는 작업 이름 옆에서 선언하세요. 예: query GetUser($id: ID!).
  • 한 필드에 인자가 여러 개 필요하면 인자 행 하나에 쉼표로 구분해 넣으세요. 예: 값에 filter: { status: ACTIVE }.
  • 빌더는 설정한 텍스트를 그대로 출력합니다. 작업이 실패하면 먼저 필드명을 현재 스키마와 비교해 보세요.

자주 묻는 질문

아니요. 입력한 텍스트의 형식만 잡아 줄 뿐이며, 호출할 엔드포인트도 필요한 스키마도 없습니다. 작업의 각 부분을 채우면 빌더가 문서를 조립해 줍니다.

네. 작업 드롭다운에서 쿼리, 뮤테이션, 서브스크립션을 전환하면 됩니다. 이름, 루트 필드, 인자, 필드는 모두 동일하게 사용합니다.

인자 섹션에 행을 추가합니다. 키가 인자 이름이고 값이 전달할 내용입니다. 예: id: “123” 또는 id: $id. 키가 빈 행은 무시됩니다. $id 같은 변수를 입력했다면 작업 이름 옆에서 직접 선언하세요. 예: query GetUser($id: ID!).

빌더는 입력한 텍스트를 그대로 출력합니다. 이 오류는 대개 필드명이나 인자명이 서버 스키마와 맞지 않는다는 뜻입니다. 루트 필드와 모든 필드명을 API와 대조하고 철자를 고쳐 보세요.

관련 도구

ASCII 표 참조

NUL, LF, DEL 같은 제어 문자를 포함해 모든 문자에 대한 10진수, 16진수, 8진수, 2진수, HTML 숫자 문자 참조를 담은 0부터 127까지의 전체 ASCII 표.

HTML 문자 참조

HTML 엔티티의 검색 가능한 목록, 각 엔티티의 이름 및 숫자 코드, 그리고 특수 문자 및 기호에 대한 1클릭 복사 기능을 제공합니다.

키보드 단축키 참고표

macOS, Windows, Linux에서 VS Code, Chrome, GNU Readline을 쓰는 Bash의 문서화된 기본 단축키를 검색합니다.

보색 찾기

어떤 입력에 대해서도 보색을 찾습니다. HSL 반대 색, 분할 보색 쌍, 그리고 접근성 있는 조합 제안을 반환합니다.

이메일 검증기

이메일 주소를 검증합니다. RFC 5322 구문 검사, 실시간 MX 레코드 조회, 그리고 로컬 파트, 도메인, 길이 정보를 제공합니다. 이메일은 전송되지 않습니다.

EditorConfig 생성기

들여쓰기 스타일과 크기, 줄 끝, 문자 인코딩, 공백 규칙을 지정해 .editorconfig 파일을 생성하고 IDE와 편집기 전반의 형식을 일관되게 유지하세요.

이 도구는 다른 언어로도 제공됩니다