故障排除：初始登录和网站加载问题

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({
  链接： new 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()
    })
  },