Vue and GraphQL API Data


Successfully returning data from a GraphQL endpoint. How do I now access the data in the client?

export default {

name: ‘DemoPage’,

data () {
return {
el: ‘#presence’,
user: API.graphql(graphqlOperation(queries.getUser, { email:‘’ }))
methods: {…

This returns:
getUser: {id: “12”, name: “fred”, email: "", phone}

I have presumed ‘user’ gets assigned the data and I should be able to do:


But this does not display anything?

If it returns

getUser: {id: “12”, name: “fred”, email: "", phone}

then you would access email’s value as

Thanks James.

The output is indicated as a ‘promise’. I guess this is because the function has not had chance to fire and return any results. How do I tell the rendering component to wait until the function has fired - I presume there is a Vue way to do an ‘onLoad’ type construct? I have tried using mounted but this just ensures the method is called, not necessarily completed before the page renders? Apologies for asking a follow up query!

Do you want to prevent a portion of the template from loading until you have the data? Usually this is done with a v-if condition on the element.