Problems in howtographql react-apollo Tutorial:

Problem 1 (fixed)

Problem 1: graphcool deployment err (fixed)

So I tried this (/hackernews-react-apollo/server):

• graphcool-framework deploy
  • shared-eu-west-1

And got this error:

local ▸ Could not find graphcool.yml

• cd database/
• graphcool-framework deploy
  • shared-eu-west-1

Back to the validation Error without any error message:

[ERROR] in /home/yannick/Projects/hackernews-react-apollo/server/database/graphcool.yml: Errors while validating graphcool.yml:

At this point I noticed, that the graphcool.yml file looks like the ones of v1 so changed my version with:

• npm install -g graphcool@next

That still gives me the same graphcool.yml validation error but now I actually get an error message:

▸ data should NOT have additional properties

Well, I don't see any data object in the graphcool.yml...

Another approach:

Download the permissions example of v1.0 from the graphcool github repo (Wrong Link - should be raphcool-master/examples/1.0/permissions)

• curl https://codeload.github.com/graphcool/graphcool/tar.gz/master | tar -xz --strip=2 graphcool-master/examples/permissions
• cd 1.0/permissions/
• yarn
• yarn graphcool deploy

Yet another error (it's trying to deploy locally for some reason and does not give me a choice)

yannick@yannick-desktop:~/Projects/1.0/permissions$ yarn graphcool deploy

$ /home/yannick/Projects/1.0/permissions/node_modules/.bin/graphcool deploy

Booting local development cluster !

▸ Creating network "localdatabase_graphcool" with driver "bridge"

▸ could not find an available, non-overlapping IPv4 address pool among the defaults to assign to the network

Solution 1: remove cluster from graphcool.yml

Solution 1:

• remove cluster: local from graphcool.yml
• install graphcool 1.0 with npm install -g graphcool@beta

Problem 2 (fixed):

Problem 2: invalid token (fixed)

• added the graphcool endpoint as httpLink uri in index.js
• added Link & LinkList Components

GraphQL error: Your token is invalid. It might have expired or you might be using a token from a different project.

Solution 2: change endpoint in index.js on server

Solution 2:

• change endpoint in index.js on the server to hosted graphcool url

Problem 3 (fixed):

Problem 3: authentication err on post submission (fixed)

• added CreateLink Comp
• getting an 'not authenticated error' when trying to add a new Link (app & playground)

Solution 3: add authentication/ remove token verification on server, pass token in Login.js

Solution 3:

• Continue until Auth Chapter
• then after login the error changes to

JsonWebTokenError: jwt malformed

• in Login.js user.id was passed to _saveUserData as the first arg instead of token

Problem 4 (WIP):

Problem 4: store updates not working, feed not found on ROOT_QUERY

• store update query is not working, after completing ch.6

• voting for a post or submitting a post will result in the following error:

  Error: Can't find field feed({}) on object (ROOT_QUERY) { "feed({\"first\":null,\"skip\":null,\"orderBy\":null})": { "type": "id", "id": "$ROOT_QUERY.feed({\"first\":null,\"skip\":null,\"orderBy\":null})", "generated": true } }.

• conneted to this issue? apollographql/apollo-client#2051

Solution 4: add initial query vars

Solution 4:

• add initial values to query variables to prevent NULL and thus the error according to the github issue
• the create Link function in CreateLink.js should look like this:

  _createLink = async () => {
    const { description, url } = this.state
    await this.props.postMutation({
      variables: {
        description,
        url
      },
      update: (store, { data: { post } }) => {
        const data = store.readQuery({
          query: FEED_QUERY,
          variables: { first: 0, skip: 0, orderBy: "createdAt_ASC" }
        })
        post.votes = []
        post.postedBy = {
          id: -1,
          name: "Unknown",
          __typename: "User"
        }
        data.feed.links.push(post)
        store.writeQuery({
          query: FEED_QUERY,
          variables: {
            first: 0,
            skip: 0,
            orderBy: "createdAt_ASC"
          },
          data
        })
      }
    })
    this.props.history.push("/")
  }

• updateCaacheAfterVote func in LinkList.js should look like this

_updateCacheAfterVote = (store, createVote, linkId) => {
    const data = store.readQuery({
      query: FEED_QUERY,
      variables: { first: 0, skip: 0, orderBy: "createdAt_ASC" }
    })

    const votedLink = data.feed.links.find(link => link.id === linkId)
    votedLink.votes = createVote.link.votes

    store.writeQuery({
      query: FEED_QUERY,
      options: ownProps => {
        const first = ownProps.first || 0
        const skip = ownProps.skip || 0
        const orderBy = ownProps.orderBy || "createdAt_ASC"
        return {
          variables: { first, skip, orderBy }
        }
      },
      data
    })
}

Problem 5 (fixed):

Problem 5 (fixed): compilation error - subscriptions-transport-ws

• chapter 8: compilation error

  ./node_modules/apollo-link-ws/lib/webSocketLink.js Module not found: Can't resolve 'subscriptions-transport-ws' in '/home/yannick/Projects/hackernews-react-apollo/node_modules/apollo-link-ws/lib'

Solution 5: intall subscriptions-transport-ws seperately and change wsLink

Solution 5:

• NOTE: Seems like it's enough to install subscriptions-transport-ws without the changes in code

• https://www.apollographql.com/docs/link/links/ws.html

• yarn add subscriptions-transport-ws

• index.js:

  • import { SubscriptionClient } from "subscriptions-transport-ws"
  • change wsLink from:

  const wsLink = new WebSocketLink({
      uri: `ws://localhost:4000`,
      options: {
          reconnect: true,
          connectionParams: {
          authToken: localStorage.getItem(AUTH_TOKEN),
          }
      }
  })

  • to:

  const subClient = new SubscriptionClient("ws://localhost:4000", {
      reconnect: true,
      connectionParams: {
          authToken: localStorage.getItem(AUTH_TOKEN)
      }
  })
  
  const wsLink = new WebSocketLink(subClient)

Problem 6:

Problem 6: SyntaxError on server, unexpected token in JSON

• every once in a while there is a SyntaxError on the server, even the playground will give the same error then on the default FeedQuery

• possibly connected to rebuild after changing code in dev mode

• weirdly seems to fix itself after a certan amount of time

  [Network error]: SyntaxError: Unexpected token < in JSON at position 0
  Error: Unexpected token < in JSON at position 0
      at Object.checkResultAndHandleErrors (/home/yannick/Projects/hackernews-react-apollo/server/node_modules/graphql-tools/dist/stitching/errors.js:69:36)
      at Object.<anonymous> (/home/yannick/Projects/hackernews-react-apollo/server/node_modules/graphql-tools/dist/stitching/delegateToSchema.js:92:52)
      at step (/home/yannick/Projects/hackernews-react-apollo/server/node_modules/graphql-tools/dist/stitching/delegateToSchema.js:40:23)
      at Object.next (/home/yannick/Projects/hackernews-react-apollo/server/node_modules/graphql-tools/dist/stitching/delegateToSchema.js:21:53)
      at fulfilled (/home/yannick/Projects/hackernews-react-apollo/server/node_modules/graphql-tools/dist/stitching/delegateToSchema.js:12:58)
      at <anonymous>
      at process._tickCallback (internal/process/next_tick.js:160:7)

Solution 6: ...

Solution 6:

Problem 7:

Problem 7: Subscriptions not working

• there is a websocket connection in the devtools' network tab

Solution 7: ...

Typos:

• Chapter Mutations: awrite the mutation as a JSava riptconstant using the gql parser functiont the start:

  write the mutation as a JSava riptconstant using the gql parser function

• ch.5: logout redirect in Header.js should go to root ('/')

this.props.history.push(`/new/1`)

• ch.8: wrong key for authToken in index.js (should be "AUTH_TOKEN")

authToken: localStorage.getItem(GC_AUTH_TOKEN)

Additonal Notes:

• quiz at authentication chapter wrong answer?
• chapter 6: code for Link.js is all kinds of broken (it's actually working in github, but not displayed correctly in the browser):

render() {
    const authToken = localStorage.getItem(AUTH_TOKEN)
    return (
        

        

            {this.props.index + 1}.
            {authToken && 
    this._voteForLink()}>▲
    }
        

        

            
    {this.props.link.description} ({this.props.link.url})

            
    {this.props.link.votes.length} votes | by {this.props.link.postedBy ? this.props.link.postedBy.name : 'Unknown'} {timeDifferenceForDate(this.props.link.createdAt)}

        

        

    )
}

• better error handling (e.g. already voted for a link or simply do not disply vote btn)
• 'new link resolver' server console.log whenever the LinkList is loaded (even when logged in) which leads to:

(node:27807) MaxListenersExceededWarning: Possible EventEmitter memory leak detected. 11 remote-schema-link listeners added. Use emitter.setMaxListeners() to increase limit

• chapter 8: vote Subscription updateQuery broken? looking for votedLinkIndex, but not doing anyhing with it. No update with new newVote.