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

Posted 2023-03-10

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

【英文标题】：Vue-Apollo V4 composition API @vue/apollo-composable on loginform. TS2349: This expression is not callable. Type 'Ref<any>' has no call signatures登录表单上的 Vue-Apollo V4 组合 API @vue/apollo-composable。 TS2349：此表达式不可调用。类型 'Ref<any>' 没有调用签名

【发布时间】：2021-04-27 07:59:43

【问题描述】：

我是阿波罗世界的新人。我将 Vue 组合 API 和 @vue/apollo-composable 与 V4 版本一起用于我的 vue apollo 客户端。后端是带有 apollo 服务器的 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: 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!,
    

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

【参考方案1】：

result：结果数据对象。

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

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

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