I have been working with Vue3 and the composition API along with vue-apollo. I am trying to send a mutation to a GraphQL endpoint using useMutation(). However, while useQuery works perfectly fine, I am facing some issues with useMutation.
Initially, everything was working smoothly. But after running npm build on a different git branch, it seems to have stopped functioning properly.
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)
}
}
The mutation being used is 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
}
}
I'm encountering an error displaying here https://i.sstatic.net/dafLC.png
Here's my main.js file:
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')