未捕獲錯誤：react-apollo僅支持查詢，訂閱或每個HOC的突變

Question

我試圖用compose將我的Chat組件包含兩個查詢和一個突變。

不過，我還是發現了以下錯誤在控制檯：

Uncaught Error:react-apollo only supports a query, subscription, or a mutation per HOC. [object Object] had 2 queries, 0 subscriptions and 0 mutations. You can use ' compose ' to join multiple operation types to a component

這裏是我的查詢和導出聲明：

// 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), 
    }) 

} 

Answer 1

你findConversationsQuery實際上是兩個查詢。這一個：

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

而這其中：

{ 
    id 
} 

整個查詢需要一對打開和關閉托架之間被封閉。

我想你的意思寫的是：

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