Passing props to Cells

Get Help and Help Others
#1

I have a cell which lists multiple objects

export const QUERY = gql`
  query ObjectListCellQuery {
    objects {
      id
    }
  }
`;

Is there currently a way to say pass a onObjectClicked: () => void callback function to the cell without modifying the QUERY or the beforeQuery hooks which also keeps TypeScript from complaining about unknown intrinsic props?? i.e.

<ObjectListCell onObjectClicked={(obj) => alert(`You clicked object ${obj.id}`)} />
#2

Good evening @zygopleural,

I just stumbled upon the very same issue where I wanted to pass a Component Props to one of my Redwood Cell.

Here’s how I managed it :

  1. I implemented beforeQuery as followed (since beforeQuery's return is your Cell’s variables) :
export const beforeQuery = (props) => {
  // eslint-disable-next-line @typescript-eslint/no-unused-vars
  const { RecordRenderer, ...rest } = props

  return { variables: rest, fetchPolicy: 'cache-and-network' }
}

Note that this comment allow me to ignore the ESLint warning.

  1. Then I tweaked the type of the Success export to include my additional prop :
export const Success = ({
  record,
  RecordRenderer,
}: CellSuccessProps<FIND_RECORD_BY_ID> & {
  RecordRenderer: ({ record }: { record: Partial<Record> }) => JSX.Element
}) => {
  return <RecordRenderer record={record as Partial<Record>} />
}

And finally I could pass my custom Component to my RecordCell !

<RecordCell RecordRenderer={RecordDetail} id={idRecord} />

I hope it helps :slight_smile:

#3

Hi @Francois

Yeah that is basically what we ended up doing, just wondered if there was a nicer way or something in the roadmap to not have to ignore the eslint and typescript warnings :frowning:

1 Like