Hi all,
Awesome work, just amazing the depth you went through with the tutorials and the website!

I have a small nit, based on something I battle with today in my own stuff - so I specifically looked for that, and here it was:

https://github.com/howtographql/react-apollo/blob/master/src/components/Header.js#L9

Isn't this not healthy in React in terms of state management? Why wouldn't it come from a request?

And the larger philosophical question is - I guess this is part of a "app and viewer related data", who's to fetch these (is that 'App' ?) ? and how can we guarantee that we fetch it at the right time and there's no app-wide stale data?

PS, for reference - here's some of that logic elsewhere: https://github.com/LIYINGZHEN/auth-graphql/blob/master/client/components/Header.js

When I get to this step:

When the browser opens, register with Prisma Cloud and go back to your terminal.

there is no option to register. Only a button that says "Grant Permission" which then yields the error:

Network error: Unexpected token < in JSON at position 0

After quite some time trying to figure this out, I realize that the problem is that the instructions are unclear. Running the yarn prisma deploy command opens a tab in the browser which the instructions indicate contains a place to register. Instead you are presented with only one option which errors.

Please make the docs more clear. Something like:

Visit http://app.prisma.io and create an account. After you have completed registration, run the yarn prisma deploy command.

Still, after deciphering that much, I'm still stuck with

/Users/workjeff/Apps/hackernews-react-apollo/server/src/index.js:23
    ...request,
    ^^^
SyntaxError: Unexpected token ...

Any ideas how to get past this now?

Try to follow the tutorial https://www.howtographql.com/react-apollo/5-authentication/
after login and try to submit new link, show error (Network tab)
{"data":null,"errors":[{"message":"Not authenticated","locations":[{"line":2,"column":3}],"path":["post"]}]}

when I run "yarn dev"
it gives me this error

...req,
^^^
SyntaxError: Unexpected token ...
at createScript (vm.js:56:10)
at Object.runInThisContext (vm.js:97:10)
at Module._compile (module.js:542:28)
at Object.Module._extensions..js (module.js:579:10)
at Module.load (module.js:487:32)
at tryModuleLoad (module.js:446:12)
at Function.Module._load (module.js:438:3)
at Module.runMain (module.js:604:10)
at run (bootstrap_node.js:389:7)
at startup (bootstrap_node.js:149:9)
error An unexpected error occurred: "Command failed.
Exit code: 1

the error is located in server/src/index.js:19

I am not able to start the server.

thank you tutorial !!!

in client and server, when I run yarn start, I get the error

'Invalid Prisma endpoint provided: PRISMA_ENDPOINT'

I try find anwser in this issues react-fullstack-graphql/issues, but I don't know what mean?

this is my error image:

I need your help, thanks!

Hi.
I'm following the tutorial on https://www.howtographql.com/react-apollo/1-getting-started/
have followed all of the steps, (which basically involves downloading the starter tarball and running the yarn install commands).

when I try to execute the feed query on the playground, it gives me the following error in the console.

$ graphql playground Type "Node" is missing a "resolveType" resolver. Pass false into "resolverValidationOptions.requireResolversForResolveType" to disable this warning. Server is running on http://localhost:4000 Serving playground at http://localhost:3000/playground Request to http://localhost:4466: query: { links { id createdAt description url } } operationName: null variables: {} [GraphQL error]: Message: Cannot query field 'links' on type 'Query'. (line 2, column 3): links { ^, Location: [object Object], Path: undefined [Network error]: Error: Cannot query field 'links' on type 'Query'. (line 2, column 3): links { ^ Error: Cannot query field 'links' on type 'Query'. (line 2, column 3): links { ^ at BatchedGraphQLClient.<anonymous> (C:\Users\ihols\src\hackernews-react-apollo\server\node_modules\http-link-dataloader\dist\src\BatchedGraphQLClient.js:77:35) at step (C:\Users\ihols\src\hackernews-react-apollo\server\node_modules\http-link-dataloader\dist\src\BatchedGraphQLClient.js:40:23) at Object.next (C:\Users\ihols\src\hackernews-react-apollo\server\node_modules\http-link-dataloader\dist\src\BatchedGraphQLClient.js:21:53) at fulfilled (C:\Users\ihols\src\hackernews-react-apollo\server\node_modules\http-link-dataloader\dist\src\BatchedGraphQLClient.js:12:58) at process._tickCallback (internal/process/next_tick.js:68:7)

