[Documentation] useMutation example for Vue Composition API

[DarkLite1]

Describe the bug Currently there's no example on how to use the useUpdateBooksMutation or something similar in the docs. It would be great if someone with knowledge could provide a simple example where loading, error onDone and mutation are used.

Additional context

Consider this mutation:

mutation {
  setViewerPreference(options: { language: "bb-bb" }) {
    language
  }
}

For this to work I created a file called setLanguage.graphql for graphql-codegen (a full options object as used in the Playground would've been better but I don't have that skill yet):

mutation setLanguage($language: String!) {
  setViewerPreference(options: { language: $language }) {
    language
  }
}

Using this in a component in Settings.vue looks like this:

<script lang="ts">
import { defineComponent, ref, watch } from '@vue/composition-api'
import { useSetLanguageMutation } from 'src/graphql/generated/operations'

export default defineComponent({
  setup(_, context) {
    const languageOptions = [
      { value: 'en-us', label: 'English' },
      { value: 'nl-be', label: 'Nederlands' },
    ]
    const language = ref(context.root.$i18n.locale)

    const { mutate, loading, error, onDone } = useSetLanguageMutation({
      variables: {
        language: 'ee-ee',
      },
    })

    watch(language, (newLanguage) => {
      context.root.$i18n.locale = newLanguage
      void mutate({ language: newLanguage })
    })

    return { language, languageOptions, }
  },
})
</script>

Questions/unclear

I don't understand why the function useSetLanguageMutation needs to be initialized with a variables value already? It would be great if one could just do this:

    const { mutate, loading, error, onDone } = useSetLanguageMutation()

    watch(language, (newLanguage) => {
      void mutate({ language: newLanguage })
    })

On a side note, when calling the mutate() function, the one that really executes the mutation, are the loading and other const returned by useSetLanguageMutation still usable?

I'm sorry for these stupid questions, but as you can see I'm a noob and would love to have a more detailed example or at least one example on how to properly use the useMutation generated by the graphql codegen. It would even be better if it would include an example on how to update the cache too, but this is of course out of scope for the codegen. I tried to follow this example but it's for react.

Thank you anyhow for reading this far.

[cdrx]

Anything you pass to mutate() is merged with anything you pass to useSetLanguageMutation({variables: ... }) so it can work both ways.

In your case uou can pass your variables directly to mutate(), you don't need to pass them to useSetLanguageMutation({variables: ...}) also.

The functions created by this library are thin wrappers around vue-apollo's composition API, you can find some documentation here: https://v4.apollo.vuejs.org/guide-composable/mutation.html

[spencerbull]

@DarkLite1 I was having the same issue, so thanks for posting the question and ask for documentation.

To extend on what @cdrx mentioned, you cannot "initialize" the mutate by const { mutate, loading, error, onDone } = useSetLanguageMutation()

You need to initialize it with an empty object. const { mutate, loading, error, onDone } = useSetLanguageMutation({})

Then you can call mutate({ language: newLanguage })