{"action":"created","issue":{"url":"https://api.github.com/repos/kriasoft/react-starter-kit/issues/1036","repository_url":"https://api.github.com/repos/kriasoft/react-starter-kit","labels_url":"https://api.github.com/repos/kriasoft/react-starter-kit/issues/1036/labels{/name}","comments_url":"https://api.github.com/repos/kriasoft/react-starter-kit/issues/1036/comments","events_url":"https://api.github.com/repos/kriasoft/react-starter-kit/issues/1036/events","html_url":"https://github.com/kriasoft/react-starter-kit/issues/1036","id":196223932,"number":1036,"title":"How to use apollo graphql client with universal router to render isomorphically","user":{"login":"mypark","id":470164,"avatar_url":"https://avatars.githubusercontent.com/u/470164?v=3","gravatar_id":"","url":"https://api.github.com/users/mypark","html_url":"https://github.com/mypark","followers_url":"https://api.github.com/users/mypark/followers","following_url":"https://api.github.com/users/mypark/following{/other_user}","gists_url":"https://api.github.com/users/mypark/gists{/gist_id}","starred_url":"https://api.github.com/users/mypark/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/mypark/subscriptions","organizations_url":"https://api.github.com/users/mypark/orgs","repos_url":"https://api.github.com/users/mypark/repos","events_url":"https://api.github.com/users/mypark/events{/privacy}","received_events_url":"https://api.github.com/users/mypark/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":8,"created_at":"2016-12-17T14:11:48Z","updated_at":"2017-02-17T15:15:49Z","closed_at":null,"body":"I'm trying to use the Apollo client and I am running into a few issues with dropping it into the react starter kit with redux.  https://github.com/kriasoft/react-starter-kit/tree/feature/redux\r\n\r\nTrying to use the techniques from here: http://dev.apollodata.com/react/server-side-rendering.html\r\n\r\nBut I get the error \r\n\r\n    warning.js:36Warning: React attempted to reuse markup in a container but the checksum was invalid. This generally means that you are using server rendering and the markup generated on the server was not what the client was expecting. React injected new markup to compensate which works but you have lost many of the benefits of server rendering. Instead, figure out why the markup being generated is different on the client or server:\r\n     (client) </div></header><div data-reactid=\"19\">Lo\r\n     (server) </div></header><div class=\"Home-root-2IM\r\n\r\n\r\nHere's my implementation\r\n\r\n    // server.js\r\n    ...\r\n    const component = (\r\n      <App context={context}>\r\n        <ApolloProvider client={context.client} store={context.store}>\r\n          {route.component}\r\n        </ApolloProvider>\r\n      </App>\r\n    );\r\n\r\n\r\n    await getDataFromTree(component);\r\n\r\n    data.children = ReactDOM.renderToString(component);\r\n    data.style = [...css].join('');\r\n    data.scripts = [\r\n      assets.vendor.js,\r\n      assets.client.js,\r\n    ];\r\n    data.state = context.store.getState();\r\n    if (assets[route.chunk]) {\r\n      data.scripts.push(assets[route.chunk].js);\r\n    }\r\n\r\n    const html = ReactDOM.renderToStaticMarkup(<Html {...data} />);\r\n    res.status(route.status || 200);\r\n    res.send(`<!doctype html>${html}`);\r\n    ...\r\n\r\nAnd client side\r\n\r\n    // client.js\r\n    ...\r\n    const component = (\r\n      <App context={context}>\r\n        <ApolloProvider client={context.client} store={context.store}>\r\n          {route.component}\r\n        </ApolloProvider>\r\n      </App>\r\n    );\r\n\r\n    appInstance = ReactDOM.render(\r\n     component,\r\n      container,\r\n      () => onRenderComplete(route, location),\r\n    );\r\n    ...\r\n\r\n\r\n\t// Home.js\r\n\r\n\tclass Home extends React.Component {\r\n\t  static propTypes = {\r\n\t    collections: PropTypes.arrayOf(PropTypes.shape({\r\n\t      id: PropTypes.string.isRequired,\r\n\t      title: PropTypes.string.isRequired,\r\n\t      subtitle: PropTypes.string.isRequired,\r\n\t      photo: PropTypes.string,\r\n\t    })).isRequired,\r\n\t  };\r\n\r\n\t  render() {\r\n\t    const props = this.props;\r\n\t    const { loading, allCollections } = props.data;\r\n\r\n\t    if (loading) {\r\n\t      return <div>Loading</div>;\r\n\t    } else {\r\n\t      return (\r\n\t        <div className={s.root}>\r\n\t          <div className={s.container}>\r\n\t            <h1 className={s.title}>Collections</h1>\r\n\t            <ul>\r\n\t              {allCollections.map((collection) =>\r\n\t                <li key={collection.id}>\r\n\t                  <h3>{collection.title}</h3>\r\n\t                  <img src={collection.photo} width=\"200\"/>\r\n\t                </li>\r\n\t              )}\r\n\t            </ul>\r\n\t          </div>\r\n\t        </div>\r\n\t      );\r\n\t    }\r\n\r\n\t  }\r\n\t}\r\n\r\n\tHome.propTypes = {\r\n\t  data: PropTypes.shape({\r\n\t    loading: PropTypes.bool.isRequired,\r\n\t    allCollections: PropTypes.array,\r\n\t  }).isRequired,\r\n\t};\r\n\r\n\r\n\tconst HomeWithStyles =  withStyles(s)(Home);\r\n\tconst HomeWithData = graphql(getQuery)(HomeWithStyles);\r\n\texport default connect()(HomeWithData);\r\n"},"comment":{"url":"https://api.github.com/repos/kriasoft/react-starter-kit/issues/comments/280676746","html_url":"https://github.com/kriasoft/react-starter-kit/issues/1036#issuecomment-280676746","issue_url":"https://api.github.com/repos/kriasoft/react-starter-kit/issues/1036","id":280676746,"user":{"login":"mypark","id":470164,"avatar_url":"https://avatars.githubusercontent.com/u/470164?v=3","gravatar_id":"","url":"https://api.github.com/users/mypark","html_url":"https://github.com/mypark","followers_url":"https://api.github.com/users/mypark/followers","following_url":"https://api.github.com/users/mypark/following{/other_user}","gists_url":"https://api.github.com/users/mypark/gists{/gist_id}","starred_url":"https://api.github.com/users/mypark/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/mypark/subscriptions","organizations_url":"https://api.github.com/users/mypark/orgs","repos_url":"https://api.github.com/users/mypark/repos","events_url":"https://api.github.com/users/mypark/events{/privacy}","received_events_url":"https://api.github.com/users/mypark/received_events","type":"User","site_admin":false},"created_at":"2017-02-17T15:15:49Z","updated_at":"2017-02-17T15:15:49Z","body":"I think client was the apollo client instance"}}
{"actor":{"display_login":"mypark"}}