How to access props in Empty Cell

Get Help and Help Others
1

In my application, I have a cell that shows a list of units belonging to a particular society.

This cell is configured to receive a parameter $societyId.

If the list of units is empty, I want to provide a link that directs the user to a form for creating a new unit. However, this redirection requires the $societyId as a parameter.

How can I access to the $societyId in this context ?

export const QUERY = gql`
  query UnitQuery($societyId: ID!) {
    units(societyId: $societyId) {
      id
      name
      address
    }
  }
`

export const Empty = () => {
  return (
    <div className="mx-auto flex max-w-md flex-col items-center gap-4 text-center text-lg">
      <span className="font-bold">You don't have any units yet</span>
      <Link
        className="btn btn-primary btn-lg w-fit"
        to={routes.createUnit({ societyId })} // FIXME: societyId is not accessible here
      >
        Create my first unit
      </Link>
    </div>
  )
}
2

Hi @Koala-gentil have you looked at the beforeQuery hook in cells: Cells | RedwoodJS Docs

By default, beforeQuery gives any props passed from the parent component to QUERY so that they’re available as variables for it.

I’d try to have a component level variable for societyId that gets set by the props (say from the parent page or page component that uses the cell). Then in the empty state, use that as the route parameter.

Also, if you ever need to customize what “empty” means, please see: Cells | RedwoodJS Docs

3

In fact, the variables are passed to the Empty function, but this is not explained in the documentation. I can simply do :

import type { UnitsQuery, UnitsQueryVariables } from 'types/graphql';

export const Empty = ({ societyId }: UnitsQueryVariables) => {
   // ...
}

// Same for Success :
type SuccessProps = CellSuccessProps<UnitsQuery> & UnitsQueryVariables

export const Success = ({ societyId, units }: SuccessProps) => {
   // ...
}
1 Like
4

Ah, yes. Now that I look more closely at what’s passed when creating the cell: redwood/packages/web/src/components/cell/createCell.tsx at 57c5eca1a15b2cbbc2c600eaf6d8167983f590a3 · redwoodjs/redwood · GitHub

Those properties would be there.

Any interest in a PR to update those docs to make this clearer for others?

Any edits to redwood/docs/docs/cells.md at main · redwoodjs/redwood · GitHub are much appreciated!

1 Like
5

Yes, I’m interested, thanks for the opportunity. I’ll look into it this week.

1 Like