Cannot query field "node" on type "Link".

[priley86]

Getting the following subscription errors in console after running through this guide:

ObservableQuery.js:215 Unhandled GraphQL subscription error Error: GraphQL error: Cannot query field "node" on type "Link".
    at new t (ApolloError.js:37)
    at QueryManager.js:611
    at Array.forEach (<anonymous>)
    at Object.next (QueryManager.js:609)
    at Object.handler (client.js:144)
    at e.processReceivedData (client.js:511)
    at WebSocket.<anonymous> (client.js:465)
error @ ObservableQuery.js:215
ObservableQuery.js:215 Unhandled GraphQL subscription error Error: GraphQL error: Cannot query field "node" on type "Vote".
    at new t (ApolloError.js:37)
    at QueryManager.js:611
    at Array.forEach (<anonymous>)
    at Object.next (QueryManager.js:609)
    at Object.handler (client.js:144)
    at e.processReceivedData (client.js:511)
    at WebSocket.<anonymous> (client.js:465)

Everything else in the app seems to work fine. Prisma and Graphql running on a node10-alpine image. No issues hitting the Prisma/Graphql playgrounds.

[sschottler]

Yes, subscriptions don't currently work for the react-apollo guide. The backend node (graphql-js) tutorial/code is out of sync with the frontend (react-apollo) tutorial/code. I went through both guides yesterday and had the same problem. The issue appears to be due to a change to the Subscription.js resolver for the backend tutorials 20 days ago:

howtographql/graphql-js@d02a632#diff-715d58f925a8194a35799e705bd4837f

node() was added to the end of the expressions, and that breaks the frontend subscription gql statements. The fix is to remove references to node in 3 places in LinkList.js:

1. remove node reference in NEW_LINKS_SUBSCRIPTION and move child field select up a level
2. remove node reference in NEW_VOTES_SUBSCRIPTION and move child field select up a level
3. remove node reference in updateQuery method so:

const newLink = subscriptionData.data.newLink.node

should just be:

const newLink = subscriptionData.data.newLink

Here is my working LinkList component with all these changes made:

https://github.com/sschottler/hackernews-graphql-react/blob/master/frontend/src/components/LinkList.js

If this is the preferred way to fix this, I can submit pull requests for the react-apollo repo and the two tutorial .md files that incorrectly reference node:

https://www.howtographql.com/graphql-js/7-subscriptions/

subscription { newLink { node { id url description postedBy { id name email } } } }

should be

subscription { newLink { id url description postedBy { id name email } } }

https://www.howtographql.com/react-apollo/8-subscriptions/

Apply changes to LinkList.js I did here:

https://github.com/sschottler/hackernews-graphql-react/blob/master/frontend/src/components/LinkList.js

[priley86]

thanks a lot for this @sschottler - i think this will definitely benefit myself and others working through this guide 👍. This was really the only issue I ran into with my deployment...

f.w.i.w. - i am also considering upgrading from graphql-yoga to apollo-server like the comments here suggest:
dotansimha/graphql-yoga#449 (comment)
dotansimha/graphql-yoga#449 (comment)

there are some good examples of how to do this linked in the issue, but I have not tried them with this guide's frontend yet. Would be great for the how-to-graphql guide to be updated if Apollo2 server is indeed the direction...or others in the community try this out, please feel free to share your forks 😉 .

Also, I think for many of us, including a guide on configuring Traefik or some reverse proxy w/ docker-compose is also quite useful alongside this (I am happy to contribute this if it helps). I understand the guide aims to get folks running and understand the concepts of GraphQL...but for many of us, the next step is deploying our frontend to Zeit/Netlify/etc. where HTTPS will be required to talk to the backend (and thus configuring a reverse proxy alongside the backend becomes crucial). I'll be happy to chime in if an issue is opened on this having run through this on DigOcean recently...

[itscarlosrufo]

@sschottler good catch, it'd be awesome if either you or @priley86 could open a PR to fix it!
cc/ @nikolasburk

[sschottler]

I created two pull requests with the necessary changes:

#70
howtographql/howtographql#861

Thanks!

[itscarlosrufo]

That's amazing, thanks for contributing and hopefully it'll encourage you to keep collaborating with this great OSS community 😀

[nwinger]

I have another question realted to the same section of the tutorial. It states that I should use the playground to create a post and then watch the app update in realtime. Will this be possible at all, seing as we already implemented a login and that the request requires a token?