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的值中指定的函数可以执行，但是，似乎没有发生（永远不会打印日志记录）。

供参考，这是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）使用变异和查询的组件

＆＃13;

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)

＆＃13;

在文件中定义了graphql查询，因为你只想让它实例化一次

＆＃13;

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

＆＃13;

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

1 个答案: