React withGraphQL: Optimistic Response - What & Why

The Problem

You start your new project with React & GraphQL. It's super cool & you tried to make it super-fast. But your backend is reaaaally slow and all these loaders are unbelievably annoying. You are a client-oriented developer and trying your best to solve this problem. Likely for you, as you used GraphQL, we can use the Optimistic UI approach.

Official definition: Optimistic UI is a pattern that you can use to simulate the results of a mutation and update the UI even before receiving a response from the server. Once the response is received from the server, the optimistic result is thrown away and replaced with the actual result.

I couldn't say better:)
So we only simulate that the backend sends us the response right away so from the user's perspective every response comes instantly.

How to use?

When we call a mutation we can also pass an additional optimisticResponse property and describe what we're going to retrieve from it. That one we would eventually receive from the backend. Here's an example:

 updateComment({  
      variables: { commentId, commentContent },
      optimisticResponse: {  
          __typename: 'Mutation',  
          updateComment: {  
          id: commentId,  
              __typename: 'Comment',  
              content: commentContent,  
          },  
      },  
})

Basically, when you call this mutation GraphQL will update the cache for this comment with new data instantly.

Also, you can update the cache manually when data will arrive from the backend but it's a totally new story. For now, check this feature out and write in the comments what do you think about it.

For more details go to the official GraphQL documentation