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

Posted

技术标签:

【中文标题】未捕获的错误:react-apollo 仅支持每个 HOC 的查询、订阅或突变【英文标题】:Uncaught Error: react-apollo only supports a query, subscription, or a mutation per 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),
  )


【问题讨论】:

【参考方案1】:

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

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

还有这个:


    id

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

我想你的意思是:

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

【讨论】:

以上是关于未捕获的错误:react-apollo 仅支持每个 HOC 的查询、订阅或突变的主要内容,如果未能解决你的问题,请参考以下文章

React-Apollo 错误:“...仅支持每个 HOC 的查询、订阅或突变”

当服务器关闭时 React-Apollo 捕获

CKEDITOR - 未捕获的错误:元素不支持指定的元素模式:“元”

ReactJS/Javascript/Graphql/React-apollo:无法读取未定义的属性“正在加载”

GraphQL、react-apollo、Apollo 1,全局处理 200 HTTP 代码状态的 data.error 错误。不是网络一。

React-Apollo - 查询 - renderProp:反应警告:无法对未安装的组件执行反应状态更新