Apollo-client: Mutation occurring twice despite being called only once when optimisticResponse is not specified

[rivertam]

I'm sorry if this is actually intended behavior (or a known bug). I don't see it documented anywhere, and I can't find any issues related to this.

I have a fairly simple React object, and I'm trying to pass it as parameters to a GraphQL mutation (apologies if my terminology is flawed; I'm new to GraphQL) using Apollo Client.

The following is how I'm using the compose and graphql HOCs on my component CompanyList. In my code, I'm calling the prop createUser one time.

export default compose(
  graphql(MutationCreateCompany, {
    // ...
  }),
  graphql(QueryAllCompanies, {
    // ...
  }),
  graphql(MutationCreateUser, {
    props: props => ({
      createUser: user => {
        console.log('mockingbird');
        return props.mutate({
          variables: user,
          /*optimisticResponse: () => ({
            createUser: { ...user, __typename: 'User' },
          }),*/
        });
      },
    }),
  }),
)(CompanyList);

import gql from 'graphql-tag';

export const MutationCreateUser = gql`
  mutation PutUserMutation(
    $username: String
    $email: String!
    $name: String
    $title: String
  ) {
    putUser(username: $username, email: $email, name: $name, title: $title) {
      username
      email
    }
  }
`;

Intended outcome:

Only one POST request would be made with my mutation.

Actual outcome:

Two POST requests are being made with identical mutations at the same time.

The word "mockingbird" is printed only once.

Only one POST request is made if I provide an optimisticResponse option (if I uncomment it from above)

How to reproduce the issue:

I don't really have the time to reproduce the issue unfortunately :confused:. Not my favorite thing to say as I know a reproduction repo is very useful. I'm not sure if this is specific to my application or a general thing for Apollo Client. I will say that I'm using the AWS AppSync preview client rather than the Apollo Client directly. I would not be terribly surprised if this were related. Looking through that repo, I don't see anything that jumps out at me, but if someone suspects it's an issue with that library, I will make an issue on that repo instead.

Version

• [email protected]

[nicokruger]

I'm having the same problem.

Providing an optimisticResponse fixes it for some reason. I am using AWS AppSync as the provider to apollo-client, I'm sure that has something to do with it :)

[rivertam]

@nicokruger Thanks for the data point. I'm going to add an issue to their repo.

[nicokruger]

Cool stuff, thanks for that.

I've added another comment to your issue over on their repo - it seems that while the optimisticResponse fixes the double POST, it causes a different issue where the optimisticResponse is never replaced with the real response from the server.

I've tried a simple "normal" graphql server and the behaviour seems to be correct, so it is pointing that the problem is in appsync's apollo client implementation.

[hwillson]

This doesn't sounds like an Apollo Client issue, so closing for now (let me know if you still think it is). Thanks!

[yashspr]

I had the same problem where a mutation was getting called twice but it was not related to optimisticResponse. It was happening because the mutation, in my case, took long time to process and the ExpressJS server was timing out the request and closing it after 2 mins which led the browser to retry the request which in turn called the mutation resolver again. I found a fix and wrote about it here.