故障排除：初始登入和網站載入問題

Question

<p>我在我的Vue應用程式中使用Vue Apollo和Vuex時遇到了問題，所以當我首次登入網站時，網頁是空的，即不包含事件和身份驗證，但是當我使用瀏覽器中的刷新按鈕刷新網站時，所有事件都會加載，甚至在網路選項卡中也可以看到身份驗證。請問有人可以告訴我我做錯了什麼嗎？</p> <p><strong>graphql.js</strong></p>

從 'apollo-client' 導入 { ApolloClient };
從 'apollo-link-http' 導入 { HttpLink }；
從'apollo-cache-inmemory'導入{InMemoryCache}；
從 '@vue/apollo-option' 導入 { createApolloProvider } ；
從 '@apollo/client/link/error' 導入 { onError } ；

onError(({ graphQLErrors, networkError }) => {
  if (graphQLErrors)
    graphQLErrors.map(({ 訊息, 位置, 路徑 }) =>
      控制台.日誌(
        `[GraphQL 錯誤]：訊息：${message}，位置：${locations}，路徑：${path}`，
      ),
    ）；
  
  如果（網路錯誤）{
    networkError.message = networkError.result.errors[0].debugMessage
    console.log(`[網路錯誤]: ${networkError}`)
  };
});

const XPORTAL = process.env.VUE_APP_XPORTAL

函數 getHeaders() {
  常量標頭= {}；

  const token = window.localStorage.getItem("apollo-token");
  如果（代幣）{
    headers["授權"] = `承載 ${token}`;
  }
  headers["x-portal"] = XPORTAL;
  headers["X-Requested-With"] = "XMLHttpRequest";

  返回標頭
}

讓 GRAPHQL = process.env.VUE_APP_API_GRAPHQL
讓 GRAPHQLPORTAL = process.env.VUE_APP_API_GRAPHQLPORTAL

const graphqlClient = new ApolloClient({
  連結： new HttpLink({uri: GRAPHQL, headers: getHeaders()}),
  快取：new InMemoryCache()
});

const graphqlClientPortal = new ApolloClient({
  連結：新的 HttpLink({ uri: GRAPHQLPORTAL, headers: getHeaders()}),
  快取：new InMemoryCache()
});

導出函數提供者() {
  const 提供者 = createApolloProvider({
      客戶：{
        graphql客戶端，
        graphql客戶端門戶
      },
      預設客戶端：graphqlClient，
      預設選項：{
      $查詢：{
        fetchPolicy: '快取和網路'
      }
    },
  })
  退貨提供者
}</pre>
<p><strong>main.js</strong></p>
<pre class="brush:php;toolbar:false;">從「vue」匯入 { createApp };
從“./App.vue”導入應用程式；
從“./router”導入路由器；
從“./store”匯入商店；
從“../../events.live/src/utils/graphql”導入*作為apolloProvider；

const app = createApp(應用程式);
app.use(apolloProvider.provider)
應用程式使用（商店）；
應用程式。使用（路由器）；
app.mount("#app");

; <p><strong>index.js</strong></p> <pre class="brush:php;toolbar:false;">從“../utils/graphql”導入{provider}； 行動：{ 非同步 fetchLogin({ 提交, 狀態 }）{ 返回新的 Promise(async (resolve,reject) => { 提交（'載入狀態'，true） 嘗試 { const 回應 = 等待提供者().clients.graphqlClient.mutate({ 突變： gql`突變登入($email:String!, $password:String!) { 登入（電子郵件：$電子郵件，密碼：$密碼）{ 代幣 } }`，變數：{ 電子郵件：state.login.email， 密碼：狀態.登入.密碼 } }) const token = response.data.login.token 提交（'setToken'，令牌） localStorage.setItem('apollo-token', 令牌) } 捕獲（錯誤）{ 提交（'加載狀態'，假） } 解決（） }) }, { 非同步 fetchEvents({ 提交 }) { 嘗試 { const 回應 = 等待提供者().clients.graphqlClientPortal.query({ 查詢：gql` 查詢 LiveEvents($limit: Int!, $page: Int!){ liveEvents(分頁:{limit:$limit, page:$page}, order:{startsAt:{direction: DESC}}){ 全部的， 數據{ ID， 姓名， 存根， 描述， 主圖像{ ID， 烏裡 }, 地點， 類型， 佈局 聊天， 現場直播{ 結束於， 開始於 } } } } `，變數：{ 限制：12， 頁數: 0 }, }); 提交（'allEvents'，response.data.liveEvents.data）； } 捕獲（錯誤）{ console.log('錯誤訊息', error.graphQLErrors) } },</pre> <p><br />></p>

Answer 1

這是我的解決方案。

import { provider } from "../utils/graphql";

actions: {
  async fetchEvents({ commit }) {
    try {
      const response = await provider().clients.graphqlClientPortal.query({
        query: gql`
          query LiveEvents($limit: Int!, $page: Int!){
            liveEvents(pagination:{limit:$limit, page:$page}, order:{startsAt:{direction: DESC}}){
              total,
              data{
                id,
                name,
                stub,
                description,
                mainImage{
                  id,
                  uri
                },
                location,
                type,
                layout
                chat,
                liveStream{
                  endsAt,
                  startsAt
                }
              }
            }
          }
        `, variables: {
          limit: 12,
          page: 0
        },
      });
      commit('allEvents', response.data.liveEvents.data);
    } catch (error) {
      console.log('error-message', error.graphQLErrors)
    }
  },

  async fetchLogin({ commit, state }) {
    return new Promise(async (resolve, reject) => {
      commit('loadingStatus', true)
      try {
        // Load the events before logging in
        await dispatch('fetchEvents');
        const response = await provider().clients.graphqlClient.mutate({
          mutation:
            gql`mutation Login($email:String!, $password:String!)
            {
              login(email:$email, password:$password){
                token
              }
            }`, variables: {
            email: state.login.email,
            password: state.login.password
          }
        })
        const token = response.data.login.token
        commit('setToken', token)
        localStorage.setItem('apollo-token', token)
      } catch (error) {
        commit('loadingStatus', false)
      }
      resolve()
    })
  },