redwood: Dealing "Cannot render cell; GraphQL success but `data` is null" errors

From the discussion: Dealing with “GraphQL success but data is null” in storybook

I get to face this error message when mock data is somehow not aligned with the query:

Cannot render cell; GraphQL success but `data` is null

image

This is user error, but I think it will be better if there is a way to reveal what is going on, as it is quite difficult to figure out the cause only with the message.

About this issue

  • Original URL
  • State: closed
  • Created 3 years ago
  • Reactions: 6
  • Comments: 37 (25 by maintainers)

Most upvoted comments

I also had this issue. Rather nasty bug - you must include id in your query.

// OK
export const QUERY = gql`
  query FindTreasureOpeningQuery($id: String!) {
    treasure(id: $id) {
      id
      opening
    }
  }
`
// Causes data is null error
export const QUERY = gql`
  query FindTreasureOpeningQuery($id: String!) {
    treasure(id: $id) {
      opening
    }
  }
`

@noire-munich nope - I absolutely agree that they shouldn’t be undefined, and this is definitely a bug - it just wasn’t clear to me what the root cause is.

My question was trying to establish that.

@jtoar can we figure this out?

I’ve actually experienced this too, and I wrote the code. I think @dac09 has a valid point that this can be fixed with types, we’re very close to getting our Cell’s QUERY types.

But, I’m wondering if we shouldn’t double down and improve the errors at run-time? I can imagine a scenario where you change the query, but don’t update the mock, and then a few weeks later attempting to run Storybook and you’re unable to determine what the error actually means.

@thedavidprice I believe so; it’s still probably worth improving the error message and setting the verbosity of the Apollo logs to debug in case this happens again. We could close this out and either @callingmedic911 or I could follow up with a PR implementing those two things

This might be a good chance to try out Replay to capture the problem and send it to us! https://www.replay.io/

Summary: (if we need to come back here, hopefully never 😆)

For the actual response (not from the storybook), it’s most likely a bug that is fixed upstream and therefore in RedwoodJS v0.38.0: https://github.com/apollographql/apollo-client/issues/8370. Relevant issue: https://github.com/apollographql/apollo-client/issues/8063

Other possible cases this may happen is if there’s a difference in expected query fields and the response. response could be from:

  • Mocked (For example from Storybook): Probably some missing field in mock data?
  • Cached: If the fetchPolicy is set to cache-only and cache is incomplete/missing, then this could happen.
  • Actual response from the server: Highly unlikely but if the server fails to produce a GraphQL spec valid response.

@jtoar sound like this has been resolved via Apollo Client 3.4, correct?

@noire-munich dang sorry that didn’t work—and thanks for the info, I’ll try nesting the Cells and nesting the payload. Superficially, the nested payload reminds me of this issue: https://github.com/redwoodjs/redwood/issues/2005. That wasn’t causing anything to error, just wanted you to know that there’s a discussion around routing a nested payload to Empty.

I’ll try reproducing this again!

@peterp on it now, @noire-munich I’ll try to reproduce with your example and ask for more info if needed!

If it helps, I got the feeling it happens when I add some of the fields in the query in some part and didn’t update other parts (like the mock for the story). I figured that was the reason apollo was complaining for – graphql query has succeeded, but insufficient data.