sveltesvelte-storeurql

Get nested data out of URQL Svelte Store - Cannot read property


With URQL fetched a post out GraphCMS - URQL creates a store which is looking like this:

{
  "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"
    }
  }
}

I would like to isolate the part after the post variable.

When I try to access it by: $post.data everything works fine, but I still got the 'post' variable in the output.
The moment I use $post.data.post I got a 500 Error - Cannot read property 'post' of undefined

How do I access this nested value?


Solution

  • The error is likely triggered because you attempt to read $post.data.post before the (asynchronous) request actually completes.

    Try adding a conditional, something like this for example:

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

    Alternatively, you could try and use optional chaining if your project is setup to use ES11:

    $: postData = $post.data?.post
    

    although I believe the first approach above is better as it expresses intent better and is more readable.