GraphQL with HTML

Querying APIs, mutations, subscriptions, and GraphQL client integration.

Overview

GraphQL provides a flexible query language for APIs.

Key Concepts

• Queries — Fetch data
• Mutations — Modify data
• Subscriptions — Real-time updates
• Schema — Type definitions
• Resolvers — Data fetching functions

Code Examples

<div id="results"></div>
<script>
// Simple GraphQL client
async function graphql(query, variables = {}) {
  const response = await fetch('/graphql', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ query, variables })
  });
  return response.json();
}

// Query
async function getUsers() {
  const query = `
    query GetUsers {
      users {
        id
        name
        email
      }
    }
  `;
  
  const { data } = await graphql(query);
  return data.users;
}

// Mutation
async function createUser(name, email) {
  const mutation = `
    mutation CreateUser($name: String!, $email: String!) {
      createUser(name: $name, email: $email) {
        id
        name
        email
      }
    }
  `;
  
  const { data } = await graphql(mutation, { name, email });
  return data.createUser;
}

// Display users
async function displayUsers() {
  const users = await getUsers();
  const results = document.getElementById('results');
  
  results.innerHTML = users.map(user => `
    <div class="user">
      <h3>${user.name}</h3>
      <p>${user.email}</p>
    </div>
  `).join('');
}

// WebSocket subscription
const ws = new WebSocket('ws://localhost:4000/graphql');

ws.onopen = () => {
  ws.send(JSON.stringify({
    type: 'connection_init',
    payload: {}
  }));
  
  ws.send(JSON.stringify({
    id: 1,
    type: 'start',
    payload: {
      query: `
        subscription OnUserCreated {
          userCreated {
            id
            name
          }
        }
      `
    }
  }));
};

ws.onmessage = (event) => {
  const data = JSON.parse(event.data);
  if (data.type === 'data') {
    console.log('New user:', data.payload.data.userCreated);
  }
};
</script>

Practice

Build a GraphQL-powered user management interface.