vue.js - Vue-Apollo V4 composition API @vue/apollo-composable on loginform. TS2349: This expression is not callable. Type 'Ref<any>' has no call signatures

Question

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

Answer 1

Waitting for answers