Storybook: if mock data structure does not match QUERY exactly, wrong error is thrown

[cannikin]

Update: https://github.com/redwoodjs/redwood/issues/1380#issuecomment-990482233

If you have a QUERY in a cell like:

export const QUERY = gql`
  query BlogPostsQuery {
    posts {
      id
      title
      body
      createdAt
    }
  }
`

But in the associated story mock, the return data is missing one or more fields:

export const standard = (/* vars, { ctx, req } */) => ({
  posts: [
    {
      id: 1,
      title: 'First post',
      body: 'Neutra tacos hot chicken prism raw denim...',
    },
  ]
})

(createdAt is missing) you'll get a weird error in the story that data is missing completely:

This literal error is coming from withCell (which is thrown when data is indeed null) but it appears that something we're doing somewhere is swallowing the real error and we're left with this.

[simoncrypta]

I have the same error when I call a cell with a QUERY by id like

    device(id: $id) {
      id
   }

with a .stories.js file like

export const generated = () => {
  return <AppointmentPage id="8b9abbf5-bf94-4486-a32a-533de2235e6c" />
}

I'm not sure if is related, but seem like the real error is swallowed the same!

[peterp]

I've been thinking about this, and I think we could wrap the withCell hook in a custom error boundary (during development) that provides a way better error experience.

[thedavidprice]

@peterp should we put this in the queue for a future Sprint? Or do you want to sit on it for a bit more?

[peterp]

I think we should add it to the queue - it would make dev/ testing/ storybook so much nicer.

[jtoar]

While I don't see this issue happening anymore, the idea of wrapping a Cell in a dev-friendlier error boundary is still worthwhile, so I'll leave this issue open but remove it's bug/v1 status.