9

vue コンポーネントの外部で apollo にアクセスできるようにする方法。

ユーザーが存在するかどうかを確認してから、ルートをさらに進めることを許可しています。

{
        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')
4

1 に答える 1

11

したがって、App.vue ファイルで apollo クライアントを初期化する代わりに、別のファイルで初期化します。client.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
    });
}
于 2019-02-25T08:24:02.820 に答える