Я использую Vue3 с API композиции и клиентом Apollo.
Я использую функцию useQuery()
для запроса некоторых данных. С ним я использую вотчер вроде watch(result, (newVal) => {})
Что я хочу сделать, так это использовать useMutation()
внутри этого наблюдателя. Но это вообще не работает.
Это сообщение об ошибке, которое я получаю:
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)
Это код, который я использую
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.info('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.info('Code is not correct')
code_not_verified.value = true
}
} else {
console.info('Code is not correct')
code_not_verified.value = true
}
})
@StephenGilboy Конечно. Я добавил сообщение об ошибке консоли. Кстати, я внутри <script setup>
Глядя на ошибку, кажется, что вы хотели бы установить переменную мутации за пределами watch()
так же, как вы используете запрос;
const { mutate: updateNfcUserEmailVerificationCode } = useMutation(UPDATE_NFCUSER_EMAIL_VERIFICATION_CODE);
// watch function
updateNfcUserEmailVerificationCode({ nfcUserId: nfc_user_id });
Если вы действительно хотите использовать его в функции watch()
, похоже, вам придется использовать клиент Apollo напрямую: 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 },
});
Прежде всего, спасибо за помощь. Это привело меня на правильный путь. Вы должны использовать apolloClient
внутри watch()
так же, как вне setup()
. Я следовал этим инструкциям: v4.apollo.vuejs.org/guide-composable/setup.html Разница с вашей ссылкой в том, что ваша для API опций, но я использую API композиции. Но в любом случае ваш ответ был правильным.
Можете ли вы добавить какие-либо сообщения об ошибках, которые отображаются в консоли или в инструментах разработки Vue?