Fetching issue when trying to get record inside data (VUE 3)

🆘 Support
1

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.

2

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?

4

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:
app.vue

5

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>
6

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”}]}

7

Ok, so is the “allArticles” is not defined error gone if you wrap data.allArticles.tblArticleDescription within an v-if?

8

Yes, is gone, the console is clean.