我想打電話給我創建了一個陣營組件上的幾個功能,特別是從react-apollo調用撰寫的反應的組分進口功能
的graphql()
功能我用的模式:
import someFunction from "../somewhere";
const withData = compose(
graphql(gqlDocument, { name: "Name" }),
graphql(anotherDocument, { name: "Name2" }),
someFunction()
...
)
const ComponentWithData = withData(Component);
export default ComponentWithData
該作品很好,除非我嘗試使用我在另一個文件中定義並導入的函數。儘管字面上是完全相同的形式,即graphql(document, { name: "Name" })
我得到的錯誤:Uncaught TypeError: Cannot read property 'apply' of undefined
。如果我簡單地從外部模塊複製並粘貼該功能並將其放入組合模塊中,則它可以很好地工作,所以問題的關鍵在於如何在此功能組合中處理apply
。
當函數有效時,ComponetWithData
應該有一個名爲「Name」的道具,它代表傳遞給graphql()
函數的graphql文檔。這尤其令人困惑,因爲react-apollo的訂閱實現需要將React組件傳遞給改變其道具的函數,但是我可以毫不費力地定義外部訂閱函數。這裏是供參考的模式:
const COMMENTS_SUBSCRIPTION = gql`
subscription onCommentAdded($repoFullName: String!){
commentAdded(repoFullName: $repoFullName){
id
content
}
}
`;
const withData = graphql(COMMENT_QUERY, {
name: 'comments',
options: ({ params }) => ({
variables: {
repoName: `${params.org}/${params.repoName}`
},
}),
props: props => {
return {
subscribeToNewComments: params => {
return props.comments.subscribeToMore({
document: COMMENTS_SUBSCRIPTION,
variables: {
repoName: params.repoFullName,
},
updateQuery: (prev, {subscriptionData}) => {
if (!subscriptionData.data) {
return prev;
}
const newFeedItem = subscriptionData.data.commentAdded;
return Object.assign({}, prev, {
entry: {
comments: [newFeedItem, ...prev.entry.comments]
}
});
}
});
}
};
},
});