在 GraphQL 查询之后:属性 'then' 在类型 'void' 上不存在
After GraphQL Query: Property 'then' does not exist on type 'void'
我正在使用像这样的 graphql 突变,.then & .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
}
}
`;
我还能如何访问数据 properties/errors?
从console.log,我知道这是返回的:
Object
__typename: "User"
email: "first@first.com"
firstName: "First"
id: 148
lastName: "User"
phoneNumber: "+49123"
但是如果我尝试访问让我们说 data.users.id
,为什么我会得到 undefined?我该如何解决这个问题?
这取决于 loadUsers
中到底发生了什么,但您可能忘记了 return 那里的声明。
如果您将 loadUsers
更改为 return 对正在加载的用户的承诺,您的代码应该开始正常工作。
如果您查看 the docs 的 useLazyQuery
,它不会 return 和 Promise
类似 useMutation
,因此它们的行为不同。
您必须在调用 useLazyQuery
时利用 returned 的第二个参数(加载、数据),而不是依赖 Promise。这就是为什么在您的编辑中,您的代码可以在没有 .then
.
的情况下工作
如其他答案所述,这是已知问题 - "useLazyQuery execution function should return a 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
}
}
});
我正在使用像这样的 graphql 突变,.then & .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
}
}
`;
我还能如何访问数据 properties/errors? 从console.log,我知道这是返回的:
Object
__typename: "User"
email: "first@first.com"
firstName: "First"
id: 148
lastName: "User"
phoneNumber: "+49123"
但是如果我尝试访问让我们说 data.users.id
,为什么我会得到 undefined?我该如何解决这个问题?
这取决于 loadUsers
中到底发生了什么,但您可能忘记了 return 那里的声明。
如果您将 loadUsers
更改为 return 对正在加载的用户的承诺,您的代码应该开始正常工作。
如果您查看 the docs 的 useLazyQuery
,它不会 return 和 Promise
类似 useMutation
,因此它们的行为不同。
您必须在调用 useLazyQuery
时利用 returned 的第二个参数(加载、数据),而不是依赖 Promise。这就是为什么在您的编辑中,您的代码可以在没有 .then
.
如其他答案所述,这是已知问题 - "useLazyQuery execution function should return a 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
}
}
});