Give a Cell's query an operation name

babel.config.js

@@ -37,7 +37,7 @@ module.exports = {
     ],
     /**
      * NOTE
-     * Experimental decorators are used in `@redwoodjs/project-model`.
+     * Experimental decorators are used in `@redwoodjs/structure`.
      * https://github.com/tc39/proposal-decorators
      **/
     ['@babel/plugin-proposal-decorators', { legacy: true }],

packages/cli/src/commands/destroy/cell/__tests__/cell.test.js

@@ -7,6 +7,14 @@ jest.mock('src/lib', () => {
   }
 })
 
+jest.mock('@redwoodjs/structure', () => {
+  return {
+    getProject: () => ({
+      cells: [{ queryOperationName: undefined }],
+    }),
+  }
+})
+
 import fs from 'fs'
 
 import 'src/lib/test'

packages/cli/src/commands/generate/cell/__tests__/cell.test.js

@@ -3,6 +3,14 @@ import path from 'path'
 
 import { loadGeneratorFixture } from 'src/lib/test'
 
+jest.mock('@redwoodjs/structure', () => {
+  return {
+    getProject: () => ({
+      cells: [{ queryOperationName: undefined }],
+    }),
+  }
+})
+
 import * as cell from '../cell'
 
 let singleWordFiles, multiWordFiles

packages/cli/src/commands/generate/cell/__tests__/fixtures/multiWordCell.js

@@ -1,5 +1,5 @@
 export const QUERY = gql`
-  query {
+  query UserProfileQuery {
     userProfile {
       id
     }

packages/cli/src/commands/generate/cell/__tests__/fixtures/singleWordCell.js

@@ -1,5 +1,5 @@
 export const QUERY = gql`
-  query {
+  query UserQuery {
     user {
       id
     }

packages/cli/src/commands/generate/cell/cell.js

@@ -1,3 +1,5 @@
+import { getProject } from '@redwoodjs/structure'
+
 import {
   templateForComponentFile,
   createYargsForComponentGeneration,
@@ -6,13 +8,35 @@ import {
 const COMPONENT_SUFFIX = 'Cell'
 const REDWOOD_WEB_PATH_NAME = 'components'
 
+const getCellOperationNames = () => {
+  return getProject()
+    .cells.map((x) => {
+      return x.queryOperationName
+    })
+    .filter(Boolean)
+}
+
+const uniqueOperationName = (name, index = 1) => {
+  let operationName = index <= 1 ? `${name}Query` : `${name}Query_${index}`
+  if (!getCellOperationNames().includes(operationName)) {
+    return operationName
+  }
+  return uniqueOperationName(name, index + 1)
+}
+
 export const files = ({ name }) => {
+  // Create a unique operation name.
+  const operationName = uniqueOperationName(name)
+
   const cellFile = templateForComponentFile({
     name,
     suffix: COMPONENT_SUFFIX,
     webPathSection: REDWOOD_WEB_PATH_NAME,
     generator: 'cell',
     templatePath: 'cell.js.template',
+    templateVars: {
+      operationName,
+    },
   })
   const testFile = templateForComponentFile({
     name,

packages/cli/src/commands/generate/cell/templates/cell.js.template

@@ -1,5 +1,5 @@
 export const QUERY = gql`
-  query {
+  query ${operationName} {
     ${camelName} {
       id
     }

packages/cli/src/commands/generate/scaffold/__tests__/scaffold.test.js

@@ -7,7 +7,7 @@ import { getDefaultArgs } from 'src/lib'
 import { yargsDefaults as defaults } from '../../../generate'
 import * as scaffold from '../scaffold'
 
-describe('in javascript (defualt) mode', () => {
+describe('in javascript (default) mode', () => {
   let files
 
   beforeAll(async () => {

packages/cli/tsconfig.json

@@ -0,0 +1,14 @@
+{
+  "extends": "../../tsconfig.compilerOption.json",
+  "compilerOptions": {
+    "tsBuildInfoFile": "dist/tsconfig.tsbuildinfo",
+    "baseUrl": ".",
+    "rootDir": "src",
+    "outDir": "dist"
+  },
+  "include": ["src"],
+  "references": [
+    { "path": "../internal" },
+    { "path": "../structure" },
+  ]
+}

tsconfig.json

@@ -6,7 +6,7 @@
     { "path": "packages/internal" },
     { "path": "packages/auth" },
     { "path": "packages/testing" },
-    { "path": "packages/project-model" }
+    { "path": "packages/structure" }
   ],
   "files": []
 }