ContentQL ContentQL Docs
Building your Theme

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 {
  BlogsCollection,
  MediaCollection,
  PagesCollection,
  SiteSettingsGlobal,
  TagsCollection,
  UsersCollection,
} from '@contentql/core/blog'
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: 'http://localhost:3000',
  secret: process.env.PAYLOAD_SECRET,
  cors: [process.env.PAYLOAD_URL],
  csrf: [process.env.PAYLOAD_URL],
  db: process.env.DATABASE_URI,
  collections: [
    UsersCollection,
    MediaCollection,
    PagesCollection,
    TagsCollection,
    BlogsCollection,
  ],
  globals: [SiteSettingsGlobal],
  typescript: {
    outputFile: finalPath,
  },
  resend: {
    apiKey: process.env.RESEND_API_KEY,
    defaultFromAddress: process.env.RESEND_SENDER_EMAIL,
    defaultFromName: process.env.RESEND_SENDER_NAME,
  },
  s3: {
    collections: {
      media: true,
    },
    bucket: process.env.S3_BUCKET,
    config: {
      credentials: {
        accessKeyId: process.env.S3_ACCESS_KEY_ID,
        secretAccessKey: process.env.S3_SECRET_ACCESS_KEY,
      },
      endpoint: process.env.S3_ENDPOINT,
      region: process.env.S3_REGION,
    },
  },
})

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

Blocks Creation

On this page

Overview
Getting Started
Accessing Collection Slugs
📦 Out of the Box Contents
Continuous Updates from ContentQL