GraphQL变异后的updateQueries无法与Apollo客户端一起使用

Question

我送一后createMessage在我的应用程序突变，我想更新本地ApolloStore使用updateQueries 。

我的设置如下：

const ChatWithAllMessages = graphql(allMessages, {name: 'allMessagesQuery'})(Chat)
export default graphql(createMessage, {
   props({ownProps, mutate}) {
    return {
      createMessageMutation(text, conversationId) {
        return mutate({
          variables: { text, conversationId },
          updateQueries: {
            allConversations: (previousState, {mutationResult}) => {
              console.log('Chat - did send mutation for allConversationsQuery: ', previousState, mutationResult)
              return ...
            }
          }
        })
      }
    }
  }
})(ChatWithAllMessages)

我在我的代码中调用createMessageMutation ，如下所示：

_onSend = () => {
  this.props.createMessageMutation(this.state.message, this.props.conversationId)
}

通过这种设置，我希望我在updateQueries的值中指定的函数可以执行，但是，似乎没有发生（永远不会打印日志记录语句）。

作为参考，这是allConversation中的ApolloStore查询的样子：

另外，这是如何在我的JS代码中定义的：

const findConversations = gql`
    query allConversations($customerId: ID!) {
        allConversations(filter: {
          customer: {
            id: $customerId
          }
        }){
            id
            updatedAt
            slackChannelName
            agent {
                id
                slackUserName
            }
            messages(last: 1) {
                id
                text
                createdAt
            }
        }
    }
`

有没有人发现我做错了什么？

Answer 1

如果您在同一组件中使用查询和变异，则可以组成变异和查询。 像解决方案1中一样。

如果您不需要组件中的变异，则可以添加命名查询（因为版本0.11.1 /因此相关查询必须至少调用一次，否则apollo存储不知道查询）或者您可以添加查询自己updateQueries。

1）使用变异和查询的组件

 import { compose } from 'react-apollo'; ... import findConversationsQuery from './.../findConversationsQuery'; ... const ChatWithAllMessages = compose( graphql(allMessages, {name: 'allMessagesQuery'}), findConversationsQuery, graphql(createMessage, { props({ ownProps, mutate }) { return { createMessageMutation(text, conversationId) { return mutate({ variables: { text, conversationId }, updateQueries: { allConversations: (previousState, { mutationResult }) => { console.log('Chat - did send mutation for allConversationsQuery: ', previousState, mutationResult) return ... } } }) } } } })(Chat) 

使用文件中定义的graphql查询，因为您只想将其实例化一次

 import { graphql } from 'react-apollo'; import gql from 'graphql-tag'; const findConversations = gql` query allConversations($customerId: ID!) { allConversations(filter: { customer: { id: $customerId } }){ id updatedAt slackChannelName agent { id slackUserName } messages(last: 1) { id text createdAt } } } ` const findConversationsQuery = graphql(findConversations, { name: "findConversationsQuery" }); export default findConversationsQuery