I am a new one in the apollo world. i use Vue composition API and @vue/apollo-composable with version V4 for my vue apollo client. And the backend ist nodejs server with apollo server.
Now i have a problem on the loginpage with useQuery, if i call the result of the query, they will be show the error "TS2349: This expression is not callable. ??Type 'Ref' has no call signatures".
import { ref, defineComponent } from '@vue/composition-api'
import gql from 'graphql-tag'
import { useUserLogin } from '@/mixins/user-login'
import { CustomRules } from '@/validators/rules'
import { useQuery, useMutation } from '@vue/apollo-composable'
export default defineComponent({
props: {
msg: String,
},
setup(props, { root }) {
const form = ref()
const rules = ref(CustomRules)
const username = ref('')
const password = ref('')
const errorMessage = ref('')
const { result: loginBenutzer } = useQuery(gql`
query loginBenutzer($kuerzel: String!, $passwort: String!) {
loginBenutzer(kuerzel: $kuerzel, passwort: $passwort) {
user {
kuerzel: BEN_MIA_KUERZEL,
name: BEN_NAME
},
token
}
}
`)
function login() {
if (form.value.validate()) {
loginBenutzer({ kuerzel: username.value, passwort: password.value })
.then(data => {
useUserLogin(data.data.loginBenutzer)
root.$router.push('/hm')
})
.catch(err => {
errorMessage.value = err.message
console.log(err)
})
}
}
return {
form,
rules,
username,
password,
login,
errorMessage,
}
},
})
Calling to result: loginBenutzer of this line
loginBenutzer({ kuerzel: username.value, passwort: password.value })
the loginBenutzer shows the error "TS2349: This expression is not callable. Type 'Ref' has no call signatures".
And in the Apollo server type is defined like this
type Query {
loginBenutzer(kuerzel: String!, passwort: String!): LoginResponse!,
}
but if i change the query to mutation, then they are working. like this
const { mutate: loginBenutzer } = useMutation(gql`
mutation loginBenutzer($kuerzel: String!, $passwort: String!) {
loginBenutzer(kuerzel: $kuerzel, passwort: $passwort) {
user {
kuerzel: BEN_MIA_KUERZEL,
name: BEN_NAME
},
token
}
}
`)
function login() {
if (form.value.validate()) {
loginBenutzer({ kuerzel: username.value, passwort: password.value })
.then(data => {
useUserLogin(data.data.loginBenutzer)
root.$router.push('/hm')
})
.catch(err => {
errorMessage.value = err.message
console.log(err)
})
}
}
and the type like this
type Mutation {
loginBenutzer(kuerzel: String!, passwort: String!): LoginResponse!,
}
but i am very sure, the useQuery for the calling of user information is right way.
Can anyone help me. thank you very so much !!!
question from:
https://stackoverflow.com/questions/65852152/vue-apollo-v4-composition-api-vue-apollo-composable-on-loginform-ts2349-this