如何在 vue 组件之外访问“$apollo”？

Posted 2023-02-22

【中文标题】如何在 vue 组件之外访问“$apollo”？

【英文标题】：How to access '$apollo' outside vue component?

【发布时间】：2019-07-18 14:34:05

【问题描述】：

如何让 apollo 在 vue 组件之外访问。

我正在验证用户是否存在，然后允许路由继续进行。

        path: '/:username',
        name: 'userProfilePage',
        component: userProfilePage,
        beforeEnter(routeTo, routeFrom, next) 
            userExist(routeTo.params.username)
            next()
        

将username 作为参数传递给userExist 函数。

import gql from "graphql-tag"

export default function userExist(username) 
    this.$apollo
        .query(
            query: gql`
        query($username: String!) 
            login(username: $username) 
                username
                email
            
        
    `,
            variables: 
                username: username
            
        )
        .then(res => 
            console.log(res);
            return res
        )
        .catch(err => 
            console.log(err);
            return err
        );

但它正在输出错误：

Apollo 客户端代码

import Vue from 'vue'
import App from './App.vue'
import VueApollo from 'vue-apollo';
import  ApolloClient  from 'apollo-client'
import  HttpLink  from 'apollo-link-http'
import  InMemoryCache  from 'apollo-cache-inmemory'
import router from './routes.js'

Vue.config.productionTip = false

const httpLink = new HttpLink(
    uri: process.env.VUE_APP_DB_URL,
)

const cache = new InMemoryCache()

const apolloClient = new ApolloClient(
    link: httpLink,
    cache
)

Vue.use(VueApollo)

const apolloProvider = new VueApollo(
    defaultClient: apolloClient,
)

new Vue(
    render: h => h(App),
    router,
    apolloProvider
).$mount('#app')

【问题讨论】：

请向我们展示您的 apollo 客户端的代码。

apollo 客户端的代码是什么？你的意思是我初始化 apollo 客户端的代码。

是的，这正是我所需要的。

我已经更新了帖子，你可以查看一下。

我刚刚回答了。

【参考方案1】：

所以不要在 App.vue 文件中初始化 apollo 客户端，而是在另一个文件中初始化它。 类似clients.js的东西，然后导出那个客户端：

const httpLink = new HttpLink(
    uri: process.env.VUE_APP_DB_URL,
)

const cache = new InMemoryCache()

export const apolloClient = new ApolloClient(
    link: httpLink,
    cache
)

完成后，将其导入 App.vue 文件，如下所示：

import  apolloClient  from './clients.js';

Vue.use(VueApollo)

const apolloProvider = new VueApollo(
    defaultClient: apolloClient,
)

new Vue(
    render: h => h(App),
    router,
    apolloProvider
).$mount('#app')

完成后，将该客户端导入到您想要的任何其他文件中：

import  apolloClient  from './client.js';
import gql from "graphql-tag"

export default function userExist(username) 
apolloClient
    .query(
        query: gql`
    query($username: String!) 
        login(username: $username) 
            username
            email
        
    
`,
        variables: 
            username: username
        
    )
    .then(res => 
        console.log(res);
        return res
    )
    .catch(err => 
        console.log(err);
        return err
    );