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 存储不知道该查询）或者您可以添加查询本身更新查询。

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