Vue3 Vue-Apollo Error Uncaught (in promise) 错误：未找到 ID 默认的 Apollo 客户端

Question

我将 Vue3 与组合 API 和vue-apollo一起使用。 现在我想使用useMutation()向 graphql enpoint 发送一个突变，如下所示。 问题是，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)的行放在它所在的 function 之外。现在它可以正常工作了。

前

<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>