Anatomy of a Mutation (Apollo GraphQL)

What is a Mutation?

What does a Mutation look like?

Mutation Resolvers

What are the parameters?

What about Optimistic UI?

The Anatomy of Optimistic UI

Credits Slava Kim/ApolloStack
  1. EVERYTHING BEGINS AND END WITH THE USER. They are the power driving mutations through their interface, and they are the ones expecting the side effects of those mutations reflective in the views they are interacting with.
  2. The flow is as Unidirectional as possible. Much like the paradigms of Flux, this flow moves in one way starting from the User to the Server then back to the user.
  3. An Optimistic Response is an illusion. Programmers are magicians, and thus we THINK we know that you know what you just mutated. So what we do in optimistic scenarios is give you what you thought was going to happen. A perfect example is adding a post to a list of posts. You are the author of the post in question, so our optimistic response is taking this post and adding it to the list right away. Why? So this looks like our website is super fast, and the user gets INSTANT feedback on actions they take in the system.
  4. The Server is the source of truth. You can see once the Optimistic Response is sent to the User’s view, the server takes the same request and goes through its processing. Once its ready to reaffirm the client that what it has is correct, it jumps over the latency divide and updates the store. Most of the time, the user will not notice a change. But there will be instances that the server may have a more complete view of the world and will update the optimistic response with the truth. Bottom line, design systems that provide the least amount of judder to the user. Keep optimistic responses similar to the latency bound response.
  5. All of this is possible because Redux is awesome. Shameless plug.

Conclusion

--

--

--

Software Engineer at Workpop, Inc.

Love podcasts or audiobooks? Learn on the go with our new app.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Abhi Aiyer

Abhi Aiyer

Software Engineer at Workpop, Inc.

More from Medium

TypeScript Enums: What they are and why you should avoid them

Understanding Typescript Distributive Conditional Types with a Source Code Debugging Approach

Using Local and Production ENV Variables in Expo React Native

“Flat” Promises for Reactive Code