[英]After GraphQL Query: Property 'then' does not exist on type 'void'
我正在使用这样的 graphql 突变,然后 &.catch 完美地工作:
let submitForm = (
email: string,
firstName: string
) => {
setIsSubmitted(true);
if (email && (firstName)) {
const input: UpdateUserInput = {};
if (firstName) {
input.firstName = firstName;
}
updateUser({
variables: {
email: email,
input: input,
},
})
.then(({ data }: ExecutionResult<UpdateUserResponse>) => {
if (data !== null && data !== undefined) {
setIsUpdated(true);
}
})
.catch((error: { message: string }) => {
console.log('Error msg:' + error.message);
});
}
};
现在我正在为 graphql 查询做类似的事情(下面更完整的工作版本):
let ShowUsers = () => {
const where: WhereInput = {};
if (criteria === '2') {
if (searchItem) {
where.firstName_contains = searchItem;
loadUsers({
variables: {
where: where
},
})
.then(({ data }: any) => {
if (data !== null && data !== undefined) {
}
})
}
}
}
但我一直收到错误消息,即Property 'then' does not exist on type 'void'
编辑:
如果没有.then、.catch,我的代码可以正常工作。 完整的形式是这样的:
function UserSearchPage() {
const [criteria, setCriteria] = useState('');
const [searchItem, setSearchItem] = useState('');
const [loadUsers, { loading, data }] = useLazyQuery(LoadUsersQuery);
function PrintUsers({ data }: any) {
return (
<div>
{data &&
data.users.nodes &&
data.users.nodes.map((c: any, i: any) => (
<li key={i}>
Id: {c.id}, First Name: {c.firstName}, Last Name: {c.lastName},
Email: {c.email}, phoneNumber: {c.phoneNumber}
</li>
))}
</div>
);
}
let ShowUsers = () => {
const where: WhereInput = {};
if (criteria === '1') {
loadUsers({
variables: {
where: where
},
});
}
if (criteria === '2') {
if (searchItem) {
where.firstName_contains = searchItem;
loadUsers({
variables: {
where: where
},
});
}
}
};
return (
.....);
}
这是 GraphQL 查询本身的样子:
interface UserFilter {
email_contains: String;
firstName_contains?: String;
lastName_contains?: String;
phoneNumber_contains?: String;
id?: Number;
}
export const LoadUsersQuery = gql`
query usersList($where: UserFilter) {
users(where: $where) {
nodes {
id
email
}
totalCount
}
}
`;
我还能如何访问数据属性/错误? 从 console.log,我知道这是返回的:
Object
__typename: "User"
email: "first@first.com"
firstName: "First"
id: 148
lastName: "User"
phoneNumber: "+49123"
但是如果我尝试访问让我们说data.users.id
,为什么我会得到未定义的? 我怎样才能解决这个问题?
如其他答案所述,这是已知问题 - “useLazyQuery 执行 function 应返回 promise #3499”
代替
loadUsers({
variables: {
where: where
},
})
.then(({ data }: any) => {
if (data !== null && data !== undefined) {
}
})
你可以使用onCompleted
选项
const [loadUsers, { loading, data }] = useLazyQuery(LoadUsersQuery, {
onCompleted: ( data : any ) => {
if (data !== null && data !== undefined) {
// some action
}
}
});
这取决于loadUsers
中究竟发生了什么,但您可能忘记了那里的 return 语句。
如果您更改loadUsers
以返回正在加载的用户的 promise,您的代码应该开始正常工作。
如果您查看useLazyQuery
的文档,它不会像useMutation
那样返回Promise
,因此它们的行为不同。
您必须利用调用 useLazyQuery 时返回的第二个参数(加载、数据),而不是依赖于useLazyQuery
。 这就是为什么在您的编辑中,您的代码可以在没有.then
的情况下工作。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.