CODEWITHSUNDEEP
reactjsgraphqlreact-apollo
gpbaculio
gpbaculio

Reputation: 5968

how to name mutation in apollo with optimistic response config?

this is my wrapped component:

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)))

however when i try to invoke the mutation, i have an error that states this.props.voteMutation is not a function? so i do not have an idea how to call specifically the name.

I have done a simple signup and login mutation like this that works fine:

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

I call it with this.props.createUserMutation(), however, calling this.props.voteMutation is not a function. Help?

Upvotes: 0

Views: 343

Answers (1)

Ionut Achim
Ionut Achim

Reputation: 977

You're supposed to use voteMutation instead of mutate. Customizing the prop names kicks in before the mapping. Also, the correct way to destructure is { voteMutation, ...ownProps }, even so, you are not using ownProps anywhere

So, replace mutate with voteMutation in your snippet:

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)))

Upvotes: 1

Related Questions