Reuse cells in multiple components

Get Help and Help Others Show & Tell
1

Hi all,

Just getting started with Redwood and enjoying it so far! I’m currently trying to create a form which uses data from the db to populate a select field - “category”. I’ve already scaffolded a categories page etc. and therefore have a categories cell for that (which renders the list view on success).

I was wondering whether there was any way to reuse this cell, or if it’s best to create a new one to render the select field (even though it will be getting the same data), or even if there’s a better way.

Thanks!

2

If you’re using multiple components in the same cell, that’s not an issue. You can have many components in that cell that is getting data passed down from the cell query.

3

Thanks @Cromzinc, although I wouldn’t want both the categories list component and select field component rendered at the same time. Are you suggesting I use props or similar to conditionally render the desired component?

Currently I’ve gone for the second option of creating a separate cell for the select field. Seems a bit of duplication but perhaps not a huge problem…

4

You could extract the gql query and reuse/import that in your CategoriesCell that renders the list view and select list (if you want).

But, I suggest having a separate cell CategeoriesSelectList that fetches and renders the select list in the Success component.

1 Like
5

If I may expand this example
if I wanted to fetch multiple objects in the graphQl query and create a cell to do this i.e.

When generating a cell i.e. BoardOrganizationCell
perhaps the graphql looks similar to

export const QUERY = gql`
  query FindBoardOrganizationQuery(
    $orgRouteName: String!
    $boardRouteName: String!
  ) {
    board: board(routeName: $boardRouteName) {
      routeName
    }
    organization: organization(routeName: $orgRouteName) {
      routeName
    }
  }
`

in the CLI we’ll get

↓ Generating types ... [skipped]
    → Skipping type generation: no SDL defined for "BoardOrganization". To generate types, run 'yarn rw g sdl BoardOrganization'.

And so the type definition generated is broken

import type {
  FindBoardOrganizationQuery,
  FindBoardOrganizationQueryVariables,
} from 'types/graphql'

What is the right way to deal with this?