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-cli > 3 创建 VUE 项目，这将导致 this.$apollo 等于 undefined 的问题。