I had a long battle with this error on my storybook.
Cannot render cell; GraphQL success but `data` is null
This happened in one my Page component calling a Cell component, with some-what developed mock data. Funny thing was the story for the Cell component was okay. It only triggered error when the page component rendered the cell component.
It was weird because the standard
function in the mock file was called properly, but the Success
component never got the data. Somehow it turned undefined
during the delivery.
I looked all over, re-reading docs, tutorials, documents in msw, etc. I even tried versioning up and down @redwood – the project initially started at 0.24, and climbed up along the way. I was in 0.31.0 when I start tackling the issue, and tried upgrading to 0.31.2, which none actually helped.
So I finally launched a fresh project, and started adding console.logs and breakpoints in every possible places, and compared the differences.
The voyage started from the cell component, passed through @redwoodjs/createCell
, and finally stopped at @apollo/client
. It really had nothing to do with the msw library.
The problem was simple: MissingFieldError
. I just hadn’t provide sufficient fields in my mock data!
While caching in apollo deals with partial results, it figures out what fields are currently missing and keeps the result-so-far into cache, and mark it as not ready for data yet. So even though there are no more queries executing, apollo won’t pass down the data, assuming there are something more going on.
The problem was that during the long-cycle of development, fields come and go, and I haven’t checked on every stories during the process. If I had confirmed each stories upon every migration, I would have found it sooner… but hey, sometimes there are much more busier things to do. And I now find that it comes with a price.
One thing interesting is that stories for cell components doesn’t seem to care, and do not throw any errors. As it renders each of the internal components in the cell, it does not seem to execute the graphql query. This got me lost in the wrong place for a while.
So while this is 100% user fault – that would be me – I feel that it’s so easy for someone else to get tripped over in the same spot – again, that could also be me. Slipping a field in mock data is such an easy mistake to make, and sadly the error messages does not give immediate understanding of the phenomena…