javascript - Uncaught Error: react-apollo only supports a query, subscription, or a mutation per HOC - Stack Overflow

admin管理员组

文章数量:1291763

I'm trying to wrap my Chat ponent with two queries and one mutation using pose.

However, I'm still getting the following error in the console:

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 'pose' to join multiple operation types to a ponent

Here are my queries and the export statement:

// 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 pose(
  graphql(findConversations, {name: 'findConversationsQuery'}),
  graphql(allMessages, {name: 'allMessagesQuery'}),
  graphql(createMessage, {name : 'createMessageMutation'})
)(Chat)

Apparently, the issue is with the findConversations query. If I ment it out, I don't get the error and the ponent loads properly:

// this works
export default pose(
  // graphql(findConversations, {name: 'findConversationsQuery'}),
  graphql(allMessages, {name: 'allMessagesQuery'}),
  graphql(createMessage, {name : 'createMessageMutation'})
)(Chat)

Can anyone tell me what I'm missing?

By the way, I also have a subscription set up on the allMessagesQuery, in case that's relevant:

ponentDidMount() {

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

}

I'm trying to wrap my Chat ponent with two queries and one mutation using pose.

However, I'm still getting the following error in the console:

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 'pose' to join multiple operation types to a ponent

Here are my queries and the export statement:

// 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 pose(
  graphql(findConversations, {name: 'findConversationsQuery'}),
  graphql(allMessages, {name: 'allMessagesQuery'}),
  graphql(createMessage, {name : 'createMessageMutation'})
)(Chat)

Apparently, the issue is with the findConversations query. If I ment it out, I don't get the error and the ponent loads properly:

// this works
export default pose(
  // graphql(findConversations, {name: 'findConversationsQuery'}),
  graphql(allMessages, {name: 'allMessagesQuery'}),
  graphql(createMessage, {name : 'createMessageMutation'})
)(Chat)

Can anyone tell me what I'm missing?

By the way, I also have a subscription set up on the allMessagesQuery, in case that's relevant:

ponentDidMount() {

  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

Share Improve this question Follow asked Feb 25, 2017 at 14:45 nburknburk 22.8k1919 gold badges9292 silver badges134134 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 11

Your findConversationsQuery is actually two queries. This one:

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

And this one:

{
    id
}

The entire query needs to be enclosed between a single pair of opening and closing brackets.

I think what you meant to write is:

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

本文标签：