Unhandled GraphQL subscription error Error: GraphQL error: Cannot return null for non-nullable field Subscription.teamCreated

[jakec-dev]

trafficstars

I'm pulling my hair out with this issue...

I'm using this component:

<ListAllTeamsData
    data={data}
    subscribeToMoreTeams={() => {
        subscribeToMore({
            document: LIST_ALL_TEAMS_SUBSCRIPTION,
            updateQuery: (previousResult, { subscriptionData }) => {
                console.log(previousResult, subscriptionData)
                if (!subscriptionData.data) {
                    return previousResult
                }

                const { teamCreated } = subscriptionData.data

                return {
                    ...previousResult,
                    teams: [
                        ...previousResult.teams,
                        teamCreated.team
                    ],
                }
            },
        })
    }}
/>

And the scema:

export const LIST_ALL_TEAMS_SUBSCRIPTION = gql`
    subscription {
        teamCreated {
            team {
                name
                id
                status
                mobile
            }
        }
    }
`

It works fine when I run the subscription in the GraphQL playground, but I get the error in the app. I have no idea why. Any help? It won't even hit the console.log so there seems to be something wrong with 'document: LIST_ALL_TEAMS_SUBSCRIPTION', but from what I can tell it's all fine.

[jakec-dev]

So the solution was simple. I just changed the server schema so that the return value from the subscription isn't required.

E.g. from https://github.com/the-road-to-graphql/fullstack-apollo-express-postgresql-boilerplate/blob/master/src/schema/message.js

- line 32: messageCreated: MessageCreated!
+ line 32: messageCreated: MessageCreated

OK to close. Thanks.

[rwieruch]

How did you come to this conclusion? Didn't know that the return value shouldn't be required. Do you think it's something Apollo specific?

[jakec-dev]

I'm still confused about it. Like I said, the schema runs fine in graphql playground so I shouldn't have had to adjust the server schema - it must be an issue on the client side. Yet it's the exact same client-side schema being used so it should be working.

I'm using React hooks so it may have something to do with the useEffect hook vs componentDidMount (where props.subscribeToMoreTeams() is called). That's the only other thing I can think of.

[rwieruch]

Let's keep the issue open in case someone else runs into it. Would be curios what's the cause of this, so maybe someone has the answer or we stumble upon the solution eventually :) Thanks for your time! 👍

[rwieruch]

Anyone who runs into this issue, please leave a comment. Otherwise I will close it the next time I come around here :)