reactjs - Apollo useQuery 或 client.query React 无法记录值

Question

我正在尝试使用 useQuery 钩子从 graphql 响应中循环对象数组。

 const { loading, error, data } = useQuery(GET_FOLDERS);

如果我控制台日志数据然后我得到这个

但是如果我要控制台 log data.Folders[0].id 我得到 TypeError: data is undefined 我尝试手动创建一个具有相同值的数组的对象，我可以很好地控制台它，如果我从使用 useQuery 更改为client.query({query: GET_FOLDERS})with apolloBoost 然后它也可以正常工作我只是认为有人可以指出我正确的方向，除非它必不可少，我需要显示我的所有代码。谢谢

标签： reactjsgraphqlreact-apollo

Answer 1

异步返回结果的事实useQuery意味着数据在初始渲染中不可用，因此当您尝试访问特定的嵌套属性时，它会引发错误

解决方案是依赖此处的加载状态，并且仅在实际准备好后才访问该属性

前任

const Comp = () = {
    const { loading, error, data } = useQuery(GET_FOLDERS);
    if(loading) {
        return <div>Loading...</div>
    }
    console.log(data.Folders[0].id )
    ...
}