vue.js - 登录表单上的 Vue-Apollo V4 组合 API @vue/apollo-composable。TS2349:此表达式不可调用。输入“参考”' 没有调用签名
问题描述
我是阿波罗世界的新人。我将 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 是正确的方法。谁能帮我。非常感谢!
解决方案
结果:结果数据对象。
如文档所述,result
返回结果数据对象,它将是 Ref 类型,
refetch(variables?):再次执行查询,可选择使用新变量。
refetch
如果您想传递新变量,请尝试
推荐阅读
- laravel - Laravel:控制器资源索引不返回视图或字符串
- docker - Gitlab Runner Docker 容器无法连接到 Prometheus
- r - 如何在R中对条形图进行排序
- excel - 将一整列乘以 x 数
- python - 带有 IndexError 的 sns 绘图警告
- c# - 参数化动作调用委托
- python-2.7 - 为什么我在 ROS 中遇到“ModuleNotFoundError: No module named 'yaml'”?
- graphql - 使用 GraphQL Apollo 忽略该字段
- python - 使用 python json 对象插入查询
- .net - 对 Active Directory 用户和 LDAP 的任何限制