[Bug]: Cell generation does not support the Custom Prisma Id Field that Scaffolding Supports

[dthyresson]

What's not working?

As part of #8264 scaffolds now support custom id fields such as:

model CustomIdField {
  uuid String @id @default(uuid())
  name String
}

model Airplane {
  uuid String @id @default(uuid())
  name String
}

When scaffolding, the UI assets (cells, forms, etc) know that the primary key needs to be uuid.

However, the Cell templates were not updated ...

How do we reproduce the bug?

.. and thus:

yarn rw g cell Airplane

results in

import type {
  FindAirplaneQuery,
  FindAirplaneQueryVariables,
} from 'types/graphql'

import type {
  CellSuccessProps,
  CellFailureProps,
  TypedDocumentNode,
} from '@redwoodjs/web'

export const QUERY: TypedDocumentNode<
  FindAirplaneQuery,
  FindAirplaneQueryVariables
> = gql`
  query FindAirplaneQuery($id: String!) {
    airplane: airplane(id: $id) {
      id
    }
  }

And the id field (and id in the variables) errors due to:

Field "airplane" argument "uuid" of type "String!" is required, but it was not provided.GraphQL: Validation

Similarly, the list (multiple) airplanes cells:

yarn rw g cell airplanes

generates:

export const QUERY: TypedDocumentNode<
  AirplanesQuery,
  AirplanesQueryVariables
> = gql`
  query AirplanesQuery {
    airplanes {
      id
    }
  }
`

and again, the id field needs to be uuid.

The templates and logic need to be updated to use the id field name vs just hardcoding the text "id".

What's your environment? (If it applies)

No response

Are you interested in working on this?

• I'm interested in working on this

Expected

Actually, the React Success component needs an updated as well to use the right id attribute.

import type { AirplanesQuery, AirplanesQueryVariables } from 'types/graphql'

import type {
  CellSuccessProps,
  CellFailureProps,
  TypedDocumentNode,
} from '@redwoodjs/web'

export const QUERY: TypedDocumentNode<
  AirplanesQuery,
  AirplanesQueryVariables
> = gql`
  query AirplanesQuery {
    airplanes {
      uuid
    }
  }
`

export const Loading = () => <div>Loading...</div>

export const Empty = () => <div>Empty</div>

export const Failure = ({ error }: CellFailureProps) => (
  <div style={{ color: 'red' }}>Error: {error?.message}</div>
)

export const Success = ({ airplanes }: CellSuccessProps<AirplanesQuery>) => {
  return (
    <ul>
      {airplanes.map((item) => {
        return <li key={item.uuid}>{JSON.stringify(item)}</li>
      })}
    </ul>
  )
}

The singular cell is:

import type {
  FindAirplaneQuery,
  FindAirplaneQueryVariables,
} from 'types/graphql'

import type {
  CellSuccessProps,
  CellFailureProps,
  TypedDocumentNode,
} from '@redwoodjs/web'

export const QUERY: TypedDocumentNode<
  FindAirplaneQuery,
  FindAirplaneQueryVariables
> = gql`
  query FindAirplaneQuery($id: String!) {
    airplane: airplane(uuid: $id) {
      uuid
    }
  }
`

export const Loading = () => <div>Loading...</div>

export const Empty = () => <div>Empty</div>

export const Failure = ({
  error,
}: CellFailureProps<FindAirplaneQueryVariables>) => (
  <div style={{ color: 'red' }}>Error: {error?.message}</div>
)

export const Success = ({
  airplane,
}: CellSuccessProps<FindAirplaneQuery, FindAirplaneQueryVariables>) => {
  return <div>{JSON.stringify(airplane)}</div>
}

And also the mock files generated need to use the id name, not:

// Define your own mock data here:
export const standard = (/* vars, { ctx, req } */) => ({
  airplane: {
    id: '42', <---- should be uuid
  },
})

and

// Define your own mock data here:
export const standard = (/* vars, { ctx, req } */) => ({
  airplanes: [{ id: '42' }, { id: '43' }, { id: '44' }], <--- also should be uuid
})