{"action":"created","issue":{"url":"https://api.github.com/repos/apollographql/apollo-link-state/issues/199","repository_url":"https://api.github.com/repos/apollographql/apollo-link-state","labels_url":"https://api.github.com/repos/apollographql/apollo-link-state/issues/199/labels{/name}","comments_url":"https://api.github.com/repos/apollographql/apollo-link-state/issues/199/comments","events_url":"https://api.github.com/repos/apollographql/apollo-link-state/issues/199/events","html_url":"https://github.com/apollographql/apollo-link-state/issues/199","id":294765767,"number":199,"title":"Uncaught (in promise) Error: Network error: Cannot read property 'updateAuthData' of undefined","user":{"login":"YannisMarios","id":11289298,"avatar_url":"https://avatars1.githubusercontent.com/u/11289298?v=4","gravatar_id":"","url":"https://api.github.com/users/YannisMarios","html_url":"https://github.com/YannisMarios","followers_url":"https://api.github.com/users/YannisMarios/followers","following_url":"https://api.github.com/users/YannisMarios/following{/other_user}","gists_url":"https://api.github.com/users/YannisMarios/gists{/gist_id}","starred_url":"https://api.github.com/users/YannisMarios/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/YannisMarios/subscriptions","organizations_url":"https://api.github.com/users/YannisMarios/orgs","repos_url":"https://api.github.com/users/YannisMarios/repos","events_url":"https://api.github.com/users/YannisMarios/events{/privacy}","received_events_url":"https://api.github.com/users/YannisMarios/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":2,"created_at":"2018-02-06T13:49:35Z","updated_at":"2018-02-06T16:53:57Z","closed_at":null,"author_association":"NONE","body":"Hello,\r\n\r\nI am new to the Apollo world and what I am trying to do is to store an access token received from my graphql server in the client side state but I get \"Uncaught (in promise) Error: Network error: Cannot read property 'updateAuthData' of undefined\" when I click the login button.The click handler is the submitHandler in my component below\r\n\r\nHere is my component:\r\n\r\n```\r\nimport React, {Component} from 'react';\r\nimport { graphql, compose } from 'react-apollo';\r\nimport { Container, Row, Col, FormText, CardGroup, Card, CardBody, Button, InputGroup, InputGroupAddon } from 'reactstrap';\r\nimport { signin, updateAuthData } from './mutations';\r\nimport Aux from '../../../hoc/Aux/Aux';\r\nimport Input from '../../../components/UI/Input/Input';\r\nimport { updateObject, checkValidity } from '../../../helpers/utility';\r\nimport { AUTH_TOKEN } from '../../../config/constants';\r\nimport { client } from '../../../config';\r\n\r\n\r\nclass Login extends Component {\r\n\r\n\tstate = {\r\n\t  controls: {\r\n\t   email: {\r\n\t\telementConfig: {\r\n\t\t\tname: 'email',\r\n\t\t\ttype: 'email',\r\n\t\t\tplaceholder: 'E-mail',\r\n\t\t},\r\n\t\tvalue: '',\r\n\t\tvalidation: {\r\n\t\t\tisEmail: true,\r\n\t\t\trequired: true\r\n\t\t},\r\n\t\tvalid: true,\r\n\t\ttouched: 'false'\r\n\t   },\r\n\t   password: {\r\n\t\telementConfig: {\r\n\t\t\tname: 'password',\r\n\t\t\ttype: 'password',\r\n\t\t\tplaceholder: 'Password',\r\n\t\t},\r\n\t\tvalue: '',\r\n\t\tvalidation: {\r\n\t\t\trequired: true,\r\n\t\t\tminLength: 8\r\n\t\t},\r\n\t\tvalid: false,\r\n\t\ttouched: false\r\n\t   },\r\n\t   isSignin: true\r\n\t }\r\n      };\r\n\r\n      inputChangedHandler = (event, controlName) => {\r\n\tconst updatedControls = updateObject( this.state.controls, {\r\n\t\t[controlName]: updateObject( this.state.controls[controlName], {\r\n\t\t\tvalue: event.target.value,\r\n\t\t\tvalid: checkValidity( event.target.value, this.state.controls[controlName].validation ),\r\n\t\t\ttouched: true\r\n\t\t} )\r\n\t} );\r\n\tthis.setState( { controls: updatedControls } );\r\n      }\r\n\r\n\tsubmitHandler = async () => {\r\n         const email = this.state.controls.email.value;\r\n         const password = this.state.controls.password.value;\r\n          const { client_id, client_secret } = client;\r\n         const { signin, updateAuthData } = this.props;\r\n         if(this.state.controls.email.valid && this.state.controls.password.valid) {\r\n         const result = await signin({\r\n\t\tvariables: {\r\n\t\t\temail,\r\n\t\t\tpassword,\r\n\t\t\tclient_id,\r\n\t\t\tclient_secret\r\n\t\t}\r\n\t  });\r\n\t  const { access_token } = result.data.signin;\r\n\t  updateAuthData({\r\n\t\tvariables: {\r\n\t\t\taccess_token: access_token.value\r\n\t\t}\r\n\t    });\r\n          }\r\n       }\r\n\tsaveUserData = token => {\r\n\t\tlocalStorage.setItem(AUTH_TOKEN, token)\r\n\t}\r\n\r\n  render() {\r\n     const controls = this.state.controls;\r\n\r\n     let form = (<div className=\"app flex-row align-items-center\">\r\n     <Container>\r\n\t<Row className=\"justify-content-center\">\r\n\t <Col md=\"4\">\r\n\t  <CardGroup className=\"mb-4\">\r\n            <Card className=\"p-4\">\r\n\t\t<CardBody>\r\n\t\t <div className=\"ex-login-brand\"></div>\r\n\t\t <p></p>\r\n\t\t <div>\r\n\t\t<InputGroup className=\"mb-3\">\r\n\t\t  <InputGroupAddon><i className=\"icon-user\"></i></InputGroupAddon>\r\n\t\t  <Input\r\n\t\t   elementConfig={controls.email.elementConfig}\r\n\t\t   value={controls.email.value}\r\n\t\t   invalid={!controls.email.valid}\r\n\t\t   shouldValidate={controls.email.validation}\r\n\t\t   touched={controls.email.touched}\r\n\t\t   changed={(event) => this.inputChangedHandler(event, controls.email.elementConfig.name)}\r\n\t\t  />\r\n\t\t  </InputGroup>\r\n\t\t  <InputGroup className=\"mb-4\">\r\n\t\t   <InputGroupAddon><i className=\"icon-lock\"></i></InputGroupAddon>\r\n\t\t   <Input\r\n\t\t    elementConfig={controls.password.elementConfig}\r\n\t\t    value={controls.password.value}\r\n\t\t    invalid={!controls.password.valid}\r\n\t\t    shouldValidate={controls.password.validation}\r\n\t\t    touched={controls.password.touched}\r\n\t\t    changed={(event) => this.inputChangedHandler(event, controls.password.elementConfig.name)}\r\n\t\t  />\r\n\t\t  </InputGroup>\r\n\t\t  <Row>\r\n\t\t   <Col xs=\"6\">\r\n\t\t    <Button onClick={() => this.submitHandler()}  color=\"primary\" className=\"px-4 ex-btn-primary\">Login</Button>\r\n\t\t   </Col>\r\n\t\t   <Col xs=\"6\" className=\"text-right\">\r\n\t\t   </Col>\r\n\t\t  </Row>\r\n\t\t<FormText>\r\n\t\t   {this.props.error}\r\n\t\t</FormText>\r\n\t\t</div>\r\n\t     </CardBody>\r\n\t   </Card>\r\n\t  </CardGroup>\r\n\t</Col>\r\n     </Row>\r\n   </Container>\r\n</div>);\r\n\r\n    return (\r\n\t<Aux>\r\n\t   {form}\r\n\t</Aux>\r\n    );\r\n  }\r\n}\r\n\r\nexport default compose(\r\n   graphql(signin, { name: 'signin' }),\r\n   graphql(updateAuthData, { name: 'updateAuthData' })\r\n)(Login);\r\n\r\n```\r\n\r\nmy resolver.js\r\n\r\n```\r\nimport gql from 'graphql-tag';\r\n\r\nexport default {\r\n\tdefaults: {\r\n\t\tupdateAuthData: null\r\n\t},\r\n\tresolvers: {\r\n\t\tMutation: {\r\n\t\t\tupdateAuthData: (_, { access_token }, { cache }) => {\r\n\t\t\t\tconst query = gql`\r\n                                   query GetCurrentAuthData {\r\n                                        currentAuthData @client {\r\n                                              access_token\r\n                                        }\r\n                                     }`;\r\n\t\t\t\tconst previous = cache.readQuery({ query })\r\n\t\t\t\tconst data = {\r\n\t\t\t\t\taccess_token\r\n\t\t\t\t}\r\n\t\t\t\tcache.writeQuery({ query, data });\r\n\t\t\t\treturn null;\r\n\t\t\t}\r\n\t\t}\r\n\t}\r\n}\r\n\r\n```\r\n\r\nmy mutations.js\r\n\r\n```\r\nexport const signin = gql`\r\n\tmutation signin($email: String!, $password: String!, $client_id: String!, $client_secret: String!) {\r\n\t\tsignin(email: $email, password: $password, client_id: $client_id, client_secret: $client_secret) {\r\n\t\t\taccess_token {\r\n\t\t\t\tvalue\r\n\t\t\t\texpires_in\r\n\t\t\t}\r\n\t\t\trefresh_token {\r\n\t\t\t\tvalue\r\n\t\t\t}\r\n\t\t\tuser {\r\n\t\t\t\tname\r\n\t\t\t\tsurname\r\n\t\t\t\tusername\r\n\t\t\t\temail\r\n\t\t\t}\r\n\t\t}\r\n\t}\r\n`;\r\n\r\nexport const updateAuthData = gql`\r\n\tmutation updateAuthData($access_token: String!) {\r\n\t\tupdateAuthData(access_token: $access_token) @client\r\n\t}\r\n`;\r\n```\r\n\r\nand my index.js \r\n```\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { BrowserRouter } from 'react-router-dom';\r\nimport { ApolloProvider } from 'react-apollo';\r\nimport { ApolloClient } from 'apollo-client';\r\nimport { ApolloLink } from 'apollo-link';\r\nimport { withClientState } from 'apollo-link-state';\r\nimport { HttpLink } from 'apollo-link-http';\r\nimport { InMemoryCache } from 'apollo-cache-inmemory';\r\nimport registerServiceWorker from './registerServiceWorker';\r\nimport updateAuthData from './views/Pages/Auth/resolvers';\r\nimport App from './App';\r\nimport 'font-awesome/css/font-awesome.min.css';\r\nimport 'simple-line-icons/css/simple-line-icons.css';\r\nimport './scss/core/_dropdown-menu-right.scss';\r\nimport '../node_modules/react-bootstrap-table/dist/react-bootstrap-table.min.css';\r\nimport './style.css';\r\n\r\nconst cache = new InMemoryCache();\r\nconst httpLink = new HttpLink({ uri: 'https://localhost:3001/graphql', fetch  });\r\nconst stateLink = withClientState({\r\n  cache,\r\n  resolvers: updateAuthData\r\n});\r\n\r\nconst client = new ApolloClient({\r\n\tlink: ApolloLink.from([stateLink, httpLink]),\r\n\tcache\r\n});\r\n\r\nconst app = (\r\n\t<BrowserRouter>\r\n\t\t<ApolloProvider client={client}>\r\n\t\t\t<App />\r\n\t\t</ApolloProvider>\r\n\t</BrowserRouter>\r\n);\r\n\r\nReactDOM.render(app, document.getElementById('root'));\r\nregisterServiceWorker();\r\n```\r\n\r\nWhat am I doing wrong?\r\n\r\nThank you\r\n\r\n"},"comment":{"url":"https://api.github.com/repos/apollographql/apollo-link-state/issues/comments/363488630","html_url":"https://github.com/apollographql/apollo-link-state/issues/199#issuecomment-363488630","issue_url":"https://api.github.com/repos/apollographql/apollo-link-state/issues/199","id":363488630,"user":{"login":"YannisMarios","id":11289298,"avatar_url":"https://avatars1.githubusercontent.com/u/11289298?v=4","gravatar_id":"","url":"https://api.github.com/users/YannisMarios","html_url":"https://github.com/YannisMarios","followers_url":"https://api.github.com/users/YannisMarios/followers","following_url":"https://api.github.com/users/YannisMarios/following{/other_user}","gists_url":"https://api.github.com/users/YannisMarios/gists{/gist_id}","starred_url":"https://api.github.com/users/YannisMarios/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/YannisMarios/subscriptions","organizations_url":"https://api.github.com/users/YannisMarios/orgs","repos_url":"https://api.github.com/users/YannisMarios/repos","events_url":"https://api.github.com/users/YannisMarios/events{/privacy}","received_events_url":"https://api.github.com/users/YannisMarios/received_events","type":"User","site_admin":false},"created_at":"2018-02-06T16:53:57Z","updated_at":"2018-02-06T16:53:57Z","author_association":"NONE","body":"I apologize for the wrong code above, but this is how I am calling it from  submitHandler:\r\n```\r\nsubmitHandler = async () => {\r\n   const email = this.state.controls.email.value;\r\n   const password = this.state.controls.password.value;\r\n   const { client_id, client_secret } = client;\r\n   const { signin, updateAuthData } = this.props;\r\n   if(this.state.controls.email.valid && this.state.controls.password.valid) {\r\n\tconst result = await signin({\r\n\t\tvariables: {\r\n\t\t\temail,\r\n\t\t\tpassword,\r\n\t\t\tclient_id,\r\n\t\t\tclient_secret\r\n\t\t}\r\n\t});\r\n\tconst { access_token } = result.data.signin;\r\n\tupdateAuthData({\r\n\t\tvariables: {\r\n\t\t\taccess_token: access_token.value\r\n\t\t}\r\n\t});\r\n\t// this.saveUserData(access_token.value);\r\n\t// this.props.history.push('/')\r\n   }\r\n}\r\n```\r\nMore over the <button> call was just a test I did. I want to call it from inside the submitHandler and it still gives me the error:\r\n\r\n```\r\nUncaught (in promise) Error: Network error: Cannot read property 'updateAuthData' of undefined\r\n    at new ApolloError (ApolloError.js:34)\r\n    at Object.error (QueryManager.js:118)\r\n    at SubscriptionObserver.error (zen-observable.js:174)\r\n    at <anonymous>\r\n  | ApolloError | @ | ApolloError.js:34\r\n-- | -- | -- | --\r\n  | error | @ | QueryManager.js:118\r\n  | error | @ | zen-observable.js:174\r\n  | Promise rejected (async) |   |  \r\n  | next | @ | index.js:84\r\n  | next | @ | zen-observable.js:154\r\n  | (anonymous) | @ | zen-observable.js:479\r\n  | Subscription | @ | zen-observable.js:103\r\n  | subscribe | @ | zen-observable.js:229\r\n  | (anonymous) | @ | index.js:72\r\n  | Subscription | @ | zen-observable.js:103\r\n  | subscribe | @ | zen-observable.js:229\r\n  | (anonymous) | @ | QueryManager.js:89\r\n  | ./node_modules/apollo-client/core/QueryManager.js.QueryManager.mutate | @ | QueryManager.js:85\r\n  | ./node_modules/apollo-client/ApolloClient.js.ApolloClient.mutate | @ | ApolloClient.js:95\r\n  | GraphQL.dataForChildViaMutation | @ | react-apollo.browser.umd.js:523\r\n  | _callee$ | @ | Login.js:75\r\n  | tryCatch | @ | runtime.js:62\r\n  | invoke | @ | runtime.js:296\r\n  | prototype.(anonymous function) | @ | runtime.js:114\r\n  | step | @ | utility.js:38\r\n  | (anonymous) | @ | utility.js:38\r\n```\r\n\r\nThank you\r\n\r\n\r\n\r\n"}}
{"actor":{"display_login":"YannisMarios"}}