登录表单上的 Vue-Apollo V4 组合 API @vue/apollo-composable TS2349：此表达式不可调用类型 'Ref<any>' 没有调用签名

如何解决登录表单上的 Vue-Apollo V4 组合 API @vue/apollo-composable TS2349：此表达式不可调用类型 'Ref<any>' 没有调用签名

我是阿波罗世界的新人。我将 Vue 组合 API 和 @vue/apollo-composable 与版本 V4 用于我的 vue apollo 客户端。以及带有 apollo 服务器的后端 ist nodejs 服务器。现在我在使用 useQuery 的登录页面上遇到问题，如果我调用查询结果，它们将显示错误“TS2349：此表达式不可调用。类型‘Ref’没有调用签名”。

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

调用结果：本行的loginBenutzer

 loginBenutzer({ kuerzel: username.value,passwort: password.value })

loginBenutzer 显示错误“TS2349：此表达式不可调用。类型‘Ref’没有调用签名”。

而在 Apollo 服务器中，类型是这样定义的

type Query {
        loginBenutzer(kuerzel: String!,passwort: String!): LoginResponse!,}

但是如果我将查询更改为突变，那么它们就可以工作了。像这样

    const { mutate: loginBenutzer } = useMutation(gql`
      mutation loginBenutzer($kuerzel: String!,passwort: password.value })
          .then(data => {
            useUserLogin(data.data.loginBenutzer)
            root.$router.push('/hm')
          })
          .catch(err => {
            errorMessage.value = err.message
            console.log(err)
          })
      }
    }

和这样的类型

    type Mutation {
        loginBenutzer(kuerzel: String!,}

但我很确定，用于调用用户信息的 useQuery 是正确的方法。谁能帮我。非常感谢！！！

解决方法

result：结果数据对象。

如documentation所说，result返回结果数据对象，它将是一个Ref类型，

refetch(variables?): 再次执行查询，可选择使用 new 变量。

如果您想传递新变量，请尝试使用 refetch