トラブルシューティング: 初期ログインと Web サイトの読み込みの問題

Question

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)
      }
    },

Answer 1

これが私の解決策です。

リーリー