当使用Apollo的useQuery钩子时,API工作正常但数据未定义的问题可能有以下几种解决方法:
确保GraphQL查询中的字段与API响应中的字段匹配。请检查查询中的字段名称和响应数据中的字段名称是否完全一致。字段名称区分大小写,因此确保它们准确无误。
确保GraphQL查询中的所有字段都在API的schema中定义。如果查询中使用了不存在于schema中的字段,那么API将无法正确响应这些字段,从而导致数据未定义的问题。请确保查询中的所有字段都在API的schema中进行了正确的定义。
使用Apollo DevTools检查网络请求和响应。在开发过程中,可以使用Apollo DevTools来检查网络请求和响应。它可以帮助你确定API是否正确地返回了预期的数据。
下面是一个使用Apollo useQuery的代码示例:
import { useQuery, gql } from '@apollo/client';
const GET_USERS = gql`
query {
users {
id
name
email
}
}
`;
const UsersList = () => {
const { loading, error, data } = useQuery(GET_USERS);
if (loading) return Loading...
;
if (error) return Error: {error.message}
;
return (
{data.users.map(user => (
-
{user.name} - {user.email}
))}
);
};
export default UsersList;
在上面的代码中,我们使用了一个名为GET_USERS的GraphQL查询,并使用useQuery钩子将其发送到API。如果API正常工作,但数据未定义,可以根据返回的loading和error状态进行调试。