Storybook Error When Cell Added to Page Component

Hi all,

I came across an interesting behavior with Cells and Storybook.

If I have a Cell that loads some data with a nested query (Example: Post table with a field relation to a subPost table), and I create some mock data that does not contain the subPosts field, then the Cell component will still load properly in Storybook. If I take that same cell and mock data and add it to a page component though, then Storybook will throw an error on the page component (Cannot render cell: graphQL success but data is null)

I’m not sure if this is a potential bug or expected behavior but I wanted to point it out just in case.

Here’s a test project I put together in case anyone wants to test it out.

Here’s the cell mock that causes the Storybook error on the page component, but works on the cell component:

Thanks!
-Dan

Hi @dcgoodwin2112 Welcome to Redwood! And thanks for taking the time to start this conversation.

I took a quick look at your example repo – at first glance, it seems you might not be handling the longstanding issue with Prisma Relations in your Services. Take a look at that linked document and see if there’s indeed a required step to get the Posts<>subPosts relationship working with your Services.

Related Update with Prisma 2.11

As of Redwood v0.21, which includes Prisma v2.11, it’s most likely this issue will be resolved with the new ability to “Set Foreign Keys Directly”! Check out the section of these release notes by the same name: https://github.com/prisma/prisma/releases

Note: You’d need to allow the Preview feature via the config in your schema.prisma file.

Lastly, no has has taken this new feature for a spin yet. If you do want to dive in, please keep us all in the loop as we’d :heart: to support the effort and document it. This will help the whole community to validate the feature and transition to using it (instead of the terrible workaround). No pressure. But keep us posted if you’d like to dive in.

1 Like

Thanks @thedavid! I spent some more time playing with this one and still think I’m hitting a weird edge case with Storybook and the mockGraphQLQuery function. The nested query is working fine in redwood. It also works in Storybook if my mock response is complete. When passing in a partial mock object in Storybook it works in some places, but not in others. I’m actually surprised the partial mock object isn’t breaking everywhere. This shouldn’t be an actual problem unless a developer tries to be lazy like me and leaves out important data from their mock objects. :smile:

I also got a chance to test out the new preview feature in Prisma and it works great! The scaffolded form just puts in a text field for the child object foreign key, but as long as you pass in a valid id, then it saves just fine. I’m more than happy to help out with testing or documentation around this feature if you guys need a hand!