Vue Apollo V4组合API@Vue/Apollo可在loginform上组合。TS2349：此表达式不可调用。类型“Ref”没有调用签名

Question

我是阿波罗世界的新人。我为我的Vue apollo客户端使用Vue composition API和@Vue/apollo composable以及V4版。以及后端ist nodejs服务器和apollo服务器。现在我在useQuery的loginpage上遇到了一个问题，如果我调用查询结果，它们将显示错误“TS2349：此表达式不可调用”。

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”没有调用签名”。

在阿波罗服务器中，类型是这样定义的

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

但是如果我将查询更改为突变，那么它们是有效的。像这样

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

而像这样的类型

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

但我非常确信，使用查询来调用用户信息是正确的方法。谁能帮帮我吗。非常感谢你！！！

Answer 1

结果：结果数据对象。

正如文档所述，返回结果数据对象，它将是一个Ref类型，

重新蚀刻（变量？）：再次执行查询，可以选择使用新变量。

如果要传递新变量，请尝试重新蚀刻