apollo
apollo copied to clipboard
vuejs
loadingKey for mutation
There is no loadingKey feature on mutations at the moment. You can implement it very easily yourself:
this.loading ++
this.$apollo.mutate({
// Query
mutation: gql`mutation ($label: String!) {
addTag(label: $label) {
id
label
}
}`,
// Parameters
variables: {
label: newTag,
},
}).then((data) => {
this.loading --
}).catch((error) => {
this.loading --
});
Are there plans for this? We have a lot of cases where we do live updated forms, and want to have a "saving..." a la Google Docs. The amount of places we'd need to track variables for the mutation is doable but would be a lot easier if mutation just had a loadingKey instead of having to track variables in many different components.
I checked out the source code for adding this feature in a PR but at first look it seems more complex than I expected. mutate just seems to be a wrapper for apollo-client, and the query is tracked as part of smart-query via an observable in watchQuery and applyLoadingModifier. I didn't go any further because it seems like I'd need to deep-dive into apollo-client to follow it. Am I correct in this complexity or is it a simple matter of adding an observable to mutate the way watchQuery and subscribe have?
That looks plausible. In one case, we have a form with 10 fields. If the user changes a field, we send a mutation to the server with the update, and at the top of the form show "saving". When the migration is done, we show "saved" for a few seconds. It looks like if we wrap the whole form with the ApolloMutation component that it would work. I'll give it a shot, thanks!
ApolloMutation works great! We've started using the component operations and it makes the code so nice and easy. Thank you for the PROTIP!
I expected to at least have $apollo.loading set to true, but that doesn't get updated. :(
So the current way to do this, is just use the ApolloMutation component?
