Vue3 Vue-阿波罗错误未发现(承诺)错误:未找到id默认值的阿波罗客户端

Question

我将Vue3与复合API和vue-apollo结合使用。现在，我想向带有useMutation()的graphql点发送一个突变，如下所示。问题是，useQuery工作得很好。

一切都很好，然后我做了npm run build，但在一个不同的git分支。我认为从那以后，它就不再起作用了。

try {
      const { mutate, onDone, onError, error } = useMutation(ADD_CARDOWNER_MUTATION)

      mutate({
        email: register.email,
        username: register.email,
        password: '',
        first_name: register.firstName,
        last_name: register.lastName,
        nfc_user_avatar: register.avatar_id,
        nfc_user_addresses: register.addresses,
        nfc_user_contacts: register.contacts,
        nfc_user_links: register.links,
        nfc_user_company: register.companyName,
        nfc_user_position: register.position,
        nfc_user_title: register.title,
        nfc_user_position__public: register.positionPublic,
        nfc_user_company__public: register.companyPublic,
        nfc_user_agb__accepted: register.agbAccepted,
      })

      onDone((data) => {
        //formNav.next()
        console.log('data', data)
      })

      onError(() => {
        console.log(error.value)
      })
    } catch (error) {
      console.error(error)
    }
  }

那是突变ADD_CARDOWNER_MUTATION

mutation AddCardOwner(
  $email: String
  $password: String
  $username: String
  $first_name: String
  $last_name: String
  $nfc_user_addresses: [NFCUserAddress]
  $nfc_user_contacts: [NFCUserContact]
  $nfc_user_links: [NFCUserLink]
  $nfc_user_agb__accepted: Boolean
  $nfc_user_position__public: Boolean
  $nfc_user_company__public: Boolean
  $nfc_user_company: String
  $nfc_user_position: String
  $nfc_user_title: String
  $nfc_user_avatar: String
) {
  registerNFCUser(
    input: {
      email: $email
      password: $password
      username: $username
      first_name: $first_name
      last_name: $last_name
      nfc_user_addresses: $nfc_user_addresses
      nfc_user_contacts: $nfc_user_contacts
      nfc_user_links: $nfc_user_links
      nfc_user_agb__accepted: $nfc_user_agb__accepted
      nfc_user_company__public: $nfc_user_company__public
      nfc_user_position__public: $nfc_user_position__public
      nfc_user_company: $nfc_user_company
      nfc_user_position: $nfc_user_position
      nfc_user_title: $nfc_user_title
      nfc_user_avatar: $nfc_user_avatar
    }
  ) {
    nfc_user_id
    user_id
    registered
    username
    status
    error
  }
}

这就是我所犯的错误

​

这是我的main.js

import { provide, createApp, defineAsyncComponent, h } from 'vue'
import { createPinia } from 'pinia'
import App from './App.vue'
import router from './router'
import './assets/main.css'
import UUID from 'vue3-uuid'
import { ApolloClient, createHttpLink, InMemoryCache } from '@apollo/client/core'
import { DefaultApolloClient } from '@vue/apollo-composable'

const httpLink = createHttpLink({
  uri: import.meta.env.VITE_PUBLIC_API_URI,
  credentials: 'include',
})

const cache = new InMemoryCache()
const apolloClient = new ApolloClient({
  link: httpLink,
  cache: cache,
})

const app = createApp({
  setup() {
    provide(DefaultApolloClient, apolloClient)
  },
  render: () => h(App),
})

const requireComponent = import.meta.glob('./components/**/**/*.vue')

Object.entries(requireComponent).forEach(([path, definition]) => {
  const componentName = path
    .split('/')
    .pop()
    .replace(/\.\w+$/, '')
  app.component(componentName, defineAsyncComponent(definition))
})

app.use(router)
app.use(createPinia())
app.use(UUID)
app.mount('#app')

Answer 1

我找到了解决办法。很简单。我只是把const { mutate, onDone, onError, error } = useMutation(ADD_CARDOWNER_MUTATION)的行放在它所在的函数之外。现在它正常工作了。

在此之前

<script setup>
  import { useRegisterDataStore } from '@/stores/RegisterDataStore.js'
  import { useFormNavStore } from '@/stores/FormNavStore.js'
  import { ref } from 'vue'
  import { useMutation } from '@vue/apollo-composable'
  import ADD_CARDOWNER_MUTATION from '@/graphql/AddCardOwner.mutation.gql'

  const register = useRegisterDataStore()
  const formNav = useFormNavStore()
  const email = ref('')
 

  const addEmail = () => {
    register.updateCardOwner('email', email.value)
    email.value = ''

    try {
       //--> this line was in the wrong place
       const { mutate, onDone, onError, error } = useMutation(ADD_CARDOWNER_MUTATION)
      
       mutate({
        email: register.email,
        username: register.email,
        password: '',
        first_name: register.firstName,
        last_name: register.lastName,
        nfc_user_avatar: register.avatar_id,
        nfc_user_addresses: register.addresses,
        nfc_user_contacts: register.contacts,
        nfc_user_links: register.links,
        nfc_user_company: register.companyName,
        nfc_user_position: register.position,
        nfc_user_title: register.title,
        nfc_user_position__public: register.positionPublic,
        nfc_user_company__public: register.companyPublic,
        nfc_user_agb__accepted: register.agbAccepted,
      })

      onDone((data) => {
        //formNav.next()
        console.log('data', data)
      })

      onError(() => {
        console.error(error.value)
      })
    } catch (error) {
      console.error(error)
    }
  }
</script>

现在

<script setup>
  import { useRegisterDataStore } from '@/stores/RegisterDataStore.js'
  import { useFormNavStore } from '@/stores/FormNavStore.js'
  import { ref } from 'vue'
  import { useMutation } from '@vue/apollo-composable'
  import ADD_CARDOWNER_MUTATION from '@/graphql/AddCardOwner.mutation.gql'

  const register = useRegisterDataStore()
  const formNav = useFormNavStore()
  const email = ref('')
  
  //--> Moved the line
  const { mutate, onDone, onError, error } = useMutation(ADD_CARDOWNER_MUTATION)

  const addEmail = () => {
    register.updateCardOwner('email', email.value)
    email.value = ''

    try {
      mutate({
        email: register.email,
        username: register.email,
        password: '',
        first_name: register.firstName,
        last_name: register.lastName,
        nfc_user_avatar: register.avatar_id,
        nfc_user_addresses: register.addresses,
        nfc_user_contacts: register.contacts,
        nfc_user_links: register.links,
        nfc_user_company: register.companyName,
        nfc_user_position: register.position,
        nfc_user_title: register.title,
        nfc_user_position__public: register.positionPublic,
        nfc_user_company__public: register.companyPublic,
        nfc_user_agb__accepted: register.agbAccepted,
      })

      onDone((data) => {
        //formNav.next()
        console.log('data', data)
      })

      onError(() => {
        console.error(error.value)
      })
    } catch (error) {
      console.error(error)
    }
  }
</script>