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?
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.