this. $ apollo всегда неопределен

Question

Я пытаюсь использовать apollo (+ vue, django), но по какой-то причине он не будет загружен / использован в компоненте, this.$apollo всегда undefined.

<script>
import { GET_ALL_USERS_QUERY } from '../js/graphql/queries/userQueries.js'
export default {
  name: 'GraphQLTest',
  data() {
    return {
      users: [],
      loading: true
    }
  },
  async mounted() {
    this.loading = true
    this.users = await this.$apollo.query({
      query: GET_ALL_USERS_QUERY
    })
    this.loading = false
  }
}
</script>


  [Vue warn]: Error in mounted hook (Promise/async): "TypeError: Cannot read property 'query' of undefined"

main. js

import Vue from 'vue'
import { router } from './routes.js'
import store from './store.js'
import { createProvider } from './apollo.js'

import App from './App.vue'

Vue.config.productionTip = false


new Vue({
  router,
  store,
  provide: createProvider(),
  render: h => h(App),
}).$mount('#app')

apollo. js

import Vue from 'vue'
import VueApollo from 'vue-apollo'
import { createApolloClient, restartWebsockets } from 'vue-cli-plugin-apollo/graphql-client'

// Install the vue plugin
Vue.use(VueApollo)

// Name of the localStorage item
const AUTH_TOKEN = 'jwt-token'

// Config
const defaultOptions = {
  httpEndpoint: '/graphql',
  wsEndpoint: null,
  tokenName: AUTH_TOKEN,
  persisting: false,
  websocketsOnly: false,
  ssr: false
}

// Call this in the Vue app file
export function createProvider (options = {}) {
  // Create apollo client
  const { apolloClient, wsClient } = createApolloClient({
    ...defaultOptions,
    ...options
  })
  apolloClient.wsClient = wsClient

  // Create vue apollo provider
  const apolloProvider = new VueApollo({
    defaultClient: apolloClient,
    defaultOptions: {
      $query: {
        loadingKey: 'loading',
        fetchPolicy: 'cache-and-network'
      }
    },
    errorHandler (error) {
      // eslint-disable-next-line no-console
      console.log('%cError', 'background: red; color: white; padding: 2px 4px; border-radius: 3px; font-weight: bold;', error.message)
    }
  })

  return apolloProvider
}

// Manually call this when user log in
export async function onLogin (apolloClient, token) {
  localStorage.setItem(AUTH_TOKEN, token)
  if (apolloClient.wsClient) restartWebsockets(apolloClient.wsClient)
  try {
    await apolloClient.resetStore()
  } catch (e) {
    // eslint-disable-next-line no-console
    console.log('%cError on cache reset (login)', 'color: orange;', e.message)
  }
}

// Manually call this when user log out
export async function onLogout (apolloClient) {
  localStorage.removeItem(AUTH_TOKEN)
  if (apolloClient.wsClient) restartWebsockets(apolloClient.wsClient)
  try {
    await apolloClient.resetStore()
  } catch (e) {
    // eslint-disable-next-line no-console
    console.log('%cError on cache reset (logout)', 'color: orange;', e.message)
  }
}

Почему apollo никогда не загружается? чего-то не хватает в конфиге?

[ edit : то же самое происходит при выполнении урока:]

import Vue from "vue"
import App from "./App.vue"
import { router } from './routes.js'
import ApolloClient from "apollo-boost"
import VueApollo from "vue-apollo"

const apolloProvider = new VueApollo({
  defaultClient: new ApolloClient({
    uri: "http://localhost:8000/graphql/"
  })
})


Vue.use(VueApollo)
new Vue({
  router,
  el: "#app",
  provide: apolloProvider.provide(),
  render: h => h(App)
})

Answer 1

если вы создали свой VUE проект с использованием vue -cli> 3, это вызовет проблему с этим. $ Apollo равен undefined.