useMutation with nuxtjs/apollo

Question

Please someone help. I'm at my wits' end trying to get useMutation to work with nuxt 3 using nuxtjs/apollo.

First tried

<script setup>
...
const { mutate } useMutation(MY_MUTATION)
const myFunction = async () => {
  ...
  const response = await mutate(variables)
  ...
}
</script>

Which just throws Error: Apollo client with id default not found. Use provideApolloClient() if you are outside of a component setup. Which it is inside a setup.

Then

<script setup>
const myFunction = async () => {
  ...
  const { mutate } useMutation(MY_MUTATION, variables)
  const response = await mutate() // as well as trying mutate(variables) which throws the error above
  ...
}
</script>

Can anyone point me in the right direction or help with how this works. This has been very frustrating and the docs haven't been much help. useQuery and useAsyncQuery work just fine. Much appreciated.

Answer 1

Have been able to find a work around using this issue #444 in github, but this seems like a hack. Would expect not to have to explicitly add apollo-composable and this plugin file.

So basically had to import apollo-composable then add a plugin apollo.js file in the plugins directory. Then add the following code.

import {provideApolloClient} from '@vue/apollo-composable'

export default defineNuxtPlugin(() => {
  provideApolloClient(useApollo().clients.default)
})