Vue-apollo: Why vue-apollo can't work on Vue main instance instead of component ?

[bobbybobby]

Hi,

I'm posting this because I spent a couple of frustrating hours trying to figure how to make vue-apollo work. I followed the "Get started" documentation to the letter and yet couldn't make it work, it turns out that's because my Vue app is very small and I don't have components in it (only one main Vue instance). Thus I have two issues :

• It should be more clear in the documentation that the apollo config object has to be defined on a Vue component and not the Vue main instance (example of the doc not clear here : https://akryum.github.io/vue-apollo/guide/apollo/#apollo-in-vue-components)
• Why cannot it work directly on the main Vue instance ? In my case, I'm not doing a SPA, rather injecting Vue into small sections of my page (the site is mainly server side rendered), so it's overkill to have to wrap into Vue components.

Details of my problem

What I was trying to do, no components

my-app.html :

<div id="my-app">
  <div> {{hello}} </div>
</div>

my-app.js :

import * as Vue from 'vue/dist/vue.common.js';
import { ApolloClient } from 'apollo-client'
import { HttpLink } from 'apollo-link-http'
import { InMemoryCache } from 'apollo-cache-inmemory'
import VueApollo from 'vue-apollo'
import gql from 'graphql-tag'

/** Apollo setup **/
const httpLink = new HttpLink({
  // You should use an absolute URL here
  uri: 'http://localhost:3000/graphql',
})

// Create the apollo client
const apolloClient = new ApolloClient({
  link: httpLink,
  cache: new InMemoryCache(),
  connectToDevTools: true,
})

const apolloProvider = new VueApollo({
  defaultClient: apolloClient,
})

Vue.use(VueApollo);
/** END Apollo setup **/

let vm = new Vue({
  el: '#my-app',
  provide: apolloProvider.provide(),
  data() {
    return { 
      hello: ""
    }
  },
  apollo: {
    hello: {
      query: gql`{hello}`
      }`,
    },
  },
});

What I had to do to make it work (component needed, but I would like to avoid the added complexity)

my-app.html :

<div id="my-app">
  <app-hello></app-hello>
</div>

my-app.js :

import * as Vue from 'vue/dist/vue.common.js';
import { ApolloClient } from 'apollo-client'
import { HttpLink } from 'apollo-link-http'
import { InMemoryCache } from 'apollo-cache-inmemory'
import VueApollo from 'vue-apollo'
import AppHello from 'app-hello.component.vue'

/** Apollo setup **/
const httpLink = new HttpLink({
  // You should use an absolute URL here
  uri: 'http://localhost:3000/graphql',
})

// Create the apollo client
const apolloClient = new ApolloClient({
  link: httpLink,
  cache: new InMemoryCache(),
  connectToDevTools: true,
})

const apolloProvider = new VueApollo({
  defaultClient: apolloClient,
})

Vue.use(VueApollo);
/** END Apollo setup **/

let vm = new Vue({
  el: '#my-app',
  components: {
    'app-hello': AppHello,
  },
  provide: apolloProvider.provide(),
});

app-hello.component.vue

<template>
  <div>
  {{ hello }}
  </div>
</template>

<script>
import gql from 'graphql-tag';


export default {
  data: () => ({
    hello: ''
  }),
  apollo: {
    hello: {
      query: gql`{hello}`
    },
  },
};
</script>

[Akryum]

This looks like a bug.

[bobbybobby]

in this case, here's the info about the installed packages in my project :

$ yarn list | grep apollo
├─ [email protected]
│  ├─ apollo-cache@^1.1.12
│  ├─ apollo-utilities@^1.0.16
├─ [email protected]
│  └─ apollo-utilities@^1.0.16
├─ [email protected]
│  ├─ apollo-cache@^1.1.12
│  ├─ apollo-link-dedup@^1.0.0
│  ├─ apollo-link@^1.0.0
│  ├─ apollo-utilities@^1.0.16
├─ [email protected]
│  └─ apollo-link@^1.2.2
├─ [email protected]
│  └─ apollo-link@^1.2.2
├─ [email protected]
│  ├─ apollo-link-http-common@^0.2.4
│  └─ apollo-link@^1.2.2
├─ [email protected]
│  ├─ apollo-utilities@^1.0.0
├─ [email protected]
│  └─ apollo-utilities@^1.0.16
├─ [email protected]

[alherd-by]

Have the same problem
Component initialized - this.$apollo is object with type DollarApollo, but queries property is empty.
Seems vue-apollo-provider doesn't recognize 'apollo' field in main component.

[dominusbelial]

i have it working like this on my spa, i get the empty property too, queries are working fine and i can see data being retrieved, but i have to reload the route/component to see the data rendered on the html table on the component. (it wont work on the first load no matter what i do)

`const app = new Vue({
provide: apolloProvider.provide(),
store,
router,
...App
});

export {
app,
router,
store
}`

[SebT]

Are you working on this @Akryum ? I may have time to take a look and send a PR if you're not on it

[Akryum]

I'm not currently working on this so you can go ahead and take a look! 😸