django - this.$apollo 始终未定义
问题描述
我正在尝试使用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')
阿波罗.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
永远加载不出来?配置中缺少什么?
[编辑:遵循教程时会发生同样的事情:]
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)
})
解决方案
如果您使用 vue-cli > 3 创建了 VUE 项目,这将导致 this.$apollo 等于未定义的问题。
推荐阅读
- sql-server - TSQL - 在这种情况下替代左连接,也许有一段时间?需要帮助
- html - 这个css标签中的大写字母是什么意思:font-family“URWPSK+ArialMT”?:
- java - 在固定位置的位图上绘制文本
- r - 过滤以具有唯一的日期和时间到小时
- reactjs - Redux Saga 全局加载状态
- python - 如何合并行以包含熊猫中的值列表?
- python - ctypes 结构中的数据布局
- ios - 是否可以同时更新我的应用程序的价格变化版本
- manifest - Android:ProductFlavors 清单和 Java 类
- python - 如何制作一个函数,一个输出 20% 的时间,另一个输出 10% 的时间,另一个输出 70% 的时间?