useQuery挂钩数据

时间:2020-01-16 00:06:36

标签: reactjs graphql apollo

我可以使用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/>;
}

以上方法可以很好地工作并可以在对象内检索用户,但是我需要根据实际用户而不是数据包装器呈现登录comp。有任何想法吗?必须简单...

1 个答案:

答案 0 :(得分:1)

很可能您拥有不安全的属性访问权限,并在查询完成之前尝试使用data.user。本质上,您的代码在假定数据将始终存在的前提下运行,而查询的性质是,存在一个开始的未查询状态,其中没有数据,然后是一个加载状态,在此状态下进行查询,并且没有可用的数据,然后是某种最终状态,在该状态下数据可用。您的代码应为所有州做好准备。

要解决这些情况,您应该使用安全的属性访问,例如:

const user = data ? data.user : null

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

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

此外,您将要确保使用用户数据的所有组件都为用户不可用的情况做好了准备。

注意:在链接的代码中,data.user均未引用。准确知道您在哪里调用它会很有帮助(例如,在NavWrapper与Login的正文中或其他地方)。