📋JSON Templates

GraphQL Query Request

JSON structure for GraphQL query requests with variables and operation name.

Explanation

GraphQL requests are sent as JSON POST with query, variables, and operationName fields.

Examples

Query with Variables

Output

{
  "query": "query GetUser($id: ID!) {\n  user(id: $id) {\n    id\n    name\n    email\n  }\n}",
  "variables": {
    "id": "usr_123"
  },
  "operationName": "GetUser"
}

Mutation Example

Output

{
  "query": "mutation CreatePost($input: CreatePostInput!) {\n  createPost(input: $input) {\n    id\n    title\n    author {\n      name\n    }\n  }\n}",
  "variables": {
    "input": {
      "title": "My New Post",
      "content": "Post content here"
    }
  },
  "operationName": "CreatePost"
}

Code Examples

TypeScript

interface GraphQLRequest {
  query: string;
  variables?: Record<string, any>;
  operationName?: string;
}

// Fetch example
async function executeGraphQL(request: GraphQLRequest) {
  const response = await fetch('/graphql', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
    },
    body: JSON.stringify(request)
  });
  
  return response.json();
}

Apollo Client

// Using Apollo Client
import { gql } from '@apollo/client';

const GET_USER = gql`
  query GetUser($id: ID!) {
    user(id: $id) {
      id
      name
      email
    }
  }
`;

const { data } = await client.query({
  query: GET_USER,
  variables: { id: 'usr_123' }
});

Try it Now

Open in JSON Formatter

💡 Tips

Use variables for dynamic values, not string concatenation
Name your operations for better debugging
Request only fields you need
Use fragments for reusable field selections
Consider query batching for multiple operations

⚠️ Common Pitfalls

Don't embed variables directly in query strings
Large queries can hit server limits
N+1 query problem in resolvers
Be careful with deep nesting