useSubscription hook not working properly

[brunocrosier]

Hey Adam,

I'm trying to port over the @apollo/react-hooks demo from React to Next.js using your library and came across this..

Here is my CodeSandbox. useQuery and useMutation seem to be working perfectly, but useSubscription will return the value of "data" as undefined (althought "loading" seems to be correct)

Any idea what might be the cause of this?

[adamsoffer]

hmm it seems to be working for me. I saw a "loading" indicator but after 5 seconds or so it resolved. Are you seeing any errors?

[adamsoffer]

The latest news is not rendering server side though if that's what you mean.

[brunocrosier]

Sorry I think my explanation was vague :)

Please check my updated CodeSandbox version again

You should see now that it will initially show a "loading" and then it will error out because "data" is undefined

Here is the functional component in question:

export function LatestNews() {
  const { loading, data } = useSubscription(LATEST_NEWS);
  return (
    <Card className="bg-light">
      <CardBody>
        <CardTitle>
          <h5>Latest News</h5>
        </CardTitle>
        <CardText>{loading ? "Loading..." : data.latestNews.content}</CardText>
      </CardBody>
    </Card>
  );
}

so the useSubscription hook is creating const loading and const data and loading works properly but data returns "undefined"

you can see this in a slightly modified version of my CodeSandbox which just console.logs the value of useSubscription(LATEST_NEWS) (note, here I commented out the component which was causing the error

Here you should see in the console:

useSubscription is:  { loading: true,
  error: undefined,
  data: undefined,
  variables: undefined }

essentially, the problem seems to be that useSubscription returns data: undefined, which is not what we want :)

[brunocrosier]

ignore the above! i realized that i forgot add a websocket link so of course it wouldn't work :)

however, there is nothing in the next-apollo docs about subscriptions - are they supported? if so, what would the setup look like?