Hello community,
I have an functional app in pure vue 3, that I am trying to integrate with DATO. I followed the documentation, and manage to pull the sample query with one of my models which works fine.
so if I place {{ data }} in my app.vue I get rendered the query and until here it works. However, if I have place {{ data.allArticles.tblArticleDescription }} I get an error that âallArticlesâ is not defined. Iâm not sure if I skip something in the configuration or I need to do something else. I downloaded and checked the vue example and it seems to be the correct way to get the data.
Please see example of my query:
query Articles {
allArticles {
id
tblArticleDescription
tblArticleTitle
tblFavorite
tblCategoryName {
tblCategoryName
}
tblArticleTag {
tag
}
}
}
Thanks for any advice, also I am new to GraphQL.
hello @maria.arce have you tried running your query in the API explorer inside your project? Is that working fine?
If that works fine, maybe can you try sharing a bit more of your code so that I can have a look?
Hello @mat_jack1 , thank you for answering, sorry for the delay and delete the other post, I was trying to figure out how to share my code. In the link below, you can see my app.vue only, let me know if you need to see something else ![:slight_smile: :slight_smile:](https://community.datocms.com/images/emoji/apple/slight_smile.png?v=9)
app.vue
I think that for a short period during the loading data
is null
⌠Try to put this in your view and please share the result:
{{ JSON.stringify(data) }}
<div v-if="data">
{{ data.allArticles.tblArticleDescription }}
</div>
Hi@s.verna so I tried, and Iâm getting as a result the whole query in the page. Which was the same result by using only {{ data }}. I updated the structure with the suggested on the jsFiddle file.
so:
{âallArticlesâ:[{âidâ:â36148638â,âtblArticleTitleâ:âWelcome to your notification app!â,âtblArticleDescriptionâ:âHere you can find some of the features created:\n\n* Real time visualization\n* Incognito mode\n* Posibility to save your fav notification in a personal list\n* 3 languages available translation\n\n\nâ,âarticleFavoriteâ:true,âtblCategoryNameâ:{âtblCategoryNameâ:âGeneralâ},âtblArticleTagâ:[{âarticleTagâ:ânew inâ},{âarticleTagâ:âtechnologyâ}],âarticleDateâ:â2021-05-12â}]}
Ok, so is the âallArticlesâ is not defined
error gone if you wrap data.allArticles.tblArticleDescription
within an v-if
?
Yes, is gone, the console is clean.