this.$apollo 始终未定义

Posted 2023-03-08

【中文标题】this.$apollo 始终未定义

【英文标题】：this.$apollo always undefined

【发布时间】：2020-05-07 18:11:46

【问题描述】：

我正在尝试使用 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,
  s-s-r: 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)
)

【问题讨论】：

@Daniel，我已经添加了 apollo.js 配置。但我也完全按照文档中的方式进行了尝试（即使使用 boost 快捷方式），结果都相同。

@DanielRearden 是的。你可以看到它在那里，对吧？

那么provide是什么？

这是我在不同教程中发现的众多变体之一，因为官方文档中的版本也不起作用。例如，这以相同的方式失败：dpaste.org/kp7h

【参考方案1】：

如果您使用 vue-cli > 3 创建 VUE 项目，这将导致 this.$apollo 等于 undefined 的问题。

【讨论】：

简单地说明问题的根源通常远不如提出解决方案有用。请考虑在您的答案中添加针对该问题的潜在解决方案。如果没有，您的答案将更适合作为对原始问题的评论。