我正在尝试Chat
使用两个查询和一个突变来包装我的组件compose
。
但是,我仍然在控制台中收到以下错误:
未捕获的错误:
react-apollo
仅支持每个 HOC 的查询、订阅或突变。[object Object]
有 2 个查询、0 个订阅和 0 个突变。您可以使用 'compose
' 将多个操作类型连接到一个组件
这是我的查询和导出语句:
// this query seems to cause the issue
const findConversations = gql`
query allConversations($customerId: ID!) {
allConversations(filter: {
customerId: $customerId
})
} {
id
}
`
const createMessage = gql`
mutation createMessage($text: String!, $conversationId: ID!) {
createMessage(text: $text, conversationId: $conversationId) {
id
text
}
}
`
const allMessages = gql`
query allMessages($conversationId: ID!) {
allMessages(filter: {
conversation: {
id: $conversationId
}
})
{
text
createdAt
}
}
`
export default compose(
graphql(findConversations, {name: 'findConversationsQuery'}),
graphql(allMessages, {name: 'allMessagesQuery'}),
graphql(createMessage, {name : 'createMessageMutation'})
)(Chat)
显然,问题出在findConversations
查询上。如果我将其注释掉,我不会收到错误消息并且组件会正确加载:
// this works
export default compose(
// graphql(findConversations, {name: 'findConversationsQuery'}),
graphql(allMessages, {name: 'allMessagesQuery'}),
graphql(createMessage, {name : 'createMessageMutation'})
)(Chat)
谁能告诉我我错过了什么?
顺便说一句,我还在 上设置了订阅allMessagesQuery
,以防相关:
componentDidMount() {
this.newMessageSubscription = this.props.allMessagesQuery.subscribeToMore({
document: gql`
subscription {
createMessage(filter: {
conversation: {
id: "${this.props.conversationId}"
}
}) {
text
createdAt
}
}
`,
updateQuery: (previousState, {subscriptionData}) => {
...
},
onError: (err) => console.error(err),
})
}