Vue3 Composition API Apollo Client userMutation() in watch function-CodePudding

I am using Vue3 with the composition API and Apollo client. I use an useQuery() function to query some data. With it I use a watcher like watch(result, (newVal) => {})

What I want to do is, using the useMutation() inside this watcher. But it does not work at all.

This is the error message I get:

Uncaught (in promise) Error: Apollo client with id default not found. Use provideApolloClient() if you are outside of a component setup.
at resolveClient (useApolloClient.ts:68:13)
at mutate (useMutation.ts:78:20)
at VerifyEmailView.vue:31:9
at callWithErrorHandling (runtime-core.esm-bundler.js:155:22)
at callWithAsyncErrorHandling (runtime-core.esm-bundler.js:164:21)
at job (runtime-core.esm-bundler.js:1776:17)
at callWithErrorHandling (runtime-core.esm-bundler.js:155:36)
at flushJobs (runtime-core.esm-bundler.js:388:17)

This is the code I use

import { useRouter } from 'vue-router'
import { useRoute } from 'vue-router'
import { useMutation, useQuery } from '@vue/apollo-composable'
import { useSessionStore } from '@/stores/SessionStore'
import UPDATE_NFCUSER_EMAIL_VERIFICATION_CODE from '@/graphql/UpdateNfcUserEmailVeriifcationCode.mutation.gql'
import GET_NFCUSER_ID_BY_EMAIL_VERIFICATION_CODE from '@/graphql/GetNfcUserIdByEmailVerificationCode.query.gql'
import { watch, ref } from 'vue'

const sessionStore = useSessionStore()
const router = useRouter()
const route = useRoute()
const route_verification_code = route.params.verification_code
const code_not_verified = ref(false)
const { result } = useQuery(GET_NFCUSER_ID_BY_EMAIL_VERIFICATION_CODE, {
  verification_code: route_verification_code,
})

watch(result, (newVal) => {
  if (newVal?.getNfcUserIdByEmailVerificationCode?.status === 200) {
    const nfc_user_id = newVal?.getNfcUserIdByEmailVerificationCode?.nfc_user_id

    if (nfc_user_id) {
      console.log('Verification Code is valid')

      sessionStore.setCurrentUserVerified(true)
      sessionStore.setCurrentNfcUserId(nfc_user_id)

      const { mutate } = useMutation(UPDATE_NFCUSER_EMAIL_VERIFICATION_CODE)

      mutate({
        nfcUserId: nfc_user_id,
      })
    } else {
      console.log('Code is not correct')
      code_not_verified.value = true
    }
  } else {
    console.log('Code is not correct')
    code_not_verified.value = true
  }
})

CodePudding user response：

Looking at the error it seems you would want to set the mutation variable outside of the watch() the same way you're using the query;

const { mutate: updateNfcUserEmailVerificationCode } = useMutation(UPDATE_NFCUSER_EMAIL_VERIFICATION_CODE);


// watch function
updateNfcUserEmailVerificationCode({ nfcUserId: nfc_user_id });

If you did want to use it in the watch() function it looks like you'll have to use the Apollo client directly: https://v4.apollo.vuejs.org/guide-option/mutations.html

// watch function
this.$apollo.mutate({
  mutation: UPDATE_NFCUSER_EMAIL_VERIFICATION_CODE,
  variables: { nfcUserId: nfc_user_id },
});