Craft Query API for Craft CMS

Features

• Dynamic URL-Based Queries: Easily build and execute Craft CMS dynamic queries directly from URL parameters, enabling flexible, real-time data retrieval for headless Craft CMS or traditional setups.
• Get Only the Data You Need: Avoid overfetching by using a custom function in the query builder to select only the fields you require.
• 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.
• Comprehensive Content API: Supports querying for addresses, assets, entries, and users, providing a complete Content API for Craft CMS.
• Prerendering Support: Fetch all active page URLs for prerendering, static site generation, or enhanced performance.
• Optimized Data Retrieval: High-performance content access with smart caching strategies ensures your queries run fast.

ImagerX Support

The Craft Query API Plugin automatically detects named transforms and widths defined in your ImagerX configuration. When querying images, it applies these pre-defined transformations, returning an optimized srcset for each image.

The Craft Query API Plugin integrates seamlessly with ImagerX. It detects and applies named transforms and widths from your configuration. When querying images, these transformations automatically return an optimized srcset.

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:

const entry = useCraftQuery('entries')
  .id(1)
  .status('active')
  .siteId(1)
  .slug('page-1')
  .one()

This approach simplifies the process of querying Craft CMS with JavaScript, making it a powerful tool for dynamic data retrieval.

Why not GraphQl?

Productivity

GraphQL requires detailed queries, fragments, and debugging, which can feel counterproductive for developers focused on efficiency.

Steep Learning Curve

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

Built for Large Orgs

GraphQL was originally developed by Facebook to address specific challenges they faced while building and maintaining their large-scale applications. It is often an overkill for smaller projects.

Overhead and Architectural Complexity

Flexibility in GraphQL leads to the need for schema definitions, fetch functions, and router configurations. The Craft CMS Query API eliminates this overhead.

Prop Drilling

If the software architecture is not thoughtfully designed, it can lead to prop drilling everywhere. Data fetched in a parent component must be passed through multiple layers of child components. This approach complicates state management, increases maintenance overhead, and detracts from the overall developer experience.

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.