React-apollo: Invalid prop `children` of type `array` supplied to `Subscription`, expected `function`

[YannisMarios]

Hello I get the following error:

"Invalid prop children of type array supplied to Subscription, expected function"

My Subscription:

const reservationSavedSub = gql`
    subscription reservationSaved {
        reservationSaved {
            id
            index
            refNo
        }
    }
`;

and in my render() method:

return (
<Subscription
    subscription={reservationSavedSub}>
    {({ data: { reservationSaved }, loading, error}) => (
        <h4>Reservation Saved: {!loading && reservationSaved.refNo}</h4>
    )};
</Subscription>);

I followed this: https://www.apollographql.com/docs/react/advanced/subscriptions.html

I am using react-apollo 2.1.4

What am I doing wrong?

Thank you.

[YannisMarios]

This works, it is not correct and it is ugly:

<Subscription
    subscription={reservationSavedSub}
    children=
        {({data, loading, error}) => {

           if(!data) {
            return <div>Loading</div>
           }
           console.log(data.reservationSaved.refNo)
           return <div>{data.reservationSaved.refNo}</div>
        }}>
</Subscription>

Why this works? This initially gives data = loading = errors = variables = undefined upon render.

only when a mutation (reservation save which kicks reservationSaved subscription) takes place data, loading take values;

Please help ASAP.

[email protected]

Thanks

[quentin-]

Hello,

You are passing an array in your first code snippet, try removing the extra ;

<Subscription subscription={reservationSavedSub}>
  {() => {}};
</Subscription>

The above JSX is transpiled into

React.createElement(
  Subscription,
  { subscription: reservationSavedSub },
  [() => {}, ';'] // <- array of children
)

[YannisMarios]

Yes it worked. How unthoughtful of me. Thank you quentin-.

[rosskevin]

Closing - housekeeping