GraphQL Queries

Queries allow you to fetch data from your StormyCMS site. All queries require authentication with your site API key and client ID.

Authentication

Don't forget to include your authentication headers in every request:

headers: {
  'Content-Type': 'application/json',
  'x-site-api-key': 'YOUR_SITE_API_KEY',
  'x-client-id': 'YOUR_CLIENT_ID'
}

Page Queries

Get a Specific Page

Retrieve a single page by its ID.

query GetPage($id: ID!) {
  page(id: $id) {
    id
    meta {
      title
      description
      keywords
    }
    layout_id
    components {
      id
      name
      text
      props
    }
    site_id
  }
}

Example:

const response = await fetch('https://api.stormycms.com/graphql', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
    'x-site-api-key': 'YOUR_SITE_API_KEY',
    'x-client-id': 'YOUR_CLIENT_ID'
  },
  body: JSON.stringify({
    query: `
      query GetPage($id: ID!) {
        page(id: $id) {
          id
          meta {
            title
            description
          }
          components {
            id
            name
            text
          }
        }
      }
    `,
    variables: {
      id: "page_123"
    }
  })
});

Get Multiple Pages (Paginated)

Fetch a list of pages with pagination.

query GetPages($limit: Int, $offset: Int) {
  pages(limit: $limit, offset: $offset) {
    id
    meta {
      title
      description
    }
    layout_id
    created_at
  }
}

Example:

// Fetch first 10 pages
const response = await fetch('https://api.stormycms.com/graphql', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
    'x-site-api-key': 'YOUR_SITE_API_KEY',
    'x-client-id': 'YOUR_CLIENT_ID'
  },
  body: JSON.stringify({
    query: `
      query GetPages($limit: Int, $offset: Int) {
        pages(limit: $limit, offset: $offset) {
          id
          meta {
            title
            description
          }
        }
      }
    `,
    variables: {
      limit: 10,
      offset: 0
    }
  })
});

Get All Available Layouts

Retrieve all layouts in your system.

query GetAllLayouts {
  all_layouts {
    id
    name
    components {
      id
      name
    }
    outlet_id
  }
}

Layout Queries

Get a Specific Layout

query GetLayout($id: ID!) {
  layout(id: $id) {
    id
    name
    props
    components {
      id
      name
      text
      child_ids
    }
    component_ids
    outlet_id
    child_layout_id
  }
}

Get All Layouts

query GetLayouts {
  layouts {
    id
    name
    components {
      id
      name
    }
  }
}

Site Queries

Get Site Information

Fetch information about your site. Note: You can only access your own site's data with a site API key.

query GetSite($id: ID!) {
  getSite(id: $id) {
    id
    name
    owner_id
    admin_ids {
      user_id
      add_date
    }
    contributor_ids {
      user_id
      add_date
    }
    client_id
    redirect_urls
    created_at
  }
}

Advanced Query Examples

Query Pages with Specific Layout

query GetPagesByLayout($layoutId: ID!) {
  pages(limit: 50) {
    id
    meta {
      title
      description
    }
    layout_id
    components {
      id
      name
      text
    }
  }
}

After fetching, filter pages by layout_id in your application.

Query Pages with Components

query GetPagesWithComponents {
  pages(limit: 20) {
    id
    meta {
      title
    }
    components {
      id
      name
      text
      props
      child_ids
    }
  }
}

Error Handling

Always handle potential errors in your queries:

const response = await fetch('https://api.stormycms.com/graphql', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
    'x-site-api-key': 'YOUR_SITE_API_KEY',
    'x-client-id': 'YOUR_CLIENT_ID'
  },
  body: JSON.stringify({ query, variables })
});

if (!response.ok) {
  throw new Error(`HTTP error! status: ${response.status}`);
}

const result = await response.json();

if (result.errors) {
  console.error('GraphQL errors:', result.errors);
  throw new Error(result.errors[0].message);
}

return result.data;

Optimizing Queries

Select only fields you need - Reduces response size
Use pagination - Don't fetch all pages at once
Cache responses - Store frequently accessed data
Batch queries - Multiple operations in a single request when possible

Next Steps

Learn about GraphQL Mutations to create and update content
Check the API Reference for complete type definitions
View Examples for practical implementations

Last updated: 2/27/26, 3:48 AM