为什么第一次登录时网站无法加载？

Question

我在使用 Vuex 的 Vue 应用程序中使用 Vue Apollo 时遇到问题，因此当我第一次登录网站时，网页是空的，即它不包含事件，也不包含身份验证，但是当我使用浏览器中的按钮刷新网站，所有事件都会加载，即使在网络选项卡中，身份验证也是可见的。有人好心告诉我我哪里做错了吗？

graphql.js

import { ApolloClient } from 'apollo-client';
import { HttpLink } from 'apollo-link-http';
import { InMemoryCache } from 'apollo-cache-inmemory';
import { createApolloProvider } from '@vue/apollo-option';
import { onError } from '@apollo/client/link/error';

onError(({ graphQLErrors, networkError }) => {
  if (graphQLErrors)
    graphQLErrors.map(({ message, locations, path }) =>
      console.log(
        `[GraphQL error]: Message: ${message}, Location: ${locations}, Path: ${path}`,
      ),
    );
  
  if (networkError) {
    networkError.message = networkError.result.errors[0].debugMessage
    console.log(`[Network error]: ${networkError}`)
  };
});

const XPORTAL = process.env.VUE_APP_XPORTAL

function getHeaders() {
  const headers = {};

  const token = window.localStorage.getItem("apollo-token");
  if (token) {
    headers["Authorization"] = `Bearer ${token}`;
  }
  headers["x-portal"] = XPORTAL;
  headers["X-Requested-With"] = "XMLHttpRequest";

  return headers
}

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

const graphqlClient = new ApolloClient({
  link: new HttpLink({uri: GRAPHQL, headers: getHeaders()}),
  cache: new InMemoryCache()
});

const graphqlClientPortal = new ApolloClient({
  link: new HttpLink({ uri: GRAPHQLPORTAL, headers: getHeaders()}),
  cache: new InMemoryCache()
});

export function provider() {
  const provider = createApolloProvider({
      clients: {
        graphqlClient,
        graphqlClientPortal
      },
      defaultClient: graphqlClient,
      defaultOptions: {
      $query: {
        fetchPolicy: 'cache-and-network'
      }
    },
  })
  return provider
}

main.js

import { createApp } from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store";
import * as apolloProvider from "../../events.live/src/utils/graphql";

const app = createApp(App);
app.use(apolloProvider.provider)
app.use(store);
app.use(router);
app.mount("#app");

index.js

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

actions: {
  async fetchLogin({ commit, state }) {
      return new Promise(async (resolve, reject) => {
        commit('loadingStatus', true)
        try {
          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()
      })
    },
  {

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

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