Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Confusing part of documentation #1805

Open
milosa opened this issue Jul 31, 2022 · 0 comments
Open

Confusing part of documentation #1805

milosa opened this issue Jul 31, 2022 · 0 comments

Comments

@milosa
Copy link

milosa commented Jul 31, 2022

The GraphQL const is called CHANGE_POST_TITLE,
the method is called upvote()
and the text after the code talks about posting a new comment.

These are three different actions. Maybe this should be corrected?

Sometimes your client code can easily predict the result of the mutation, if it succeeds, even before the server responds with the result. For instance, in GitHunt, when a user comments on a repository, we want to show the new comment in context immediately, without waiting on the latency of a round trip to the server, giving the user the experience of a snappy UI. This is what we call [Optimistic UI](http://info.meteor.com/blog/optimistic-ui-with-meteor-latency-compensation). This is possible if the client can predict an *Optimistic Response* for the mutation.
Apollo Client gives you a way to specify the `optimisticResponse` option, that will be used to update active queries immediately, in the same way that the server's mutation response will. Once the actual mutation response returns, the optimistic part will be thrown away and replaced with the real result.
```typescript
import { Component } from '@angular/core';
import { Apollo, gql } from 'apollo-angular';
const CHANGE_POST_TITLE = gql`
mutation ChangePostTitle($postId: Int!, $title: String!) {
changePostTitle(postId: $postId, title: $title) {
id
title
}
}
`;
@Component({ ... })
class PostComponent {
currentUser: User;
constructor(private apollo: Apollo) {}
upvote({ postId, title }) {
this.apollo.mutate({
mutation: CHANGE_POST_TITLE,
variables: { postId, title },
optimisticResponse: {
__typename: 'Mutation',
changePostTitle: {
__typename: 'Post',
id: postId,
title
},
},
}).subscribe();
}
}
```
For the example above, it is easy to construct an optimistic response, since we know the shape of the new comment and can approximately predict the created date. The optimistic response doesn't have to be exactly correct because it will always will be replaced with the real result from the server, but it should be close enough to make users feel like there is no delay.
> As this comment is *new* and not visible in the UI before the mutation, it won't appear automatically on the screen as a result of the mutation. You can use [`updateQueries`](../caching/interaction.md#updatequeries) to make it appear in this case.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant