Optimistic UI Approach in Angular 5

Optimistic UI Approach in Angular 5 :-

As described in the mutation section, optimistic UI is a pattern that you can use to mimic the results of the mutation and update the UI even before receiving a response from the server. Once the response is retrieved from the server, the optimistic result is thrown away and replaced with the real result.

Optimist UI provides an easy way to react to your UI very fast while ensuring that the data conforms to the actual response.

Basic Optimistic UI :-

Suppose we have an "edit comment" mutation, and we want to update the UI immediately when the user submits a mutation instead of waiting for a server response. This is what provides the optimistic response parameter to the mutate method.

The main way to get graphics data in your UI components with Apollo is to use a query, so if we want our optimistic response to updating the UI, then we have to make sure to return an optimistic response to the correct query result Will update Learn more about doing this with DataIDOrOrObject Option.

Here the example :

const updateComment = gql`
  mutation updateComment($commentId: ID!, $commentContent: String!) {
    updateComment(commentId: $commentId, commentContent: $commentContent) {
      id
      __typename
      content
    }
  }
`;

@Component({ ... })
class AppComponent {
  submit({ commentId, commentContent }) {
    this.apollo.mutate({
      variables: { commentId, commentContent },
      optimisticResponse: {
        __typename: 'Mutation',
        updateComment: {
          id: commentId,
          __typename: 'Comment',
          content: commentContent,
        },
      },
    }).subscribe();
  }
}

We select ID and __typename because it is used by our dataIdFromObject to determine the unique object ID globally. We need to make sure to provide the right prices for those areas so that Apollo can know what we are referring to.

Adding to a List:

In the above example, we showed how to edit an existing object basically in the store with an optimistic mutation result. However, many mutations do not only update an existing object in the store, but they enter a new one.

In that situation, we need to specify how to integrate new data into existing questions, and thus our UI You can read this in detail about how you can do this in the article about how to control particularly in the store, we can use the update method to insert results in the result set of the current query. Update works just like for optimal results and the actual result comes back to the server.

import CommentAppQuery from '../queries/CommentAppQuery';

const SUBMIT_COMMENT_MUTATION = gql`
  mutation submitComment($repoFullName: String!, $commentContent: String!) {
    submitComment(repoFullName: $repoFullName, commentContent: $commentContent) {
      postedBy {
        login
        html_url
      }
      createdAt
      content
    }
  }
`;

@Component({ ... })
class AppComponent {
  submit({ repoFullName, commentContent }) {
    this.apollo.mutate({
      variables: { repoFullName, commentContent },
      optimisticResponse: {
        __typename: 'Mutation',
        submitComment: {
          __typename: 'Comment',
          postedBy: ownProps.currentUser,
          createdAt: +new Date,
          content: commentContent,
        },
      },
      update: (proxy, { data: { submitComment } }) => {
        const data = proxy.readQuery({ query: CommentAppQuery });
        data.comments.push(submitComment);
        // Write our data back to the cache.
        proxy.writeQuery({ query: CommentAppQuery, data });
      },
    }).subscribe();
  }
H?

This is the best example, Which inserts a comment in the current list of comments.