Vue-apollo: Multiple issues getting this package working

[ndarilek]

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.

[Akryum]

Hi!

The result object you get from your GraphQL server is:

{event: {title: "New event"} }

Where the top-level object has the result of your GraphQL query with the same name 'event' (it is necessary because you can call multiple GraphQL queries in one Apollo query).

But since you are calling your component's attribute title, it expects to have a result like this:

{ title: '...' }

In your case, it can't figure on its own what to do with the result, so you have to put an additional parameter, update, as described here:

<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
          }
        }`,
        update(data) {
          return data.event.title;
        ),
      }
    }
  }
</script>

[Akryum]

You can also write (in ES2016):

update: ({ event }) => event.title,

[ndarilek]

Got it, thanks! In this case I just made the key called "event" because
I plan on returning multiple event properties. That also fixed it, and I
just use {{event.title}} instead.

Any idea about the simple queries without the query: key? They no
longer seem to work as documented.

[Akryum]

Any idea about the simple queries without the query: key? They no
longer seem to work as documented.

Fixed in release 1.0.0-rc.2

[emahuni]

Hi. Great package! I am not sure this was fixed seeing that it is still happening. I am brand new to this package and i followed the example in Usage in Vue exactly as given and it seems like I ran into this issue. I got it working after implementing the workaround update.... So reopen this please or should i create another issue?

[emahuni]

ok just opened another, don't bother reopening this