ContentQL ContentQL Docs

ContentQL Core Package

Overview

The @contentql/core package extends your default Payload CMS configuration by integrating pre-built collections and plugins. These configurations can be extended further to match your project needs. It’s essential to have a solid understanding of blocks and collections before diving into customizations.

For detailed information, check the official package here:

npm

Getting Started

To use the base configuration of ContentQL Core, add the following code to your payload.config.ts file:

payolad.config.ts
import { cqlConfig } from '@contentql/core'
import path from 'path'
import { fileURLToPath } from 'url'
 
// payload block-configuration files
import DetailsConfig from '@/payload/blocks/Details/config'
import HomeConfig from '@/payload/blocks/Home/config'
import ListConfig from '@/payload/blocks/List/config'
 
const filename = fileURLToPath(import.meta.url)
const dirname = path.dirname(filename)
const finalPath = path.resolve(dirname, 'payload-types.ts')
 
// Add the extra payload configuration you want!
export default cqlConfig({
  // baseURL is required for Live-Preview & SEO generation
  baseUrl: 'http://localhost:3000',
  dbURL: process.env.DATABASE_URI,
  s3: {
    bucket: process.env.S3_BUCKET,
    accessKeyId: process.env.S3_ACCESS_KEY_ID,
    secretAccessKey: process.env.S3_SECRET_ACCESS_KEY,
    region: process.env.S3_REGION,
    endpoint: process.env.S3_ENDPOINT,
  },
  typescript: {
    outputFile: finalPath,
  },
  secret: process.env.PAYLOAD_SECRET,
  cors: [process.env.PAYLOAD_URL],
  csrf: [process.env.PAYLOAD_URL],
  resend: {
    apiKey: process.env.RESEND_API_KEY,
    defaultFromAddress: process.env.RESEND_SENDER_EMAIL,
    defaultFromName: process.env.RESEND_SENDER_NAME,
  },
  // pass the configuration to blocks field these will appear in pages collection in admin panel
  blocks: [HomeConfig, DetailsConfig, ListConfig],
})

Accessing Collection Slugs

To access collection slugs in your routes, use the following import:

route.ts
// This will provide the slugs of all collections
import { collectionSlug } from '@contentql/core'
 
const { docs } = await payload.find({
  collection: collectionSlug['blogs'],
  depth: 5,
  draft: false,
})

📦 Out of the Box Contents

These collections & plugins will be automatically added

Collections

Plugins

Continuous Updates from ContentQL

Whenever we make changes to any of our plugins or add a new feature, these updates are delivered as a package update. If you're creating a theme, you will automatically get the latest features and improvements through these updates, ensuring your project stays aligned with the latest version of the package.

Previous

Project Structure

Next

Create Your Own Theme

On this page

OverviewGetting StartedAccessing Collection Slugs📦 Out of the Box ContentsContinuous Updates from ContentQL