# ApolloMutation component

Example:

<ApolloMutation
  :mutation="gql => gql`
    mutation DoStuff ($name: String!) {
      someWork (name: $name) {
        success
        timeSpent
      }
    }
  `"
  :variables="{
    name
  }"
  @done="onDone"
>
  <template v-slot="{ mutate, loading, error }">
    <button :disabled="loading" @click="mutate()">Click me</button>
    <p v-if="error">An error occurred: {{ error }}</p>
  </template>
</ApolloMutation>

# Props

  • mutation: GraphQL query (transformed by graphql-tag) or a function that receives the gql tag as argument and should return the transformed query
  • variables: Object of GraphQL variables
  • optimisticResponse: See optimistic UI
  • update: See updating cache after mutation
  • refetchQueries: See refetching queries after mutation
  • clientId: id of the Apollo Client used by the query (defined in ApolloProvider clients option)
  • tag: String HTML tag name (default: div); if undefined, the component will be renderless (the content won't be wrapped in a tag)

# Scoped slot props

  • mutate(options = undefined): Function to call the mutation. You can override the mutation options (for example: mutate({ variables: { foo: 'bar } }))
  • loading: Boolean indicating that the request is in flight
  • error: Eventual error for the last mutation call
  • gqlError: first GraphQL error if any

# Events

  • done(resultObject)
  • error(errorObject)
  • loading(boolean)