使用查询钩子数据

Question

我可以 return 使用 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 的正文与登录或其他地方）。

使用查询钩子数据

useQuery Hook Data

apollo

reactjs

graphql