GraphQL 변수 병합 도구

GraphQL query와 variables JSON을 API 요청 body 형태로 병합합니다.

카테고리: 개발자 도구

언제 사용하나요?

GraphQL Playground, Postman, fetch, axios에 넣을 요청 본문을 만들 때 query 문자열과 variables 객체를 하나의 JSON으로 합칩니다. 프론트엔드 코드나 문서에 흩어진 query와 변수 값을 API 요청 body로 정리할 때 유용합니다.

사용 방법

  • GraphQL query 또는 mutation을 입력합니다.
  • variables JSON 객체를 입력합니다.
  • JSON 문법 오류를 확인합니다.
  • 요청 body JSON을 생성해 복사합니다.

입력값 안내

query 문자열과 유효한 variables JSON 객체를 각각 입력합니다. variables가 필요 없는 요청은 빈 객체 {}로 둘 수 있습니다.

계산·변환 기준

variables를 JSON.parse로 검증한 뒤 { query, variables } 객체로 묶고 JSON.stringify로 정리합니다. query 문자열은 줄바꿈을 포함한 상태로 요청 body에 들어갑니다.

사용 예시

  • GraphQL 요청 바디 작성 - Postman, fetch, axios에 넣을 GraphQL JSON body를 만듭니다.
  • variables JSON 검증 - 쉼표 누락, 따옴표 오류처럼 요청 실패를 만드는 variables 문법 문제를 먼저 확인합니다.
  • API 문서 예시 정리 - query와 variables를 한 요청 예시로 합쳐 문서나 코드 리뷰에 붙여 넣습니다.

예시

  • query GetUser($id: ID!) + {"id":"1"} → {"query":"query GetUser...","variables":{"id":"1"}}
  • mutation과 변수 JSON을 입력 → fetch body에 바로 쓸 수 있는 JSON 객체로 병합

주의사항

  • 병합 결과는 참고용입니다. 중첩 변수 타입이나 인라인 fragment는 직접 검토가 필요합니다.
  • 입력 데이터는 브라우저에서만 처리되며 서버로 전송되지 않습니다.

계산·사용 가이드

GraphQL 요청 body 구조

일반적인 GraphQL HTTP 요청 body는 query 문자열과 variables 객체를 함께 담습니다. variables가 없더라도 빈 객체를 넣어두면 테스트 도구와 코드 예시를 일관되게 관리하기 쉽습니다.

variables 검증

variables는 JSON 문법을 따라야 하므로 키와 문자열에는 큰따옴표를 써야 합니다. 쉼표 누락이나 작은따옴표 사용은 실제 요청 실패로 이어질 수 있습니다.

fetch·axios 활용

생성된 객체는 fetch나 axios 요청 body로 옮겨 쓰기 좋습니다. 실제 호출에서는 Content-Type: application/json 헤더와 인증 헤더를 별도로 설정해야 합니다.

문서 예시 정리

API 문서나 이슈에 query와 variables를 따로 적으면 누락이 생기기 쉽습니다. 하나의 JSON body로 합쳐두면 재현 가능한 요청 예시가 됩니다.

자주 묻는 질문

variables가 비어도 되나요?

빈 객체 {}를 입력하면 됩니다.

query와 variables를 함께 다루나요?

query 문자열과 variables JSON을 합쳐 API 요청 본문 형태의 객체로 만들어 줍니다.

variables가 잘못된 JSON이면 어떻게 되나요?

variables는 올바른 JSON이어야 하며, 형식이 틀리면 오류로 표시됩니다.

variables 형식은 무엇인가요?

variables는 JSON 형식으로 입력하면 됩니다. query에서 선언한 변수와 키 이름이 일치해야 합니다.

mutation 요청도 병합할 수 있나요?

네. query 영역에는 GraphQL query와 mutation 문자열을 모두 넣을 수 있고, variables는 같은 방식으로 JSON 객체를 입력하면 됩니다.

생성된 body를 fetch에 바로 넣을 수 있나요?

네. 생성된 JSON을 요청 body 예시로 사용할 수 있습니다. 실제 요청에서는 Content-Type: application/json 헤더도 함께 설정하세요.

관련 도구

  • GraphQL 포매터 - GraphQL query/mutation을 정리합니다.
  • JSON 포매터 - JSON 문자열을 보기 좋게 들여쓰기하거나 최소화합니다. 유효성 오류도 함께 표시합니다.
  • fetch → axios 변환기 - fetch 코드를 axios 요청 형식으로 바꿉니다.
  • cURL → fetch 변환기 - cURL 명령어를 JavaScript fetch 코드로 즉시 변환합니다. API 문서에서 cURL 샘플을 복사해 붙여넣으면 메서드·헤더·바디가 모두 채워진 fetch 함수를 생성합니다.
  • UUID 생성기 - 암호학적으로 안전한 UUID v4를 최대 20개까지 한 번에 생성합니다.
  • 비밀번호 생성기 - 길이, 문자셋, 개수를 선택해 브라우저에서 안전한 랜덤 비밀번호를 생성합니다.