Vue3 Vue-Apollo Error Uncaught (in promise) Error: Apollo client with id default not found

Question

I use Vue3 with the composition API and vue-apollo. Now I want to send a mutation to an graphql enpoint with useMutation() as follows. The thing is, useQuery works just fine.

Everything worked fine, then I did npm run build but in a different git branch. And I think since then, it does not work anymore.

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

That's the mutation 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
  }
}

This is the error I get

This is my 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')

emmgee · Accepted Answer · 2022-11-20 08:32:07Z

I found a solution. It was pretty simple. I just placed the line with const { mutate, onDone, onError, error } = useMutation(ADD_CARDOWNER_MUTATION) outside the function it was in. Now it works correctly.

Before

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

Now

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

Collectives™ on Stack Overflow

Vue3 Vue-Apollo Error Uncaught (in promise) Error: Apollo client with id default not found

1 Answer 1

Before

Now

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Before

Now

Comments

Your Answer

Sign up or log in

Post as a guest

Related