如何使用乐观响应配置命名 apollo 中的突变？

Question

这是我包装的组件：

export default compose(
    graphql(VOTE_MUTATION, { 
        name: 'voteMutation',
        props: ({ ownProps, mutate }) => ({
          submit({ commentId, commentContent }) {
            return mutate({
              variables: { input },
              optimisticResponse: {
                __typename: 'Mutation',
                updateComment: {
                  id: input.activeNews.id,
                  __typename: 'News',
                  ...input.activeNews
                },
              }
            });
          },
        }),
      }),
    graphql(ALL_NEWS_QUERY, { name: 'allNewsQuery' })
)(withApollo(withRouter(NewsFeed)))

然而，当我尝试调用突变时，出现一个错误，指出 this.props.voteMutation 不是一个函数？所以我不知道如何具体称呼这个名字。

我做了一个简单的注册和登录修改，效果很好：

export default compose(
    graphql(CREATE_USER_MUTATION, { name: 'createUserMutation' }),
    graphql(AUTHENTICATE_USER_MUTATION, { name: 'signinUserMutation' })
)(Login)

我用 this.props.createUserMutation() 调用它，但是，调用 this.props.voteMutation 不是一个函数。帮忙？

Answer 1

您应该使用 voteMutation 而不是 mutate。在映射之前自定义道具名称。另外，正确的解构方式是{ voteMutation, ...ownProps }，即便如此，你也没有在任何地方使用ownProps

因此，在您的代码段中将 mutate 替换为 voteMutation：

export default compose(
    graphql(VOTE_MUTATION, { 
        name: 'voteMutation',
        props: ({ voteMutation }) => ({
          submit({ commentId, commentContent }) {
            return voteMutation({
              variables: { input },
              optimisticResponse: {
                __typename: 'Mutation',
                updateComment: {
                  id: input.activeNews.id,
                  __typename: 'News',
                  ...input.activeNews
                },
              }
            });
          },
        }),
      }),
    graphql(ALL_NEWS_QUERY, { name: 'allNewsQuery' })
)(withApollo(withRouter(NewsFeed)))

如何使用乐观响应配置命名 apollo 中的突变？

how to name mutation in apollo with optimistic response config?

reactjs

graphql

react-apollo