Vue3 Composition API Apollo Client userMutation() в функции просмотра

Я использую 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.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
  }
})

Можете ли вы добавить какие-либо сообщения об ошибках, которые отображаются в консоли или в инструментах разработки Vue?

Stephen Gilboy 21.11.2022 21:39

@StephenGilboy Конечно. Я добавил сообщение об ошибке консоли. Кстати, я внутри <script setup>

foofourtyone 22.11.2022 07:41
Шаблоны Angular PrimeNg
Шаблоны Angular PrimeNg
Как привнести проверку типов в наши шаблоны Angular, использующие компоненты библиотеки PrimeNg, и настроить их отображение с помощью встроенной...
Создайте ползком, похожим на звездные войны, с помощью CSS и Javascript
Создайте ползком, похожим на звездные войны, с помощью CSS и Javascript
Если вы веб-разработчик (или хотите им стать), то вы наверняка гик и вам нравятся "Звездные войны". А как бы вы хотели, чтобы фоном для вашего...
Документирование API с помощью Swagger на Springboot
Документирование API с помощью Swagger на Springboot
В предыдущей статье мы уже узнали, как создать Rest API с помощью Springboot и MySql .
Начала с розового дизайна
Начала с розового дизайна
Pink Design - это система дизайна Appwrite с открытым исходным кодом для создания последовательных и многократно используемых пользовательских...
Шлюз в PHP
Шлюз в PHP
API-шлюз (AG) - это сервер, который действует как единая точка входа для набора микросервисов.
14 Задание: Типы данных и структуры данных Python для DevOps
14 Задание: Типы данных и структуры данных Python для DevOps
проверить тип данных используемой переменной, мы можем просто написать: your_variable=100
0
2
76
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Глядя на ошибку, кажется, что вы хотели бы установить переменную мутации за пределами 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 композиции. Но в любом случае ваш ответ был правильным.

foofourtyone 23.11.2022 10:46

Другие вопросы по теме