Vue アプリケーションで Vue Apollo と Vuex を使用するときに問題が発生しました。そのため、初めて Web サイトにログインすると、Web ページは空になります。つまり、イベントや認証が含まれていませんが、When を使用すると更新が行われます。ボタンをクリックするとサイトが更新され、すべてのイベントが読み込まれ、ネットワーク タブにも認証が表示されます。誰か私が間違っていることを教えてください。

graphql.js

import { ApolloClient } from 'apollo-client'; import { HttpLink } から 'apollo-link-http'; import { InMemoryCache } から 'apollo-cache-inmemory'; import { createApolloProvider } から '@vue/apollo-option'; import { onError } から '@apollo/client/link/error'; onError(({graphQLErrors, networkError }) => { if (グラフQLエラー) graphQLErrors.map(({ メッセージ, 場所, パス }) => コンソール.log( `[GraphQL エラー]: メッセージ: ${message}、場所: ${locations}、パス: ${path}`、 ）、 ); if (ネットワークエラー) { networkError.message = networkError.result.errors[0].debugMessage console.log(`[ネットワーク エラー]: ${networkError}`) }; }); const XPORTAL = process.env.VUE_APP_XPORTAL 関数 getHeaders() { const ヘッダー = {}; const token = window.localStorage.getItem("apollo-token"); if (トークン) { headers["Authorization"] = `ベアラー ${トークン}`; } headers["x-portal"] = XPORTAL; headers["X-Requested-With"] = "XMLHttpRequest"; ヘッダーを返す } let GRAPHQL = process.env.VUE_APP_API_GRAPHQL let GRAPHQLPORTAL = process.env.VUE_APP_API_GRAPHQLPORTAL constgraphqlClient = new ApolloClient({ リンク: new HttpLink({uri: GRAPHQL、ヘッダー: getHeaders()})、 キャッシュ: new InMemoryCache() }); constgraphqlClientPortal = new ApolloClient({ リンク: new HttpLink({ uri: GRAPHQLPORTAL、ヘッダー: getHeaders()}), キャッシュ: new InMemoryCache() }); エクスポート関数プロバイダー() { const プロバイダー = createApolloProvider({ クライアント: { グラフqlクライアント、 グラフqlクライアントポータル }、 デフォルトクライアント:graphqlClient、 デフォルトオプション: { $クエリ: { fetchPolicy: 'キャッシュとネットワーク' } }、 }) リターンプロバイダー }

main.js

import { createApp } from "vue"; 「./App.vue」からアプリをインポートします。 「./router」からルーターをインポートします。 「./store」からストアをインポートします。 import * as apolloProvider from "../../events.live/src/utils/graphql"; const app = createApp(App); app.use(apolloProvider.provider) app.use(ストア); app.use(ルーター); app.mount("#app");

index.js

import { プロバイダ } from "../utils/graphql"; 行動： { async fetchLogin({ commit, state }) { return new Promise(async (解決、拒否) => { commit('loadingStatus', true) 試す { const 応答 = await Provider().clients.graphqlClient.mutate({ 突然変異： gql`mutation Login($email:String!, $password:String!) { ログイン(メールアドレス:$メールアドレス、パスワード:$パスワード){ トークン } }`、変数: { 電子メール: state.login.email、 パスワード: state.login.password } }) const トークン = 応答.データ.ログイン.トークン commit('setToken', トークン) localStorage.setItem('apollo-token', トークン) } キャッチ (エラー) { commit('loadingStatus', false) } 解決する（） }) }、 { 非同期 fetchEvents({ commit }) { 試す { const 応答 = await Provider().clients.graphqlClientPortal.query({ クエリ: gql` query LiveEvents($limit: Int!, $page: Int!){ liveEvents(ページネーション:{limit:$limit, page:$page}, order:{startsAt:{direction: DESC}}){ 合計、 データ{ ID、 名前、 スタブ、 説明、 メイン画像{ ID、 ウリ }、 位置、 タイプ、 レイアウト チャット、 ライブストリーム{ で終了、 開始時刻 } } } } `、変数: { 制限: 12、 ページ: 0 }、 }); commit('allEvents', response.data.liveEvents.data); } キャッチ (エラー) { console.log('エラーメッセージ', error.graphQLErrors) } },