{"action":"created","issue":{"url":"https://api.github.com/repos/apollographql/react-apollo/issues/470","repository_url":"https://api.github.com/repos/apollographql/react-apollo","labels_url":"https://api.github.com/repos/apollographql/react-apollo/issues/470/labels{/name}","comments_url":"https://api.github.com/repos/apollographql/react-apollo/issues/470/comments","events_url":"https://api.github.com/repos/apollographql/react-apollo/issues/470/events","html_url":"https://github.com/apollographql/react-apollo/issues/470","id":208874006,"number":470,"title":"ownProps does not have correct data when wrapping a component with 'graphql' after wrapping it with redux 'connect'","user":{"login":"yash0087","id":10033810,"avatar_url":"https://avatars.githubusercontent.com/u/10033810?v=3","gravatar_id":"","url":"https://api.github.com/users/yash0087","html_url":"https://github.com/yash0087","followers_url":"https://api.github.com/users/yash0087/followers","following_url":"https://api.github.com/users/yash0087/following{/other_user}","gists_url":"https://api.github.com/users/yash0087/gists{/gist_id}","starred_url":"https://api.github.com/users/yash0087/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/yash0087/subscriptions","organizations_url":"https://api.github.com/users/yash0087/orgs","repos_url":"https://api.github.com/users/yash0087/repos","events_url":"https://api.github.com/users/yash0087/events{/privacy}","received_events_url":"https://api.github.com/users/yash0087/received_events","type":"User","site_admin":false},"labels":[],"state":"closed","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":2,"created_at":"2017-02-20T13:03:31Z","updated_at":"2017-02-20T16:37:01Z","closed_at":"2017-02-20T16:37:01Z","body":"When i wrap a component with 'graphql' function after the component is wrapped with redux 'connect' function, i dont receive all the props as 'ownProps'.\r\n\r\nConsider the following,\r\n\r\n```javascript\r\nclass TestClass extends Component {\r\n   ..\r\n}\r\n\r\nconst mapDispatchToProps= () => ({\r\n    callbackFunction: () => {}\r\n})\r\n\r\nconst mapStateToProps = (state) => ({\r\n    test: state.test\r\n})\r\n\r\n```\r\n\r\nIn the following code 'cb' has the actual 'callbackFunction' and 'testState' has the 'test' value\r\n\r\n```javascript\r\nconst TestClassWithData = qraphql(QUERY, {\r\n   props: ({ownProps}) => {\r\n       const cb = ownProps.callbackFunction;\r\n       const testState = ownProps.test;\r\n   }\r\n})(TestClass);\r\n\r\nexport default connect(mapStateToProps, mapDispatchToProps)(TestClassWithData)\r\n```\r\n\r\n\r\nIn the following code 'cb' and 'testState' are undefined\r\n\r\n```javascript\r\nconst TestClassWithRedux = connect(mapStateToProps, mapDispatchToProps)(TestClass)\r\n\r\nexport default qraphql(QUERY, {\r\n   props: ({ownProps}) => {\r\n       const cb = ownProps.callbackFunction;\r\n       const testState = ownProps.test;\r\n   }\r\n})(TestClassWithRedux);\r\n\r\n```\r\n\r\nThis means that when I 'compose' them, I need to maintain the order in which I pass them.\r\n\r\nThe following will pass the props,\r\n\r\n```javascript\r\ncompose(\r\n    connect(mapStateToProps, mapDispatchToProps),\r\n    qraphql(QUERY,{})\r\n)(TestClass)\r\n```\r\n\r\nwhile the following will not pass the props\r\n\r\n```javascript\r\ncompose(\r\n    qraphql(QUERY,{}),\r\n    connect(mapStateToProps, mapDispatchToProps)\r\n)(TestClass)\r\n```"},"comment":{"url":"https://api.github.com/repos/apollographql/react-apollo/issues/comments/281125767","html_url":"https://github.com/apollographql/react-apollo/issues/470#issuecomment-281125767","issue_url":"https://api.github.com/repos/apollographql/react-apollo/issues/470","id":281125767,"user":{"login":"calebmer","id":8282507,"avatar_url":"https://avatars.githubusercontent.com/u/8282507?v=3","gravatar_id":"","url":"https://api.github.com/users/calebmer","html_url":"https://github.com/calebmer","followers_url":"https://api.github.com/users/calebmer/followers","following_url":"https://api.github.com/users/calebmer/following{/other_user}","gists_url":"https://api.github.com/users/calebmer/gists{/gist_id}","starred_url":"https://api.github.com/users/calebmer/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/calebmer/subscriptions","organizations_url":"https://api.github.com/users/calebmer/orgs","repos_url":"https://api.github.com/users/calebmer/repos","events_url":"https://api.github.com/users/calebmer/events{/privacy}","received_events_url":"https://api.github.com/users/calebmer/received_events","type":"User","site_admin":false},"created_at":"2017-02-20T16:37:01Z","updated_at":"2017-02-20T16:37:01Z","body":"If the `graphql` HOC has a dependency on the `connect` HOC then order does matter 😣\r\n\r\nI agree that the `compose` ordering feels unnatural and tricky to reason about. If you want an implementation that makes more sense, check out the Lodash `flow` function: https://lodash.com/docs/4.17.4#flow\r\n\r\nIt does the same thing as `compose`, but in the reverse order. Lodash’s `flowRight` does the same thing as `compose`."}}
{"actor":{"display_login":"calebmer"}}