未捕获的错误：react-apollo 仅支持每个 HOC 的查询、订阅或突变答案

【问题标题】：Uncaught Error: react-apollo only supports a query, subscription, or a mutation per HOC未捕获的错误：react-apollo 仅支持每个 HOC 的查询、订阅或突变
【发布时间】：2017-07-16 09:32:36
【问题描述】：

我正在尝试使用compose 将我的Chat 组件包含两个查询和一个突变。

但是，我仍然在控制台中收到以下错误：

未捕获的错误： 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),
  })

}

【问题讨论】：

标签： javascript reactjs graphql apollo react-apollo

【解决方案1】：

您的findConversationsQuery 实际上是两个查询。这个：

query allConversations($customerId: ID!) {
    allConversations(filter: {
      customerId: $customerId
    })
}

还有这个：

{
    id
}

整个查询需要用一对左括号和右括号括起来。

我想你的意思是：

query allConversations($customerId: ID!) {
    allConversations(filter: { customerId: $customerId }){
        id
    }
}

【讨论】：