React-apollo: New subscription data does not arrive for client who did mutation

Created on 2 Apr 2018  路  6Comments  路  Source: apollographql/react-apollo

Intended outcome:
Using the Subscription Component, all clients of an Apollo app with a subscription should get the new published data.

Actual outcome:
All clients except the one who did the mutation get the new published data.

How to reproduce the issue:
Some example code:

Typedefs:

type Comment {
  id: String
  content: String
}

type Mutation {
  addComment(content: String!): Comment
} 

type Subscription {
  commentAdded(repoFullName: String!): Comment
}

Resolvers:

export const resolvers = {
Mutation: {
  addComment: (root, args, context) => {
    //code to add comment

    //publish new data to all subscribers
    pubsub.publish(subCommentAdded, {
      commentAdded: comment,
      repoFullName: comment.repoFullName,
    })
  }
},

Subscription: {
  commentAdded: {
    subscribe: withFilter(() => pubsub.asyncIterator(subCommentAdded),
      (payload, variables) => payload.repoFullName === variables.repoFullName
    )
  },
},
}

Mutation component and Subscription Component in the React component that displays the data:

const mutationAddComment = gql`
  mutation addComment($content: String!) {
    addComment(content: $content) {
      id
      content
    }
  }
`

const COMMENTS_SUBSCRIPTION = gql`
  subscription onCommentAdded($repoFullName: String!) {
    commentAdded(repoFullName: $repoFullName) {
      id
      content
    }
  }
`;

const DontReadTheComments = ({ repoFullName }) => (
  <Mutation mutation={mutationAddComment}>
    {(addComment, { loading, error }) => (
      <div>
        <input
          onKeyDown={(event) => {
            if (event.key === 'Enter') addComment({ variables: { content: event.target.value } })
          }}
        />
        {loading && <p>Loading...</p>}
        {error && <p>Error: {error.message}</p>}
      </div>
    )}
  </Mutation>

  <Subscription
    subscription={COMMENTS_SUBSCRIPTION}
    variables={{ repoFullName }}
  >
    {({ data: { commentAdded }, loading }) => (
      <h4>New comment: {!loading && commentAdded.content}</h4>
    )}
  </Subscription>
);

Version

reproduction-needed

Most helpful comment

Other Subscriptions that are outside of the React component that contains the Mutation successfully get new published data.

All 6 comments

For the timebeing I've had to resort to using refetchQueries in order to update the UI of the client that did the mutation.

Other Subscriptions that are outside of the React component that contains the Mutation successfully get new published data.

I have the same issue :( any solution ?

Please PR a breaking test.

If anyone here can provide a small runnable reproduction, we'll take a look. Thanks!

@hwillson We have the same problem in 2020 with all dependencies updated to the latest version. A workaround is to add the changed field to the fields you get back from the mutation. But we also don't know where the problem is coming from.
The confusing part is that there is no incoming subscriptions message for this subscription on the client. Maybe it's a problem of the apollo server but we really don't know how to debug it.

Our stack includes: prisma 1.34.10, apollo-client 2.6.8, apollo-server-express 2.9.16, @apollo/react-hoc 3.1.3

Was this page helpful?
0 / 5 - 0 ratings