SR
Click to open github profile

Craft Query API for Craft CMS

The Craft Query API is a Craft CMS API Plugin that makes Craft's query builder accessible across any frontend. It allows you to dynamically build Craft CMS dynamic queries via URL parameters, enabling flexible, data access in your headless Craft CMS setup

Flexible API Queries

Fetch content via URL parameters for dynamic data retrieval.

Unified Content Access

Retrieve addresses, assets, entries, and users with one API.

Image Transforms

Detects and configures ImagerX transforms for optimized images.

Features

  • Comprehensive Content API: Supports querying for addresses, assets, entries, and users, providing a complete Content API for Craft CMS.
  • Bearer Token Auth: Define schemas and bearer tokens in the controlpanel to control who can access your data.
  • Get Only the Data You Need: Avoid overfetching by using a custom function in the query builder to select only the fields you require.
  • Export TypeScript Types: You can easiliy export types based on fields and element with a command and use them directly.
  • Pretty JSON Responses: JSON Transformers prettify the response for better readability.
  • Native and Custom Field Detection: Automatically detects native Craft CMS fields and custom fields across all element types.
  • Prerendering Helper: Fetch all active page URLs for prerendering, static site generation.
  • Optimized Data Retrieval: High-performance content access with smart caching strategies ensures your queries run fast.
  • Extensible: You can add your own Json Transformer and custom element types to the Query API.
  • ImagerX Support: When querying images, it can return the optimized srcset generated by ImagerX.

Usage in Frontend

The Craft Query API Plugin is highly adaptable. It comes with npm packages for Vue, Nuxt, and TypeScript, making integration seamless. These packages enable developers to easily use the query builder to fetch data dynamically from your frontend with minimal configuration.

Example with Nuxt:

app.vue
const { data, error } = await useCraftEntry()
  .section('news')
  .limit(3)
  .all()

if (error.value) {
  console.error(error.value)
}

This approach simplifies the process of querying Craft CMS with JavaScript, making it a powerful tool for headless development.

Access Control with Schemas

Schemas allow you to define fine-grained access control for your data. Each access token is associated with one schema, which defines what content the token can access. This ensures a secure and predictable way of querying data via the API.

When creating a schema, you can assign permissions for specific content types, such as:

  • Site
  • Section
  • Volume
  • User Group
  • Address
  • Custom element types

This setup gives you full flexibility to tailor access to your needs - for example, restricting a token to only a specific section or user group.

Here's an example of what a schema configuration might look like:

Query API schema configuration

And that's how you define tokens:

Query API token configuration

Why not GraphQl?

Productivity

GraphQL requires detailed schemas, fragments, which can feel counterproductive for developers focused on efficiency.

Steep Learning Curve

If you're new to GraphQL, the syntax, schema design, error handling and tooling like Apollo can take significant time to learn. The Craft Query API Plugin works right out of the box like you were used to in twig.

Overhead and Architectural Complexity

Flexibility in GraphQL leads to a lot things you have to think of. Maintainability and error handling is hard with graphQl. The Craft CMS Query API eliminates this overhead.


Available Integrations

The Craft Query API offers several integrations for modern frontend frameworks:

  • Js Craft CMS API: The core package, you can build wrappers around it to support your framework. If you want to build a wrapper around it for your framework -> Hit me up :)
  • Vue Craft CMS: A package to use the query builder in Vue.
  • Nuxt Craft CMS: A package to use the query builder in Nuxt.

Copyright © 2025 Samuel Reichör