DB is mysql in docker container.
OS is windows 10.
Thanks!

Hi @nikolasburk ,

Couple days ago I finished refactoring this tutorial with new Apollo declarative API, also I've created branches with each step solution with both HOCs and component based API. In this way, user could decide which version to choose, even jump into diverse branches to check solutions and compare how it was implemented in the other version.

I think that could be interesting to debate about solutions adopted, so if you've a couple minutes, please, check the repo and raise as many issues you can 😛(don't try to use compare branches functionality, it doesn't work from now, just look into the branches code)

Actually, I'm working on the doc, hopefully, I'll have it finished next week. Btw, if you could create a new branch, I could do a pull request with final tutorial code with new Apollo API as you've in master, so we could review it from there too.

Congrats for the great tutorial, I've really enjoyed that's main reason why I've decided to refactor it because it get into Apollo essentials in an easy way, so hopefully there'll be another devs that they can learn from it.

Looking forward to hearing from you. Have a great day!

after creating a link I'm receiveing the warning

Missing field votes in {
  "postedBy": {
...

Solved by adding votes in CreateLink.js -> CREATE_LINK_MUTATION

const CREATE_LINK_MUTATION = gql`
mutation CreateLinkMutation($description: String!, $url: String!, $postedById: ID!) {
  createLink(
    description: $description,
    url: $url,
    postedById: $postedById
  ) {
    id
    createdAt
    url
    description
    postedBy {
      id
      name
    }
    votes {
      id
      user {
        id
      }
    }
  }
}
`

I was running through the tutorial and hit a snag with subscriptions to links. After some trial and error, I cloned this and it was working fine. So I updated apollo-client to 3.5 and it broke the subscription.

If you add a new link in the playground or another browser tab, you will get the following error:

Store error: the application attempted to write an object with no provided typename but the store already contains an object with typename of Feed for the object of id $ROOT_QUERY.feed({"first":5,"orderBy":"createdAt_DESC","skip":0}). The selectionSet that was trying to be written is:

Followed by the query. I feel like this is a bug with this project more than Apollo, however, I could be dead wrong because I couldn't figure it out.

apollo will throw an error if you've sorted the results in a different order and the cache hasn't been hit with the set order.

how would this be solved?

OK, first of all, this is your tutorial, right? https://www.howtographql.com/react-apollo/1-getting-started/ - if not, please ignore the following.

I'm on a Windows machine, but that did not stop me from trying the curl commands (I used Windows Subsystem for Linux - still didn't work) provided to install the Graphql server backend. I have tried three times now, scrapped and deleted the entire directory and started fresh, just to make sure I followed each instruction carefully.

Since WSL got no results, I found the github repository and cloned it. I just now noticed that all the code snippets in the tutorial have links to the repository locations - interesting that the link to this particular location (https://github.com/howtographql/react-apollo/blob/master/hackernews-react-apollo) is leading to a 404 "page not found" right now, I could have sworn the page was available yesterday?

So here's what I did, after finding the react-apollo-starter/server repo by navigating to it from the main repo page:

1. git clone https://github.com/howtographql/react-apollo/
2. cd react-apollo
3. cd server
4. yarn install
5. prisma deploy

The following errors were logged on screen during step 4.

warning "graphql-yoga > [email protected]" has unmet peer dependency "aws-lambda@^0.1.2".warning "prisma-binding > [email protected]" has incorrect peer dependency "graphql@^0.11.0".
warning "graphql-cli > [email protected]" has unmet peer dependency "express@^4.16.2".warning "prisma-cli > prisma-cli-core > graphql-cli > [email protected]" has unmet peer dependency "express@^4.16.2".

(FWIW, and maybe this is wrong on my part, but I have both prisma and graphql installed globally, both were installed within the last couple of days.)

I went ahead and continued with yarn dev and tried to get as far as I could with the tutorial, but nothing works. The feed query returns no data in the database. The mutations return "Not authenticated." Even though I created a free account with Prisma and authorized it through my github account, I keep getting a "Not authenticated" error in the CLI as soon as I connect. I did update server/src/index.js with the correct endpoint. I even updated prisma.yml to disableAuth: true but no luck. I checked every single file in the entire directory tree, (except all the 10,000 node modules) but I made sure all the dependencies are there, and it seems like it should be working, unless the hidden stuff in the bundles has caused a problem.

This may or may not have anything to do with the "unmet peer dependency," and the "not authenticated" is probably completely unrelated, but I thought you might want to know anyway. I really like your tutorial style and it looks so promising, I really want it to work!

Clean installation using the endpoint generated before with https://github.com/howtographql/graphql-js

Is not working

➜  server git:(master) ✗ yarn start
yarn run v1.12.3
$ node src/index.js
events.js:183
      throw er; // Unhandled 'error' event
      ^

Error: listen EADDRINUSE :::4000
    at Server.setupListenHandle [as _listen2] (net.js:1360:14)
    at listenInCluster (net.js:1401:12)
    at Server.listen (net.js:1485:7)
    at /Users/lucasrecoaro/react-apollo/server/node_modules/graphql-yoga/dist/index.js:344:28
    at new Promise (<anonymous>)
    at GraphQLServer.start (/Users/lucasrecoaro/react-apollo/server/node_modules/graphql-yoga/dist/index.js:342:16)
    at Object.<anonymous> (/Users/lucasrecoaro/react-apollo/server/src/index.js:27:8)
    at Module._compile (module.js:653:30)
    at Object.Module._extensions..js (module.js:664:10)
    at Module.load (module.js:566:32)
error Command failed with exit code 1.

# Specifies the HTTP endpoint of your Prisma API.
#endpoint: ''
endpoint: https://us1.prisma.sh/lucas-3856c0/ao-web-indexer/ao-web-indexer/dev

# Defines your models, each model is mapped to the database as a table.
datamodel: datamodel.prisma

# Specifies the language and directory for the generated Prisma client.
generate:
  - generator: javascript-client
    output: ../src/generated/prisma-client

# Ensures Prisma client is re-generated after a datamodel change.
hooks:
  post-deploy:
    - prisma generate

This first error is around ...req. At first it looks like a typo, but it's liste as such in the tutorial, README.md and the tar.gz file. But if it was a type, I deleted the ... and retried. But then it complained about the function keyword.

PS D:\PoCs\hackernews-react-apollo\server> yarn dev
yarn run v1.5.1
warning package.json: No license field
$ npm-run-all --parallel start playground
warning package.json: No license field
$ node src/index.js
warning package.json: No license field
$ graphql playground
D:\PoCs\hackernews-react-apollo\server\src\index.js:19
...req,
^^^

SyntaxError: Unexpected token ...
at createScript (vm.js:56:10)
at Object.runInThisContext (vm.js:97:10)
at Module._compile (module.js:542:28)
at Object.Module._extensions..js (module.js:579:10)
at Module.load (module.js:487:32)
at tryModuleLoad (module.js:446:12)
at Function.Module._load (module.js:438:3)
at Module.runMain (module.js:604:10)
at run (bootstrap_node.js:389:7)
at startup (bootstrap_node.js:149:9)
error An unexpected error occurred: "Command failed.
Exit code: 1
Command: C:\WINDOWS\system32\cmd.exe
Arguments: /d /s /c node src/index.js
Directory: D:\PoCs\hackernews-react-apollo\server
Output:
".
info If you think this is a bug, please open a bug report with the information provided in "D:\PoCs\hackernews-react-apollo\server\yarn-error.log".
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
ERROR: "start" exited with 1.
error An unexpected error occurred: "Command failed.
Exit code: 1
Command: C:\WINDOWS\system32\cmd.exe
Arguments: /d /s /c npm-run-all --parallel start playground
Directory: D:\PoCs\hackernews-react-apollo\server
Output:
".
info If you think this is a bug, please open a bug report with the information provided in "D:\PoCs\hackernews-react-apollo\server\yarn-error.log".
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

PS D:\PoCs\hackernews-react-apollo\server> yarn dev
yarn run v1.5.1
warning package.json: No license field
$ npm-run-all --parallel start playground
warning package.json: No license field
$ node src/index.js
warning package.json: No license field
$ graphql playground
D:\PoCs\hackernews-react-apollo\server\src\resolvers\Query.js:1
(function (exports, require, module, __filename, __dirname) { async function feed(parent, args, ctx, info) {
^^^^^^^^

SyntaxError: Unexpected token function
at createScript (vm.js:56:10)
at Object.runInThisContext (vm.js:97:10)
at Module._compile (module.js:542:28)
at Object.Module._extensions..js (module.js:579:10)
at Module.load (module.js:487:32)
at tryModuleLoad (module.js:446:12)
at Function.Module._load (module.js:438:3)
at Module.require (module.js:497:17)
at require (internal/module.js:20:19)
at Object. (D:\PoCs\hackernews-react-apollo\server\src\index.js:3:15)
error An unexpected error occurred: "Command failed.
Exit code: 1
Command: C:\WINDOWS\system32\cmd.exe
Arguments: /d /s /c node src/index.js
Directory: D:\PoCs\hackernews-react-apollo\server
Output:
".
info If you think this is a bug, please open a bug report with the information provided in "D:\PoCs\hackernews-react-apollo\server\yarn-error.log".
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
ERROR: "start" exited with 1.
error An unexpected error occurred: "Command failed.
Exit code: 1
Command: C:\WINDOWS\system32\cmd.exe
Arguments: /d /s /c npm-run-all --parallel start playground
Directory: D:\PoCs\hackernews-react-apollo\server
Output:
".
info If you think this is a bug, please open a bug report with the information provided in "D:\PoCs\hackernews-react-apollo\server\yarn-error.log".
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

Any ideas on how to get this working? As the recommended tutorial, I'm not sure where to turn next.

yarn-error.log

I see in https://github.com/howtographql/react-apollo/blob/master/src/components/Header.js you use:

const userId = localStorage.getItem(GC_USER_ID)

which seems to me a bit ugly: everytime Header render() is called you read from localStorage?

With react-redux I used to go with something like this:

render() {
  const { authentication } = this.props;
  ...
}

const mapStateToProps = state => ({
  authentication: state.authentication
});

export default connect(mapStateToProps, { logoutAction })(Navbar);

And also if I read from localStorage on every render() and let's say I wanna store in localStorage all my user's data (eg. {username: "john", age: "15"}) when I pass this const to one of my children components everytime it re-render because the JSON.parse make it a new object! Everytime!

How to have something like a Redux Store with Apollo?

I cloned and installed this repo, added & pushed the following project.graphcool file, and adjusted the project id endpoints in index.js and the subscriptions appear to not be functioning.

The only message in the console is:
This method becomes deprecated in the new package graphql-transport-ws. Start using the GraphQLTransportWSClient to make queries, mutations and subscriptions over websockets.

project.graphcool.txt

A suggestion: import paths inside App.js and index.js need to be changed after moving .js into /component folder and .css files into /styles. It's more or less obvious to fix following error messages, but it'd make the sailing through the tutorial smoother if there is less possibility of getting errors along the way.

So in App.Js:
import logo from './logo.svg' needs to be import logo from './../logo.svg';
import './App.css' needs to be import '../styles/App.css';

index.js:
import './index.css' needs to be import './styles/index.css';
import App from './App' needs to be import App from './components/App';

In /search route
when click in vote button we get

TypeError: _this.props.updateStoreAfterVote is not a function
...  

Seach component is not passing updateStoreAfterVote to Links component.

not sure something went wrong at initial installation or not..
however im not able to move ahead with any query...
only following error is being display

Unexpected token I in JSON at position 0

fyI: I was following steps provided at https://www.howtographql.com/react-apollo/0-introduction/

Hi,

Could someone explain to me why there is no more user resolvers that we created in hackernews-node tut?

Thanks!

when login button is clicked the following error is generated :

Uncaught (in promise) Error: GraphQL error: Argument 'email' expected type 'String!' but got: {email: $email, password: $password}. Reason: String value expected (line 2, column 27): authenticateUser(email: {email: $email, password: $password}) { ^ GraphQL error: Cannot query field 'id' on type 'AuthenticateUserPayload'. (line 3, column 5): id ^ GraphQL error: Field 'authenticateUser' argument 'password' of type 'String!' is required but not provided. (line 2, column 3): authenticateUser(email: {email: $email, password: $password}) { ^

The documentation and the examples show getting the an auth token from localstorage like this:

https://github.com/howtographql/react-apollo/blob/master/src/index.js

const authLink = setContext((_, { headers }) => {
  const token = localStorage.getItem(AUTH_TOKEN)
  return {
    headers: {
      ...headers,
      authorization: token ? `Bearer ${token}` : '',
    },
  }
})

const token = localStorage.getItem(AUTH_TOKEN) returns a promise. So, I'm unable to use it like this. To make it work, I have to wait for it to resolve.

const authLink = setContext(async (_, { headers }) => {
  const token = await localStorage.getItem(AUTH_TOKEN)
  return {
    headers: {
      ...headers,
      authorization: token ? `Bearer ${token}` : '',
    },
  }
})

Caused me some headache. I'm not sure if I'm doing something else wrong, or if the documentation is out of date.

Note: This issue occurs with a newer version of apollo-boost (0.1.4) in use , current version used in the app works as intended

I was investigating why vote changes didn't update properly in the UI and isolated the issue to apollo-boost

How to Reproduce:

Update apollo-boost to latest (currently 0.1.16), and up vote any link, you will notice the change is not reflected in the UI as React doesn't end up calling render for the Link component. The Prisma server is updated as it's supposed to, and if you refresh the page, you will see the correct vote count for the link. The store also looks to be updated correctly, but React is not detecting the change to re-render.

Hello people,

I found that the createdAt_DESC is not working, whereas the following is working directly on GraphQL Playground.
query queryfeed{ feed(orderBy:createdAt_DESC) { count links { id createdAt } } }

How to make it works in LinkList.js ?

I know it is still in beta, but it would be great to start playing around with v2.

So after following this tutorial, I wanted to upgrade to Apollo 2 beta but I'm having trouble to get it working.

The upgrade guide is still quite incomplete: https://github.com/apollographql/apollo-client/blob/master/Upgrade.md

If someone can get a working version of this repo with Apollo 2 beta would be great. We might keep it in a separated branch.

To pull server components, the following instruction is given

curl https://codeload.github.com/howtographql/react-apollo/tar.gz/starter | tar -xz --strip=1 react-apollo-starter/server

While curl will work with PowerShell 5.0 and up, tar does not work out of the box.

There are various tools that can be downloaded for this purpose, or we can provide an equivalent zip file.

The React + Apollo Tutorial: https://www.howtographql.com/react-apollo/2-queries-loading-links/ Errors due to https://graphqlbin.com/hn-starter.graphql missing field createdAt in Link @nikolasburk

Not sure how you want to deal with this.

It is a really great tutorial so far and I enjoyed finding why the code kept throwing an error!

p.s. The graphcool instance of graphiql helped me find the error

query AllLinksQuery {
  allLinks {
    id
    createdAt
    url
    description
  }
}

{
  "data": null,
  "errors": [
    {
      "message": "Cannot query field 'createdAt' on type 'Link'. (line 21, column 5):\n    createdAt\n    ^",
      "locations": [
        {
          "line": 21,
          "column": 5
        }
      ]
    }
  ]
}

If I've been previously logged in and I log out, I can then go to the login page and click the login button, the app then logs me in with no creds.

Author message:

for the best quick start with Apollo Client, please use apollo-boost instead.

When triggering the vote mutation and the _updateCacheAfterVote function the console show the error:

TypeError: Cannot assign to read only property 'votes' of object '#<Object>'

This is from More Mutations and Updating the Store

I was following the tutorial and had issues with subscriptions.

Tracked down my issue to be this https://github.com/graphcool/prisma/issues/1734

Now it’s firing too many events.
So now I end up with duplicate items in the LinkList

i have installed prisma using the command 'npm install -g prisma' and while running the command
'prisma deploy' it is giving this error
config CWD /Users/aravind/tekie/hackernews-react-apollo/server +0ms config HOME /Users/aravind +2ms config definitionDir /Users/aravind/tekie/hackernews-react-apollo/server/database +5ms config definitionPath /Users/aravind/tekie/hackernews-react-apollo/server/database/prisma.yml +0ms cli { isGlobal: true } +0ms StatusChecker setting status checker +0ms cli command id deploy +7ms cli:plugincache Got plugin from cache +0ms cli:plugincache /Users/aravind/Library/Caches/prisma/plugins.json +1ms cli:plugincache Got plugin from cache +1ms cli:plugincache /Users/aravind/Library/Caches/prisma/plugins.json +0ms plugins findCommand prisma-cli-core +0ms plugin requiring command +0ms cli-engine:plugins:manager requiring /usr/local/lib/node_modules/prisma/node_modules/prisma-cli-core +0ms portfinder:defaultHosts exports._defaultHosts is: [ '0.0.0.0', '127.0.0.1', '::1', 'fe80::1', 'fe80::18fb:a4af:2b44:3fea', '192.168.43.100', '2405:204:6209:18b0:144f:bac3:86ac:3cdf', '2405:204:6209:18b0:fd46:e3b7:952f:d569', 'fe80::1c49:3cff:fe5f:7e16', 'fe80::3e5f:ab5d:16dd:a8bf' ] +0ms cli-engine:plugins:manager required +538ms plugin required command +540ms StatusChecker setting status checker +569ms Error: Cluster undefined does not exist. at Deploy.<anonymous> (/usr/local/lib/node_modules/prisma/node_modules/prisma-cli-core/src/commands/deploy/index.ts:175:13) at step (/usr/local/lib/node_modules/prisma/node_modules/prisma-cli-core/dist/commands/deploy/index.js:42:23) at Object.next (/usr/local/lib/node_modules/prisma/node_modules/prisma-cli-core/dist/commands/deploy/index.js:23:53) at fulfilled (/usr/local/lib/node_modules/prisma/node_modules/prisma-cli-core/dist/commands/deploy/index.js:14:58) at <anonymous> util timed out +0ms Exiting with code: 0
iam in server folder
my node version: v9.11.1
prisma version: 1.8.3

i tried with yarn install then yarn start (server & client)

but i only can see this:

i think something is not working

thanks!

Could you please let me know why is this error popping when I am trying to use the postMutation method and where is this function defined?

I am getting following error after the subscriptions data is received inside updateQuery function.

TypeError: Cannot read property 'node' of undefined
    at Object.updateQuery (LinkList.js:47)
    at ObservableQuery.js:188
    at ObservableQuery.js:256
    at tryFunctionOrLogError (errorHandling.js:3)
    at ObservableQuery../node_modules/apollo-client/core/ObservableQuery.js.ObservableQuery.updateQuery (ObservableQuery.js:255)
    at Object.next (ObservableQuery.js:186)
    at SubscriptionObserver.next (zen-observable.js:154)
    at QueryManager.js:581
    at Array.forEach (<anonymous>)
    at Object.next (QueryManager.js:579)
    at Object.handler (client.js:105)
    at SubscriptionClient../node_modules/subscriptions-transport-ws/dist/client.js.SubscriptionClient.processReceivedData (client.js:420)
    at WebSocket.client.onmessage (client.js:374)
__stack_frame_overlay_proxy_console__ @ index.js:2177
tryFunctionOrLogError @ errorHandling.js:7
./node_modules/apollo-client/core/ObservableQuery.js.ObservableQuery.updateQuery @ ObservableQuery.js:255
next @ ObservableQuery.js:186
next @ zen-observable.js:154
(anonymous) @ QueryManager.js:581
next @ QueryManager.js:579
(anonymous) @ client.js:105
./node_modules/subscriptions-transport-ws/dist/client.js.SubscriptionClient.processReceivedData @ client.js:420
client.onmessage @ client.js:374
2localhost/:1 WebSocket connection to 'wss://subscriptions.graph.cool/v1/cjb7mrh4h2vfy0191f5tpy903' failed: WebSocket is closed before the connection is established.

the updateQuery is in the following function

_subscribeToNewLinks = () => {
    this.props.allLinksQuery.subscribeToMore({
      document: gql`
        subscription {
          Link(filter: {
            mutation_in: [CREATED]
          }) {
            node {
              id
              url
              description
              createdAt
              postedBy {
                id
                name
              }
              votes {
                id
                user {
                  id
                }
              }
            }
          }
        }
      `,
      updateQuery: (previous, { subscriptionData }) => {
        console.log(subscriptionData);
        const newAllLinks = [
          subscriptionData.Link.node,
          ...previous.allLinks
        ]
        const result = {
          ...previous,
          allLinks: newAllLinks
        }
        return result
      }
    })
  }

@nikolasburk I got the error below while I was testing things out during the "More Mutations and Updating the Store" chapter. After my votes feature worked as implemented, I decided to log out and log in again at which point I got this error. I am unable to log in with either of the two test accounts that I created and have been using since the "Authentication" chapter. Please help.

I clone this repo and run it. But i have a problem, realtime subscription not working. Please help me!

Likely a stupid question, but do I need to set up graphcool separately as you describe in the tutorial?

at the console it also refuses the subscriptions connection

When starting the server via yarn dev and then the app via yarn start the later complains port 3000 is already in use.

Seems others have the same issue: prisma/prisma1#1714

In the Backend section of Getting Started I suggest you add a note about it.
Easy fix: Change "playground": "graphql playground" to "playground": "graphql playground --port 5000"

Hope this is helpful to your peers.
As I am new to React, Apollo, Prisma and GraphQL it took me awhile to find out where to fix it 😉

Hi,

I'm using Windows and have Git CLI installed but got the following problem when I try to run the command:
curl https://codeload.github.com/howtographql/react-apollo/tar.gz/starter | tar -xz --strip=1 react-apollo-starter/server

% Total    % Received % Xferd  Average Speedt a r :T iEmrer o r   oTpiemnei n g   a rTcihmiev e :C uFrarielnetd
t o   o p e n   ' \ \ . \ t a p e 0 '
             Dload  Upload   Total   Spent    Left  Speed
  9  123k    9 12330    0     0  12330      0  0:00:10 --:--:--  0:00:10 22541
curl: (23) Failed writing body (0 != 12330)

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.

You can use the prisma CLI without having it globally installed because it's listed as a development dependency in package.json.

I believe this is not correct. You have to define script in package.json otherwise you will get prisma: command not found

Below is the initial setup and getting the error on cache.transformDocument when fetching the query.
I'm trying react-apollo-tutorial code in my own repo.

const httpLink = new HttpLink({ uri: 'http://localhost:4000' })

const client = new ApolloClient({
link: httpLink ,
cache: InMemoryCache
})

Observable.js:59 Uncaught TypeError: cache.transformDocument is not a function
at QueryManager.fetchQuery (QueryManager.js:194)
at QueryManager.startQuery (QueryManager.js:657)
at ObservableQuery.setUpQuery (ObservableQuery.js:413)
at ObservableQuery.onSubscribe (ObservableQuery.js:382)
at eval (ObservableQuery.js:45)
at new Subscription (Observable.js:179)
at ObservableQuery.subscribe (Observable.js:258)
at Query._this.startQuerySubscription (react-apollo.browser.umd.js:289)
at Query.componentDidMount (react-apollo.browser.umd.js:376)
at commitLifeCycles (react-dom.development.js:9784)

Whenever I try to run the query to see the two links I create at the beginning of the tutorial I receive this error: "message": "Cannot use GraphQLNonNull "[Link]!" from another module or realm.\n\nEnsure that there is only one instance of "graphql" in the node_modules\ndirectory. If different versions of "graphql" are the dependencies of other\nrelied on modules, use "resolutions" to ensure only one version is installed.\n\nhttps://yarnpkg.com/en/docs/selective-version-resolutions\n\nDuplicate "graphql" modules cannot be used at the same time since different\nversions may have different capabilities and behavior. The data from one\nversion used in the function from another could produce confusing and\nspurious results.

I have made sure I do not have duplicate versions of graphql in my node_modules, and I have even tried to roll back to an earlier version of graphql, but the error persists. Any help or advice is greatly appreciated

Please find print-screen of error below

I thought I'd write a long explanation on this one to help people searching generally for "missing field" issues.

The updateQuery here:

Results in these warnings:

writeToStore.js:111 Missing field count in {
  "links": [
    {
      "id": "cjdw3eql80fas0181bvfr35fh",
      "url": "asd",
      "description
...
writeToStore.js:111 Missing field __typename in {
  "links": [
    {
      "id": "cjdw3eql80fas0181bvfr35fh",
      "url": "asd",
      "description

This is because feed is being manually constructed and so is missing some properties:

updateQuery: (previous, { subscriptionData }) => {
  const newAllLinks = [
    subscriptionData.data.newLink.node,
    ...previous.feed.links,
  ]
  const result = {
    ...previous,
    feed: {
      links: newAllLinks, <=== Here: it's only being given "links" array
    },
  }
  return result
},

Instead the count (which should be manually increased) and the rest of the feed properties (e.g. __typename which is one of the warnings above) should be included like so:

updateQuery: (previous, { subscriptionData }) => {
  const newAllLinks = [
    subscriptionData.data.newLink.node,
    ...previous.feed.links,
  ]
  const result = {
    ...previous,
    feed: {
      ...previous.feed,  <========= here...
      count: previous.feed.count + 1,  <====== ...and here
      links: newAllLinks,
    },
  }
  return result
},

@nikolasburk I remember that in the legacy tutorial of howtographql you told us to install "subscriptions-transport-ws" as our project's dependency, but you haven't told us to do that in this updated tutorial. Please find the printed screen with the error message below and a screenshot of my 'hackernews-react-apollo-updated\node_modules\apollo-link-ws\lib'

I just finished the tutorial on the page and noticed that pagination is causing some issues. Once implemented, new links that get submitted are not automatically appearing in the list unless the page is fully refreshed. Surprisingly enough in another window those get automatically added via the subscriptions regardless.

My assumption is that the local cache is not invalidated after adding a new link in the first place. Can anyone confirm this odd behaviour?