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와 대조하고 철자를 고쳐 보세요.

관련 도구

보색 찾기

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

Webpack 설정 생성기

순수 JavaScript, React, Vue용 webpack 5 webpack.config.js를 만드세요. TypeScript, Babel, CSS 또는 Sass, 이미지, HtmlWebpackPlugin, 개발 서버, npm install 명령까지 함께 제공합니다.

XML 포매터

일관된 들여쓰기로 XML 문서를 정렬 출력하고, 정확한 줄 번호로 적격성 오류를 잡아냅니다.

텍스트 파일 인코딩 변환기

깨진 문자를 고치기 위해 텍스트를 UTF-8, UTF-16, Latin-1, Windows-1252 등 여러 인코딩 사이에서 변환하세요.

Protocol Buffers 디코더

hex, Base64, Base64URL, 텍스트 또는 파일의 Protobuf 와이어 형식 바이트를 브라우저에서 디코딩하고 정확한 필드 후보를 확인한 뒤 비공개 보고서로 내보냅니다.

색상 혼합기

두 HEX 색상을 2-20개의 균등한 색상 견본으로 섞습니다. 양 끝 색상을 포함해 각 중간 색상을 대문자 HEX 코드로 확인하세요.

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