从 URQL Svelte Store 中获取嵌套数据 - 无法读取 属性

Question

使用 URQL 从 GraphCMS 中提取 post - URQL 创建的商店如下所示：

{
  "stale": false,
  "fetching": false,
  "data": {
    "post": {
      "title": "Technical SEO with GraphCMS",
      "date": "2020-05-05",
      "tags": [
        "SEO"
      ],
      "content": {
        "html": "<p>Lorem ipsum dolor sit amet</p>",
        "__typename": "RichText"
      },
      "coverImage": {
        "url": "https://media.graphcms.com/resize=fit:clip,width:600/hujVF2oRi2J1gDKdk0ic",
        "__typename": "Asset"
      },
      "__typename": "Post"
    }
  }
}

我想隔离 post 变量之后的部分。

当我尝试通过以下方式访问它时：$post.data 一切正常，但我仍然在输出中得到 'post' 变量。
当我使用 $post.data.post 时出现 500 错误 - 无法读取 属性 'post' of undefined

如何访问这个嵌套值？

Answer 1

错误很可能被触发，因为您试图在（异步）请求实际完成之前读取 $post.data.post。

尝试添加条件，例如：

$: postData = $post.fetching ? undefined : $post.data.post

或者，如果您的项目设置为使用 ES11，您可以尝试使用可选链接：

$: postData = $post.data?.post

虽然我认为上面的第一种方法更好，因为它更好地表达了意图并且更具可读性。