javascript - GraphQL 突变后的 updateQueries 不适用于 Apollo 客户端

Question

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

我的设置如下所示:

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 的值中指定的函数被执行，但是，这似乎并没有发生(从未打印日志语句)。

作为引用，这是 ApolloStore 中的 allConversation 查询的样子:

此外，这是我的 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