{"action":"closed","issue":{"url":"https://api.github.com/repos/apollographql/react-apollo/issues/1832","repository_url":"https://api.github.com/repos/apollographql/react-apollo","labels_url":"https://api.github.com/repos/apollographql/react-apollo/issues/1832/labels{/name}","comments_url":"https://api.github.com/repos/apollographql/react-apollo/issues/1832/comments","events_url":"https://api.github.com/repos/apollographql/react-apollo/issues/1832/events","html_url":"https://github.com/apollographql/react-apollo/issues/1832","id":308127948,"node_id":"MDU6SXNzdWUzMDgxMjc5NDg=","number":1832,"title":"Typescript: Cannot type-check wrapped children as function component ","user":{"login":"majelbstoat","id":425787,"node_id":"MDQ6VXNlcjQyNTc4Nw==","avatar_url":"https://avatars0.githubusercontent.com/u/425787?v=4","gravatar_id":"","url":"https://api.github.com/users/majelbstoat","html_url":"https://github.com/majelbstoat","followers_url":"https://api.github.com/users/majelbstoat/followers","following_url":"https://api.github.com/users/majelbstoat/following{/other_user}","gists_url":"https://api.github.com/users/majelbstoat/gists{/gist_id}","starred_url":"https://api.github.com/users/majelbstoat/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/majelbstoat/subscriptions","organizations_url":"https://api.github.com/users/majelbstoat/orgs","repos_url":"https://api.github.com/users/majelbstoat/repos","events_url":"https://api.github.com/users/majelbstoat/events{/privacy}","received_events_url":"https://api.github.com/users/majelbstoat/received_events","type":"User","site_admin":false},"labels":[{"id":854172197,"node_id":"MDU6TGFiZWw4NTQxNzIxOTc=","url":"https://api.github.com/repos/apollographql/react-apollo/labels/has-reproduction","name":"has-reproduction","color":"42f44e","default":false}],"state":"closed","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":1,"created_at":"2018-03-23T18:01:14Z","updated_at":"2018-06-14T23:37:12Z","closed_at":"2018-06-14T23:37:11Z","author_association":"NONE","body":"The WrappedComponent created by `graphql()` specifies the `children` prop as a `ReactNode`, which means it cannot be used for components that use the children as function pattern.\r\n\r\nWithout types, using example from https://github.com/apollographql/react-apollo/blob/master/test/typescript-usage.tsx that would look something like:\r\n\r\n```js\r\nconst historyQuery = gql`\r\n  query history($solutionId: String) {\r\n    history(solutionId: $solutionId) {\r\n      solutionId\r\n      delta\r\n    }\r\n  }\r\n`\r\nconst withProps = graphql(history, {\r\n    props: ({ data }) => ({\r\n      organisationData: data,\r\n    }),\r\n  }\r\n)\r\n\r\nconst Foo = withProps((props) => {\r\n  const {children, organisationData} = props\r\n  return children(organisationData.history)\r\n})\r\n\r\n<Foo>\r\n  {(history) => <div>history.delta</div>}\r\n</Foo>\r\n```\r\n\r\nIt currently appears impossible (or at the very least unclear) how you would type check this.\r\n```typescript\r\ninterface Data {\r\n  history: [\r\n    {\r\n      solutionId: string;\r\n      delta: number;\r\n    }\r\n  ];\r\n}\r\n\r\ninterface Props {\r\n  solutionId: string\r\n}\r\n\r\nconst withProps = graphql<Props, Data, {}, { organisationData: DataValue<Data> | undefined }>(\r\n  history,\r\n  {\r\n    props: ({ data }) => ({\r\n      organisationData: data,\r\n    }),\r\n  }\r\n)\r\n\r\n// Attempt 1\r\nconst Foo = withProps((props) => {\r\n  const {children, organisationData} = props\r\n  return children(organisationData!.history) // Error, children is not a function.\r\n})\r\n\r\n// Attempt 2\r\ninterface FooProps {\r\n  children(history: any): ReactNode\r\n}\r\n\r\nconst Foo = withProps((props: FooProps & { organisationData: DataValue<Data> | undefined }) => {\r\n  const {children, organisationData} = props\r\n  return children(organisationData!.history)\r\n}) // Error Types of property 'children' are incompatible\r\n\r\n```\r\n\r\n**Intended outcome:**\r\n\r\nIt should be possible to type-check this kind of pattern.\r\n\r\n**Version**\r\n\r\n* apollo-client@<version number> 2.2.5\r\n* react-apollo@<version number> 2.1.0\r\n\r\n- [x] has-reproduction\r\n- [ ] feature\r\n- [ ] docs\r\n- [ ] blocking\r\n- [ ] good first issue\r\n"}}
{"actor":{"display_login":"majelbstoat"}}