GraphQL Query Builder

Build GraphQL queries visually with field selection, variable management, and export options. Includes example schemas for Blog, E-commerce, and GitHub APIs.

Features

Visual field selectionNested field supportVariable managementExample schemas includedExport for Apollo/Fetch/cURLOperation type selection

GraphQL Query Builder

Operation

Operation Type

Operation Name

Fields Selection

No schema loaded

Select an example above or build your own schema

Variables

No variables defined

Generated Query

# Select fields to generate query

Export as Code

Apollo Client

import { gql } from '@apollo/client';

const MYQUERY_QUERY = gql`

`;

// Usage
const { loading, error, data } = useQuery(
  MYQUERY_QUERY
);

Fetch API

const query = `

`;

const variables = {};

fetch('https://your-graphql-endpoint.com/graphql', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
    'Authorization': 'Bearer YOUR_TOKEN'
  },
  body: JSON.stringify({
    query,
    variables
  })
})
.then(res => res.json())
.then(data => console.log(data));

cURL

curl -X POST https://your-graphql-endpoint.com/graphql \
  -H "Content-Type: application/json" \
  -H "Authorization: Bearer YOUR_TOKEN" \
  -d '{"query":""}'

How to Use

Building Queries

• Select an example schema or build your own
• Check fields you want to include
• Nested fields auto-expand when selected
• Add arguments to fields as needed
• Use $variable syntax for dynamic values

Variables

• Define variables for dynamic values
• Set types and required flags
• Provide default values for testing
• Reference in fields with $variableName
• Export with your query

Tips:

• Start with an example schema to understand the structure
• Parent fields must be selected to access nested fields
• Use variables for values that change between requests
• Export to your preferred GraphQL client format