loadingKey for mutation

[shomodj]

is it just me or loadingKey is not woking for mutations?

[yeusiukou]

I'm also having problems with loadingKey

[Akryum]

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 --
});

[shtse8]

Any plans to support loadingKey for mutation?

[enginkartal]

+1

[gijo-varghese]

+1

[PatrickJS]

+1

[pschaub]

+1

[bbugh]

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?

[Akryum]

Maybe you can use the <ApolloMutation> component?

[bbugh]

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!

[bbugh]

ApolloMutation works great! We've started using the component operations and it makes the code so nice and easy. Thank you for the PROTIP!

[chadwtaylor]

+1

[siegy22]

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?

[kieuminhcanh]

+1

[TkaczykAdam]

June 2021 and $apollo.loading not work with mutation 😞