{"action":"created","issue":{"url":"https://api.github.com/repos/apollographql/react-apollo/issues/996","repository_url":"https://api.github.com/repos/apollographql/react-apollo","labels_url":"https://api.github.com/repos/apollographql/react-apollo/issues/996/labels{/name}","comments_url":"https://api.github.com/repos/apollographql/react-apollo/issues/996/comments","events_url":"https://api.github.com/repos/apollographql/react-apollo/issues/996/events","html_url":"https://github.com/apollographql/react-apollo/issues/996","id":250906595,"node_id":"MDU6SXNzdWUyNTA5MDY1OTU=","number":996,"title":"Server rendering causing two renders on each side (twice on server, twice on client)","user":{"login":"lostpebble","id":1508863,"node_id":"MDQ6VXNlcjE1MDg4NjM=","avatar_url":"https://avatars0.githubusercontent.com/u/1508863?v=4","gravatar_id":"","url":"https://api.github.com/users/lostpebble","html_url":"https://github.com/lostpebble","followers_url":"https://api.github.com/users/lostpebble/followers","following_url":"https://api.github.com/users/lostpebble/following{/other_user}","gists_url":"https://api.github.com/users/lostpebble/gists{/gist_id}","starred_url":"https://api.github.com/users/lostpebble/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/lostpebble/subscriptions","organizations_url":"https://api.github.com/users/lostpebble/orgs","repos_url":"https://api.github.com/users/lostpebble/repos","events_url":"https://api.github.com/users/lostpebble/events{/privacy}","received_events_url":"https://api.github.com/users/lostpebble/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":{"login":"jbaxleyiii","id":4967600,"node_id":"MDQ6VXNlcjQ5Njc2MDA=","avatar_url":"https://avatars2.githubusercontent.com/u/4967600?v=4","gravatar_id":"","url":"https://api.github.com/users/jbaxleyiii","html_url":"https://github.com/jbaxleyiii","followers_url":"https://api.github.com/users/jbaxleyiii/followers","following_url":"https://api.github.com/users/jbaxleyiii/following{/other_user}","gists_url":"https://api.github.com/users/jbaxleyiii/gists{/gist_id}","starred_url":"https://api.github.com/users/jbaxleyiii/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/jbaxleyiii/subscriptions","organizations_url":"https://api.github.com/users/jbaxleyiii/orgs","repos_url":"https://api.github.com/users/jbaxleyiii/repos","events_url":"https://api.github.com/users/jbaxleyiii/events{/privacy}","received_events_url":"https://api.github.com/users/jbaxleyiii/received_events","type":"User","site_admin":false},"assignees":[{"login":"jbaxleyiii","id":4967600,"node_id":"MDQ6VXNlcjQ5Njc2MDA=","avatar_url":"https://avatars2.githubusercontent.com/u/4967600?v=4","gravatar_id":"","url":"https://api.github.com/users/jbaxleyiii","html_url":"https://github.com/jbaxleyiii","followers_url":"https://api.github.com/users/jbaxleyiii/followers","following_url":"https://api.github.com/users/jbaxleyiii/following{/other_user}","gists_url":"https://api.github.com/users/jbaxleyiii/gists{/gist_id}","starred_url":"https://api.github.com/users/jbaxleyiii/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/jbaxleyiii/subscriptions","organizations_url":"https://api.github.com/users/jbaxleyiii/orgs","repos_url":"https://api.github.com/users/jbaxleyiii/repos","events_url":"https://api.github.com/users/jbaxleyiii/events{/privacy}","received_events_url":"https://api.github.com/users/jbaxleyiii/received_events","type":"User","site_admin":false}],"milestone":null,"comments":21,"created_at":"2017-08-17T11:03:07Z","updated_at":"2018-10-13T20:09:01Z","closed_at":null,"author_association":"NONE","body":"<!--\r\n  Thanks for filing an issue on React Apollo!\r\n\r\n  Please make sure that you include the following information to ensure that your issue is actionable.\r\n\r\n  If you don't follow the template, your issue may end up being closed without anyone looking at it carefully, because it is not actionable for us without the information in this template.\r\n\r\n  If you're filing a feature request, you do not need to follow the outline below, but please include \"feature idea\" in the title and include a specific example in which that feature would be useful.\r\n-->\r\n\r\n**Intended outcome:**\r\n<!--\r\nWhat you were trying to accomplish when the bug occurred, and as much code as possible related to the source of the problem.\r\n-->\r\n\r\nI would like for my React app to render once on either side. Once on the server, get the state -> hydrate on client and render once.\r\n\r\nIt could end up causing quite a performance hit if I am essentially rendering my app 4 times for every request.\r\n\r\n**Actual outcome:**\r\n<!--\r\nA description of what actually happened, including a screenshot or copy-paste of any related error messages, logs, or other output that might be related. Places to look for information include your browser console, server console, and network logs. Please avoid non-specific phrases like “didn’t work” or “broke”.\r\n-->\r\n\r\nI've set up a simple `console.log(\"Rendering App\")` in my `App` render method. It shows that while the server is serving the request my app is rendering twice and also on the client my app is rendering twice:\r\n\r\n**Server:**\r\n![image](https://user-images.githubusercontent.com/1508863/29407956-99cf4b8e-8346-11e7-90cd-c494118e14ed.png)\r\n\r\n**Client:**\r\n![image](https://user-images.githubusercontent.com/1508863/29407930-7d5f4fee-8346-11e7-8e69-4640e3a45e8f.png)\r\n\r\nIt only happens when I use `getDataFromTree()` on the server side and on the client side it only occurs when I create my `ApolloClient` using an initial state in the options, in my case like this: `initialState: window.__APOLLO_STATE__`.\r\n\r\nThere are no other network requests going out from the client, so no queries being enacted etc. which might cause a re-render.\r\n\r\nI managed to find the render methods being called in Chrome Devtools:\r\n\r\n*You can see the first `App.render` a bit on the left there and the final (much shorter one) is on the right there in the blue bordered block*\r\n![image](https://user-images.githubusercontent.com/1508863/29408513-ca8d44ae-8348-11e7-9be9-8b5313828fe0.png)\r\n\r\nBoth of those `App.render` methods happen almost directly after a `proxiedMethod` and `GraphQL.render` method.\r\n\r\n**How to reproduce the issue:**\r\n<!--\r\nIf possible, please create a reproduction using https://github.com/apollographql/react-apollo-error-template and link to it here. If you prefer an in-browser way to create reproduction, try https://codesandbox.io/s/7361K9q6w\r\n\r\nInstructions for how the issue can be reproduced by a maintainer or contributor. Be as specific as possible, and only mention what is necessary to reproduce the bug. If possible, try to isolate the exact circumstances in which the bug occurs and avoid speculation over what the cause might be.\r\n-->\r\n\r\nOn the server (the method that returns all the stuff I place into my HTML response):\r\n```\r\nconst apolloClient = new ApolloClient({\r\n    ssrMode: true,\r\n    networkInterface: createNetworkInterface({\r\n      uri: \"https://api.graph.cool/simple/v1/cj6dds6fd2t2z0101yktqzgsd\",\r\n    }),\r\n  });\r\n\r\nconsole.log(\"Rendering to React\");\r\n\r\nconst app = wrapAppComponent(App, apolloClient);\r\nawait getDataFromTree(app);\r\nconst appHtml = renderToString(app);\r\n\r\nreturn { reactHtml: appHtml, reactState: {apollo: apolloClient.getInitialState()} };\r\n```\r\n\r\nOn the client:\r\n```\r\nconst apolloState = window.__APOLLO_STATE__;\r\n\r\nconst networkInterface = createNetworkInterface({\r\n  uri: \"https://api.graph.cool/simple/v1/cj6dds6fd2t2z0101yktqzgsd\",\r\n});\r\n\r\nconst client = new ApolloClient({\r\n  networkInterface,\r\n  initialState: apolloState,\r\n  ssrForceFetchDelay: 100,\r\n});\r\n```\r\n\r\n**Version**\r\n- apollo-client@ ?\r\n- react-apollo@1.4.14\r\n"},"comment":{"url":"https://api.github.com/repos/apollographql/react-apollo/issues/comments/429571465","html_url":"https://github.com/apollographql/react-apollo/issues/996#issuecomment-429571465","issue_url":"https://api.github.com/repos/apollographql/react-apollo/issues/996","id":429571465,"node_id":"MDEyOklzc3VlQ29tbWVudDQyOTU3MTQ2NQ==","user":{"login":"revskill10","id":1390196,"node_id":"MDQ6VXNlcjEzOTAxOTY=","avatar_url":"https://avatars3.githubusercontent.com/u/1390196?v=4","gravatar_id":"","url":"https://api.github.com/users/revskill10","html_url":"https://github.com/revskill10","followers_url":"https://api.github.com/users/revskill10/followers","following_url":"https://api.github.com/users/revskill10/following{/other_user}","gists_url":"https://api.github.com/users/revskill10/gists{/gist_id}","starred_url":"https://api.github.com/users/revskill10/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/revskill10/subscriptions","organizations_url":"https://api.github.com/users/revskill10/orgs","repos_url":"https://api.github.com/users/revskill10/repos","events_url":"https://api.github.com/users/revskill10/events{/privacy}","received_events_url":"https://api.github.com/users/revskill10/received_events","type":"User","site_admin":false},"created_at":"2018-10-13T20:09:01Z","updated_at":"2018-10-13T20:09:01Z","author_association":"NONE","body":"The only option here is don't use any of `Query` component on the server, so `getDataFromTree` will be fast.\r\nUse `getInitialProps` to request data instead."}}
{"actor":{"display_login":"revskill10"}}