Adds option to cell generation for lists of a given model

[dthyresson]

This PR fixes issue #2565

This PR updates:

• cell generator
• adds "list" variants of the cell component and mock templates
• the new list component success renders a ul with items
• the new list mock returns an array of items (just ids)
• the singular template renders a by id query
• the test template is unchanged

⚠️

• Important Scaffold generation is unchanged.
• Important Service generation is unchanged (required for the non-pluralisable names e.g. manyEquipment)

---

Given the model User and normal general model

yarn rw g cell User

cells-test % yarn rw g cell User --force 
yarn run v1.22.10
$ /Users/dthyresson/redwood-tests/cells-test/node_modules/.bin/rw g cell User --force
  ✔ Generating cell files...
    ✔ Successfully wrote file `./web/src/components/UserCell/UserCell.mock.js`
    ✔ Successfully wrote file `./web/src/components/UserCell/UserCell.test.js`
    ✔ Successfully wrote file `./web/src/components/UserCell/UserCell.stories.js`
    ✔ Successfully wrote file `./web/src/components/UserCell/UserCell.js`
✨  Done in 3.26s.

Generates:

export const QUERY = gql`
  query FindUser($id: Int!) {
    user: user(id: $id) {
      id
    }
  }
`
.
.

And the mock:

// Define your own mock data here:
export const standard = (/* vars, { ctx, req } */) => ({
  ${camelName}: {
    id: 42
    }
  })

Given the model User and list option, or pluralising users

yarn rw g cell User --list

or just

yarn rw g cell Users

cells-test % yarn rw g cell User --force --list
yarn run v1.22.10
$ /Users/dthyresson/redwood-tests/cells-test/node_modules/.bin/rw g cell User --force --list
  ✔ Generating cell files...
    ✔ Successfully wrote file `./web/src/components/UsersCell/UsersCell.mock.js`
    ✔ Successfully wrote file `./web/src/components/UsersCell/UsersCell.test.js`
    ✔ Successfully wrote file `./web/src/components/UsersCell/UsersCell.stories.js`
    ✔ Successfully wrote file `./web/src/components/UsersCell/UsersCell.js`
✨  Done in 4.14s.

export const QUERY = gql`
  query UsersQuery_2 {
    users {
      id
    }
  }
`
.
.
.
export const Success = ({ users }) => {
  return (
    <ul>
      {users.map((item) => {
        return (
          <li key={item.id}>
            <div>{JSON.stringify(item)}</div>
          </li>
        )
      })}
    </ul>
  )
}

And the mock:

// Define your own mock data here:
export const standard = (/* vars, { ctx, req } */) => ({
  users: [{ id: 42 }, { id: 43 }, { id: 44 }],
})

Note: Seeing why the unique Operation name is UsersQuery_2 -- it may think that query already exists.

---

Detecting plurals

When we can detect that the word passed is in plural, we generate list cells.

e.g.

yarrn rw g cell members

Will generate a query for a list of members

---

Handling difficult words

When we can't detect whether the passed in word is plural or not, we assume its singular.

e.g.

yarn rw g cell equipment

Will generate a query for FindEquipment (by id)

but

yarn rw g cell equipment --list

Will generate a query for a list of equipment

[dthyresson]

I got to green on tests, including destroy cell but when running in an actual RW project, for some reason I cannot figure out, the destroy was not considering tests and stories so the ModelCell directory was not empty so the deletion did not complete.

Thus also was unable to test the "list variant" for a destroy just using the name -- I did not add the list option to destroy.

  ✔ Generating cell files...
    ✔ Successfully wrote file `./web/src/components/UserCell/UserCell.mock.js`
    ✔ Successfully wrote file `./web/src/components/UserCell/UserCell.test.js`
    ✔ Successfully wrote file `./web/src/components/UserCell/UserCell.stories.js`
    ✔ Successfully wrote file `./web/src/components/UserCell/UserCell.js`
✨  Done in 5.00s.
cells-test % yarn rw destroy cell User  
yarn run v1.22.10
$ /Users/dthyresson/redwood-tests/cells-test/node_modules/.bin/rw destroy cell User
  ✔ Destroying cell files...
    ✔ Destroying `./web/src/components/UserCell/UserCell`...
    ✔ Cleaning up empty directories...
      ↓ Removing empty `./web/src/components/UserCell`... [skipped]
        → Not empty
✨  Done in 3.46s.

Note: @thedavidprice It might be due to #1814 and just was not noticed yet?

I will test tomorrow with the canary release to see if that's the case -- and #1814 introduced this issue and not my changes.

[dthyresson]

Note I don't think these changes broke destroy as can see that page has same issue:

cells-test % yarn rw g page User       
yarn run v1.22.10
$ /Users/dthyresson/redwood-tests/cells-test/node_modules/.bin/rw g page User
  ✔ Generating page files...
    ✔ Successfully wrote file `./web/src/pages/UserPage/UserPage.stories.js`
    ✔ Successfully wrote file `./web/src/pages/UserPage/UserPage.test.js`
    ✔ Successfully wrote file `./web/src/pages/UserPage/UserPage.js`
  ✔ Updating routes file...
✨  Done in 3.76s.
cells-test % yarn rw destroy page User 
yarn run v1.22.10
$ /Users/dthyresson/redwood-tests/cells-test/node_modules/.bin/rw destroy page User
  ✔ Destroying page files...
    ✔ Destroying `./web/src/pages/UserPage/UserPage`...
    ✔ Cleaning up empty directories...
      ↓ Removing empty `./web/src/pages/UserPage`... [skipped]
        → Not empty
  ✔ Cleaning up routes file...
