Update Data using the Apollo Mutation component

Share this video with your friends

Send Tweet

In this lesson we will use the Mutation component to invoke a mutation of a GraphQL API. In addition we cover how to update the local cache using refetch queries as well as improving the user experience when dealing with mutations.

In the end we discuss several gotchas related to Mutations and possible ways on how to tackle them.

Josh
Josh
~ 6 years ago

It's pretty tough to follow along when you dump a new component with a bunch of code into the start of the lesson, without showing all of the code. If I go to github, the code there is already updated to include the changes done in the lesson, so I can't even clone the starting code from anywhere. Please rethink this for next time, as following along is crucial for actually grasping the concepts.

Nik Graf
Nik Graf(instructor)
~ 6 years ago

@Josh thanks for your feedback. My goal was to solely focus on the Apollo part, but totally see your point. An additional lesson for the ones that want to see the React part as well could work. Will do this next time!

@Tony thanks, just informed the Egghead team and they will fix ist asap. Here is the correct link: https://github.com/nikgraf/graphql-apollo-client-course/tree/master/lesson-4

Kostiantyn Hryshyn
Kostiantyn Hryshyn
~ 6 years ago

Apollo cache is a headache in the real world ) Particularly the case when you need to update the cache manually and your component, in this case, start to require a lot of things that should not care about. I want to cry from the workarounds that needed to solve that issue!! The same thing we met with angular1 and two-way data binding - the best feature became the worst problem, Apollo cache on the same road =)))

Kostiantyn Hryshyn
Kostiantyn Hryshyn
~ 6 years ago

Anyway thanks Nick for this phrase!! there is no magic bullet on how to tackle these

Nik Graf
Nik Graf(instructor)
~ 6 years ago

@Kostiantyn yeah 😄

Bress B
Bress B
~ 5 years ago

It would be great if you could explain this implementation in more detail:

{ query: recipesQuery, variables: { vegetarian: false } }, { query: recipesQuery, variables: { vegetarian: true } }

This implementation is very specific to your example but how does it work more generally? Thank you.

Nik Graf
Nik Graf(instructor)
~ 5 years ago

@Bress in general you would want to refetch any query that is affected by your mutation to avoid inconsistent data presented to the user. Does that make sense?

Yannis
Yannis
~ 5 years ago

Hey, really nice course... will it be possible in the future to have an update with useMutation React hook ?

Nik Graf
Nik Graf(instructor)
~ 5 years ago

@Yannis will working in it in the coming weeks!