fix: Support Custom Id Field Names in when generating Cells (#9778)

Co-authored-by: Tobbe Lundberg <tobbe@tlundberg.com>

__fixtures__/test-project/web/src/App.tsx

@@ -1,6 +1,7 @@
 import { FatalErrorBoundary, RedwoodProvider } from '@redwoodjs/web'
 import { RedwoodApolloProvider } from '@redwoodjs/web/apollo'
 
+import possibleTypes from 'src/graphql/possibleTypes'
 import FatalErrorPage from 'src/pages/FatalErrorPage'
 import Routes from 'src/Routes'
 
@@ -13,7 +14,14 @@ const App = () => (
   <FatalErrorBoundary page={FatalErrorPage}>
     <RedwoodProvider titleTemplate="%PageTitle | %AppTitle">
       <AuthProvider>
-        <RedwoodApolloProvider useAuth={useAuth}>
+        <RedwoodApolloProvider
+          useAuth={useAuth}
+          graphQLClientConfig={{
+            cacheConfig: {
+              ...possibleTypes,
+            },
+          }}
+        >
           <Routes />
         </RedwoodApolloProvider>
       </AuthProvider>

__fixtures__/test-project/web/src/graphql/possibleTypes.ts

@@ -0,0 +1,11 @@
+export interface PossibleTypesResultData {
+  possibleTypes: {
+    [key: string]: string[]
+  }
+}
+
+const result: PossibleTypesResultData = {
+  possibleTypes: {},
+}
+
+export default result

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

@@ -52,6 +52,240 @@ export const Success = ({ equipment }) => {
 "
 `;
 
+exports[`Custom Id Field files List cell creates a cell list component with a custom id field 1`] = `
+"export const QUERY = gql\`
+  query CustomIdFieldsQuery {
+    customIdFields {
+      uuid
+    }
+  }
+\`
+
+export const Loading = () => <div>Loading...</div>
+
+export const Empty = () => <div>Empty</div>
+
+export const Failure = ({ error }) => (
+  <div style={{ color: 'red' }}>Error: {error?.message}</div>
+)
+
+export const Success = ({ customIdFields }) => {
+  return (
+    <ul>
+      {customIdFields.map((item) => {
+        return <li key={item.uuid}>{JSON.stringify(item)}</li>
+      })}
+    </ul>
+  )
+}
+"
+`;
+
+exports[`Custom Id Field files List cell creates a cell list mock with a custom id field 1`] = `
+"// Define your own mock data here:
+export const standard = (/* vars, { ctx, req } */) => ({
+  customIdFields: [{ uuid: '42' }, { uuid: '43' }, { uuid: '44' }],
+})
+"
+`;
+
+exports[`Custom Id Field files List cell creates a cell list stories with a custom id field 1`] = `
+"import { Loading, Empty, Failure, Success } from './CustomIdFieldsCell'
+import { standard } from './CustomIdFieldsCell.mock'
+
+const meta = {
+  title: 'Cells/CustomIdFieldsCell',
+  tags: ['autodocs'],
+}
+
+export default meta
+
+export const loading = {
+  render: () => {
+    return Loading ? <Loading /> : <></>
+  },
+}
+
+export const empty = {
+  render: () => {
+    return Empty ? <Empty /> : <></>
+  },
+}
+
+export const failure = {
+  render: (args) => {
+    return Failure ? <Failure error={new Error('Oh no')} {...args} /> : <></>
+  },
+}
+
+export const success = {
+  render: (args) => {
+    return Success ? <Success {...standard()} {...args} /> : <></>
+  },
+}
+"
+`;
+
+exports[`Custom Id Field files List cell creates a cell list test with a custom id field 1`] = `
+"import { render } from '@redwoodjs/testing/web'
+import { Loading, Empty, Failure, Success } from './CustomIdFieldsCell'
+import { standard } from './CustomIdFieldsCell.mock'
+
+// Generated boilerplate tests do not account for all circumstances
+// and can fail without adjustments, e.g. Float and DateTime types.
+//           Please refer to the RedwoodJS Testing Docs:
+//        https://redwoodjs.com/docs/testing#testing-cells
+// https://redwoodjs.com/docs/testing#jest-expect-type-considerations
+
+describe('CustomIdFieldsCell', () => {
+  it('renders Loading successfully', () => {
+    expect(() => {
+      render(<Loading />)
+    }).not.toThrow()
+  })
+
+  it('renders Empty successfully', async () => {
+    expect(() => {
+      render(<Empty />)
+    }).not.toThrow()
+  })
+
+  it('renders Failure successfully', async () => {
+    expect(() => {
+      render(<Failure error={new Error('Oh no')} />)
+    }).not.toThrow()
+  })
+
+  // When you're ready to test the actual output of your component render
+  // you could test that, for example, certain text is present:
+  //
+  // 1. import { screen } from '@redwoodjs/testing/web'
+  // 2. Add test: expect(screen.getByText('Hello, world')).toBeInTheDocument()
+
+  it('renders Success successfully', async () => {
+    expect(() => {
+      render(<Success customIdFields={standard().customIdFields} />)
+    }).not.toThrow()
+  })
+})
+"
+`;
+
+exports[`Custom Id Field files Single cell creates a cell component with a custom id field 1`] = `
+"export const QUERY = gql\`
+  query FindCustomIdFieldQuery($id: String!) {
+    customIdField: customIdField(uuid: $id) {
+      uuid
+    }
+  }
+\`
+
+export const Loading = () => <div>Loading...</div>
+
+export const Empty = () => <div>Empty</div>
+
+export const Failure = ({ error }) => (
+  <div style={{ color: 'red' }}>Error: {error?.message}</div>
+)
+
+export const Success = ({ customIdField }) => {
+  return <div>{JSON.stringify(customIdField)}</div>
+}
+"
+`;
+
+exports[`Custom Id Field files Single cell creates a cell mock with a custom id field 1`] = `
+"// Define your own mock data here:
+export const standard = (/* vars, { ctx, req } */) => ({
+  customIdField: {
+    uuid: '42',
+  },
+})
+"
+`;
+
+exports[`Custom Id Field files Single cell creates a cell stories with a custom id field 1`] = `
+"import { Loading, Empty, Failure, Success } from './CustomIdFieldCell'
+import { standard } from './CustomIdFieldCell.mock'
+
+const meta = {
+  title: 'Cells/CustomIdFieldCell',
+  tags: ['autodocs'],
+}
+
+export default meta
+
+export const loading = {
+  render: () => {
+    return Loading ? <Loading /> : <></>
+  },
+}
+
+export const empty = {
+  render: () => {
+    return Empty ? <Empty /> : <></>
+  },
+}
+
+export const failure = {
+  render: (args) => {
+    return Failure ? <Failure error={new Error('Oh no')} {...args} /> : <></>
+  },
+}
+
+export const success = {
+  render: (args) => {
+    return Success ? <Success {...standard()} {...args} /> : <></>
+  },
+}
+"
+`;
+
+exports[`Custom Id Field files Single cell creates a cell test with a custom id field 1`] = `
+"import { render } from '@redwoodjs/testing/web'
+import { Loading, Empty, Failure, Success } from './CustomIdFieldCell'
+import { standard } from './CustomIdFieldCell.mock'
+
+// Generated boilerplate tests do not account for all circumstances
+// and can fail without adjustments, e.g. Float and DateTime types.
+//           Please refer to the RedwoodJS Testing Docs:
+//        https://redwoodjs.com/docs/testing#testing-cells
+// https://redwoodjs.com/docs/testing#jest-expect-type-considerations
+
+describe('CustomIdFieldCell', () => {
+  it('renders Loading successfully', () => {
+    expect(() => {
+      render(<Loading />)
+    }).not.toThrow()
+  })
+
+  it('renders Empty successfully', async () => {
+    expect(() => {
+      render(<Empty />)
+    }).not.toThrow()
+  })
+
+  it('renders Failure successfully', async () => {
+    expect(() => {
+      render(<Failure error={new Error('Oh no')} />)
+    }).not.toThrow()
+  })
+
+  // When you're ready to test the actual output of your component render
+  // you could test that, for example, certain text is present:
+  //
+  // 1. import { screen } from '@redwoodjs/testing/web'
+  // 2. Add test: expect(screen.getByText('Hello, world')).toBeInTheDocument()
+
+  it('renders Success successfully', async () => {
+    expect(() => {
+      render(<Success customIdField={standard().customIdField} />)
+    }).not.toThrow()
+  })
+})
+"
+`;
+
 exports[`Kebab case words creates a cell component with a kebabCase word name 1`] = `
 "export const QUERY = gql\`
   query FindUserProfileQuery($id: Int!) {

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

@@ -686,3 +686,118 @@ describe('Custom query names', () => {
     )
   })
 })
+
+describe('Custom Id Field files', () => {
+  let customIdFieldFiles
+  let customIdFieldListFiles
+
+  describe('Single cell', () => {
+    beforeAll(async () => {
+      customIdFieldFiles = await cell.files({
+        name: 'CustomIdField',
+        tests: true,
+        stories: true,
+        list: false,
+      })
+    })
+
+    it('returns exactly 4 files', () => {
+      expect(Object.keys(customIdFieldFiles).length).toEqual(4)
+    })
+
+    it('creates a cell component with a custom id field', () => {
+      expect(
+        customIdFieldFiles[
+          path.normalize(
+            '/path/to/project/web/src/components/CustomIdFieldCell/CustomIdFieldCell.jsx'
+          )
+        ]
+      ).toMatchSnapshot()
+    })
+
+    it('creates a cell test with a custom id field', () => {
+      expect(
+        customIdFieldFiles[
+          path.normalize(
+            '/path/to/project/web/src/components/CustomIdFieldCell/CustomIdFieldCell.test.jsx'
+          )
+        ]
+      ).toMatchSnapshot()
+    })
+
+    it('creates a cell stories with a custom id field', () => {
+      expect(
+        customIdFieldFiles[
+          path.normalize(
+            '/path/to/project/web/src/components/CustomIdFieldCell/CustomIdFieldCell.stories.jsx'
+          )
+        ]
+      ).toMatchSnapshot()
+    })
+
+    it('creates a cell mock with a custom id field', () => {
+      expect(
+        customIdFieldFiles[
+          path.normalize(
+            '/path/to/project/web/src/components/CustomIdFieldCell/CustomIdFieldCell.mock.js'
+          )
+        ]
+      ).toMatchSnapshot()
+    })
+  })
+
+  describe('List cell', () => {
+    beforeAll(async () => {
+      customIdFieldListFiles = await cell.files({
+        name: 'CustomIdField',
+        tests: true,
+        stories: true,
+        list: true,
+      })
+    })
+
+    it('returns exactly 4 files', () => {
+      expect(Object.keys(customIdFieldFiles).length).toEqual(4)
+    })
+
+    it('creates a cell list component with a custom id field', () => {
+      expect(
+        customIdFieldListFiles[
+          path.normalize(
+            '/path/to/project/web/src/components/CustomIdFieldsCell/CustomIdFieldsCell.jsx'
+          )
+        ]
+      ).toMatchSnapshot()
+    })
+
+    it('creates a cell list test with a custom id field', () => {
+      expect(
+        customIdFieldListFiles[
+          path.normalize(
+            '/path/to/project/web/src/components/CustomIdFieldsCell/CustomIdFieldsCell.test.jsx'
+          )
+        ]
+      ).toMatchSnapshot()
+    })
+
+    it('creates a cell list stories with a custom id field', () => {
+      expect(
+        customIdFieldListFiles[
+          path.normalize(
+            '/path/to/project/web/src/components/CustomIdFieldsCell/CustomIdFieldsCell.stories.jsx'
+          )
+        ]
+      ).toMatchSnapshot()
+    })
+
+    it('creates a cell list mock with a custom id field', () => {
+      expect(
+        customIdFieldListFiles[
+          path.normalize(
+            '/path/to/project/web/src/components/CustomIdFieldsCell/CustomIdFieldsCell.mock.js'
+          )
+        ]
+      ).toMatchSnapshot()
+    })
+  })
+})