@cedarjs/cli 7.1.0 → 7.1.1-next.469

package/dist/commands/deploy/flightcontrolHandler.js

@@ -1,11 +1,11 @@
 import fs from "node:fs";
 import path from "node:path";
-import { recordTelemetryAttributes } from "@cedarjs/cli-helpers";
 import {
   runBin,
   runTransitiveBin,
   runWithNode
 } from "@cedarjs/cli-helpers/packageManager/exec";
+import { recordTelemetryAttributes } from "@cedarjs/cli-helpers/telemetry";
 import { getPaths } from "@cedarjs/project-config";
 async function runBinWithThrow(bin, args, options) {
   const result = await runBin(bin, args, options);

package/dist/commands/deploy/helpers/deployHandler.js

@@ -1,5 +1,5 @@
 import execa from "execa";
-import { colors as c } from "@cedarjs/cli-helpers";
+import { colors as c } from "@cedarjs/cli-helpers/colors";
 import { formatCedarCommand } from "@cedarjs/cli-helpers/packageManager/display";
 import { getPaths } from "@cedarjs/project-config";
 const deployHandler = ({

package/dist/commands/deploy/netlify.js

@@ -1,4 +1,4 @@
-import { recordTelemetryAttributes } from "@cedarjs/cli-helpers";
+import { recordTelemetryAttributes } from "@cedarjs/cli-helpers/telemetry";
 import { deployBuilder } from "./helpers/deployBuilder.js";
 const command = "netlify [...commands]";
 const description = "Build command for Netlify deploy";

package/dist/commands/deploy/renderHandler.js

@@ -1,6 +1,5 @@
 import fs from "node:fs";
 import path from "path";
-import { recordTelemetryAttributes } from "@cedarjs/cli-helpers";
 import { formatAddRootPackagesCommand } from "@cedarjs/cli-helpers/packageManager/display";
 import {
   runBinSync,
@@ -8,6 +7,7 @@ import {
   runWithNode
 } from "@cedarjs/cli-helpers/packageManager/exec";
 import { installPackages } from "@cedarjs/cli-helpers/packageManager/packages";
+import { recordTelemetryAttributes } from "@cedarjs/cli-helpers/telemetry";
 import { getPaths } from "@cedarjs/project-config";
 const handler = async ({
   side,

package/dist/commands/deploy/serverlessHandler.js

@@ -6,12 +6,13 @@ import { config } from "dotenv-defaults";
 import execa from "execa";
 import { Listr } from "listr2";
 import prompts from "prompts";
-import { recordTelemetryAttributes, colors as c } from "@cedarjs/cli-helpers";
+import { colors as c } from "@cedarjs/cli-helpers/colors";
 import {
   formatAddRootPackagesCommand,
   formatRunBinCommand
 } from "@cedarjs/cli-helpers/packageManager/display";
 import { runBin } from "@cedarjs/cli-helpers/packageManager/exec";
+import { recordTelemetryAttributes } from "@cedarjs/cli-helpers/telemetry";
 import { getPaths } from "../../lib/index.js";
 const preRequisites = () => [
   {

package/dist/commands/deploy/vercel.js

@@ -1,4 +1,4 @@
-import { recordTelemetryAttributes } from "@cedarjs/cli-helpers";
+import { recordTelemetryAttributes } from "@cedarjs/cli-helpers/telemetry";
 import { deployBuilder } from "./helpers/deployBuilder.js";
 const command = "vercel [...commands]";
 const description = "Build command for Vercel deploy";

package/dist/commands/destroy/handlerHelpers.js

@@ -1,5 +1,5 @@
 import { Listr } from "listr2";
-import { recordTelemetryAttributes } from "@cedarjs/cli-helpers";
+import { recordTelemetryAttributes } from "@cedarjs/cli-helpers/telemetry";
 import { deleteFilesTask } from "../../lib/index.js";
 function tasks({ componentName, filesFn, name }) {
   return new Listr(

package/dist/commands/destroy/page/pageHandler.js

@@ -1,6 +1,7 @@
 import camelcase from "camelcase";
 import { Listr } from "listr2";
-import { recordTelemetryAttributes, colors as c } from "@cedarjs/cli-helpers";
+import { colors as c } from "@cedarjs/cli-helpers/colors";
+import { recordTelemetryAttributes } from "@cedarjs/cli-helpers/telemetry";
 import {
   deleteFilesTask,
   removeRoutesFromRouterTask

package/dist/commands/destroy/scaffold/scaffoldHandler.js

@@ -1,7 +1,7 @@
+import { parse } from "@babel/parser";
 import { Listr } from "listr2";
-import pascalcase from "pascalcase";
-import { recordTelemetryAttributes, colors as c } from "@cedarjs/cli-helpers";
-import { pluralize } from "@cedarjs/utils/cedarPluralize";
+import { colors as c } from "@cedarjs/cli-helpers/colors";
+import { recordTelemetryAttributes } from "@cedarjs/cli-helpers/telemetry";
 import {
   deleteFilesTask,
   getPaths,
@@ -12,6 +12,7 @@ import {
 import { verifyModelName } from "../../../lib/schemaHelpers.js";
 import {
   files,
+  getScaffoldLayoutNames,
   routes as scaffoldRoutes,
   splitPathAndModel
 } from "../../generate/scaffold/scaffoldHandler.js";
@@ -22,45 +23,83 @@ const removeRoutesWithSet = async ({
 }) => {
   const routes = await scaffoldRoutes({ model, path, nestScaffoldByModel });
   const routeNames = routes.map(extractRouteName);
-  const pluralPascalName = pascalcase(pluralize(model));
-  const layoutName = `${pluralPascalName}Layout`;
-  return removeRoutesFromRouterTask(routeNames, layoutName);
+  const { importName } = getScaffoldLayoutNames(model, path);
+  return removeRoutesFromRouterTask(routeNames, importName);
+};
+const removeNamedImport = (code, source, name) => {
+  const program = parse(code, {
+    sourceType: "module",
+    plugins: ["jsx", "typescript"]
+  }).program;
+  for (const statement of program.body) {
+    if (statement.type !== "ImportDeclaration" || statement.source.value !== source) {
+      continue;
+    }
+    const specifiers = statement.specifiers;
+    const index = specifiers.findIndex(
+      (specifier2) => specifier2.type === "ImportSpecifier" && specifier2.imported.type === "Identifier" && specifier2.imported.name === name && specifier2.local.name === name
+    );
+    if (index === -1) {
+      continue;
+    }
+    const specifier = specifiers[index];
+    let start;
+    let end;
+    if (specifiers.length === 1) {
+      start = statement.start ?? 0;
+      end = statement.end ?? 0;
+      if (code[end] === "\n") {
+        end++;
+      }
+    } else if (index === specifiers.length - 1) {
+      start = specifiers[index - 1].end ?? 0;
+      end = specifier.end ?? 0;
+    } else {
+      start = specifier.start ?? 0;
+      end = specifiers[index + 1].start ?? 0;
+    }
+    return code.slice(0, start) + code.slice(end);
+  }
+  return code;
 };
 const removeSetImport = () => {
   const routesPath = getPaths().web.routes;
   const routesContent = readFile(routesPath).toString();
-  if (routesContent.match("<Set")) {
+  const unusedNames = ["Set", "PrivateSet"].filter(
+    (name) => !new RegExp(`<${name}\\b`).test(routesContent)
+  );
+  if (unusedNames.length === 0) {
     return "Skipping removal of Set import in Routes.{jsx,tsx}";
   }
-  const cedarRouterImportMatch = routesContent.match(
-    /import {[^]*} from '@cedarjs\/router'/
-  );
-  if (!cedarRouterImportMatch) {
-    return "No @cedarjs/router import found in Routes.{jsx,tsx}";
+  let newRoutesContent = routesContent;
+  try {
+    for (const name of unusedNames) {
+      newRoutesContent = removeNamedImport(
+        newRoutesContent,
+        "@cedarjs/router",
+        name
+      );
+    }
+  } catch {
+    return "Skipping removal of Set import, Routes.{jsx,tsx} couldn't be parsed";
+  }
+  if (newRoutesContent === routesContent) {
+    return "No unused Set or PrivateSet import found in Routes.{jsx,tsx}";
   }
-  const [cedarRouterImport] = cedarRouterImportMatch;
-  const removedSetImport = cedarRouterImport.replace(/,*\s*Set,*/, "");
-  const newRoutesContent = routesContent.replace(
-    cedarRouterImport,
-    removedSetImport
-  );
   writeFile(routesPath, newRoutesContent, { overwriteExisting: true });
-  return "Removed Set import in Routes.{jsx,tsx}";
+  return "Removed unused Set and PrivateSet imports in Routes.{jsx,tsx}";
 };
 const removeLayoutImport = ({
   model: name,
   path: scaffoldPath = ""
 }) => {
-  const pluralPascalName = pascalcase(pluralize(name));
-  const pascalScaffoldPath = scaffoldPath === "" ? scaffoldPath : scaffoldPath.split("/").map(pascalcase).join("/") + "/";
-  const layoutName = `${pluralPascalName}Layout`;
-  const importLayout = `import ${pluralPascalName}Layout from 'src/layouts/${pascalScaffoldPath}${layoutName}'`;
+  const { importName, importPath } = getScaffoldLayoutNames(name, scaffoldPath);
   const routesPath = getPaths().web.routes;
   const routesContent = readFile(routesPath).toString();
-  const newRoutesContent = routesContent.replace(
-    new RegExp(`\\s*${importLayout}`),
-    ""
+  const importLayout = new RegExp(
+    `\\s*import ${importName} from (['"])${importPath}\\1;?`
   );
+  const newRoutesContent = routesContent.replace(importLayout, "");
   writeFile(routesPath, newRoutesContent, { overwriteExisting: true });
   return "Removed layout import from Routes.{jsx,tsx}";
 };

package/dist/commands/destroy/sdl/sdlHandler.js

@@ -1,5 +1,6 @@
 import { Listr } from "listr2";
-import { recordTelemetryAttributes, colors as c } from "@cedarjs/cli-helpers";
+import { colors as c } from "@cedarjs/cli-helpers/colors";
+import { recordTelemetryAttributes } from "@cedarjs/cli-helpers/telemetry";
 import { deleteFilesTask } from "../../../lib/index.js";
 import { verifyModelName } from "../../../lib/schemaHelpers.js";
 import { files } from "../../generate/sdl/sdlHandler.js";

package/dist/commands/dev/devHandler.js

@@ -3,8 +3,9 @@ import { createRequire } from "node:module";
 import path from "node:path";
 import { Writable } from "node:stream";
 import concurrently from "concurrently";
-import { recordTelemetryAttributes, colors as c } from "@cedarjs/cli-helpers";
+import { colors as c } from "@cedarjs/cli-helpers/colors";
 import { formatRunBinCommand } from "@cedarjs/cli-helpers/packageManager/display";
+import { recordTelemetryAttributes } from "@cedarjs/cli-helpers/telemetry";
 import { shutdownPort } from "@cedarjs/internal/dist/dev";
 import { generateGqlormArtifacts } from "@cedarjs/internal/dist/generate/gqlormSchema";
 import { getConfig, getConfigPath } from "@cedarjs/project-config";
@@ -256,15 +257,13 @@ const handler = async ({
     });
   } else {
     if (workspace.includes("api")) {
-      const isEsm = rootPackageJson.type === "module";
-      const serverWatchCommand = isEsm ? `cedarjs-api-server-watch` : `cedar-api-server-watch`;
       const cedarConfigPath = getConfigPath();
       jobs.push({
         name: "api",
         command: formatRunBinCommand("nodemon", [
           "--quiet",
           `--watch "${cedarConfigPath}"`,
-          `--exec "${formatRunBinCommand(serverWatchCommand)} --port ${apiAvailablePort} ${getApiDebugFlag(apiDebugPort, apiAvailablePort)} | ${formatRunBinCommand("cedar-log-formatter")}"`
+          `--exec "${formatRunBinCommand("cedar-api-server-watch")} --port ${apiAvailablePort} ${getApiDebugFlag(apiDebugPort, apiAvailablePort)} | ${formatRunBinCommand("cedar-log-formatter")}"`
         ]),
         env: {
           NODE_ENV: "development",

package/dist/commands/dev/packageWatchCommands.js

@@ -1,7 +1,7 @@
 import fs from "node:fs";
 import path from "node:path";
-import { colors as c } from "@cedarjs/cli-helpers";
-import { importStatementPath } from "@cedarjs/project-config";
+import { colors as c } from "@cedarjs/cli-helpers/colors";
+import { getConfig, importStatementPath } from "@cedarjs/project-config";
 import { getPaths } from "../../lib/index.js";
 async function getPackageWatchCommands(packageWorkspaces) {
   const cedarPaths = getPaths();
@@ -17,6 +17,7 @@ async function getPackageWatchCommands(packageWorkspaces) {
     }
     return importStatementPath(workspacePath);
   });
+  const packagesWorkspaceConfig = getConfig().experimental.packagesWorkspace;
   const watchablePackages = [];
   const packagesWithoutWatch = [];
   for (const workspacePath of workspacePaths) {
@@ -29,7 +30,11 @@ async function getPackageWatchCommands(packageWorkspaces) {
     if (packageJson.scripts?.watch) {
       watchablePackages.push(workspacePath);
     } else {
-      packagesWithoutWatch.push(packageName);
+      const packageConfig = packageName && packagesWorkspaceConfig[packageName];
+      const skipWatchWarning = typeof packageConfig === "object" && packageConfig.skipWatchWarning;
+      if (!skipWatchWarning) {
+        packagesWithoutWatch.push(packageName);
+      }
     }
   }
   if (packagesWithoutWatch.length > 0) {

package/dist/commands/dev.js

@@ -1,5 +1,5 @@
 import { terminalLink } from "termi-link";
-import { colors as c } from "@cedarjs/cli-helpers";
+import { colors as c } from "@cedarjs/cli-helpers/colors";
 import { workspaces } from "../lib/project.js";
 import { checkNodeVersion } from "../middleware/checkNodeVersion.js";
 const command = "dev [workspace..]";

package/dist/commands/execHandler.js

@@ -4,7 +4,8 @@ import { context } from "@opentelemetry/api";
 import { suppressTracing } from "@opentelemetry/core";
 import { Listr } from "listr2";
 import { Parser } from "yargs/helpers";
-import { recordTelemetryAttributes, colors as c } from "@cedarjs/cli-helpers";
+import { colors as c } from "@cedarjs/cli-helpers/colors";
+import { recordTelemetryAttributes } from "@cedarjs/cli-helpers/telemetry";
 import { findScripts } from "@cedarjs/internal/dist/files";
 import { runScriptFunction } from "../lib/exec.js";
 import { generatePrismaClient } from "../lib/generatePrismaClient.js";

package/dist/commands/experimental/live-queries/liveQueries.js

@@ -1,4 +1,4 @@
-import { recordTelemetryAttributes } from "@cedarjs/cli-helpers";
+import { recordTelemetryAttributes } from "@cedarjs/cli-helpers/telemetry";
 import { getEpilogue } from "../util.js";
 const command = "setup-live-queries";
 const description = "Setup live query invalidation with Postgres notifications";

package/dist/commands/experimental/live-queries/liveQueriesHandler.js

@@ -1,11 +1,11 @@
 import fs from "node:fs";
 import path from "node:path";
 import { Listr } from "listr2";
+import { colors as c } from "@cedarjs/cli-helpers/colors";
 import {
   addApiPackages,
-  addWebPackages,
-  colors as c
-} from "@cedarjs/cli-helpers";
+  addWebPackages
+} from "@cedarjs/cli-helpers/installHelpers";
 import { formatCedarCommand } from "@cedarjs/cli-helpers/packageManager/display";
 import {
   getConfigPath,

package/dist/commands/experimental/setupInngest.js

@@ -1,4 +1,4 @@
-import { recordTelemetryAttributes } from "@cedarjs/cli-helpers";
+import { recordTelemetryAttributes } from "@cedarjs/cli-helpers/telemetry";
 import { getEpilogue } from "./util.js";
 const command = "setup-inngest";
 const description = "Setup Inngest for background, scheduled, delayed, multi-step, and fan-out jobs";

package/dist/commands/experimental/setupInngestHandler.js

@@ -1,5 +1,5 @@
 import { Listr } from "listr2";
-import { colors as c } from "@cedarjs/cli-helpers";
+import { colors as c } from "@cedarjs/cli-helpers/colors";
 import { runBin } from "@cedarjs/cli-helpers/packageManager/exec";
 import { addRootPackages } from "@cedarjs/cli-helpers/packageManager/packages";
 import { errorTelemetry } from "@cedarjs/telemetry";

package/dist/commands/experimental/setupOpentelemetry.js

@@ -1,4 +1,4 @@
-import { recordTelemetryAttributes } from "@cedarjs/cli-helpers";
+import { recordTelemetryAttributes } from "@cedarjs/cli-helpers/telemetry";
 import { getEpilogue } from "./util.js";
 const command = "setup-opentelemetry";
 const description = "Setup OpenTelemetry within the API side";

package/dist/commands/experimental/setupOpentelemetryHandler.js

@@ -2,7 +2,8 @@ import fs from "node:fs";
 import path from "node:path";
 import { ListrEnquirerPromptAdapter } from "@listr2/prompt-adapter-enquirer";
 import { Listr } from "listr2";
-import { addApiPackages, colors as c } from "@cedarjs/cli-helpers";
+import { colors as c } from "@cedarjs/cli-helpers/colors";
+import { addApiPackages } from "@cedarjs/cli-helpers/installHelpers";
 import { runBin } from "@cedarjs/cli-helpers/packageManager/exec";
 import {
   getConfigPath,

package/dist/commands/experimental/setupReactCompiler.js

@@ -1,4 +1,4 @@
-import { recordTelemetryAttributes } from "@cedarjs/cli-helpers";
+import { recordTelemetryAttributes } from "@cedarjs/cli-helpers/telemetry";
 import { getEpilogue } from "./util.js";
 const command = "setup-react-compiler";
 const description = "Enable the experimental React Compiler";

package/dist/commands/experimental/setupReactCompilerHandler.js

@@ -1,8 +1,8 @@
 import fs from "node:fs";
 import path from "node:path";
 import { Listr } from "listr2";
-import semver from "semver";
-import { colors as c } from "@cedarjs/cli-helpers";
+import { coerce, isGreaterThanOrEqual } from "verkit";
+import { colors as c } from "@cedarjs/cli-helpers/colors";
 import {
   addRootPackages,
   addWorkspacePackages
@@ -39,8 +39,8 @@ const handler = async (options) => {
             )
           );
           const reactVersion = webPkgJson["dependencies"]["react"];
-          const coercedReactVersion = semver.coerce(reactVersion);
-          if (!coercedReactVersion || !semver.gte(coercedReactVersion, "19.0.0")) {
+          const coercedReactVersion = coerce(reactVersion);
+          if (!coercedReactVersion || !isGreaterThanOrEqual(coercedReactVersion, "19.0.0")) {
             throw new Error(
               "You need to be using at least React version 19 to enable the React Compiler"
             );

package/dist/commands/experimental/setupRsc.js

@@ -1,4 +1,4 @@
-import { recordTelemetryAttributes } from "@cedarjs/cli-helpers";
+import { recordTelemetryAttributes } from "@cedarjs/cli-helpers/telemetry";
 import { getEpilogue } from "./util.js";
 const command = "setup-rsc";
 const description = "Enable React Server Components (RSC)";

package/dist/commands/experimental/setupRscHandler.js

@@ -2,7 +2,8 @@ import fs from "node:fs";
 import path from "node:path";
 import execa from "execa";
 import { Listr } from "listr2";
-import { prettify, colors as c } from "@cedarjs/cli-helpers";
+import { colors as c } from "@cedarjs/cli-helpers/colors";
+import { prettify } from "@cedarjs/cli-helpers/fileHelpers";
 import { install } from "@cedarjs/cli-helpers/packageManager";
 import { getConfig, getConfigPath } from "@cedarjs/project-config";
 import { getPackageManager } from "@cedarjs/project-config/packageManager";

package/dist/commands/experimental/setupStreamingSsr.js

@@ -1,4 +1,4 @@
-import { recordTelemetryAttributes } from "@cedarjs/cli-helpers";
+import { recordTelemetryAttributes } from "@cedarjs/cli-helpers/telemetry";
 import { getEpilogue } from "./util.js";
 const command = "setup-streaming-ssr";
 const description = "Enable React Streaming and Server Side Rendering (SSR)";

package/dist/commands/experimental/setupStreamingSsrHandler.js

@@ -2,7 +2,8 @@ import fs from "node:fs";
 import path from "path";
 import { ListrEnquirerPromptAdapter } from "@listr2/prompt-adapter-enquirer";
 import { Listr } from "listr2";
-import { addWebPackages, colors as c } from "@cedarjs/cli-helpers";
+import { colors as c } from "@cedarjs/cli-helpers/colors";
+import { addWebPackages } from "@cedarjs/cli-helpers/installHelpers";
 import { getConfigPath } from "@cedarjs/project-config";
 import { errorTelemetry } from "@cedarjs/telemetry";
 import { getPaths, transformTSToJS, writeFile } from "../../lib/index.js";
@@ -183,7 +184,7 @@ You'll manually need to merge it with your existing entry.client${ext} file.`;
           fs.writeFileSync(pkgJsonPath, JSON.stringify(pkgJson, null, 2));
         }
       },
-      addWebPackages(["@apollo/client-react-streaming@0.10.0"]),
+      addWebPackages(["@apollo/client-react-streaming@0.14.5"]),
       {
         task: () => {
           printTaskEpilogue(command, description, EXPERIMENTAL_TOPIC_ID);

package/dist/commands/generate/cell/cell.js

@@ -22,6 +22,26 @@ const builder = createBuilder({
         default: "",
         description: "Use to enforce a specific query name within the generated cell - must be unique.",
         type: "string"
+      },
+      beforeQuery: {
+        default: false,
+        description: "Include a typed `beforeQuery` stub for configuring the query (e.g. variables, fetch policy).",
+        type: "boolean"
+      },
+      afterQuery: {
+        default: false,
+        description: "Include a typed `afterQuery` stub for sanitizing data returned from the query.",
+        type: "boolean"
+      },
+      isEmpty: {
+        default: false,
+        description: "Include a typed `isEmpty` stub for overriding the default check for the Empty component.",
+        type: "boolean"
+      },
+      fragment: {
+        default: "",
+        description: "Generate a fragment cell (exports FRAGMENT instead of QUERY) that reads its data from a parent Cell, given the GraphQL type it selects from - e.g. --fragment User.",
+        type: "string"
       }
     };
   }

package/dist/commands/generate/cell/cellHandler.js

@@ -26,7 +26,11 @@ const files = async ({
   list = false,
   query,
   stories,
-  tests
+  tests,
+  beforeQuery = false,
+  afterQuery = false,
+  isEmpty = false,
+  fragment = ""
 }) => {
   let cellName = removeGeneratorName(name, "cell");
   let idName = "id";
@@ -35,22 +39,49 @@ const files = async ({
   let model = null;
   let templateNameSuffix = "";
   let typeName = cellName;
-  const shouldGenerateList = (isWordPluralizable(cellName) ? isPlural(cellName) : list) || list;
-  try {
-    model = await getSchema(pascalcase(singularize(cellName)));
-    idName = getIdName(model);
-    idType = getIdType(model);
-    typeName = model.name;
-    mockIdValues = idType === "String" ? mockIdValues.map((value) => `'${value}'`) : mockIdValues;
-  } catch {
-    idType = "Int";
+  if (fragment) {
+    if (list) {
+      throw new Error(
+        "The --list flag cannot be combined with --fragment; fragment cells always render a single item."
+      );
+    }
+    if (beforeQuery) {
+      throw new Error(
+        "The --before-query flag cannot be combined with --fragment; fragment cells never fire a query of their own."
+      );
+    }
+    if (query) {
+      throw new Error(
+        "The --query flag cannot be combined with --fragment; fragment cells don't have an operation name."
+      );
+    }
+  }
+  const shouldGenerateList = !fragment && ((isWordPluralizable(cellName) ? isPlural(cellName) : list) || list);
+  if (!fragment) {
+    try {
+      model = await getSchema(pascalcase(singularize(cellName)));
+      idName = getIdName(model);
+      idType = getIdType(model);
+      typeName = model.name;
+      mockIdValues = idType === "String" ? mockIdValues.map((value) => `'${value}'`) : mockIdValues;
+    } catch {
+      idType = "Int";
+    }
   }
   if (shouldGenerateList) {
     cellName = forcePluralizeWord(cellName);
     templateNameSuffix = "List";
   }
   let operationName = query;
-  if (operationName) {
+  let fragmentName;
+  let fragmentOnType;
+  let fragmentPropName;
+  if (fragment) {
+    const fragmentTypeVariants = nameVariants(fragment);
+    fragmentOnType = fragmentTypeVariants.pascalName;
+    fragmentPropName = fragmentTypeVariants.camelName;
+    fragmentName = `${nameVariants(cellName).pascalName}Cell_${fragmentPropName}`;
+  } else if (operationName) {
     const userSpecifiedOperationNameIsUnique = await operationNameIsUnique(operationName);
     if (!userSpecifiedOperationNameIsUnique) {
       throw new Error(`Specified query name: "${operationName}" is not unique!`);
@@ -67,11 +98,20 @@ const files = async ({
     extension,
     webPathSection: CEDAR_WEB_PATH_NAME,
     generator: "cell",
-    templatePath: `cell${templateNameSuffix}.tsx.template`,
-    templateVars: {
+    templatePath: fragment ? "cellFragment.tsx.template" : `cell${templateNameSuffix}.tsx.template`,
+    templateVars: fragment ? {
+      fragmentName,
+      fragmentOnType,
+      camelName: fragmentPropName,
+      afterQuery,
+      isEmpty
+    } : {
       operationName,
       idName,
-      idType
+      idType,
+      beforeQuery,
+      afterQuery,
+      isEmpty
     }
   });
   const testFile = await templateForComponentFile({
@@ -80,8 +120,8 @@ const files = async ({
     extension: `.test${extension}`,
     webPathSection: CEDAR_WEB_PATH_NAME,
     generator: "cell",
-    templatePath: "test.js.template",
-    templateVars: {
+    templatePath: fragment ? "testFragment.js.template" : "test.js.template",
+    templateVars: fragment ? { camelName: fragmentPropName } : {
       idName: shouldGenerateList ? void 0 : idName,
       mockIdValues: shouldGenerateList ? void 0 : mockIdValues
     }
@@ -92,7 +132,7 @@ const files = async ({
     extension: `.stories${extension}`,
     webPathSection: CEDAR_WEB_PATH_NAME,
     generator: "cell",
-    templatePath: "stories.tsx.template"
+    templatePath: fragment ? "storiesFragment.tsx.template" : "stories.tsx.template"
   });
   const mockFile = await templateForComponentFile({
     name: cellName,
@@ -101,7 +141,12 @@ const files = async ({
     webPathSection: CEDAR_WEB_PATH_NAME,
     generator: "cell",
     templatePath: `mock${templateNameSuffix}.ts.template`,
-    templateVars: {
+    templateVars: fragment ? {
+      idName,
+      mockIdValues,
+      typeName: fragmentOnType,
+      camelName: fragmentPropName
+    } : {
       idName,
       mockIdValues,
       typeName
@@ -122,7 +167,10 @@ const files = async ({
 const handler = createHandler({
   componentName: "cell",
   filesFn: files,
-  includeAdditionalTasks: ({ name: cellName }) => {
+  includeAdditionalTasks: ({
+    name: cellName,
+    fragment
+  }) => {
     return [
       {
         title: `Generating types ...`,
@@ -130,7 +178,7 @@ const handler = createHandler({
           const queryFieldName = nameVariants(
             removeGeneratorName(cellName, "cell")
           ).camelName;
-          const projectHasSdl = await checkProjectForQueryField(queryFieldName);
+          const projectHasSdl = Boolean(fragment) || await checkProjectForQueryField(queryFieldName);
           if (projectHasSdl) {
             const { errors } = await generateTypes();
             for (const { message, error } of errors) {

package/dist/commands/generate/cell/templates/cell.tsx.template

@@ -6,7 +6,9 @@ import type {
 import type {
   CellSuccessProps,
   CellFailureProps,
-  TypedDocumentNode,
+  TypedDocumentNode,<% if (beforeQuery) { %>
+  CellBeforeQueryResult,<% } %><% if (afterQuery || isEmpty) { %>
+  DataObject,<% } %>
 } from '@cedarjs/web'
 
 export const QUERY: TypedDocumentNode<
@@ -19,7 +21,24 @@ export const QUERY: TypedDocumentNode<
     }
   }
 `
-
+<% if (beforeQuery) { %>
+export const beforeQuery = (
+  props: ${operationName}Variables,
+): CellBeforeQueryResult<${operationName}Variables> => {
+  return { variables: props, fetchPolicy: 'cache-and-network' }
+}
+<% } %><% if (isEmpty) { %>
+export const isEmpty = (
+  data: DataObject,
+  { isDataEmpty }: { isDataEmpty: (data: DataObject) => boolean },
+) => {
+  return isDataEmpty(data)
+}
+<% } %><% if (afterQuery) { %>
+export const afterQuery = (data: DataObject): DataObject => {
+  return data
+}
+<% } %>
 export const Loading = () => <div>Loading...</div>
 
 export const Empty = () => <div>Empty</div>