5

在我的应用程序中发送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
            }
        }
    }
`

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

4

1 回答 1

3

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

如果您不需要组件中的突变，您可以添加命名查询（由于版本 0.11.1 / 特此相关查询必须至少调用一次，否则阿波罗商店不知道该查询），或者您可以添加查询自身以更新查询。

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

于 2017-03-06T15:27:24.673 回答