URQL Svelte Store读取嵌套数据报Cannot read property错如何解决

错误原因 #

你遇到的Cannot read property 'post' of undefined报错，本质是请求还未完成时，$post.data本身为undefined，此时直接访问undefined.post就会触发异常。你直接打印$post.data能看到完整结构，是因为控制台输出的是对象的引用，你点开查看时请求已经完成、数据已经挂载，所以能看到嵌套的post字段，但代码同步执行时还没有拿到返回数据，就触发了报错。

解决方案 #

方法1：使用可选链操作符（最简便） #

直接用可选链规避空值访问报错，数据加载完成后会自动返回正确值：
$post.data?.post

如果是旧版本环境不支持可选链，可以用逻辑与操作符替代：
$post.data && $post.data.post

方法2：先判断加载状态再访问数据 #

URQL返回的结构中自带fetching字段标识请求状态，先确认请求完成、数据存在后再访问嵌套字段：

// 仅当请求完成且数据存在时才访问post字段
if (!$post.fetching && $post.data) {
  const postContent = $post.data.post
  // 后续处理postContent的逻辑
}

方法3：解构赋值时添加默认值 #

如果要解构提取post字段，可以给外层data设置空对象默认值，规避空值报错：

const { post } = $post.data || {}

这样哪怕$post.data还没值，也只会得到值为undefined的post变量，不会触发运行时错误，等数据加载完成后post会自动更新为对应内容。

内容的提问来源于stack exchange，提问作者Ronald van Meurs