使用查询挂钩数据

Question

我可以使用 useQuery 返回查询的数据没有问题。我正在尝试使用以下查询检索用户，但是在访问 data.user 时，我的应用程序会抛出一个错误，提示数据未定义。

const userQuery = gql`
{
user {
   id
   email
 }
 } `;


export default NavWrapper = () => {
const { loading, error, data }  = useQuery(userQuery);
console.log(data);

if (loading) return <ActivityIndicator size="large"/>
if (!data) return <Login/>;
return <Navigator/>;
}

以上工作正常并在对象中检索用户，但我需要根据实际用户而不是数据包装器来呈现登录组合。有任何想法吗？一定很简单……

Answer 1

您可能拥有不安全的属性访问权限，并在查询完成之前尝试使用data.user。从本质上讲，您的代码是在假设数据始终存在的情况下运行的，而查询的性质是，有一个开始的未查询状态，其中没有数据，然后是一个加载状态，在此期间进行查询和没有可用的数据，然后是可以使用数据的某种最终状态。您的代码应针对所有状态进行准备。

为了解决这些情况，您应该像这样使用安全的财产访问：

const user = data ? data.user : null

或者，您可以使用安全的属性访问库，例如idx：

const user = idx(data, _ => _.user) || null

此外，您还需要确保任何使用您的用户数据的组件都已为用户无法使用的情况做好准备。

注意：data.user 在您链接的代码中的任何位置均未引用。确切地知道你在哪里调用它会很有帮助（例如在 NavWrapper 与 Login 的正文中或其他地方）。