✨  Done in 3.60s.

And I don't think the destroy tests catch this since they say - get me the generated files and delete them ... and they do but the list of generated files in the test is not the same as when you defacto generate with test, stories, mocks etc.

[dthyresson]

Note pretty, but needed for the destroy tests because for some reason they could never find the query engine binary.

[Tobbe]

Thanks for the very detailed PR description 👍

Not sure I understand this correctly, but is it true that in yarn rw g cell User --force --list Users the first arg you give to cell (User in this case) isn't used at all and doesn't have any meaning anymore?

So yarn rw g cell User --force --list Users would generate the exact same output/files as yarn rw g cell Banana --force --list Users? In that case this doesn't seem very intuitive to me.

I haven't had much luck with my naming suggestions either so far, but that doesn't mean I'll stop trying 😅
So, a few brainstorming ideas

yarn rw g listcell people
yarn rw g manycell people
yarn rw g cell people --list
yarn rw g cell people --many
yarn rw g cell many people
yarn rw g cell list people

For the last two, special care needs to be taken to make sure yarn rw g cell many is still a valid command to generate a regular cell for the model many

[dthyresson]

So yarn rw g cell User --force --list Users would generate the exact same output/files as yarn rw g cell Banana --force --list Users?

Yes, you are correct.

FYI, you don't need the --force I pasted that in just because I was recreating the User cell over and over.

So,

yarn rw g cell User --list Users

is the current use.

As I noted in a comment, I'm not fully taken with the naming either my favorite currently alternative is:

yarn rw g cell person --useQuery people

or

yarn rw g cell user --useQuery users

Again, the main issue is that prior to this PR, the cell generator when told to make a User cell (ie singular) actually

yarn rw g cell user

generates a cell with GQL note the user but that actual is a single user, but it is missing the id to find that user.

export const QUERY = gql`
  query UserQuery {
    user {
      id
    }
  }
`

for the user service and query but it looks more like ie many users.

export const users = () => {
  return db.user.findMany()
}

and is wrong.

And that doesn't make sense either.

If your UserCell shows may users ... what do you name your one singular User cell? TheUserCell? OneUserCell? And that won't match the:

export const user = ({ id }) => {
  return db.user.findUnique({
    where: { id },
  })
}

that it needs.

So, this PR sorts that out and maybe --useQuery is more intuitive since we want the User model cell to be using the users query.

The other approach would be to:

• not use the --list option
• get the name
• see if it already pluralized
• if so, then do the list logic

That might be more friendly .... and then --useQuery could override the name to support person -> people.

[Tobbe]

yarn rw g cell User --list Users

yarn rw g cell person --useQuery people

yarn rw g cell user --useQuery users

In those three, I just find it weird that the first argument after cell isn't used for anything.
Why not just do them like this?

yarn rw g cell Users --list

yarn rw g cell people --useQuery

yarn rw g cell users --useQuery

(Personally I get confused by useQuery because it sounds too much like a React hook)

Or, as I also proposed above, which I think reads better:

yarn rw g cell list people

or

yarn rw g cell many people

[dthyresson]

, I just find it weird that the first argument after cell isn't used for anything.

It looks up the model -- or rather it references/matches the Model in your schema.

[dac09]

Lets pair on this DT when you're back on - have some ideas. Thank you for helping me out!

[dthyresson]

yarn rw g cell list people

I think this would be very difficult to implement due to the way generators consider positional vs optional params -- but maybe it could work.

[dac09]

Could I get an approval? We paired on this technically, so I'm giving my implicit approval :D

[jtoar]

The other approach would be to:

• not use the --list option
• get the name see if it already pluralized if so,
• then do the list logic

That might be more friendly .... and then --useQuery could override the name to support person -> people.

That sounds a lot more straightforward; the useQuery option (which we could just name query?) would also close this issue that way: #343.

[jtoar]

@dac09 I feel like the DX around this hasn't been nailed down yet? But if we can discuss that later then I can give approval; feels like we need some more input from @mojombo and/or @cannikin on the naming of things especially.

But this is definitely an improvement and the new templates are great; the ones before were definitely not super intuitive.

[dac09]

That sounds a lot more straightforward; the useQuery option (which we could just name query?) would also close this issue that way: #343.

While thats still valid, it doesn't solve our list vs findUnique problem. i.e. when I generate a cell for equipment, how do you know if i meant cell for an equipment by Id or a cell to get a list of all equipment.

Detecting plural, like in the current solution, does!

[jtoar]

@dac09 Totally; and more than ok with the flag in that case, but if things can be pluralized, can the flag be skipped? I.e. the user/users case, will things just work since user can be pluralized?

[dac09]

@dac09 Totally; and more than ok with the flag in that case, but if things can be pluralized, can the flag be skipped? I.e. the user/users case, will things just work since user can be pluralized?

yep, if we can detect that you passed in plural, it will just work. You only really need to pass the flag in if:
a) You don't want to type the s for some reason i.e. yarn rw g cell user --list is equivalent to yarn rw g cell users
b) We can't detect pluralisation e.g. pokemon yarn rw g pokemon --list

[thedavidprice]

Woah, way to go @dthyresson 🚀

Curious where things are at with Destroy cleaning up tests, stories, and mocks. If you remember, please update at the next meeting (if applicable).