question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Mutation occurring twice despite being called only once when optimisticResponse is not specified

See original GitHub issue

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 😕. 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

  • apollo-client@2.2.0

Issue Analytics

  • State:closed
  • Created 6 years ago
  • Reactions:2
  • Comments:5 (1 by maintainers)

github_iconTop GitHub Comments

2reactions
nicokrugercommented, Jan 31, 2018

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 😃

1reaction
yashsprcommented, Jul 27, 2020

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.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Mutations in Apollo Client - Apollo GraphQL Docs
If your mutation specifies an optimistic response, your update function is called twice: once with the optimistic result, and again with the actual...
Read more >
graphql - Reactjs/Apollo/AppSync Mutation triggered twice
The mutation resolver was getting called twice because a 2nd POST request was being made to the server. But the client was making...
Read more >
Mutations - Client (React) - Apollo GraphQL Docs
If your mutation specifies an optimistic response, your update function is called twice: once with the optimistic result, and again with the actual...
Read more >
Optimistic UIs with React, Apollo Client and TypeScript (Part II)
When you send a message, the UI does not update with the message you just sent despite the server successfully processing the mutation...
Read more >
How to Prevent Double Requesting a Mutation in React Apollo
A quick tip on how to prevent someone from double clicking a mutation in React Apollo.----If you like cooking, checkout my side project: ......
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found