Image

Part 1: Content SDK CLI - Custom Commands

Creating a Custom Command with the Content SDK CLI

Author
Robert Watson
August 21, 2025

Intro

Working with XM Cloud often comes down to balancing developer experience with repeatability. If you’ve been following my earlier post on simplifying GraphQL queries in XM Cloud with TypeScriptSimplifying GraphQL Queries in Sitecore XM Cloud with TypeScript, you know how important it is to have queries defined in one place, typed, and ready for use in React.

The Sitecore Content SDK CLI gives us a new way to extend this process by defining custom commands that automatically run during build. In this post, I’ll show you how I built a CLI command that generates TypeScript constants from .graphql files every time I run npm run build.

Why Extend the CLI?

By default, the CLI handles tasks like extracting files, generating metadata, and syncing configuration with XM Cloud. But in real-world projects, we often need custom build steps that fit into our workflow.

For me, that’s GraphQL query management:

  • I want to keep .graphql files separate and readable.
  • I don’t want to copy/paste queries into TypeScript files.
  • I want my queries ready-to-use as constants when I import them into components.

This is exactly the type of repetitive task that fits nicely into a CLI extension.

Step 1: Find a place to store your queries

I created a subfolder under the root of my project called queries. In there are all my custom .graphql files. Below is an example:

Step 2: Define the Custom Command

In my commands/generate-queries.ts, I created a function that:

  1. Reads all .graphql files from a queries folder.
  2. Converts each one into a TypeScript export.
  3. Writes them into a single generated.ts file under src/lib/graphql.

Here’s the code:

Step 3: Hook It into the CLI Build Process

Next, we add the command to the CLI pipeline via sitecore.cli.config.ts.

Now, whenever I run npm run build, the CLI:

  1. Runs the standard Content SDK commands.
  2. Triggers my generateQueries command.
  3. Produces a generated.ts file with ready-to-use query exports.

Step 4: Using the Generated Queries in Code

Once the build runs, I can simply import my queries like this:

This means my .graphql files stay organized, my TypeScript stays clean, and my components can consume queries directly.

Summary

By extending the Sitecore Content SDK CLI with a custom command, I:

  • Automated GraphQL query generation.
  • Reduced duplication and human error.
  • Integrated my workflow directly into the build process.

As always, you can view all this code in my GitHub repository. This is just Part 1 of a two-part series. In Part 2, I’ll show how to create a custom scaffolding template in the CLI to streamline component development in XM Cloud.

Made in React Bricks