First, apologies if I'm making a silly newbie mistake. I'm new to Vue and fairly new to Apollo.
I'm writing a simple event-management app. See it here.
I have a Vue component set up as follows:
<template>
<div class="container-fluid">
<h1>{{ title }}</h1>
</div>
</template>
<script>
import gql from "graphql-tag"
export default {
data: () => ({
title: ""
}),
apollo: {
title: {
query: gql`{
event {
title
}
}`
}
}
}
</script>
When I run the component, I get the following error in my console:
Missing title attribute on result
That is indeed accurate. The result object looks like:
{event: {title: "New event"} }
So the value is on the event
key, not on the result. Am I forming my query incorrectly?
Additionally, if I do:
<template>
<div class="container-fluid">
<h1>{{ title }}</h1>
</div>
</template>
<script>
import gql from "graphql-tag"
export default {
data: () => ({
title: ""
}),
apollo: {
title: gql`{
event {
title
}
}`
}
}
</script>
I.e. make title
a simple query, I get:
TypeError: doc is undefined
http://localhost:3000/packages/modules.js?hash=b805b1861f915e66cc02f12e1057e45f06be75f2
Line 13429
Which appears to be buried somewhere in apollo-client
. Indeed, I have to call:
apolloClient.query({query: gql`...`})
to run my query. Were simple queries as documented in the README accidentally broken, are they no longer supported, or am I doing something else incorrectly? Apologies for lumping lots into one question, but this isn't working as documented for me and I don't quite know why.
Thanks.