support mutation outside composition functions

packages/test-e2e-composable-vue3/server.js

@@ -24,6 +24,7 @@ type Query {
 }
 
 type Mutation {
+  personalizedHello (name: String!): String
   addMessage (input: AddMessageInput!): Message
   updateMessage (input: UpdateMessageInput!): Message
 }
@@ -75,6 +76,7 @@ const resolvers = {
   },
 
   Mutation: {
+    personalizedHello: (root, { name }) => `Hello ${name}!`,
     addMessage: (root, { input }) => {
       const channel = channels.find(c => c.id === input.channelId)
       if (!channel) {

packages/test-e2e-composable-vue3/src/components/NoSetupMutation.vue

@@ -0,0 +1,33 @@
+<script lang="ts">
+import { apolloClient } from '@/apollo'
+import { gql } from '@apollo/client/core'
+import { provideApolloClient, useMutation, useResult } from '@vue/apollo-composable'
+import { defineComponent, ref } from 'vue'
+
+// Global mutation
+
+const greeting = ref('')
+provideApolloClient(apolloClient)(() => {
+  const { mutate } = useMutation(gql`
+    mutation getPersonalizedHello ($name: String!) { 
+        greeting: personalizedHello (name: $name)
+    }
+    `)
+  mutate({ name: 'John' }).then(result => greeting.value = result.data.greeting)
+},
+)
+
+export default defineComponent({
+  setup () {
+    return {
+      greeting,
+    }
+  },
+})
+</script>
+
+<template>
+  <div class="no-setup-mutation">
+    {{ greeting }}
+  </div>
+</template>

packages/test-e2e-composable-vue3/src/router.ts

@@ -2,6 +2,7 @@ import { createRouter, createWebHistory } from 'vue-router'
 import Welcome from './components/Welcome.vue'
 import ChannelView from './components/ChannelView.vue'
 import NoSetupQuery from './components/NoSetupQuery.vue'
+import NoSetupMutation from './components/NoSetupMutation.vue'
 import LazyQuery from './components/LazyQuery.vue'
 
 export const router = createRouter({
@@ -22,6 +23,10 @@ export const router = createRouter({
       path: '/no-setup-query',
       component: NoSetupQuery,
     },
+    {
+      path: '/no-setup-mutation',
+      component: NoSetupMutation,
+    },
     {
       path: '/lazy-query',
       component: LazyQuery,

packages/test-e2e-composable-vue3/tests/e2e/specs/test.js

@@ -57,6 +57,11 @@ describe('Vue 3 + Apollo Composable', () => {
     cy.contains('.no-setup-query', 'Hello world!')
   })
 
+  it('supports mutations outside of setup', () => {
+    cy.visit('/no-setup-mutation')
+    cy.contains('.no-setup-mutation', 'Hello John!')
+  })
+
   it('useLazyQuery', () => {
     cy.visit('/lazy-query')
     cy.get('.list-disc').should('have.length', 0)

packages/vue-apollo-composable/src/useMutation.ts

@@ -1,10 +1,11 @@
 import { DocumentNode } from 'graphql'
 import { MutationOptions, OperationVariables, FetchResult, TypedDocumentNode } from '@apollo/client/core'
-import { ref, onBeforeUnmount, isRef, Ref } from 'vue-demi'
+import { ref, onBeforeUnmount, isRef, Ref, getCurrentInstance } from 'vue-demi'
 import { useApolloClient } from './useApolloClient'
 import { ReactiveFunction } from './util/ReactiveFunction'
 import { useEventHook } from './util/useEventHook'
 import { trackMutation } from './util/loadingTracking'
+import { CurrentInstance } from './util/types'
 
 /**
  * `useMutation` options for mutations that don't require `variables`.
@@ -43,8 +44,10 @@ export function useMutation<
   document: DocumentParameter<TResult, TVariables>,
   options: OptionsParameter<TResult, TVariables> = {},
 ): UseMutationReturn<TResult, TVariables> {
+  const vm = getCurrentInstance() as CurrentInstance | null
+
   const loading = ref<boolean>(false)
-  trackMutation(loading)
+  vm && trackMutation(loading)
   const error = ref<Error | null>(null)
   const called = ref<boolean>(false)
 
@@ -99,7 +102,7 @@ export function useMutation<
     }
   }
 
-  onBeforeUnmount(() => {
+  vm && onBeforeUnmount(() => {
     loading.value = false
   })