${useClientDirective}import type { Find${singularPascalName}By${pascalIdName}, Find${singularPascalName}By${pascalIdName}Variables } from 'types/graphql'

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

import ${singularPascalName} from '${importComponentName}'

export const QUERY: TypedDocumentNode<
   Find${singularPascalName}By${pascalIdName},
   Find${singularPascalName}By${pascalIdName}Variables
> = gql`
  query Find${singularPascalName}By${pascalIdName}($${idName}: ${idType}!) {
    ${singularCamelName}: ${singularCamelName}(${idName}: $${idName}) {<% columns.forEach(column => { %>
      <%= column.name %><% }) %>
    }
  }
`

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

export const Empty = () => <div>${singularPascalName} not found</div>

export const Failure = ({ error }: CellFailureProps<Find${singularPascalName}By${pascalIdName}Variables>) => (
  <div className="rw-cell-error">{error?.message}</div>
)

export const Success = ({ ${singularCamelName} }: CellSuccessProps<Find${singularPascalName}By${pascalIdName}, Find${singularPascalName}By${pascalIdName}Variables>) => {
  return <${singularPascalName} ${singularCamelName}={${singularCamelName}} />
}